/*
 * Animation Type:
 *  - Image for setting background style property
 *  - Text for setting innerHTML
 */
var AnimationType = { Image:1,Text:2 };
	


/*
 * Annimation class
 *  - use it whenever you need fadding funcionality
 */
var AnimationClass = Class.create({
	initialize: function(cImage, data, type)
	{
		this.obj = $(cImage);
		this.data = data;
		this.type = type;
		if(this.obj && this.data!=null && this.data.length>1)
			this.init();
	},
	
	init: function(){
		this.currentIndex = 0;
		this.cloneEl = new Element("div",{"class":this.obj.className,width:this.obj.getWidth(),height:this.obj.getHeight()});			
		this.cloneEl.zIndex = parseInt(this.obj.getStyle("zIndex"))+1;
		this.cloneEl.hide();
		this.obj.parentNode.appendChild(this.cloneEl);
		
		this.setData(this.data[0],this.obj);
		this.setData(this.data[1],this.cloneEl);
	},
	
	setData: function(val,el){
		var elToSetData = el || (this.cloneEl.style.display!="none" ? this.obj : this.cloneEl);			
		if(this.type==AnimationType.Image)
			elToSetData.style.background="url("+val+")";
		else{				
			elToSetData.update(val);
		}
		if(el==null){
			this.cloneEl[this.cloneEl.style.display!="none"?"fade":"appear"]({ duration: 2.5 });
			if(this.type==AnimationType.Text) this.obj[this.cloneEl.style.display!="none"?"appear":"fade"]({ duration: 2.5 });
		}
	},
	
	next: function(){
		console.log("Item:%s next", this.obj.className);

		this.currentIndex++;
		if(this.currentIndex>=this.data.length) this.currentIndex=0;
		this.setData(this.data[this.currentIndex]);
	},
	
	previous: function(){
		console.log("Item:%s previous", this.obj.className);

		this.currentIndex--;
		if(this.currentIndex<0) this.currentIndex=this.data.length-1;
		this.setData(this.cloneEl, this.data[this.currentIndex]);			
	},
	
	goTo: function(num){
		console.log("Item:%s goTo", this.obj.className);

		if(num>=0 && num < this.data.length) this.currentIndex=num;			
		this.setData(this.cloneEl, this.data[this.currentIndex]);
	},
	
	registerEvent: function(name){
		console.log("Item:%s registeringEvent:%s", this.obj.className, name);
		document.observe(name, this.onChange.bind(this));
	},
	
	onChange: function(){
		console.log("Item:%s onChange:next", this.obj.className);
		
		this.next();
	}
});



/*
 * SimpleAnimation control
 *  - use it whenever you need to fade images
 */
var SimpleAnimation = Class.create((function(){
	var eventPrefix = "simpleanimation:";
	var obj,list,intervalId,animObj,delay,isImage;
	
	var constructor = function(o,l,d){
		obj = $(o);
		list = l;
		delay = d*1000;
		if(obj && list.length>0){ 
			isImage = (animObj=obj.select(".image")[0])!=null;
			if(isImage) init();
		}
	}
	
	var init = function(){
		if(isImage) animObj = new AnimationClass(animObj, list, AnimationType.Image);
		animObj.registerEvent(eventPrefix+"change");
	}
	
	var start = function(){
		stop();
		intervalId = setInterval(onChange,delay);
	};
	
	var stop = function(){
		clearInterval(onChange,delay);
	};
	
	var onChange = function(){ document.fire(eventPrefix+"change"); };

	return {
		initialize:constructor,
		start:start
	}
}()));



/*
 * Animation control
 *  - use it whenever you need items of fadding images with some navigation options
 */
var Animation = Class.create((function(){
	var eventPrefix = "animationcontrol:";
	var items = [];
	var obj,list,
	intervalId,
	cNavigation,
	isImage,isTitle,isDescription,isNavigation;

	var constructor = function(o,l,isNav){
		obj = $(o);
		list = l;
		if(obj && list.length>0)
		{
			isImage = (cImage=obj.select(".image")[0])!=null;
			isTitle = (cTitle=obj.select(".title")[0])!=null;
			isDescription = (cDescription=obj.select(".description")[0])!=null;
			isNavigation = isNav;			
			if(isImage || isTitle || isDescription) init();
			// preloadImages();
		}
	}
	
	var init = function(){
		if(isImage) items.push(new AnimationClass(cImage, list.pluck("img"), AnimationType.Image));
		if(isTitle) items.push(new AnimationClass(cTitle, list.pluck("title"), AnimationType.Text));
		if(isDescription) items.push(new AnimationClass(cDescription, list.pluck("description"), AnimationType.Text));
		items.invoke("registerEvent",eventPrefix+"change");
	}
	
	var start = function(){
		stop();
		intervalId = setInterval(onChange,5000);
	};
	
	var stop = function(){
		clearInterval(intervalId);
		intervalId=null;
	};
	
	var next = function(){
	    stop();
		items.invoke("next");
		setTimeout(start,3000);
	};
	
	var previous = function(){
	    stop();
		items.invoke("previous");
		setTimeout(start,3000);
	};
	
	var goTo = function(indx){
	    stop();
		items.invoke("goTo");
		setTimeout(start,3000);
	};
	
	var pause = function(){
	    if(intervalId==null) start();
	    else stop();	        
	};
	
	var onChange = function(){ document.fire(eventPrefix+"change"); };

	return {
		initialize:constructor,
		start:start,
		next:next,
		previous:previous,
		goTo:goTo,
		pause:pause
	}
}()));