/*Paste the main object DivOpacityObj with all its wrapped in methods above the '//Main Program' comment between script tags in the head and use the main program as an example. The paragraphs refer to id's of divs in the body of your document, set to opacity 0 in css.*/


function DivOpacityObj(DivIdImgArr,Direction,Rate,OpacStart,OpacEnd,Pause){
/*
 position 0 in images is a counter default 1;
direction is 0 for both ways and 1 for one way;
rate is an array for speed of fade (1-100) do not choose 0
OpacStart is an array of starting opacity (0-100) default 0
OpacEnd is an array of target opacity (0-100) default 25
Pause is time image is displayed at fixed opacity (0-infinity) whole numbers
flag is a boolean value used to indicate the animation is stopped
PointerSet ensures the method isn't run on setting pointers
Always ensure arrays are all the same length
*/
this.DivIdImgArr=new Array();//images go here first position given value 1
this.Direction=new Array();//first position null then 1 or 0
this.Rate=new Array();//first position null then (1-100)
this.OpacStart=new Array();//first position null
this.OpacEnd=new Array();//first position null
this.Pause=new Array();//first position null
this.flag=true;
this.PointerSet=true;
this.milisec=200;
this.movie=-1;
this.Left='100px';
this.Top='50px';
this.Height='400px';
this.Width='400px';
//-----------------------------------------------------------------------------
this.display=function(){


this.rnd=Math.random();
this.rnd=Math.floor(this.rnd*100+0.5);
this.str=new String(this.DivIdImgArr[1]);
this.rand=new String(this.rnd);
this.index=this.str.lastIndexOf('.');
  
   newImage=document.createElement('img');
   newImage.setAttribute('src','Images/'+this.str);// new folder
    
   this.strg=this.str.substring(0,this.index);
   this.strg=this.strg+this.rand;
   oldDiv=document.getElementsByTagName('body')[0];
    newDiv=document.createElement('div');
	                newImage.setAttribute('id',this.strg+'i'); 
	                newDiv.setAttribute('id',this.strg);
					
					newDiv.style.height=this.Height;
                    newDiv.style.width=this.Width;
                    newDiv.style.position='absolute';	
                    newDiv.style.left=this.Left;
                    newDiv.style.top=this.Top;
                    newDiv.style.backgroundColor='transparent';
                    newDiv.style.border='none';
                    newDiv.style.opacity='0';
					newDiv.style.filter='alpha(opacity=0)';
					newDiv.style.MozOpacity='0';
					newDiv.style.KhtmlOpacity='0';
					
	oldDiv.appendChild(newDiv);				
  newDiv.appendChild(newImage);
  }  

}
//Wrapped in functions--------------------------------------------------------
//Timing----------------------------------------------------------------------------------------------------------------------------------------

DivOpacityObj.prototype.autoCall=function(objet,micro){
var call=objet.ImagesFader(objet);
return setInterval(call,micro);
}

 //change the opacity for different browsers-----------------------------------------------------------------------------------------
DivOpacityObj.prototype.changeOpac=function(opac,id){
    var obj = document.getElementById(id).style;
    obj.opacity = (opac / 100);
    obj.MozOpacity = (opac/ 100);
   obj.KhtmlOpacity = (opac/ 100);
    obj.filter = "alpha(opacity=" + opac + ")";
	}
   //Swap function???????????????????????????--------------------------------------------------------------------------------------
 DivOpacityObj.prototype.swapImage=function(id,cur){
   var oldIm=document.getElementById(id+'i');//image id
   document.getElementById(id).removeChild(oldIm);
   var newIm=document.createElement('img');
   newIm.setAttribute('src','Images/'+current);//new image
   newIm.setAttribute('id',id+'i');
   document.getElementById(id).appendChild(newIm);
  return;
     }  
//Fader-----------------------------------------------------------------------------
DivOpacityObj.prototype.ImagesFader= function(objet){
 
return (function(){
if(objet.PointerSet){objet.PointerSet=false;return;}
var currentImage=objet.DivIdImgArr[0];
var Id=objet.DivIdImgArr[currentImage];
 if(objet.index>-1){Id=objet.strg;} 
var Name=document.getElementById(Id);

 if(Name.style.filter>=0)
var currentOpacity=Name.style.filter;
 if(Name.style.opacity<1.5)
var currentOpacity=Math.floor(100*Name.style.opacity);
 if(Name.style.MozOpacity<1.5)
var currentOpacity=Math.floor(100*Name.style.MozOpacity);
 if(Name.style.KhtmlOpacity<1.5)
var currentOpacity=Math.floor(100*Name.style.KhtmlOpacity);


var pause=objet.Pause[currentImage];
var length=objet.DivIdImgArr.length;
var direction=objet.Direction[currentImage];
var target=objet.OpacEnd[currentImage];
var difference=target-currentOpacity;
var rate=objet.Rate[currentImage]



  if(difference>=0){
   if(difference==0){
    if(pause>0){objet.Pause[currentImage]=pause-1;return ;}
	if(direction==0){objet.Direction[currentImage]=1;objet.OpacStart[currentImage]=currentOpacity;objet.OpacEnd[currentImage]=0;return ;}
   if((length-1)-currentImage==0){objet.flag=false;clearInterval(objet.movie);return ;}//Routine should end here
     else{objet.DivIdImgArr[0]=currentImage+1;if(objet.index>-1){current=objet.DivIdImgArr[objet.DivIdImgArr[0]];objet.changeOpac(currentOpacity,Id);objet.swapImage(Id,current);}return;}
	 }
	 currentOpacity=currentOpacity+rate;
	 if(currentOpacity>target){currentOpacity=target;}
	 

	objet.changeOpac(currentOpacity,Id);
	 return ;
	}
	else{
	 	 currentOpacity=currentOpacity-(rate);
	
	 if(currentOpacity<target){currentOpacity=target;}
	 
	objet.changeOpac(currentOpacity,Id);
	 }return ;
	 });
 
  }


