/*
	JSFader 2008 ver. 2.1 (23-03-2009) (23-04-2009)
	Fading utility for image slideshow made by johnnyseyd@gmail.com
	
	This tool fades an list of images fading in selected container (element).
	
	-------------------------------------------------------------------------
	-------------------------------------------------------------------------
	-------------------------------------------------------------------------
	
	Simply include this sctipt in your HTML, for example:
	<script type="text/javascript" src="JSFader.js"></script>
	
	and make an image container element, for example:
	<div id="box" style="border: 1px solid black; float: right;"></div>
	
	than include script like this:
	<script>
	<!--
		var fader = new JSFader('box');
		fader.setVisibleTime(2000);
		fader.setFadeTime(1000);
		fader.addImage('img/A.gif');
		fader.addImage('img/B.gif');
		fader.addImage('img/C.gif');
		fader.addImage('img/D.gif');
		fader.addImage('img/E.gif');
		fader.addImage('img/F.gif');
		fader.init();
	//-->
	</script>
	
	... and thats all!
	
	You have to create a new instance of JSFader object
	width parameter ID of container element, or direct an element object.
	
	Than you can set timing, visible time is how long will be visible each picture,
	and fade time how long will take fade between two pictures.
	It must be set in miliseconds (1000ms = 1sec).
	Default visible time is 1000ms and fade time is also 1000ms.
	
	Using method .addImage you can set an picture list (how many you want)
	and it will fade in that order which you will add it. It takes an string url of a picture.
	
	At last you have init (run) fader by method .init.
	
	And thats all....
	
	Recomendations:
	All pictures must have the same size. Container element size will be set automaticaly.
	If pictures are diffrent sized, container must be set at the minimum size (automaticaly).
	If you want set your own size (less then optimal minimal) set it throught style.
	
	You can make more instances of JSFader on one page and make more fading containers at same page.
	
	Have a good time!
	

BASIC functions

	.setVisibleTime		(Number ms)		:this		- setting interval of each frame (picture) visibility in animation (default 1000ms)
	.setFadeTime		(Number ms)		:this		- setting interval of fading transition from frame to another frame (picture) (default 1000ms)
	.addImage			(String url[, String link])	:this		- adds image to animation, image as link can be provided by optional link parameter
	.init				()				:this		- starts (inits) animation (after all images are added)

	
ADVANCED functions

	.play				()				:this		- start animation if paused
	.pause				()				:this		- pause (stop) animation if is playing
	.isPlaying			()				:Boolean	- return information if animation is playing or paused
	.next				()				:this		- show next frame (image)
	.previous			()				:this		- show previous frame (image)
	.gotoFrame			(Number frmNum)	:this		- show frame by	its number (1..n)
	.getImageCount		()				:Number		- returns frame (image) count
	.normalDirection	()				:this		- set normal animation direction
	.reverseDirection	()				:this		- set reverse (backward) animation direction
	.getDirection		()				:Number		- returns current animation direction (1=normal, -1=reverse)

event handler
	.onchange			(Object event)	client can rewrite by its own handler (function)
										in e parameter is sent event object:
											.target = current instance of JSFader [:Object]
											.currentFrame = number of actual frame (image) 1..n [:Number]
											.currentImage = current image object [:Image object]
											.currentImageSrc = current image source [:String]

*/


// el is container element (object HTMLElement) or id (String)
var JSFader = function( el ) { this.j(el); };
$p = JSFader.prototype;


