// Animate (01-October-2009)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
//  A           = a global variable                                                               (variable)
//  parameter 0 = the mode(see Note 1).                                                           (string)
//  parameter 1 = the unique ID name or element object.                                           (string or element object)
//  parameter 1 = the initial value.                                                              (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.update([10,800],5000,[10,800]);'
// where:
//  A           = the global referencing the script instance.                                     (variable)
//  parameter 1 = an array defining the start and finish values of the effect.                    (array)
//                 field 0 the start value. (digits, for opacity minimum 0, maximum 100)
//                 field 1 the finish value. (digits, for opacity minimum 0, maximum 100)
//  parameter 2 =  period of time between the start and finish of the effect in milliseconds.     (digits or defaults to previous or 0(on first call) milliSeconds)
//  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.             (array, see Note 3)
//                 field 0 the minimum value. (digits)
//                 field 1 the maximum value. (digits)
//  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                               (string, default = 'liner')
//                 'sin' progression starts fast and ends slow.
//                 'cos' progression starts slow and ends fast.
//
//  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
//  Note 2:  The default units(excepting opacity) are 'px'.
//           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
//  Note 3:  The scale is of particular use when re-calling the effect
//           in mid progression to retain an constant rate of progression.
//  Note 4:  The current effect value is recorded in A.data[0].
//  Note 5:  A function may be called on completion of the effect by assigning the function
//           to the animator intance property .Complete.
//           e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.58K) - NO NEED to Change

function zxcAnimate(mde,obj,fin){
 this.to=null;
 this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
 this.mde=mde.replace(/\W/g,'');
 this.data=[fin||0];
 return this;
}

zxcAnimate.prototype.update=function(srtfin,ms,scale,c){
 clearTimeout(this.to);
 this.time=ms||this.time||0;
 this.data=[srtfin[0],srtfin[0],srtfin[1]];
 this.mS=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
 this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
 this.inc=Math.PI/(2*this.mS);
 this.srttime=new Date().getTime();
 this.cng();
}

zxcAnimate.prototype.cng=function(){
 var oop=this,ms=new Date().getTime()-this.srttime;
 this.data[0]=(this.c=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]):(this.c=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*ms)):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
 this.apply();
 if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
 else {
  this.data[0]=this.data[2];
  this.apply();
  if (this.Complete) this.Complete(this);
 }
}

zxcAnimate.prototype.apply=function(){
 if (isFinite(this.data[0])){
  if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
  if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
  else zxcOpacity(this.obj,this.data[0]);
 }
}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

/*<![CDATA[*/

var F1,F2;

function Init(){
 F1=new Fade('rotator',5000);
 F1.Fade(true);
 //setTimeout(function(){ F1.Fade(true); },1000);
 F2=new Fade('nextrotator',5000);
 F2.Fade(true);
 F3=new Fade('rightrotator',5000);
 F3.Fade(true);
 // to stop rotation use F2.Fade(false);
}

function Fade(id,ms){
 imgs = document.getElementById(id).getElementsByTagName('img');
 this.ary=[];
 for(var i=imgs.length-1;i>=0;i--){
   this.ary.push(new zxcAnimate('opacity',imgs[i]));
   zxcOpacity(imgs[i],i==imgs.length-1?50:0);
 }
 this.nu=0;
 this.to=null;
 this.imgs=imgs;
 this.ms=ms||500;
}

Fade.prototype.Fade=function(run){
 clearTimeout(this.to);
 if (run){
  this.ary[this.nu].obj.zIndex=0;
  this.ary[this.nu].update([100,0],this.ms)
  this.nu=++this.nu%this.ary.length;
  this.ary[this.nu].obj.zIndex=1;
  this.ary[this.nu].update([0,100],this.ms)
  var oop=this;
  this.to=setTimeout(function(){ oop.Fade(run); },this.ms);
 }
}

window.addEventListener?window.addEventListener('load',Init,false):window.attachEvent('onload',Init);

/*]]>*/