/* 

  ================================================
  Slide Show scripts
  Version: 1.0.0 - build 2008/05/25
  
  Notice:
  
  1.the tables used to slide must be placed in the div which id is showContent.
  2.the table for placing the Thumbnails must have id thumbnailsTable
  3.let the style used to slide take effect
  ================================================
  
*/

var setTimeId;   
var tables;     //tables used to slide
var Thumbnails; //Thumbnails  used to slide
var _iIndex=0;  //the current index

//form load
// window.onload=function(){
//  ScrollStart();
// }

//change img
 function ImgScroll(){
     if((!tables)||_iIndex<0||_iIndex>tables.length)
     {
      return;
     }

    // ThumbnailsChange(_iIndex);

     if(document.all){tables[_iIndex].filters.blendTrans.Apply();}

     for(var i = 0;i<tables.length;i++)
     { 
            tables[i].style.display = "none";
     }
      tables[_iIndex].style.display = "block";
      if(document.all){

     tables[_iIndex].filters.blendTrans.Play();

     }else{
     tables[_iIndex].style.opacity=0;
     shiftOpacity(_iIndex,1000)
     }
      _iIndex=(_iIndex>=tables.length-1?0:(_iIndex+1));
 }
 
// stop change
function ScrollStop()
{
	clearTimeout(setTimeId);
}

//start change img,Initialize the global variables 
function ScrollStart()
{
	 tables=document.getElementById("showContent").getElementsByTagName("li");
     _iIndex=Math.round(Math.random() * (tables.length-1));
     //alert(Math.round(Math.random() * (tables.length-1)))
	 //setThumbnails();
	 ImgScroll();
	 _iIndex=0;
	 setTimeId=window.setInterval("ImgScroll()",5000);
}

//Generate the thumbnails
function setThumbnails(){
    var tableThumbnails=document.getElementById("thumbnailsTable");
    var i=0;
    var imgs=document.getElementById("showContent").getElementsByTagName("img")
    for(i=0;i<imgs.length;i++){
    tableThumbnails.rows[0].cells[i].innerHTML='<img alt="'+imgs[i].alt+'" onmouserover="imgOnMouse(this,1)"'+
                                               ' onmouserout="imgOnMouse(this,2)" onclick="imgOnClick(this,'+i+')"'+
                                               ' src="'+imgs[i].src+'" />';
                                               
    }
    Thumbnails=document.getElementById("thumbnailsTable").getElementsByTagName("img");
}

//when the mouse over or out on the thumbnails
function imgOnMouse(oImg,iType){
if(iType==1){oImg.className="imgBorder";}
else{oImg.className="imgNoBorder";}
}

//when click the thumbnails
function imgOnClick(oImg,i){
ScrollStop();
_iIndex=i;
ImgScroll();
}

//auto change the thumbnails
function ThumbnailsChange(iIndex){
     for(var i = 0;i<tables.length;i++)
     { 
            Thumbnails[i].className="imgNoBorder";
     }
     Thumbnails[iIndex].className="imgBorder";
}

//transistion effect 
function opacity(id, opacStart, opacEnd, millisec) {
  //speed for each frame
  var speed = Math.round(millisec / 100);
  var timer = 0;
  //determine the direction for the blending, if start and end are the same nothing happens
  if(opacStart > opacEnd) {
  for(i = opacStart; i >= opacEnd; i--) {
  setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
  timer++;
  }
  } else if(opacStart < opacEnd) {
  for(i = opacStart; i <= opacEnd; i++)
  {
  setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
  timer++;
  }
  }
}
//change the opacity for different browsers
function changeOpac(opacity, id) {
  var object = tables[id].style;
  object.opacity = (opacity / 100);
  object.MozOpacity = (opacity / 100);
  object.KhtmlOpacity = (opacity / 100);
  
  //object.filter = "alpha(opacity=" + opacity + ")";
}
function shiftOpacity(id, millisec) {
  //if an element is invisible, make it visible, else make it ivisible
  //alert(tables[id].style.opacity);
  if(tables[id].style.opacity == 0) {
  opacity(id, 0, 100, millisec);
  } else {
  opacity(id, 100, 0, millisec);
  }
}