/******************************************************** 
  
  Slide show animation 
  Done by  Sasa Jovanovic.
  How to use:
     Prerequest: slide show html must be like this
	 <div id="slideShow"><div id="innerFrame" class="innerFrame" align="left">
	      <img src="slide1.jpg" />
	      <img src="slide2.jpg" />
		  
		  ...
		  
	      <img src="slideN.jpg" />
      </div></div>
	  
	  CSS for slide show shoud be similar to this: 
	  #slideShow {
 	 	height:0px;
 		width:0px; 
	 	position:relative;
 		overflow:hidden;
 	  }

 	  .innerFrame {
	 	width:5000px;
 		position:relative;
 	  }

 	  .innerFrame IMG {
	 	margin-left:10px;
 		margin-right:10px;
 		display:inline;
 		position:relative;
 	  }
	  
	  make an istance wit a following parameters:
	  noOfImages: number of images used in slide show
	  sldWidth:  width of slide show image
	  sldHeight: height of slide show image
	  and create navigation buttons with onclick events that. 
	  So whole thing shoud be like this:
 	     ss=new slideShowFade(5,590,380,10);		 
	     onclick events shoud be like this:
		 ss.Next()
		 ss.Previous()
		 
   ENJOY!!!


*********************************************************/
function slideShowFade(noOfImages,sldWidth,sldHeight,displayTextId) {

   var animationInProgress=false; // Animation in progress flag
   var noOfImgs=noOfImages;
   var slideWidth=sldWidth;
   var slideHeight=sldHeight;
   var displayTextID=displayTextId;
   var currImage=1;
   var swimgcnt=1;

   InIt();
   
   function InIt() {
	  var i;
      var toAdd="";
      noOfImgs=0;
	  
      document.getElementById("preloadDIV").innerHTML=""  // Empty preloded div (can be used in some previous slide show)
      // Counting how many images are in slide show 
      for (i=0;i<document.getElementById("innerFrame").childNodes.length;i++) {
	      if (document.getElementById("innerFrame").childNodes.item(i).tagName=="IMG") {		    
			noOfImgs++;
			// genererate string for preload div
            toAdd=toAdd+"<img src='" + document.getElementById("innerFrame").childNodes.item(i).src + "' id='SSIMG" + noOfImgs + "' alt='" + document.getElementById("innerFrame").childNodes.item(i).alt + "' title='' />"
	      }
      }
      if (noOfImgs<2) alert("ERROR: For this slide show at least 2 images must be present.")

      // Initialize slide show and preload div
	  document.getElementById("slideShow").style.height=slideHeight + "px"
	  document.getElementById("slideShow").style.width=slideWidth + "px"
      document.getElementById("preloadDIV").innerHTML=toAdd;  
      document.getElementById("innerFrame").innerHTML="<img src='images/spacer.gif' id='imgPlaceHolder1' height='"+slideHeight+"' width='"+slideWidth+"' style='opacity:100;filter:Alpha(opacity=100);'><img src='images/spacer.gif' id='imgPlaceHolder2' height='"+slideHeight+"' width='"+slideWidth+"' style='position:relative;left:-" +  slideWidth + "px;opacity:0;filter:Alpha(opacity=0);' >"
	  document.getElementById("imgPlaceHolder1").src=document.getElementById("SSIMG1").src
  	  document.getElementById("innerFrame").style.left="0 px"
	  document.getElementById("innerFrame").style.visibility="visible"	

	  

   }

   // Check and fix current image position
   // Looping implemented
   function fixCurrImage() {
	  if (currImage<1) currImage=noOfImgs;
	  if (currImage>noOfImgs) currImage=1
   }

   // Go to next slid
   this.Next=function(evalOnStart,evalOnFinish) {
     if (animationInProgress==true) return;
     animationInProgress=true;   // Falg it
     currImage++;
	 // Check te slide range
     fixCurrImage()
	 animateIt(evalOnStart,evalOnFinish)
   }
   
   // Go to previus slide
   this.Previous=function(evalOnStart,evalOnFinish) {
     if (animationInProgress==true) return;   
	 // Flag the animation as in progress
     animationInProgress=true;
     currImage--;
	 // Check if in range
     fixCurrImage()
	 animateIt(evalOnStart,evalOnFinish)
   }
   
   function animateIt(evalOnStart,evalOnFinish) {
	 // Define anim
	 var SLM;
	 var SLM1;
     swimgcnt++;
	 if (swimgcnt%2==0) {
        document.getElementById("imgPlaceHolder2").src=document.getElementById("SSIMG"+currImage).src
        SLM = new OpacityTween(document.getElementById("imgPlaceHolder1"),Tween.regularEaseIn,100,0,0.5);
        SLM1 = new OpacityTween(document.getElementById("imgPlaceHolder2"),Tween.regularEaseIn,0,100,0.5);
	 } else {
		document.getElementById("imgPlaceHolder1").src=document.getElementById("SSIMG"+currImage).src
        SLM = new OpacityTween(document.getElementById("imgPlaceHolder1"),Tween.regularEaseIn,0,100,0.5);
        SLM1 = new OpacityTween(document.getElementById("imgPlaceHolder2"),Tween.regularEaseIn,100,0,0.5);
	 }
	 // Start anim
     SLM.onMotionFinished = function() {
	     animationInProgress=false;                // On end unflag
		 eval(evalOnFinish)                        // Do this on finish
     }
	 eval(evalOnStart)                            // Do this on start
	 SLM1.start()
     SLM.start();
   }
}