var PearBrowser = new Class({
	initialize: function(browser, slider, leftButton, rightButton, options) {
		this.browser = browser;
		this.slider = slider;
		this.leftButton = leftButton;
		this.rightButton = rightButton;
		this.options = options;
		//var imagecontainer = document.pearScrollContent.getChildren()[0].getCoordinates().width;
		//alert(imagecontainer);
		var pearKnob = slider.getChildren()[0];
		this.pearKnob = pearKnob;
		this.setKnobWidth();
		this.engagePearBrowser();
	},
	
	// Calculates the knob size relative to the width of .pearScrollContent
	setKnobWidth: function() {
		// Defines the knob.
		var pearKnobBg 			= this.pearKnob.getChildren()[1];
		
		// Calculates the total knob left and right width. 
		var pearKnobLeftSize 	= this.pearKnob.getChildren()[0].getCoordinates().width;
		var pearKnobRightSize 	= this.pearKnob.getChildren()[2].getCoordinates().width;
		var knobSidesWidth = pearKnobLeftSize + pearKnobRightSize;
		
		// How wide is the browser?
		var pearBrowserSize = this.browser.getCoordinates().width;
		// How wide is the container inside the browser?
		var pearContainerSize = this.browser.getChildren()[0].getCoordinates().width;
		// Calculates times wider the container is.
		var timesSize = pearContainerSize/pearBrowserSize;
		// Calculates how wide the knob should be.
		var pearKnobSize = this.pearKnob.getCoordinates().width / timesSize;
		// Sets the knob width.
		this.pearKnob.setStyle('width',pearKnobSize);
		pearKnobBg.setStyle('width',pearKnobSize-knobSidesWidth);
		
	},
	
	// Creates the PearBrowser.
	engagePearBrowser: function() {
		var browser = this.browser;
		// Calculates the amount of steps.
		var nrSteps = browser.getChildren()[0].getCoordinates().width - browser.getCoordinates().width;
		// Creates the slider
		var pearSlide = new Slider(this.slider,this.pearKnob, {
			steps: nrSteps,
			onChange: function(step) {
				// Scrolls the browser
				browser.getChildren()[0].setStyle('margin-left',step-(step*2));
			}
		}).set(0)
	}
	
});