/**
*
* 	TweenCSS - Easy use of Webkit Animation
*
*	Copyright (c) 2007-2011 Gianluca Cirone @ JWT/RMG Connect Milano
*
* 
**/

var TweenCSS = function(){	
	var tweens = new Array();
	
	function addNewTween(element, time, parameters) {
		if(!tweens.contains(element) && element && element.style.webkitTransition != undefined) {
			var nameAnimation = "anim-"+Math.round(Math.random()*10000000);
			element.userData = {};
			element.userData.name = nameAnimation;
			element.userData.parameters = parameters;
			if(parameters.startStyle) element.setAttribute("style", stringParamters(parameters.from));
			tweens.push(element);
			
			var delay = (parameters.delay)?parameters.delay*1000:0;				
			var delayIntervalId = setTimeout(function(){
				if(parameters.onStart) parameters.onStart(nameAnimation);
				clearInterval(delayIntervalId);
				delayIntervalId = null;
				
				var startAnimation = "-webkit-animation:"+nameAnimation+" "+time+"s ";
				if(parameters.repeat) startAnimation += (parameters.repeat==-1)?"infinite ":parameters.repeat+" ";			
				if(parameters.ease)	startAnimation += parameters.ease;
				else startAnimation += "ease-out;";
				
				var styleElement = document.createElement("style");
				styleElement.innerHTML = makeWebKitAnimation(nameAnimation, parameters.from, parameters.to);
				
				element.appendChild(styleElement);	
				element.setAttribute("style", startAnimation);
				
				element.listener = function(e){																		
					element.removeEventListener('webkitAnimationEnd', element.listener);					
					element.removeChild(element.lastChild);					
					element.removeAttribute("style");
					if(parameters.stopStyle) element.setAttribute("style", stringParamters(parameters.to));
					tweens.remove(element);
					if(parameters.onComplete) parameters.onComplete(nameAnimation);					
				};
				
				element.addEventListener('webkitAnimationEnd', element.listener);
								
			}, delay);
			
		}	
	}
	
	function deleteTween(element) {
		if(tweens.contains(element)){
			var tween = tweens[tweens.indexOf(element)];
			tween.removeEventListener('webkitAnimationEnd', tween.listener);
			tween.removeChild(tween.lastChild);
			tween.removeAttribute("style");
			tweens.remove(element);	
		}
	}
	
	function deleteTweens() {
		for (var i=0; i < tweens.length; i++) {			
			var tween = tweens[i];					
			tween.removeEventListener('webkitAnimationEnd', tween.listener);
			tween.removeChild(tween.lastChild);
			tween.removeAttribute("style");
		} tweens = new Array();
	}
	
	function countTweens() {
		return tweens.length;		
	}
	
	function stringParamters(param) {
		var strParam = "";
		for(var prop in param)	
			strParam += prop+":"+param[prop]+";";
		return strParam;		
	}
	
	function makeWebKitAnimation(name, from, to) {
		var cssAnimation = "@-webkit-keyframes " + name + " { ";
		cssAnimation += "from { ";				
		if(from) for(var prop in from)	
		cssAnimation += prop+":"+from[prop]+";";				
		cssAnimation += " } ";	
		cssAnimation +=  "to { ";		
		if(to) for(var prop in to)			
		cssAnimation += prop+":"+to[prop]+";";				
		cssAnimation += " } ";			
		cssAnimation += "}";
		return cssAnimation;
	}
	
	Array.prototype.indexOf = function(element) {
		var index = null;
		if(element) {
			for (var i=0; i < this.length; i++) {
				if( this[i] == element ){				
					index = i;
					break;
				}
			}
		}
		return index;
	}
	
	Array.prototype.contains = function(element) {
		var exist = false;
		if(element) {
			for (var i=0; i < this.length; i++) {
				if( this[i] == element ){				
					exist = true;
					break; 
				}
			}
		}
		return exist;
	}
	
	Array.prototype.remove = function(element) {
		if(element) {
			for (var i=0; i < this.length; i++) {
				if( this[i] == element ){					
					this.splice(i, 1);
					break; 
				}
			}
		}
	}
		
	return{
		/**
		* 	Public API
		* 	
		* 	Usage:
		* 
		*	TweenCSS.addTween(element, 1.2, {
		*		delay:2.4,
		*		repeat:5, //-1 = infinite
		*		from:{"opacity":"0","color":"#FFF"},
		*		to:{"opacity":"1","color":"#000"},
		*		startStyle:true,
		*		stopStyle:false,
		*		onStart:function(name){				
		*			alert("tween start name:"+name);						
		*		}, onComplete:function(name){			
		*			alert("tween finish count:"+TweenCSS.count()+" name:"+name);	
		*		}
		*	});	
		* 
		**/
		count:countTweens,
		addTween:addNewTween,
		removeTween:deleteTween,
		removeTweens:deleteTweens
		
	};
	
}();
