/**
 * ms Scroller
 */
var msScroller = new Class({

	scroller: null,
	scroller_content: null,
	scroller_arrow_left: null,
	scroller_arrow_right: null,
	mouse_inside: false,
	mouse_down_on_arrow: false,
	arrow_right: false,
	akt_pos: 0,
	new_pos: 0,
	sc_width: 0,
	new_pos_relative: 0,
	pic_preloads: false,
	_tmp: 0,
	start_touch_pos_x: 0,
	akt_touch_pos_x: 0,
	last_touch_pos_x: 0,
	touch_start_coords: null,
	bound_mouseover_hover: null,
	bound_mouseout_hover: null,
	bound_mousemove_move: null,

	Implements: Options,
	options: {
		img_path: '',
		height: 130,
		scrollmethod: 'absolute',
		arrows: false
	},
    
    /*	*************************************
		Konstruktor
	*/
    initialize: function(element_id, options){

		/*	Gesamte Scrollbox	*/
		this.scroller = $(element_id);
		this.setOptions(options);

		/*	Unter-Elemente ermitteln	*/
		var children = this.scroller.getChildren('div');
		children.each (function (child) {
			if (child.hasClass('msScrollerContent'))		this.scroller_content = $(child);
			if (child.hasClass('msScrollerArrow') && child.hasClass('left'))		this.scroller_arrow_left = $(child);
			if (child.hasClass('msScrollerArrow') && child.hasClass('right'))		this.scroller_arrow_right = $(child);
		}.bind(this));

		/*	Styles setzen
			Falls Javascript ausgeschaltet ist, fehlen diese
			Styles und der Scroller wird einfach als Bilderliste
			angezeigt	*/
		this.scroller.setStyle('height', ''+this.options.height+'px');
		this.scroller.setStyle('overflow', 'hidden');
		this.scroller.setStyle('position', 'relative');

		/*	Scroller-Content-Attribute	*/
		this.scroller_content.setStyle('position', 'absolute');
		this.scroller_content.setStyle('white-space', 'nowrap');

		/*	Bilder ermitteln und Events reinhängen;
			außerdem Bilder preloaden	*/
		this.pic_preloads = new Array ();
		children = this.scroller_content.getChildren('a');
		children.each (function (child) {
			{
				var el_img = child.getElement('img');
				if (el_img.hasClass('hover')) {
					//	Over- und Out-Bilder aus dem Attribut 'onmouseover' ermitteln
					var tmp = el_img.get('onmouseover');
					if(tmp) {
						//	Mouseevents hinzufügen
						el_img.addEvent('mouseover', this.hover_img_over.bind (this, el_img));
						el_img.addEvent('mouseout', this.hover_img_out.bind (this, el_img));
						el_img.has_over_pic = true;
						el_img_bilder = tmp.substr(tmp.indexOf ('[[')+2, tmp.indexOf (']]')-tmp.indexOf ('[[')-2).split('|');
						//	Pfade auf die Over- und Out-Bilder im Bild-Objekt merken
						el_img.img_out = this.options.img_path + el_img_bilder[0];
						el_img.img_over = this.options.img_path + el_img_bilder[1];
						//	Over-Bild preloaden
						this.pic_preloads[this.pic_preloads.length] = new Image ();
						this.pic_preloads[this.pic_preloads.length - 1].src = el_img.img_over;
					} else {
						el_img.has_over_pic = false;
						//	Pfade auf die Over- und Out-Bilder im Bild-Objekt merken
						el_img.img_out = el_img.src;
						el_img.img_over = el_img.src;
					}
				}
			}
		}.bind(this));

		/*	Events	*/
		if(this.options.arrows) {
			this.scroller_arrow_left.addEvent('mousedown', this.arrowscroll.bind(this,[false,true]));
			this.scroller_arrow_left.addEvent('mouseup', this.arrowscroll.bind(this,[false,false]));
			this.scroller_arrow_right.addEvent('mousedown', this.arrowscroll.bind(this,[true,true]));
			this.scroller_arrow_right.addEvent('mouseup', this.arrowscroll.bind(this,[true,false]));

			this.scroller_arrow_left.addEvent('touchstart', this.arrowscroll.bind(this,[false,true]));
			this.scroller_arrow_left.addEvent('touchend', this.arrowscroll.bind(this,[false,false]));
			this.scroller_arrow_right.addEvent('touchstart', this.arrowscroll.bind(this,[true,true]));
			this.scroller_arrow_right.addEvent('touchend', this.arrowscroll.bind(this,[true,false]));
		} else {
			this.scroller.addEvent('mouseover', this.bound_mouseover_hover = this.hover.bind(this,true));
			this.scroller.addEvent('mouseout', this.bound_mouseout_hover = this.hover.bind(this,false));
			this.scroller.addEvent('mousemove', this.bound_mousemove_move = this.move.bind(this));

			this.scroller_content.addEvent('touchstart', this.touchstart.bind(this));
			this.scroller_content.addEvent('touchmove', this.touchmove.bind(this));
			this.scroller_content.addEvent('touchend', this.touchend.bind(this));
    	}
		this.tick.periodical(25, this);
	},

	arrowscroll: function(right,down){
		this.mouse_down_on_arrow = down;
		this.arrow_right = right;
		this.calcSCWidth();
	},

	calcSCWidth: function() {
		this.sc_width = this.scroller_content.clientWidth - this.scroller.clientWidth;
	},

	touchstart: function(e) {
		// Bei Touch-Events immer absolut verwenden
		this.options.scrollmethod = 'absolute';
		this.scroller.removeEvent('mouseover', this.bound_mouseover_hover);
		this.scroller.removeEvent('mouseout', this.bound_mouseout_hover);
		this.scroller.removeEvent('mousemove', this.bound_mousemove_move);
		
		this.touch_start_coords = this.scroller_content.getPosition();
		this.start_touch_pos_x = e.page.x;
		
	},
	touchmove: function(e) {
		// Propagieren des Events stoppen
		e.stop();
		this.last_touch_pos_x = this.akt_touch_pos_x;
		this.akt_touch_pos_x = e.page.x;
	},
	touchend: function(e) {
		this.start_touch_pos_x = 0;
		this.akt_touch_pos_x = 0;
	},

	/**
	 * Maus über dem Container
	 */
	hover: function (inside){
		this.mouse_inside = inside;
	},

	/**
	 * Maus über dem Bild
	 */
	hover_img_over: function (el) {
		if(el.has_over_pic) {
			el.src = el.img_over;
		}
	},

	/**
	 * Maus über dem Bild
	 */
	hover_img_out: function (el) {
		if(el.has_over_pic) {
			el.src = el.img_out;
		}
	},

	/**
	 * Mausbewegung-Event
	 */
	move: function (event){
		var coord = this.scroller.getPosition();
		mouseX = event.page.x - coord.x;

		if (this.mouse_inside && (this.scroller_content.clientWidth > this.scroller.clientWidth))
		{
			//	Aktuelle Position
			var sc_coordinates = this.scroller_content.getPosition(this.scroller_content);

			//	Scrollbereich
			this.sc_width = this.scroller_content.clientWidth - this.scroller.clientWidth;
			//	Der Scroller soll das Ende schon erreichen, bevor die Maus am Rand
			//	angekommen ist.
			mouseOffsetX = mouseX*1.2-(this.scroller.clientWidth*0.1);
			
			sc_off = this.sc_width * mouseOffsetX / this.scroller.clientWidth;
			if (sc_off < 0)	sc_off = 0;
			if (sc_off > this.sc_width)	sc_off = this.sc_width;

			this.new_pos = -sc_off.toFixed();

			this.new_pos_relative = (mouseX - (this.scroller.clientWidth / 2)) / 20;	// 20
		}
	},

	/**
	 * Mausbewegung
	 */
	tick: function (event){

		if(this.options.arrows) {
			if(this.mouse_down_on_arrow) {
				//	Scrollbereich
				this.sc_width = this.scroller_content.clientWidth - this.scroller.clientWidth;
				this.new_pos += 20 * (this.arrow_right ? -1 : 1);
				
				if(this.new_pos > 0) {
					this.new_pos = 0;
				}
				if(this.new_pos < -this.sc_width) {
					this.new_pos = -this.sc_width;
				}
			}
			
			if(this.scroller_content.clientWidth > this.scroller.clientWidth) {
				if(this.scroller_arrow_left.getStyle('visibility') != 'visible') {
					this.scroller_arrow_left.setStyle('visibility', 'visible');
					this.scroller_arrow_right.setStyle('visibility', 'visible');
				}
			}
		}

		/**
		 * Touch-Events
		 */
		if(this.akt_touch_pos_x) {
			//	Scrollbereich
			this.sc_width = this.scroller_content.clientWidth - this.scroller.clientWidth;

			this.new_pos = this.touch_start_coords.x - (this.start_touch_pos_x - this.akt_touch_pos_x);

			if(this.new_pos < -this.sc_width) {
				this.new_pos = -this.sc_width;
			}
			if(this.new_pos > 0) {
				this.new_pos = 0;
			}
		}

		this.reposition_scroller();
	},

	reposition_scroller: function(){
		switch (this.options.scrollmethod)
		{
		case 'absolute':
/*	    	if(Browser.Platform.ios) {
	    		this.scroller_content.style['-webkit-transition'] = 'all 100ms linear';
	    		this.scroller_content.style['-webkit-transform'] = 'translate('+this.new_pos+'px,0)';
	    	} else */
			{
				this.akt_pos = this.akt_pos + (this.new_pos - this.akt_pos) / 5;
				this.scroller_content.setStyle('left', this.akt_pos.toFixed()+"px");
	    	}
			break;
		case 'relative':
			if(this.akt_touch_pos_x) {
				this.mouse_inside = false;
			}
			if (this.mouse_inside || this.akt_touch_pos_x)
			{
				if (Math.abs (this.new_pos_relative) > 2)
				{
					this.akt_pos = this.akt_pos - this.new_pos_relative;
					if (this.akt_pos > 0)	this.akt_pos = 0;
					if (this.akt_pos < -this.sc_width)	this.akt_pos = -this.sc_width;
					this.setScrollerPos(this.akt_pos);
				}
			}
			break;
		}
	},

	setScrollerPos: function(newpos) {
		this.akt_pos = newpos;
		this.scroller_content.setStyle('left', this.akt_pos.toFixed()+"px");
	},

	resize_scroller: function(){
		/*
			TODO:
			Experimentell: Scrollerhöhe an den Inhalt anpassen
			
			nicht mehr nötig, da der Scoller jetzt immer 130 px hoch ist
			(ohne Ränder)
		*/
//		this.scroller.setStyle('height', this.scroller_content.clientHeight);
	},

	jump: function(pos){
		switch(pos) {
			case 'start':
				this.calcSCWidth();
				this.setScrollerPos(0);
			break;
			case 'ende':
				this.calcSCWidth();
				this.setScrollerPos(-this.sc_width);
			break;
		}
	}

});