/*
 * Endless Slider
 * requires Prototype
 */
EndlessSlider = Class.create({
	initialize : function(selector, options) { 
	
		// Load content
		//this.load(selector);
		
		// Progress slider
		this.selector = $(selector); 
		this.container = $(selector).getElementsBySelector('ul')[0];
		this.items = this.container.getElementsBySelector('li');
		this.options = Object.extend({ frequency: 1 }, options || {});
		
		var itemsSize = 0;
		for (var i=0; i<this.items.length; i++) { 
			if (parseInt(this.items[i].offsetWidth)==0) {
				itemsSize += parseInt(this.items[i].getElementsBySelector('img')[0].offsetWidth);
			} else {
				itemsSize += parseInt(this.items[i].offsetWidth);
			} 
		}
		if (itemsSize <= parseInt(this.selector.offsetWidth)) {
			return;
		}
		
		this.small = false;
		if (itemsSize < (parseInt(this.selector.offsetWidth)+(parseInt(this.items[0].offsetWidth)))) {
			this.small = true;
			this.container.appendChild(this.items[0].cloneNode(true));
		}
		
		this.container.style.left = 0;
		this.frequency = this.options.frequency; 
		this.timeout = null;
		
		Event.observe(this.container, 'mouseover', this.mouseover.bind(this));
		Event.observe(this.container, 'mouseout', this.mouseout.bind(this));
		
		this.slide();
	},
	
	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');
		
	},
		
	slide : function() { 
		clearTimeout(this.timeout);
		
		if (parseInt(this.container.style.left)==(-parseInt(this.items[0].offsetWidth))) {
			if (this.small) {
			this.container.appendChild(this.items[1].cloneNode(true));
			} else {
				this.container.appendChild(this.items[0].cloneNode(true));
			}
			this.container.removeChild(this.items[0]);
			this.container.style.left = 0;
			
			this.items = this.container.getElementsBySelector('li');
		}
		
		this.container.style.left=parseInt(this.container.style.left)-this.frequency+"px";
		//this.selector.scrollLeft=this.selector.scrollLeft-this.copyspeed; 
		//new PeriodicalExecuter(this.start.bind(this), 3);
		//setInterval(this.start.bind(this),3000);
		this.timeout = setTimeout(this.slide.bind(this),50);
	},
		
	mouseover : function() {
		this.frequency = 0;
	},
		
	mouseout : function() {
		this.frequency = this.options.frequency;
	}
});