// Main program
//-------------------------------Instances of objects
ImObj=new DivOpacityObj;

ParaObj=new DivOpacityObj;

bike=new DivOpacityObj;
//--------------------------------
ImObj.DivIdImgArr=[1,'AbstractLeaf.jpg','AbstractLeaf.jpg','image7.jpg','SheetMusic.jpg'];
ImObj.Direction=['nul',1,0,0,0];
ImObj.Rate=['nul',2,5,5,5];//Do not use first entry.
ImObj.OpacStart=['nul',0,20,0,0];
ImObj.OpacEnd=['nul',20,50,50,40];
ImObj.Pause=['nul',180,100,150,315];
ImObj.Width='480px';
ImObj.Height='480px';
ImObj.Left='100px';
ImObj.Top='150px';
ImObj.display();//must be invoked for image extensions

//The following is for the associated paragraphs

ParaObj.DivIdImgArr=[1,'para1','paraback','para2','para3','para4','para5','para6','para7','para2','para3','para4','para5','para6','para7','paraback','para8','para9','para10','para11','para12','para13','paral'];
ParaObj.Direction=['nul',0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0];
ParaObj.Rate=['nul',5,50,10,10,10,10,10,10,20,20,20,20,20,20,50,10,10,10,10,10,10,5];
ParaObj.OpacStart=['nul',0,50,0,0,0,0,0,0,100,100,100,100,100,100,50,0,0,0,0,0,0,0];
ParaObj.OpacEnd=['nul',60,50,100,100,100,100,100,100,0,0,0,0,0,0,0,100,100,100,100,100,100,40];
ParaObj.Pause=['nul',35,0,30,30,30,30,30,30,0,0,0,0,0,0,0,100,100,100,130,100,150,35];

//------------------------------------------------------------------------------------------------------------------------

bike.DivIdImgArr=[1,'bicycle0.png','bicycle1.png','bicycle2.png','bicycle3.png','bicycle4.png','bicycle5.png','bicycle6.png','bicycle7.png','bicycle8.png','bicycle9.png','bicycle10.png','bicycle11.png','bicycle10.png','bicycle9.png','bicycle8.png','bicycle7.png','bicycle6.png','bicycle5.png','bicycle4.png','bicycle3.png','bicycle2.png','bicycle1.png','bicycle0.png'];
bike.Direction=['nul',1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];
bike.Rate=['nul',10,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100];
bike.OpacStart=['nul',0,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100];
bike.OpacEnd=['nul',100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100];
bike.Pause=['nul',0,0,0,0,0,0,0,0,0,0,0,10,0,0,0,0,0,0,0,0,0,0,0];
bike.milisec=50;
bike.Left='650px';
bike.display();

//Call the objects----------------------------------------------------------------------------------------------------------------------------
setTimeout('startImages()',31000);

ParaObj.movie=ParaObj.autoCall(ParaObj,ParaObj.milisec);  //This is the normal way start the animation

bike.movie=bike.autoCall(bike,bike.milisec);               //As the above comment

//-----------------------------------------------------------------------------------------------------------------------------------------------------

EndFunction=setInterval('playAgain()',4000);// Repeats the routine before removing the last image.
function playAgain(){
 if(ParaObj.DivIdImgArr[0]==1){
  if(!bike.flag){bike.flag=true;bike.DivIdImgArr[0]=1;bike.movie=bike.autoCall(bike,bike.milisec);
  }
 }else{
 document.getElementById(bike.strg).style.display='none';clearInterval(EndFunction);}// Clears the bike
 
}

function startImages(){ImObj.movie=ImObj.autoCall(ImObj,ImObj.milisec);}//Delay for the object ImObj
//-------------------------------------------------------------------------------------------------------------------------

<!-- Copyright (c) 2008; Stephen John Davis.
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the
 "Software"), to deal in the Software without restriction, including
 without limitation the rights to use, copy, modify, merge, publish,
 distribute, sublicense, and/or sell copies of the Software, and to
 permit persons to whom the Software is furnished to do so, subject to
 the following conditions:
 
i)The GPL license applies for all GPL licensed Software.
ii)The above copyright notice and this permission notice shall be included
 in all copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
 IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
 CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
 TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.-->