/**
 * @author abratfisch
**/
 
var ImageSlider = new Class({
	Implements: [Options, Events],
	options: {
		container: '',
		sliderElements: '', /* can be any html element (div, p, a, span) */
		height: 158,
		leftBtn: '',
		rightBtn: '',
		headers: '',
		headerId: '',
		links: '',
		isWysiyg: '0'
	},
		
	initialize: function(options){
		this.setOptions(options);
		if( !$(this.options.container) ){ return false; } //do nothing
		this.options.container = $(this.options.container);
		this.setup();
	},
	
	setup: function() {
		var o = this.options;
		o.childs = o.sliderElements;
		o.sliderElements = (o.container.getElements(o.sliderElements));
		
		o.leftBtn = $(o.leftBtn);
		o.rightBtn = $(o.rightBtn);
		
		o.leftBtn.addEvent ("click", this.backwardClick.bindWithEvent(this));
		o.rightBtn.addEvent("click", this.forwardClick.bindWithEvent(this));
		
		var c = o.container;
		var images = c.getElements("img");
		images.each(function(img){
			img.setStyles({"display": "none"});
		});
		
		this.preloadImages();
		
		if( $(this.options.headerId) ) {
	  		this.p = $(this.options.headerId);
		}
		
		var win = $("karussellWindow");
		if( !win && parseInt(o.isWysiyg) == 0 ) {
			win = new Element("div");
			win.id = "karussellWindow";
			document.body.appendChild(win);
			
			win.setStyles({
				position: 'absolute',
				left: 0,
				top: 0,
				zIndex: 110,
				display: 'none'
			});
			
			win.addEvent('mouseout', this.hideKarussellWin.bind(this));
		}
		else {
			win = null;
		}
		
		this.win = win;
	},
	
	hideKarussellWin: function(e) {
		e.stop();
		
		if (this.win) {
			// win position & size
			var wp = this.win.getPosition();
			var ws = this.win.getSize();
			
			// mouse position
			var mp = {
				x: e.page.x,
				y: e.page.y
			};
			
			// check, if mouse is outside from our window
			if (mp.y >= (wp.y + ws.y) || mp.y <= wp.y || mp.x <= (wp.x) || mp.x >= (wp.x + ws.x)) {
				this.win.setStyles({
					display: "none"
				});
			}
		}
	},
	
	initImages: function() {
		var o = this.options;
		var c = o.container;
		var images = c.getElements("img");
		
		var that = this;
		images.each(function(img){
			img.setStyles({"display": ""});
			
			if( that.win )
				img.addEvent('mouseover', that.imgOver.bind(that));
		});
		
		var width = 0;
		for(var i = 0; i < o.sliderElements.length; i++) {
			width += o.sliderElements[i].getSize().x;
			width += parseInt(o.sliderElements[i].getStyle("margin-left")) + parseInt(o.sliderElements[i].getStyle("margin-right"));
		}
		c.setStyles({
			"width": width + "px",
			"left": 0//,
		});
		
		this.sliding = null;
		this.orderChilds(1);
	},
	
	imgOver: function(e) {
		e.stop();
		
		var obj = e.target;
		var id = obj.id;
		
		// get galerie ID
		id = id.split("_")[1];
		
		if( this.currentID && this.currentID == id )
			return;
			
		this.currentID = id;
		
		var coords = obj.getPosition();
		this.win.setStyles({
			left: coords.x + 10,
			top: coords.y + 10
		});
		
		this.win.setStyles({display: "none"});
		var that = this;
		new Request.JSON({
			method: "post",
			data: { gid: id },
			onComplete: function(jsonhtml) {
				if (jsonhtml && jsonhtml.data) {
					var data = jsonhtml.data;
					that.win.innerHTML = data;
					that.win.setStyles({display: ""});
				}
				else {
					that.win.setStyles({display: "none"});
				}
			}
		}).post("/ajax/calls/karussell.php");
	},
	
	preloadImages: function() {
		var c = this.options.container;
		var images = c.getElements("img");
		var imgArray = new Array();
		var that = this;
		
		images.each(function(img){
			imgArray.push(img.src);
		});
		var myImages = new Asset.images(imgArray, {
			onComplete: function() {
				that.initImages();
			}
		});
	},
	
	onImageClick: function(e) {
	   	e.stop();
		var h = this.options.headers;
		var imgid = e.target.id.toString();
		
		for(var i = 0; i < h.length; i++) {
			if ( h[i].imgid == imgid) {
				this.p.innerHTML = h[i].content;
				break;
			}
		}
	},
	
	backwardClick: function(e) {
		e.stop();
		
		if(this.sliding){ return;}
		var o = this.options;
		var els = o.container.getElementsByTagName(o.childs);
		if (els.length > 0) {
			var elem = els[els.length-1];
			
			this.animationRotate(elem, "backward", this);
		}
	},
	
	forwardClick: function(e) {
		e.stop();
		if(this.sliding){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;
		for(var i = 0; i < childs.length; i++) {
			var morph = new Fx.Morph(childs[i].getElement("img"), {duration: 0, transition: Fx.Transitions.Expo.easeIn});
			switch( i ) {
				case 0: height = 60;
						margin = 50;
						break;
				case 1: height = 120;
						margin = 15;
						break;
				case 2: height = o.height;
						margin = 0;
						break;
				case 3: height = 120;
						margin = 15;
						break;
				case 4: height = 60;
						margin = 50;
						break;
			}
			
			morph.start({
				"height": height,
				"margin-top": margin
			})						
		}
		
		if( start == 1) {
			for(var i = 5; i < childs.length; i++) {
				childs[i].getElement("img").setStyles({"height": 60, "margin-top": 50});
			}
			
			var h = this.options.headers;
			var imgid = childs[2].getElement("img").id;
			childs[2].href = childs[2].rel;
			
			if( this.p )
				this.p.innerHTML = '<a href="' + childs[2].rel + '">' + childs[2].title + "</a>";
		}
	},
	
	animationRotate: function(el, direction, that) {
		if (el) {
			var o = this.options;
			var moveToLeft = el.getSize().x;
			//alert(moveToLeft);
			moveToLeft += parseInt(el.getStyle("margin-left")) + parseInt(el.getStyle("margin-right"));
			
			var childs = o.container.getElements(o.childs);
			
			/*
			for(var i = 0; i < childs.length; i++) {
				childs[i].removeEvents('click');
				childs[i].href = "javascript:;";
			}
			*/
			
			var fx = new Fx.Morph(o.container, {
				transition: Fx.Transitions.Expo.easeOut,
				duration: 0,
				onComplete: function(e){					
					switch (direction) {
						case "forward":
							o.container.removeChild(el);
							o.container.appendChild(el);
							var img = el.getElement("img");
							img.setStyles({"height": 60, "margin-top": 50});
							break;
					}
					o.container.style.left = "0px";
					that.orderChilds();
					
					var childs = o.container.getElements(o.childs);
					
					var h = that.options.headers;
					var imgid = childs[2].getElement("img").id;
					childs[2].href = childs[2].rel;
					
					if( that.p )
						that.p.innerHTML = '<a href="' + childs[2].rel + '">' + childs[2].title + "</a>";
					o.sliderElements = childs;
				}
			});
			
			if (direction == "forward") {
				this.sliding = true;
				fx.start({
					"left": -moveToLeft
				}).chain(function(){
					this.sliding = false;
				}.bind(this));
			} else {
				fx.element = el.getElement("img");
				o.container.removeChild(el);
				o.container.insertBefore(el, o.container.getFirst());
				this.sliding = true;
				fx.start({
					"left": "0px",
					"height" : 60,
					"margin-top": 50
				}).chain(function(){
					this.sliding = false
				}.bind(this));
			}
		}
		else {
			return false;
		}
	}
});