// <script>
"use strict";
//animations
//=================== get or make stylesheet ========================
var gStyles=null;

if( document.styleSheets && document.styleSheets.length )
{  
	gStyles=document.styleSheets[0];  
}
else
{  
	gStyles = new Element("style",{"type":"text/css"});
	$$('head')[0].insert({"before":gStyles});
}
var hasAnimation = false,animationstring = 'animation',keyframeprefix = '', domPrefixes = 'Webkit Moz O Ms Khtml'.split(' '),pfx  = '',pfxLower  = '';
if( hasAnimation === false )
{  
	var elm=new Element("div");
	for( var i = 0; i < domPrefixes.length; i++ )
	{  
		if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined )
		{  
			pfx = domPrefixes[ i ]; 
			pfxLower=pfx.toLowerCase();
			animationstring = pfx + 'Animation';  
			keyframeprefix = '-' + pfx.toLowerCase() + '-';  
			hasAnimation = true;  
			break;
		}  
	}  
}
function addKeyFrames(name,rules)
{
	if(gStyles)
	{
		var keyframes = '@' + keyframeprefix + 'keyframes '+ name+'  { ';
		$H(rules).each
		(
			function(r,x)
					{
						var v=r.value;
						if(v.indexOf("transform")==0)
							v=keyframeprefix + v;
						keyframes+=r.key+' { '+v+' }'
					}
		)
		keyframes+=' }';
		gStyles.insert(keyframes);
	}
}
/*animation-delay
    Configures the delay between the time the element is loaded and the beginning of the animation sequence.
animation-direction
    Configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself.
animation-duration
    Configures the length of time that an animation should take to complete one cycle.
animation-iteration-count
    Configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely.
animation-name
    Specifies the name of the @keyframes at-rule describing the animation's keyframes.
animation-play-state
    Lets you pause and resume the animation sequence.
animation-timing-function
    Configures the timing of the animation; that is, how the animation transitions through keyframes, by establishing acceleration curves.
animation-fill-mode
    Configures what values are applied by the animation before and after it is executing. */
Element.addMethods(
{
	animation:function(element,content)
	{
		element=$(element);if(!element)return(element);
		element.setCss3Style("animation",content);
		return(element);
	},
	setCss3Style:function(element,st,content)
	{
		var element = $(element);
		st=st.charAt(0).toLowerCase() + st.substring(1);
		var st1=st.charAt(0).toUpperCase() + st.substring(1);
		
		element.style[pfx+st1]=content;
		element.style[st]=content;
		return(element);
	},
	transition:function(element,options,backEndFunc)
	{
		element=$(element);
		var an;
		var st={};
		if(hasAnimation)
		{
			if(options.property)
			{
				var x=element.style[pfx+"TransitionProperty"];
				var p=Array(),d=Array(),du=Array(),f=Array();
				var hasProperty=false;
				if(element.style[pfx+"TransitionProperty"]!="")
				{
					p=element.style[pfx+"TransitionProperty"].gsub(' ', '').split(",") || [];
					d=element.style[pfx+"TransitionDelay"].gsub(' ', '').split(",") || [];
					du=element.style[pfx+"TransitionDuration"].gsub(' ', '').split(",") || [];
					f=element.style[pfx+"TransitionTimingFunction"].gsub(' ', '').split(",") || [];
					if(p.indexOf(options.property)>-1)
					{
						p.each(function(e,x)
								{
									if(e==options.property)
									{
										if(options.delay)d[x]=options.delay;
										if(options.duration)du[x]=options.duration;
										if(options.timingFunction)f[x]=options.timingFunction;
										hasProperty=true;
									}
								}.bind(this)
							)
					}
				}
				if(!hasProperty)
				{
					p.push(options.property);
					d.push(options.delay?options.delay:"0");
					du.push(options.duration?options.duration:"0s");
					f.push(options.timingFunction?options.timingFunction:"ease");
				}
				st[pfx+"TransitionProperty"]=p.join(",");
				st[pfx+"TransitionDelay"]=d.join(",");
				st[pfx+"TransitionDuration"]=du.join(",");
				st[pfx+"TransitionTimingFunction"]=f.join(",");
				
				element.setStyle(st);
			}
			if(backEndFunc)
			{
				if(element.transitionend)
					element.stopObserving("transitionend")
					.stopObserving("webkitTransitionEnd")
					.stopObserving("TransitionEnd")
				if ( Object.isFunction(backEndFunc))
				{
					element.transitionend=backEndFunc;
					switch(an)
					{
						case "Moz":		element.observe("transitionend",backEndFunc);break;
						case "Webkit":	element.observe("webkitTransitionEnd",backEndFunc);break;
						default	:		element.observe("TransitionEnd",backEndFunc);break;
					}
				}
			}
			return(element);
		}
		else
		return(false)
	}
}
)