/* MouseWheel Event */
(function(){
    function wheel(event){
        var delta;
        // normalize the delta
        if(event.wheelDelta) // IE & Opera
            delta = event.wheelDelta / 120;
        else if (event.detail) // W3C
            delta = -event.detail / 3;
        if(!delta)
            return;
        var element = Event.element(event);

        var custom_event = element.fire('mouse:wheel',{
            delta: delta
        });
        if(custom_event.stopped){
            Event.stop(event);
            return false;
        }
    }
    document.observe('mousewheel',wheel);
    document.observe('DOMMouseScroll',wheel);
})();

/* Product Slider */
ProductSlider = Class.create({
	initialize : function(selector, leftHandle, rightHandle, options) {

		// setting some basic parameters
		this.selector = $(selector);
		this.container = this.selector.down('ul');
		this.items = this.container.getElementsBySelector('li');
		this.leftHandle = $$('.' + leftHandle);
		this.rightHandle = $$('.' + rightHandle);
		this.containerMarginLeft = 0;
		this.autoslidePaused = true;
		this.timeout = null;

		this.lastX = 0;

		this.options = Object.extend({frequency: 4000, delayAutoslideStart: 7000}, options || {});
		this.frequency = this.options.frequency;

		this.items.each(function(el) {
			if(Prototype.Browser.IE) {
				el.style.width = el.down('img').getWidth() + 'px';
			}
		});

		this.initContainer();

		// make the arrows clickable
		var inst = this;
		
		// observe hovering over items
		this.getItems().each(function(el) {
			inst.registerHover(el);
		});
		
		// observe slide events
		this.leftHandle.each(function(handle) {
			Event.observe(handle, 'click', inst.lefthandle.bind(inst));
		});
		this.rightHandle.each(function(handle) {
			Event.observe(handle, 'click', inst.righthandle.bind(inst));
		});
		Event.observe(this.container, 'mouse:wheel', this.mousewheel.bind(this));
		Event.observe(this.container, 'touchstart', this.iphonetouchiestart.bind(this));
		Event.observe(this.container, 'touchmove', this.iphonetouchie.bind(this));
		Event.observe(this.container, 'touchend', this.iphonetouchieend.bind(this));
		
		// observe hovering over slider
		if(!Prototype.Browser.IE) {
			Event.observe(this.selector, 'mouseover', this.mouseover.bind(this));
			Event.observe(this.selector, 'mouseout', this.mouseout.bind(this));
		} else {
			Event.observe(this.selector, 'mouseenter', this.mouseover.bind(this));
			Event.observe(this.selector, 'mouseleave', this.mouseout.bind(this));
		}

		// start autopilot
		this.autoslidePaused = false;
		setTimeout(this.autoslide.bind(this), this.options.delayAutoslideStart);
	},



	initContainer : function () {
		// center slider on start
		var displayWidth = this.selector.getWidth();
		var realWidth = this.container.getWidth();
		var marginLeft = -(realWidth - displayWidth) / 2;
		this.scrollSlider(parseInt(marginLeft));
	},

	lefthandle: function() {
		this.slide(-1, 'item')
	},

	righthandle: function() {
		this.slide(1, 'item');
	},

	mousewheel: function(event) {
		delta = event.memo.delta * 50;
		this.slide(-delta, 'px');
		event.stop();
		return false;
	},

	iphonetouchie : function(event) {
		delta = this.lastX - event.targetTouches[0].pageX;

		if( this.lastX != 0) {
			this.slide(delta, 'px');
		}
		this.lastX = event.targetTouches[0].pageX;
		
		event.stop();
		return false;
	},

	iphonetouchiestart : function(event) {
		this.lastX = 0;
		event.stop();
		return false;
	},

	iphonetouchieend : function(event) {
		event.stop();
		return false;
	},

	slide : function(delta, granularity) {
		delta = -delta;
		var deltaPixel = 0;
		var max = 15;
		if(granularity == 'px') {
			marginLeft = this.containerMarginLeft + delta;
		}

		if(granularity == 'item') {
			if(delta > 0) { // -> right
				var item = this.getFirstVisibleItem();
				var width = item.offsetWidth;
				deltaPixel = width + 10;
			} else if(delta < 0) { // -> left
				var item = this.getFirstVisibleItem();
				var width = item.offsetWidth;
				deltaPixel = -(width + 10);
			}
			marginLeft = this.containerMarginLeft + deltaPixel;
		}

		if(granularity == 'page') {
			if(delta < 0) {
				deltaPixel = -700;
			} else if(delta > 0) {
				deltaPixel = 700;
			}
			marginLeft = this.containerMarginLeft + deltaPixel;
		}

		this.scrollSlider(parseInt(marginLeft));
		
		if(delta < 0) { // slide right?
			for(i=0; i<max; i++) {
				var lastElement = this.getItems().last();
				var lastElementOffset = lastElement.offsetLeft + lastElement.getWidth();
				var displayWidth = this.selector.getWidth();

				if(lastElementOffset < (displayWidth * 2)) {
					// F4H:TODO Weiche: AJAX|LI
					this.restructureItems(delta);
				} else {
					break;
				}
			}
		} else if(delta > 0)  {
			for(i=0; i<max; i++) {
				var firstElement = this.getItems().first();
				var firstElementOffset = firstElement.offsetLeft;
				var displayWidth = this.selector.getWidth();

				if(firstElementOffset > -displayWidth) {
					// F4H:TODO Weiche: AJAX|LI
					this.restructureItems(delta);
				} else {
					break;
				}
			}
		}
	},

	scrollSlider : function(amount) {
		this.containerMarginLeft = amount;
		this.selector.down('.slider-wrapper').style.marginLeft = this.containerMarginLeft + 'px';
	},

	restructureItems : function(delta) {
		if(delta < 0) {
			var item = this.getItems().first();
			this.container.insert({bottom: item});

			marginLeft = item.offsetWidth + 10; // F4H:TODO +10 (margin-right) dynamisch ermitteln
			this.scrollSlider(this.containerMarginLeft + parseInt(marginLeft));
		} else if(delta > 0) {
			var item = this.getItems().last();
			this.container.insert({top: item});

			marginLeft = this.getItems().last().offsetWidth + 10; // F4H:TODO +10 (margin-right) dynamisch ermitteln
			this.scrollSlider(this.containerMarginLeft - parseInt(marginLeft));
		}
	},

	autoslide : function() {
		if(!this.autoslidePaused) {
			this.slide(1, 'page');
		}
		this.timeout = setTimeout(this.autoslide.bind(this), this.options.frequency);
	},

	mouseover : function() {
		this.autoslidePaused = true;
	},
 
	registerHover : function(element) {
		element.observe('mouseover', function() {
			this.addClassName('over');
		});
		element.observe('mouseout', function() {
			this.removeClassName('over');
		});
	},
 
	mouseout : function() {
		this.autoslidePaused = false;
	},

	getItems : function() {
		return $(this.container).getElementsBySelector('li');
	},

	getFirstVisibleItem : function() {
		var item = null;
		this.getItems().each(function(el) {
			if(el.offsetLeft > 0) {
				item = el;
				throw $break;
			}
		});

		return item;
	}
});