/******************************************************** 
  
  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
	  sldBorder: width of border between images
	  and create navigation buttons with onclick events that. 
	  So whole thing shoud be like this:
 	     ss=new slideShow(5,590,380,10);		 
	     onclick events shoud be like this:
		 ss.Next()
		 ss.Previous()
		 
   ENJOY!!!


*********************************************************/


function slideShow(noOfImages,sldWidth,sldHeight,sldBorder,displayTextId) {

   var animationInProgress=false; // Animation in progress flag
   var noOfImgs=noOfImages;
   var slideWidth=sldWidth;
   var slideHeight=sldHeight;
   var slideBorder=sldBorder;
   var displayTextID=displayTextId;
   var currImage=1;
   var centPos=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<3) alert("ERROR: For this slide show at least 3 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+"'><img src='images/spacer.gif' id='imgPlaceHolder2' height='"+slideHeight+"' width='"+slideWidth+"'><img src='images/spacer.gif' id='imgPlaceHolder3' height='"+slideHeight+"' width='"+slideWidth+"'>"
      // Center slide show image and prepare for next slide show request 
      centPos=parseInt(-1*3*(slideWidth+slideBorder*2)/2) + parseInt(slideWidth/2)
      centerSlideShowBandPutImages(1)
   }

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

   // center image and prepare holder for next request
   function centerSlideShowBandPutImages(currImage) {

	   var prevImage,prevprevImage,nextImage,nextnextImage;

       // Calck next image and previus image IDs
       if (currImage==1) { prevImage=noOfImgs } else { prevImage=currImage-1 }
	   if (currImage==noOfImgs) { nextImage=1 } else { nextImage=currImage+1 }
	   
	   // Prepare place holders
	   document.getElementById("imgPlaceHolder1").src=document.getElementById("SSIMG"+prevImage).src
	   document.getElementById("imgPlaceHolder2").src=document.getElementById("SSIMG"+currImage).src
	   document.getElementById("imgPlaceHolder3").src=document.getElementById("SSIMG"+nextImage).src
	   // Center image
	   document.getElementById("innerFrame").style.left=centPos +"px"
	   document.getElementById("innerFrame").style.visibility="visible"	
	   // Display text
	   try {
 	      document.getElementById(displayTextID).innerHTML=document.getElementById("SSIMG"+currImage).alt;
	   } catch(ex) {}

   }

   // Go to next slid
   this.Next=function(evalOnStart,evalOnFinish) {
     if (animationInProgress==true) return;
     animationInProgress=true;   // Falg it
     currImage++;
	 // Check te slide range
     fixCurrImage()
	 // Define animation
     var SLM = new Tween(document.getElementById("innerFrame").style,'left',Tween.regularEaseInOut,centPos,centPos-slideWidth-2*slideBorder,0.7,'px');
     SLM.onMotionFinished = function(){
	     animationInProgress=false;               // Unflag it on end
		 eval(evalOnFinish)                       // Do this on finish
	     centerSlideShowBandPutImages(currImage)  // Prepare for next slide show request
     }
	 eval(evalOnStart)                            // Do this on start
     SLM.start();
   }
   
   // 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()
	 // Define anim
     var SLM = new Tween(document.getElementById("innerFrame").style,'left',Tween.regularEaseInOut,centPos,centPos+slideWidth+2*slideBorder,0.7,'px');
	 // Start anim
     SLM.onMotionFinished = function() {
	     animationInProgress=false;                // On end unflag
		 eval(evalOnFinish)                        // Do this on finish
	     centerSlideShowBandPutImages(currImage)   // Prepare for next slide show request
     }
	 eval(evalOnStart)                            // Do this on start
     SLM.start();
   }
}