var SliderClass = Class.create({

	initialize: function(iSliderID) {
		this.SliderID = iSliderID;		
		this.initalized = false;
		this.holder = null;
		this.items_holder = null;
		this.items = null;		
		this.scrollbar = null;
		this.scrollbarLeft = null;
		this.scrollbarRight = null;
		this.scrollbarMiddle = null;
		this.scrollbarHandle = null;	
	
		this.slider_MaxWidth = 0;
		this.items_width = 0;
		
		this.viewport_width = 0;
		this.itemspanel_maxoffset = 0;
		this.scrollbar_clickstep = 0;
		
		this.scroll_position = 0;
		this.scrollbar_move = false;
		
		this.autoscroll_animating = false;		
		if (Prototype.Browser.IE) {
			this.autoscroll_step = 2;
			this.autoscroll_step_timeout = 0.01;
		} else {
			this.autoscroll_step = 1;
			this.autoscroll_step_timeout = 0.01;
		}
/*
		this.autoscroll_step = 20;
		this.autoscroll_step_timeout = 0.5;
	*/	
		this.autoscroll_timer = null;		
		this.autoscroll_direction = 1;
		this.autoscroll_enabled = false;
		
	},
	
	init: function() {
		if (this.initalized) { // De objecten zijn al geinitalizeerd dus we gaan het niet nogmaals doen.
			return;
		}
		
		this.holder 			= $(this.SliderID)
		this.items_holder 		= $(this.SliderID + "_itemsholder");
		this.items 				= $(this.SliderID + "_items");
		this.scrollbar 			= $(this.SliderID + "_scrollbar");
		this.scrollbarLeft 		= $(this.SliderID + "_scrollbar_left");
		this.scrollbarRight 	= $(this.SliderID + "_scrollbar_right");
		this.scrollbarMiddle 	= $(this.SliderID + "_scrollbar_middle");
		this.scrollbarHandle 	= $(this.SliderID + "_scrollbar_handle");
		
			
		
		// Zet alle items netjes naast elkaar		
		var items_totalWidth = 0;
		var items_obj = this.items.childElements();		
		var item_width = 0;
		for (var a = 0; a < items_obj.length; a++) {
			item_width = items_obj[a].getWidth();			
			items_totalWidth += (item_width + 10);
		}
		this.items_width = items_totalWidth;
		this.items.setStyle({ width: items_totalWidth + "px" });	
		
		
		this.initalized = true;
		this.calcSlider();
		this.setupEvents();
	},
	
	calcSlider: function() {
		if (!this.initalized) { // Init functie is nog gedaan.
			return;
		}
		
		// Scrollbar click calculatie
		this.viewport_width = this.items_holder.getWidth();
		
		this.itemspanel_maxoffset = this.items_width + 200
		this.scrollbar_clickstep = (this.items_width - this.viewport_width)  / this.viewport_width
	},
	
	eventResize: function(event) {
		this.calcSlider();
		this.scroll_position = 0;
		this.autoscroll_direction = 1;
		this.setItemsHolderPos(this.scroll_position, false);
		// Resize position
		/*
		var scrollpos = this.scroll_position / this.scrollbar_clickstep;
			scrollpos -= 5; // 5 pixel eraf halen zodat de de rondje in het midden komt.
			
		'this.scrollbarHandle.setStyle({ marginLeft : scrollpos + "px" } );				
		console.log(scrollpos);
		*/
	},	

	setItemsHolderPos: function(pos, animated, smooth) {
		
		var scrollpos = parseInt(pos / this.scrollbar_clickstep);
			scrollpos -= 5; // 5 pixel eraf halen zodat de de rondje in het midden komt.
			
		if (animated == true) {			
			this.autoscroll_animating = true;
			if (smooth == true) {
				var animation_type = Effect.Transitions.linear;
			} else {			
				var animation_type = Effect.Transitions.sinoidal;
			}
			this.items_holder.morph("margin-left: -" + pos + "px", { afterFinish: this.autoscroll_anistatusreset.bind(this), transition: animation_type	});
			this.scrollbarHandle.morph("margin-left: " + scrollpos + "px", { transition: animation_type } );
		} else {
			this.items_holder.setStyle({ marginLeft : "-" + pos + "px" } );		
			this.scrollbarHandle.setStyle({ marginLeft : scrollpos + "px" } );		
		}
		this.scroll_position = pos;
	},	
	
	// Event wireup
	setupEvents: function() { 
		// Op de slider calculeren als het venster van grote veranderd.
	
	
		// Scrollbar
		// this.scrollbarLeft.observe('click', this.scrollbar_click);	
		// this.scrollbarRight.observe('click', this.scrollbar_click);	

		this.holder.observe('mousemove', this.autoscrol_stop.bind(this));					
		this.holder.observe('mouseout', this.autoscroll_activate.bind(this));					

		
		
		this.scrollbarMiddle.observe('click', this.scrollbar_click.bind(this));			
		this.scrollbarMiddle.observe('mousemove', this.scrollbar_handle.bind(this));	
		this.scrollbarMiddle.observe('mouseup', this.scrollbar_handle.bind(this));	
		
		this.scrollbarHandle.observe('mousedown', this.scrollbar_handle.bind(this));			
		this.scrollbarHandle.observe('mousemove', this.scrollbar_handle.bind(this));	
		this.scrollbarHandle.observe('mouseup', this.scrollbar_handle.bind(this));	
		
		Event.observe(window, 'mousemove', this.scrollbar_handle.bind(this));					
		Event.observe(window, 'mouseup', this.scrollbar_handle.bind(this));					
		
		
		
		Event.observe(window, 'resize', this.eventResize.bind(this));					
	},
		
	// Scrollbar Events
	scrollbar_click: function(event) {		
		var newMarginPos = this.scrollbar_poscalc(event.pointerX());
		this.setItemsHolderPos(newMarginPos, true);
		
	},
	
	scrollbar_handle: function(event) {
		var newMarginPos = this.scrollbar_poscalc(event.pointerX());
		//this.setItemsHolderPos(newMarginPos, true);
		
		switch(event.type) {
			case "mousemove":
				if (this.scrollbar_move) {				
					this.setItemsHolderPos(newMarginPos, false);				
				}
				break;
			case "mousedown":
				this.scrollbar_move = true;
				break;
			case "mouseup":
				this.scrollbar_move = false;
				break;		
		}		
		
		
	},
	scrollbar_poscalc: function(scrollbarpos) {
		var boxPosition = this.holder.positionedOffset();		
		var scrollbarPos = scrollbarpos - boxPosition.left;
		
		var newMarginPos = parseInt(scrollbarPos * this.scrollbar_clickstep);
		if (newMarginPos < 0) {
			newMarginPos = 0;
		}
		if (newMarginPos > (this.items_width - this.viewport_width)) {
			newMarginPos = (this.items_width - this.viewport_width);
		}
		
		
		return newMarginPos;
	},
	poscalc: function(position) {
		var newMarginPos = parseInt(position);
		if (newMarginPos < 0) {
			newMarginPos = 0;
		}
		if (newMarginPos > (this.items_width - this.viewport_width)) {
			newMarginPos = (this.items_width - this.viewport_width);
		}		
		return newMarginPos;		
	},
	postionEndPos: function(Position) {
		if (Position >= (this.items_width - this.viewport_width)) {
			return true
		} else {
			return false;
		}	
	
	},	
	
	autoscroll_activate: function() {
		this.autoscroll_enabled = true;
		this.autoscroll_timer = new PeriodicalExecuter(this.autoscroll.bind(this), this.autoscroll_step_timeout);	
	},
	
	autoscrol_stop: function() {
		this.autoscroll_enabled = false;
		if (this.autoscroll_timer) {
			this.autoscroll_timer.stop();			
		}
	},
	
	autoscroll: function(pe) {		
		if (this.autoscroll_enabled == false) {			
			pe.stop(); // STop de slider voor de zekerheid
			return;
		}
		if(this.autoscroll_animating == false) {
			if (this.autoscroll_direction == 1) {
				var newpos = this.poscalc(this.scroll_position + this.autoscroll_step);				
			} else {
				var newpos = this.poscalc(this.scroll_position - this.autoscroll_step);	
			}			
			
			this.setItemsHolderPos(newpos, false, true);			
			
			if (this.postionEndPos(newpos)) {
				this.autoscroll_direction = 0;
			} 
			if (newpos <= 0) {
				this.autoscroll_direction = 1;
			}			
			
		}	
	}, 
	autoscroll_anistatusreset: function() {	
		this.autoscroll_animating = false;
	}
	
	
});


var slider = new SliderClass("product_slider");

Event.observe(window, 'load', function() {	
	slider.init();
	slider.autoscroll_activate();
});