$p.setVisibleTime   = function( ms  ) { return this.J( ms ); }
$p.setFadeTime      = function( ms  ) { return this.K( ms ); }
$p.addImage         = function( url, _link ) { return this.L( url, _link ); }
$p.init             = function(     ) { return this.M(); }
$p.play             = function(     ) { return this.N(); }
$p.pause            = function(     ) { return this.O(); }
$p.isPlaying        = function(     ) { return this.P(); }
$p.next             = function(     ) { return this.Q(); }
$p.previous         = function(     ) { return this.R(); }
$p.gotoFrame        = function( num ) { return this.S(num); }
$p.getImageCount    = function(     ) { return this.T(); }
$p.normalDirection  = function(     ) { return this.U(); }
$p.reverseDirection = function(     ) { return this.V(); }
$p.getDirection     = function(     ) { return this.W(); }
// client can rewrite by its own handler (function)
// in e parameter is sent event object:
//		.target = current instance of JSFader [:Object]
//		.currentFrame = number of actual frame (image) 1..n [:Number]
//		.currentImage = current image object [:Image object]
//		.currentImageSrc = current image source [:String]
$p.onchange = function( e ) { };

// CODE >>>
$p.a=$p.b=$p.c=null;$p.d=0;$p.e=$p.f=1000;$p.gT='p';$p.g=$p.h=0;$p.i=false;$p.j=function(e){if(typeof(e)=='string')e=document.getElementById(e);this.a=e;var s=this.a.style;if(this.k(e,'position')!='absolute')s.position='relative';s.overflow='hidden';this.b=new Array();this.c=new Array()};$p.uJ='x';$p.l=function(i,j){i.onload=i.onerror=null;this.d++;i.m=true;i.o=i.width;i.p=i.height;this.n();this.m()};$p.nu=$p.gT+$p.uJ;$p.n=function(){var a=b=10000;for(var i=0;i<this.c.length;i++){var m=this.c[i];if(m.m){if(m.o<a)a=m.o;if(m.p<b)b=m.p}}var s=this.a.style;if(this.a.offsetWidth>a||!s.width)s.width=a+this.nu;if(s.height>b||!s.height)s.height=b+this.nu;this.q=parseInt(s.width);this.r=parseInt(s.height)};$p.s=function(i,j){i.onload=i.onerror=null;this.b.splice(j,1);this.c.splice(j,1);this.m()};$p.m=function(){if(this.d==this.c.length)this.t()};$p.u=function(l){for(var i=0;i<this.c.length;i++){var p=l&&i+1==this.c.length?100:0;if(i>0)xD(this.c[i],p);if(p==0&&i!=0)this.c[i].style.display='none';this.a.appendChild(this.c[i])}};$p.t=function(){this.u();this.g=0;this.h=0;this.v=this.w.Z(this);this.x=this.y.Z(this);this.z(0,true);this.i=true;this.A();this.B()};$p.Tw=25;$p.z=function(v,er){var g=this.c[v];if(g.o>this.q||g.p>this.r){var dp=!er?Math.round(Math.random()):0;var gq=!er?Math.round(Math.random()):0;var ty=dp==0?1:-1;var go=gq==0?1:-1;g.aD=g.o-this.q;g.rs=g.p-this.r;g.Wa=g.aD*dp;g.Rg=g.rs*gq;var ss=(this.e+this.f*2)/this.Tw/1.1;g.lK=(g.aD*ty)/ss;g.nB=(g.rs*go)/ss;if(Math.abs(g.lK)<0.2)g.lK=0;if(Math.abs(g.nB)<0.2)g.nB=0;g.style.left=Math.round(-g.Wa)+this.nu;g.style.top=Math.round(-g.Rg)+this.nu;if(g.aZ){clearInterval(g.aZ);g.aZ=null}if(g.lK!=0||g.nB!=0)g.aZ=setInterval(this.aZ.Z(this,v),this.Tw)}};$p.aZ=function(v){var e=false;var g=this.c[v];g.Wa+=g.lK;g.Rg+=g.nB;if(g.Wa<0){g.Wa=0;e=true}if(g.Rg<0){g.Rg=0;e=true}if(g.Wa>g.aD){g.Wa=g.aD;e=true}if(g.Rg>g.rs){g.Rg=g.rs;e=true}g.style.left=Math.round(-g.Wa)+this.nu;g.style.top=Math.round(-g.Rg)+this.nu;if(e||!this.i){clearInterval(g.aZ);g.aZ=null}};$p.I=null;$p.B=function(){if(this.I||this.F)return;this.I=setTimeout(this.v,this.e)};$p.X=1;$p.w=function(){if(!this.i||this.F)return;this.h=this.g;this.g+=this.X;if(this.g<0)this.g=this.c.length-1;if(this.g+1>this.c.length){this.g=0;this.u(true)}this.Y()};$p.G=50;$p.Y=function(){if(this.F){clearTimeout(this.F)}this.z(this.g);this.E=Math.round(this.f/this.G);this.D=0;this.C=this.g;this.H=this.h;for(var i=0;i<this.c.length;i++)if(i!=this.C&&i!=this.H)this.c[i].style.display='none';var i=this.c[this.H];xD(i,100);i.style.display='block';i.style.zIndex=0;var i=this.c[this.C];xD(i,0);i.style.display='block';i.style.zIndex=1;this.F=setTimeout(this.x,this.G)};$p.y=function(){this.D++;var a=(this.D/this.E)*100;if(this.D==this.E)a=100;if(this.D>this.E/3)this.A();if(this.D<this.E){this.F=setTimeout(this.x,this.G)}else{this.F=null;this.I=null;this.B()}xD(this.c[this.C],a);if(this.D==this.E)this.c[this.H].style.display='none'};$p.A=function(){this.onchange({target:this,currentFrame:this.g+1,currentImage:this.c[this.g],currentImageSrc:this.c[this.g].src})};$p.J=function(ms){this.e=ms;return this};$p.K=function(ms){this.f=ms;return this};$p.L=function(n,x){var g=this.b.length;this.b[g]=n;var h=this.c[g]=new Image();h.onload=this.l.Z(this,h,g);h.onerror=this.s.Z(this,h,g);var s=h.style;s.position='absolute';s.left='0';s.top='0';if(x){s.cursor='pointer';h.onclick=function(){location.href=x}}return this};$p.M=function(){for(var i=0;i<this.c.length;i++)this.c[i].src=this.b[i];return this};$p.N=function(){if(!this.i){this.i=true;if(this.I){clearTimeout(this.I);this.I=null}this.w()}return this};$p.O=function(){if(this.i){this.i=false}return this};$p.P=function(){return this.i};$p.Q=function(){if(!this.F){if(this.I){clearTimeout(this.I);this.I=null}if(!this.i){this.i=true;this.w();this.i=false}else this.w()}return this};$p.R=function(){if(!this.F){if(this.I){clearTimeout(this.I);this.I=null}var b=this.X;this.X=-1;if(!this.i){this.i=true;this.w();this.i=false}else this.w();this.X=b}return this};$p.S=function(n){this.O();if(n<1)n=1;if(n>this.c.length)n=this.c.length;this.h=this.g;if(this.g!=n-1){this.g=n-1;if(this.g+1>this.c.length){this.g=0;this.u(true)}this.Y()}this.N();return this};$p.T=function(){return this.c.length};$p.U=function(){this.X=1;return this};$p.V=function(){this.X=-1;return this};$p.W=function(){return this.X};$p.k=function(e,d){var r;if(e.style[d])r=e.style[d];else if(e.currentStyle)r=e.currentStyle[d];else if(document.defaultView&&document.defaultView.getComputedStyle){var q=d.replace(new RegExp('([A-Z])','g'),'-$1');r=document.defaultView.getComputedStyle(e,null).getPropertyValue(q)}return r};Function.prototype.Z=function(x){var y=this;var z=Array.ZX(arguments);return function(){return y.apply(x,Array.d(z,arguments))}};Array.d=function(){var r=[];for(var i=0;i<arguments.length;i++)for(var j=0;j<arguments[i].length;j++)r.push(arguments[i][j]);return r};Array.ZX=function(s){var r=[];for(var i=1;i<s.length;i++)r.push(s[i]);return r};xD=function(x,a){if(a>100)a=100;if(document.all&&!window.opera)x.style.filter='Alpha(Opacity='+parseInt(a)+')';else x.style.opacity=parseFloat(a)/100};