/*
	PearBrowser v 1.0 
	Developed by Gravita, www.gravita.se
	
	License:
		MIT-style license
		
	Class: 
		PearBrowser
		
	Description:
		A type of browser inspired from the one used by Apple on apple.com
	
	Arguments:
		browser - a browser containing the elements
		slider - a slider used to scroll the browser
		
	Example:
		<div id='pearBrowser'>
			<div>
				<img src='path' alt='' />
				<img src='path' alt='' />
				<img src='path' alt='' />
			</div>
		</div>
		<div id='pearSlider'>
			<div class='knob'>
				<div class='knobLeftSide'></div>
				<div class='knobBackground'></div>
				<div class='knobrightSide'></div>
			</div>
		</div>
		<script type='text/javascript'>
			new PearBrowser($('pearBrowser'),$('pearSlider'));
		</script>
		
	Note:
		The slider is built to accept a knob with three inner elements, 
		one to display the left side, one to display the background
		and one to display the right side since the width of the knob
		will adapt to the content.
*/

var PearBrowser = new Class({
	initialize: function(browser, slider, options) {
		this.browser = browser;
		this.slider = slider;
		this.options = options;
		
		var pearKnob = slider.getChildren()[0];
		this.pearKnob = pearKnob;
		
		this.setKnobWidth();
		this.engagePearBrowser();
	},
	// Calculates the knob size.
	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)
	}
	
});