/**
 * @author abratfisch
**/
 
ImageSlider = new Class({
	Implements: [Options, Events],
	options: {
		container: '',
		sliderElements: '', /* can be any html element (div, p, a, span) */
		height: 158,
		leftBtn: '',
		rightBtn: '',
		headers: '',
		links: ''
	},
		
	initialize: function(options){
		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({"height": 162, "position": "relative","overflow":"hidden","z-index": 700});
		//o.container.setStyles({"position": "relative","z-index": 11000});

		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();
	},
	
	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() {
		var c = this.options.container;
		//c.setStyles({"visibility": "visible"});
		
		this.orderChilds(1);
		var o = this.options;
		var that = this;
		
		this.generateSelectedItem();
	},
	
	preloadImages: function() {
		var c = this.options.container;
		var images = c.getElements('img');
		var arr = new Array();
		//c.setStyles({"visibility": "hidden"});
		
		images.each(function(el){
			//el.setStyles({"display": "none"});
			arr.push(el.src);
		})

		this.loaded();
		/*
		this.loadedImages = new Asset.images(arr, {
			'onComplete': that.loaded.bindWithEvent(that)
		});
		*/
	},
	
	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;
	},
	
	backwardClick: function(e) {
		e.stop();
		if(this.sliding || this.options.sliderElements.length <= 5 ){ return;}
		var o = this.options;
		var els = o.container.getElementsByTagName(o.childs);
		var elem = els[els.length-1];

		this.animationRotate(elem, "backward", this);
	},
	
	forwardClick: function(e) {
		e.stop();
		if(this.sliding || this.options.sliderElements.length <= 5 ){ return;}
		var o = this.options;
		var els = o.container.getElementsByTagName(o.childs);
		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,
				"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: null,
				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.getElement("img");
				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;
		}
	}
});