/*
 * Endless Slider
 * requires Prototype
 */
EndlessSlider = Class.create({
	initialize : function(selector, options) { 

		// Load content
		//this.load(selector);
		
		// Progress slider
		var sliderElement = $(selector);		
		
		var container = sliderElement.getElementsBySelector('ul')[0];
		var items = container.getElementsBySelector('li');
		
		var margin = 5;
		
		this.options = Object.extend({ frequency: 1, leftFrequency: -5, rightFrequency: 5 }, options || {});
		
		var itemsSize = 0;
		for (var i=0; i<items.length; i++) { 
			if (parseInt(items[i].offsetWidth)==0) {
				itemsSize += parseInt(items[i].getElementsBySelector('img')[0].offsetWidth);
				itemsSize += 2*margin;
			} else {
				itemsSize += parseInt(items[i].offsetWidth);
				itemsSize += 2*margin;
			} 
		}
		if (itemsSize <= parseInt(sliderElement.offsetWidth)) {
			return;
		}
		itemsSize += 2*margin;
		
		//: appends everything a second time
		for(var i = 0, it, l = items.length -1; i < l; i++) {
			it = items[i].cloneNode(true);
			items.push(it);	
			container.appendChild(it);
		}
		//: appends everything a third time
		for(var i = 0, it, l = items.length; i < l; i++) {
			it = items[i].cloneNode(true);
			items.push(it);	
			container.appendChild(it);
		}
		
		//: position container at 2nd row of items
		container.style.left = -itemsSize + "px";
		this.frequency = this.options.frequency;
	
		Event.observe(container, 'mouseover', this.mouseover.bind(this));
		Event.observe(container, 'mouseout', this.mouseout.bind(this));
		
		var setTimeout = window.setTimeout;
		var that = this;
	
		
		function slide() {						
			if(that.frequency === 0) {
				setTimeout(slide, 200);
				return;
			}
			
			var cont = container;
			var left = parseInt(cont.style.left);
			var newLeft = 0;

			if (left < -itemsSize) {
				newLeft = left+itemsSize-10;
				cont.style.left = newLeft + "px";
				//items = this.container.getElementsBySelector('li');
			} else if (left >= 0) {
				newLeft = left-itemsSize+10;
				cont.style.left = newLeft + "px";
			}
			
			left = parseInt(cont.style.left);
			newLeft = left-that.frequency;
			cont.style.left=(newLeft)+"px";
			left = newLeft;
			
			//this.selector.scrollLeft=this.selector.scrollLeft-this.copyspeed; 
			//new PeriodicalExecuter(this.start.bind(this), 3);
			//setInterval(this.start.bind(this),3000);
			setTimeout(slide, 50);
		}
		
		//: find left and right handlers
		var leftNavigation = sliderElement.getElementsBySelector('.catSliderMoveLeft')[0];
		var rightNavigation = sliderElement.getElementsBySelector('.catSliderMoveRight')[0];
		
		if (leftNavigation) {
			Event.observe(leftNavigation, 'mouseover', this.hoverLeftNavigation.bind(this));
			Event.observe(leftNavigation, 'mouseout',  this.hoverNone.bind(this));
		}
		if (rightNavigation) {
			Event.observe(rightNavigation,'mouseover', this.hoverRightNavigation.bind(this))
			Event.observe(rightNavigation,'mouseout',  this.hoverNone.bind(this));
		}
		
		slide();
	},
	
	hoverLeftNavigation : function() {
		this.frequency = this.options.leftFrequency;
	},
	
	hoverRightNavigation : function() {
		this.frequency = this.options.rightFrequency;
	},
	
	hoverNone : function() {
		this.frequency = this.options.frequency;
	},
	
	load : function(selector) {
	
		// Show loading...
		$(selector).insert({
			bottom : '<div id="sliderLoader" style="position: relative; text-align: center; line-height: 50px; height: 50px; background: #ffffff; font-size: x-small; color: #CCCCCC; font-style: italic;">Ladevorgang...</div>'
		});
		
		// Let's load our slider content with AJAX
		new Ajax.Request('/catalog/ajax/slider', {
			onSuccess: function(response) {
				$(selector).insert({
					bottom : response.responseText
				});
			},
			asynchronous: false
		});
		
		Effect.Fade('sliderLoader');
		
	},

	mouseover : function() {
		this.frequency = 0;
	},
		
	mouseout : function() {
		this.frequency = this.options.frequency;
	}
});