if (typeof(AC) == "undefined") { AC = {}; }

// ProductBrowser: 
// USAGE:
/*
Event.observe(window, 'load', function() {
	AC.ProductBrowser.init({
		categories: [ {id: 'mw-pslidercat1', offset: 0}, {id: 'mw-pslidercat2', offset: 0.32}, 
									{id: 'mw-pslidercat3', offset: 0.7}, {id: 'mw-pslidercat4', offset: 1} ],
		imageOverlap: 29,
		sliderCentering: 291,
		initialCategory: 1,
		arrowScrollAmount: 0.24
	}); 
}, false);
*/

// TESTS:

// TO DO:

AC.ProductBrowser = {
	productSlider: null,
	sliderVal: 0,
	animationId: false,
	viewportWidth: 946,
	contentWidth: 946,
	isSliding: false,
	lastX: 0.32,
	isMouseDown: false,
	dif: 0,
	overlap: 0,
	offsetImageWidth: 127,
	sliderOffset: 291,
	handleOffset: 10,
	offsetContentWidth: -946,
	clicked: false,
	startIndex: 0,
	arrowScrollAmount: 0.24,
	sliderInitTo: 1,
	
	init: function(setupArgs) {
		if (typeof(setupArgs.imageOverlap) != 'undefined') 		this.overlap 			= setupArgs.imageOverlap;
		if (typeof(setupArgs.sliderCentering) != 'undefined') 	this.sliderOffset 		= setupArgs.sliderCentering;
		if (typeof(setupArgs.arrowScrollAmount) != 'undefined') this.arrowScrollAmount 	= setupArgs.arrowScrollAmount;
		if (typeof(setupArgs.sliderInitTo) != 'undefined') 		this.sliderInitTo 		= setupArgs.sliderInitTo;
		if (typeof(setupArgs.handleOffset) != 'undefined') 		this.handleOffset 		= setupArgs.handleOffset;
		
		$('mw-pslidertrack').style.visibility 	= "visible";
		$('mw-pslidercontainer').style.overflow = "hidden";
		
		this.viewportWidth 		= $('mw-pslidercontainer').getWidth();
		this.offsetImageWidth 	= $$('#mw-pslider .mw-pslidertimage')[0].getWidth()-this.overlap;
		this.contentWidth 		= this.offsetImageWidth * $$('#mw-pslider .mw-pslidertimage').length;
		this.offsetContentWidth = -1 * (this.contentWidth - this.viewportWidth);
		
		this.productSlider = new Control.Slider('mw-psliderhandle', 'mw-pslidertrack', {
				axis:'horizontal' 
		});
		
		AC.ProductBrowser.animateSlide(this.sliderInitTo); // initial slide
		
		// Slider callbacks
		this.productSlider.options.onChange = function(value) {
			$('mw-psliderhandleimage').style.left = $('mw-psliderhandle').style.left;
			
			if (AC.ProductBrowser.isThrow && ! AC.ProductBrowser.isSliding) {
				AC.ProductBrowser.isSliding = true;
				AC.ProductBrowser.isThrow = false;
				
				var mod = value + AC.ProductBrowser.throwMod;
				if (mod < 0) mod = 0;
				if (mod > 1) mod = 1;
				AC.ProductBrowser.animateSlide(mod);
			}
			else if (! AC.ProductBrowser.isSliding && value){
				AC.ProductBrowser.isSliding = true;
				AC.ProductBrowser.animateSlide(value);
			}	
		};

		this.productSlider.options.onSlide = function(value) {
			$('mw-psliderhandleimage').style.left = $('mw-psliderhandle').style.left;
			if(AC.ProductBrowser.isIPhone) {
				var w = AC.ProductBrowser.offsetContentWidth;
				$('mw-pslider').style.left = w * value + "px";
				AC.ProductBrowser.sliderVal = value;
			}
			else if (value && ! AC.ProductBrowser.isSliding) {
					AC.ProductBrowser.isSliding = true;
				 	AC.ProductBrowser.isThrow = false;
					if (AC.ProductBrowser.isMouseDown) {
						AC.ProductBrowser.dif = value - AC.ProductBrowser.lastX;
						AC.ProductBrowser.lastX = value;	
						
						// check for throw, the dif thresholds will affect how easily the throw happens
						if(AC.ProductBrowser.dif > 0.05) {
							AC.ProductBrowser.isThrow = true;
							AC.ProductBrowser.throwMod = 0.2;
						}
						else if (AC.ProductBrowser.dif < -0.04) {
							AC.ProductBrowser.isThrow = true;
							AC.ProductBrowser.throwMod = -0.2;
						}
					}
			
					var w = AC.ProductBrowser.offsetContentWidth;
					$('mw-pslider').style.left = w * value + "px";
					
					this.sliderVal = value;
					AC.ProductBrowser.lastX = value;
					AC.ProductBrowser.isSliding = false; // reset
			}
			
			Element.setStyle($('mw-pslidercontainer'), { overflow: "hidden"} );
		};
		
		Event.observe('mw-pslidertrack', 'mousedown', function(e) {
			var o = e.offsetX || e.layerX;
			if (Event.element(e).id =='mw-pslidertrack' && o < 100) AC.ProductBrowser.animateSlide(0);
		});
		Event.observe('mw-psliderleftarrow', 'mousedown', function() {
			AC.ProductBrowser.left();
		});
		Event.observe('mw-psliderrightarrow', 'mousedown', function() {
			AC.ProductBrowser.right();
		});
		
		Event.observe('mw-psliderhandle', 'mousedown', function() {
			AC.ProductBrowser.isMouseDown = true;
			$('mw-psliderhandle').style.zIndex = "5";
		});
		
		Event.observe('mw-psliderhandle', 'mouseup', function() {
			AC.ProductBrowser.isMouseDown = false;
		});
	},
	/**
	 * Funktion fuehrt die eigentliche Animation des Image Sliders und des Slider Handles aus. 
	 */	
	animateSlide: function(toX) {
		// make sure toX is sane:
		if (toX > 1) toX = 1;
		if (toX < 0) toX = 0;
		AC.ProductBrowser.sliderVal = toX;
		window.clearInterval(AC.ProductBrowser.animationId); // kill any running animation
		var w = AC.ProductBrowser.offsetContentWidth;
		var stopPoint = w * toX;
		//var stopPoint = Math.round(stopPoint / AC.ProductBrowser.offsetImageWidth) * AC.ProductBrowser.offsetImageWidth;
		var sliderStopPoint = (Math.round(AC.ProductBrowser.viewportWidth - AC.ProductBrowser.sliderOffset) * toX);
		
		AC.ProductBrowser.isSliding = true;
		//alert('OFFSET:' + this.handleOffset);
		AC.ProductBrowser.animationId = window.setInterval(function() {
			var sliderPos = parseInt($('mw-pslider').getStyle('left')) || 0;
			//var handlePos = parseInt($('mw-psliderhandle').getStyle('left')) || parseInt(this.handleOffset);
			var handlePos = parseInt($('mw-psliderhandle').getStyle('left')) || 0;
			var x 	= AC.ProductBrowser.calculateDecel(sliderPos, stopPoint);
			var sx 	= AC.ProductBrowser.calculateDecel(handlePos, sliderStopPoint); 
			$('mw-pslider').style.left = x + "px";
			$('mw-psliderhandle').style.left = sx + "px";
			$('mw-psliderhandleimage').style.left = sx + "px";		
		
			if (x == stopPoint) {
				window.clearInterval(AC.ProductBrowser.animationId);
				AC.ProductBrowser.isSliding = false;			
			}
		}, 30);
	},
	/**
	 * Funktion steuert das klicken auf den linken Pfeil des Sliders 
	 */
	left: function() { 
		AC.ProductBrowser.animateSlide(AC.ProductBrowser.sliderVal - AC.ProductBrowser.arrowScrollAmount);
	},
	/**
	 * Funktion steuert das klicken auf den rechten Pfeil des Sliders 
	 */	
	right: function() {
		AC.ProductBrowser.animateSlide(AC.ProductBrowser.sliderVal + AC.ProductBrowser.arrowScrollAmount);
	},
	
	calculateDecel: function(from, to) {
		var n = from - Math.floor( (from - to) * .4);
		if (Math.abs(from - to) < 4) return to;
		else return n;
	}
};