/**
 * @author abratfisch
**/
 
ImageSlider = new Class({
	Implements: [Options, Events],
	options: {
		container: '',
		sliderElements: '', /* can be any html element (div, p, a, span) */
		height: 84,
		leftBtn: '',
		rightBtn: '',
		headers: '',
		links: ''
	},
		
	initialize: function(options){
		setLoading('start',$('galerie'));
		$('sliderContainer').setStyle('visibility', 'hidden');
		this.setOptions(options);
		this.options.container = $(this.options.container);
		if(!(this.options.container)){return false;}//do nothing
		this.setup();
	},
	
	setup: function() {
		var o = this.options;
		o.childs = o.sliderElements;
		o.sliderElements = (o.container.getElements(o.sliderElements));
		
		$("mask").setStyles({"position": "relative","overflow":"hidden","z-index": 20});
		o.container.setStyles({"position": "relative", "z-index": -1});
		
		o.leftBtn = $(o.leftBtn);
		o.rightBtn = $(o.rightBtn);
		
		o.leftBtn.addEvent ("click", this.backwardClick.bindWithEvent(this));
		o.rightBtn.addEvent("click", this.forwardClick.bindWithEvent(this));
		
		this.sliding = null;		
		this.preloadImages();
		
		/*this.firmenInfo = new Element("div");
		this.firmenInfo.addClass("firmenInfo");
		this.firmenInfo.id = "firmenInfo";
		this.firmenInfo.setStyles({display: 'none'});
		document.body.appendChild(this.firmenInfo);*/
		
		this.lastTarget = null;
	},
	
	generateSelectedItem: function() {
		var o = this.options;
		var els = o.container.getElementsByTagName(o.childs);
		var selected = null;
		var count = 0;
		
		for( var i = 0;  i < els.length; i++  ) {
			var el = els[i];
			
			if( el.nodeName && el.nodeName.toLowerCase() == o.childs ) {
				if( el.className == "activeSilderElement" ) {
					selected = el;
					break;
				}
			}
			count++;
		}
		
		if( selected ) {
			
			var objs_right = new Array();
			// nimm alle vor dem aktuellen element weg und haeng sie geordnet hinten an
				for(var i = 0; i < count; i++) {
					var ch = els[0];
					o.container.removeChild(ch);
					o.container.appendChild(ch);
					// wichtig: array neu einlesen, sonst falsches offset !!!
					els = o.container.getElementsByTagName(o.childs);
				}
			
			// nimm die letzten 2 elemente und haeng sie vor das aktuelle element
			for(var i = els.length-2; i < els.length; i++) {
				var ch = els[i];
				o.container.removeChild(ch);
				if( o.container.getFirst() == selected )
					o.container.insertBefore(ch, o.container.getFirst());
				else
					o.container.insertBefore(ch, selected);
				// wichtig: array neu einlesen, sonst falsches offset !!!	
				els = o.container.getElementsByTagName(o.childs);
			}
		}
	},
	
	loaded: function() {
		this.orderChilds(1);
		var o = this.options;
		var that = this;
		this.generateSelectedItem();
		
		this.images.each( function(el) {
			el.addEvent('mouseover', that.onImageOver.bindWithEvent(that));
			el.addEvent('mouseout', that.onImageOut.bindWithEvent(this.firmenInfo));
		});
		$('sliderContainer').setStyle('visibility', 'visible');
		setLoading('stop',$('galerie'));
	},
	
	preloadImages: function() {
		var c = this.options.container;
		this.images = c.getElements('img');
		var arr = new Array();
		//c.setStyles({"visibility": "hidden"});
		
		this.images.each(function(el){
			//el.setStyles({"display": "none"});
			arr.push(el['src']);
		})
		
		this.loadedImages = new Asset.images(arr, {
			'onComplete': this.loaded.bind(this)
		});
	},
	
	cleanupStyles: function() {
		var o = this.options;
		o.sliderElements.each(function(el){
			el.setStyles({
				"border": "1px solid #000"
			});
			el.removeClass("activeSilderElement");
		});
	},
	
	onImageClick: function(e) {
	   	e.stop();
		return true;
	},
	
	onImageOver: function(el) {
		el.stop();
		var alink = el.target.getParent().rel;
		/*var firmenInfo = $("firmenInfo");
		
		if( firmenInfo.style.display == "" && this.lastTarget == el.target ) {
			return;
		}*/
		
		this.lastTarget = el.target;
		
		/*firmenInfo.innerHTML = "Einen Moment, lade Informationen...";*/
		//var sl = $$(".sliderInfo")[0];
		
		//var xy = sl.getPosition(document.body);
		//var sz = sl.getSize();
		
		/*firmenInfo.setStyles({
			position: 'absolute',
			left:  xy.x + Math.round(((sz.x / 2) - (parseInt(firmenInfo.getStyle('width')) / 2))),
			top: xy.y + 50,
			zIndex: 100,
			background: 'transparent',
			backgroundImage: 'url(/media/images/background/halbtrans-bg.png)',
			display: ""
		});*/
		
		// new Request.JSON({
		// 			method: 'post',
		// 			data: { id: alink },
		// 			onComplete: function(json) {
		// 				firmenInfo.innerHTML = json.content;
		// 			}
		// 		}).post('/ajax/firmeninfo.php');
	},
	
	onImageOut: function(el) {
		el.stop();
		var firmenInfo = $("firmenInfo");
		// firmenInfo.setStyles({display: 'none'});
	},
	
	backwardClick: function(e) {
		e.stop();
		if(this.sliding || this.options.sliderElements.length <= 3 ){ return;}
		var o = this.options;
		
		var els = o.container.getChildren();
		var elem = els[els.length-1];
		
		this.animationRotate(elem, "backward", this);
	},
	
	forwardClick: function(e) {
		if($chk(e))
			e.stop();
		if(this.sliding || this.options.sliderElements.length <= 3 ){ return;}
		var o = this.options;
		//var els = o.container.getElementsByTagName(o.childs);
		var els = o.container.getChildren();
		var elem = els[0];
		
		this.animationRotate(elem, "forward", this);
	},
	
	orderChilds: function(start) {
		var o = this.options;
		var childs = o.container.getElements(o.childs);
		var morphImg = null;
		var height = 0;
		var margin = 0;
		
		if( start == 1) {
			for(var i = 5; i < childs.length; i++) {
				//childs[i].getElement("img").setStyles({"height": o.height});
			}
			
			var images = o.container.getElements('img');
			images.each(function(el){
				el.setStyles({"display" : ""});
			});
			
			var width = 0;
			for(var i = 0; i < o.sliderElements.length; i++) {
				var e = o.sliderElements[i];
				width += e.getSize().x;
				width += parseInt(e.getStyle("margin-left")) + parseInt(e.getStyle("margin-right"));
			}
			
			o.container.setStyles({
				"width": width + "px",
				"left": 0,
				"position": "relative",
				"z-index": "0",
				"visibility": "visible"
			});
		}
	},
	
	animationRotate: function(el, direction, that) {
		if (el) {
			var o = this.options;
			var moveToLeft = el.getSize().x;
			moveToLeft += parseInt(el.getStyle("margin-left")) + parseInt(el.getStyle("margin-right"));
			
			var childs = o.container.getElements(o.childs);
			

			var fx = new Fx.Morph(o.container, {
				transition: Fx.Transitions.Sine.easeOut,
				duration: 200,
				onComplete: function(e){					
					switch (direction) {
						case "forward":
							o.container.removeChild(el);
							o.container.appendChild(el);
							//var img = el.getElement("img");
							//img.setStyles({"height": o.height});
							break;
					}
					o.container.style.left = "0px";
					that.orderChilds();
					
					var childs = o.container.getElements(o.childs);					
					o.sliderElements = childs;
				}
			});
			
			if (direction == "forward") {
				this.sliding = true;
				fx.start({
					"left": -moveToLeft
				}).chain(function(){
					this.sliding = false;
				}.bind(this));
			} else {
				var e = el;
				var size = e.getSize().x;
				o.container.removeChild(el);
				o.container.insertBefore(el, o.container.getFirst());
				o.container.setStyles({"left": -size});
				this.sliding = true;
				fx.start({
					"left": "0px"
				}).chain(function(){
					this.sliding = false
				}.bind(this));
			}
		}
		else {
			return false;
		}
	}
});