var   Scrolling = null;
var   ShowingTool = null;
var   FadingTool = null;
var   onWin;
var   onMain;
function scroll(i){
   var scrollBar = document.getElementById("scrollBar");
   var scrollStr = "";
	var Style = "";
   for (j=i;j<i-(-8);j++)
   {
      if(j==imgUrl.length)break;
		Style = dealSmallImg(imgWidth[j],imgHeight[j]);
      scrollStr += "<li class=\"smallBox\"><div id=\"div_"+j+"\" class=\"divBorder\"><div class=\"divBorder\">";
      scrollStr += "<a onclick = \"selectImg("+j+",1);\"><img style="+Style+" id=\"img_"+j+"\" src="+imgSmallUrl[j]+"></a></div></div></li>";
   }
   scrollBar.innerHTML = scrollStr;
   var page = document.getElementById("pageNow");
   page.value = i;
   checkPage();
}
function selectImg(i,click){
   var select = document.getElementById("selectNow");
   var oldBorder = document.getElementById("div_"+select.value);
   var border = document.getElementById("div_"+i);
   var mainPhoto = document.getElementById("mainphoto");
   if(oldBorder)
      oldBorder.className = "divBorder";
   if(border)
      border.className = "highLight";
   if(click){
      stopScroll();
		var imgHref = document.getElementById("imgHref");
      var Style = dealImg(imgWidth[i],imgHeight[i]);
      var mainHeight = document.getElementById("mainDiv").offsetHeight;
		if(!mainHeight) mainHeight = 370;
		mainPhoto.width = Style[0];
      mainPhoto.height = Style[1];
      
		if(Style[1]<(mainHeight-10))
         mainPhoto.style.marginTop = (mainHeight-Style[1])/2+"px";
      else
         mainPhoto.style.marginTop = "";
      imgHref.href = imgLink[i];
		imgHref.target = "_blank";  //add by tense
		mainPhoto.src = imgUrl[i];
   }
   else
      slideIt(i);
   select.value = i;
}
function goBack(click){
	if(imgUrl.length == 1)
		return;
   dealPage();
   if(click && Scrolling){
      clearInterval(Scrolling);
      Scrolling = null;
      Scrolling = setInterval('goNext()',ScrollSpeed);
   }
    var select = document.getElementById("selectNow");
    var back = document.getElementById("div_"+(select.value-1));
    if(back)
      selectImg(select.value-1);
   else{
      if((select.value) == 0){
         scroll((Math.floor(imgUrl.length/8))*8,1);
         selectImg(imgUrl.length-1);
      }
      else{
         var selectTemp = select.value-1;
         scroll(select.value-8);
         selectImg(selectTemp);
      }
   }
   checkPage();
}
function goNext(click){
	if(imgUrl.length == 1)
		return;
   dealPage();
   if(click && Scrolling){
      clearInterval(Scrolling);
      Scrolling = null;
      Scrolling = setInterval('goNext()',ScrollSpeed);
   }
   var select = document.getElementById("selectNow");
    var back = document.getElementById("div_"+(select.value-(-1)));
    if(back)
      selectImg(select.value-(-1));
   else{
      if((select.value-(-1)) == imgUrl.length){
         scroll(0);
         selectImg(0);
      }
      else{
         scroll(select.value-(-1));
         selectImg(select.value-(-1));
      }
   }
   checkPage();
}
function scrollBack(){
   stopScroll();
   var select = document.getElementById("selectNow");
   var page = document.getElementById("pageNow");
   var back = (Math.floor(page.value/8))*8-8;
   if(back < 0){
      return false;
   }
   else
      scroll(back);
   if(select)
      selectImg(select.value,1);
}
function scrollNext(){
   stopScroll();
   var select = document.getElementById("selectNow");
   var page = document.getElementById("pageNow");
   var next = (Math.floor(page.value/8))*8-(-8);
   if(next < imgUrl.length){
      scroll(next);
   }
   else
      return false;
   if(select)
      selectImg(select.value,1);
}
function checkPage(){
   var page = document.getElementById("pageNow");
   var next = (Math.floor(page.value/8))*8-(-8);
   var back = (Math.floor(page.value/8))*8-8;
   var divLeft = document.getElementById("divLeft");
   var divRight = document.getElementById("divRight");
   if(back < 0)
      divLeft.style.visibility = "hidden";
   else
      divLeft.style.visibility = "visible";

   if(next < imgUrl.length)
      divRight.style.visibility = "visible";
   else
      divRight.style.visibility = "hidden";
}
function dealPage(){
   var page = document.getElementById("pageNow");
   var select = document.getElementById("selectNow");
   if( parseInt(select.value) >= parseInt(page.value) && select.value < (page.value-(-8)) ){
		return;
   }
   else{
      scroll((Math.floor(select.value/8))*8);
      if(Scrolling)
			selectImg(select.value);
		else
			selectImg(select.value,1);
   }

}
function playScroll(){
	if(imgUrl.length == 1)
		return;
   var objId = "Photos_Play";
   var playLink = document.getElementById(objId);
   dealStyle(objId,1,1);
   playLink.onclick = function(){stopScroll();};
	if(window.attachEvent){
		playLink.onmouseover = "dealStyle('Photos_Play',1,1);";
   	playLink.onmouseout = "dealStyle('Photos_Play',0,1);";
   }
   else{
      playLink.addEventListener("mouseover",function(){dealStyle(objId,1,1);},false);
      playLink.addEventListener("mouseout",function(){dealStyle(objId,0,1);},false);
   }
   Scrolling = setInterval('goNext()',ScrollSpeed);
}
function stopScroll(){
   var objId = "Photos_Play";
   var playLink = document.getElementById(objId);
   dealStyle(objId,1,0);
   playLink.onclick = function(){playScroll();};
   if(window.attachEvent){
		playLink.onmouseover = "dealStyle('Photos_Play',1,0);";
      playLink.onmouseout = "dealStyle('Photos_Play',0,0);";
   }
   else{
      playLink.addEventListener("mouseover",function(){dealStyle(objId,1,0);},false);
      playLink.addEventListener("mouseout",function(){dealStyle(objId,0,0);},false);
   }
   clearInterval(Scrolling);
   Scrolling = null;
}
function dealImg(width,height){
   if((width/height)>(480/360)){
      if(width>480){
         newWidth = 480;
         newHeight = 480*(height/width);
      }
      else{
         newWidth = width;
         newHeight = height;
      }
   }
   else{
      if(height>360){
         newHeight = 360;
         newWidth = 360*(width/height);
      }
      else{
         newHeight = height;
         newWidth =width;
      }
   }
   var Style = new Array();
   Style[0] = newWidth;
   Style[1] = newHeight;
   return Style;
}
function dealSmallImg(width,height){
  	newHeight = 43;
   newWidth = 43*(width/height);
   if(newWidth > 43)
		left = (newWidth - 43)/2;
	else
		left = (43-newWidth)/2;
	if(newWidth > 43)
		Style = "height:43px;left:-"+left+"px";
	else
		Style = "height:43px;left:"+left+"px";
	return Style;
}
function slideIt(i){
   var showDiv = document.getElementById("mainphoto");
   var Style = dealImg(imgWidth[i],imgHeight[i]);
   var mainHeight = document.getElementById("mainDiv").offsetHeight;
   var imgHref = document.getElementById("imgHref");
   if(Style[1]<(mainHeight-10))
      showDiv.style.marginTop = (mainHeight-Style[1])/2+"px";
   else
      showDiv.style.marginTop = "";
	
	if(document.all){
      showDiv.filters.blendTrans.apply();
      showDiv.filters.blendTrans.play();
   }
	
	imgHref.href = imgLink[i];
	imgHref.target = "_blank";  //add by tense
   showDiv.width = Style[0];
   showDiv.height = Style[1];
   showDiv.src=imgUrl[i];
}
function dealStyle(id,type,pause){
   var obj = document.getElementById(id);
   if(type){
      switch(id){
         case "Photos_Stop":
         var clip = "rect(96px 45px 112px 30px)";
         var left = "-30px";
         break;
         case "Photos_Previous":
         var clip = "rect(80px 75px 96px 50px)";
         var left = "-50px";
         break;
         case "Photos_Play":
         if(pause){
            var clip = "rect(32px 72px 56px 48px)";
            var left = "-48px";
            var top = "-32px";
         }
         else{
            var clip = "rect(56px 72px 80px 48px)";
            var left = "-48px";
            var top = "-56px";
         }
         break;
         case "Photos_Next":
         var clip = "rect(16px 75px 32px 50px)";
         var left = "-50px";
         break;
         case "Photos_Settings":
         var clip = "rect(0px 72px 16px 48px)";
         var left = "-48px";
         break;
      }
   }
   else{
      switch(id){
         case "Photos_Stop":
         var clip = "rect(96px 60px 112px 45px)";
         var left = "-45px";
         break;
         case "Photos_Previous":
         var clip = "rect(80px 100px 96px 75px)";
         var left = "-75px";
         break;
         case "Photos_Play":
         if(pause){
            var clip = "rect(32px  96px 56px 72px)";
            var left = "-72px";
            var top = "-32px";
         }
         else{
            var clip = "rect(56px 96px 80px 72px)";
            var left = "-72px";
            var top = "-56px";
         }
         break;
         case "Photos_Next":
         var clip = "rect(16px 100px 32px 75px)";
         var left = "-75px";
         break;
         case "Photos_Settings":
         var clip = "rect(0px 96px 16px 72px)";
         var left = "-72px";
         break;
      }
   }
   obj.childNodes[0].style.clip = clip;
   obj.childNodes[0].style.left = left;
   if(top)
      obj.childNodes[0].style.top = top;
}
function showToolBar(){
   onMain = 1;
   var toolBar = document.getElementById("toolBox");
   if(toolBar.style.visibility=="hidden") toolBar.style.visibility = "visible";
   if(curToolPos < 100){
      curToolPos += 10;
      if(document.all){
         toolBar.style.filter = "alpha(opacity="+curToolPos+")";
      }
      else{
         toolBar.style.opacity = curToolPos/100;
      }
      clearTimeout(FadingTool);
      FadingTool = null;
      ShowingTool = setTimeout(function(){showToolBar();},1);
   }
   else{
      clearTimeout(ShowingTool);
      ShowingTool = null;
      return true;
   }
}
function hidToolBar(){
   onMain = null;
   var toolBar = document.getElementById("toolBox");
   var speedDiv = document.getElementById("setSpeedDiv");
   if(speedDiv)
      return false;
   if(curToolPos > 0){
      curToolPos -= 10;
      if(document.all){
         toolBar.style.filter = "alpha(opacity="+curToolPos+")";
      }
      else{
         toolBar.style.opacity = curToolPos/100;
      }
      clearTimeout(ShowingTool);
      ShowingTool = null;
      FadingTool = setTimeout(function(){hidToolBar();},1);
   }
   else{
      toolBar.style.visibility = "hidden";
      clearTimeout(FadingTool);
      FadingTool = null;
      return true;
   }
}
function showSetDiv(event){
   var Div = document.createElement("DIV");
   var Str = "";
   var speed = document.getElementById("speedNow");
   var obj = document.getElementById("setSpeedDiv");
	var slow = document.getElementById("slowWord").value;
	var mid = document.getElementById("midWord").value;
	var fast = document.getElementById("fastWord").value;
	var blankImg = document.getElementById("blankImg").value;
	var speedImg = document.getElementById("speedImg").value;
   if(obj){
      obj.parentNode.removeChild(obj);
   }
   document.body.appendChild(Div);
	Div.style.width = "50px";
   Div.style.height = "60px";
	if(event.pageX || event.pageY){
		Div.style.left = event.pageX+"px";
   	Div.style.top = event.pageY-65+"px";
	}
	//modify by tense
	else{
		Div.style.left = event.clientX + document.documentElement.scrollLeft - document.body.clientLeft + "px";
		if (document.body.scrollTop) {
			topPosition = document.body.scrollTop;
		}
		else if(document.documentElement.scrollTop) {
			topPosition = document.documentElement.scrollTop;
		}
		else {
			topPosition = 0;
		}
		Div.style.top = event.clientY + topPosition - document.body.clientTop -65 + "px";  
   //	Div.style.top = event.clientY + document.documentElement.scrollTop - document.body.clientTop - 65 + "px";
   }
	//modify by tense
	Div.style.position = "absolute";
   Div.className = "setDiv";
   Div.onmouseover = function() {onWin = 1;}
   Div.onmouseout = function() {onWin = null;}
   Str += "<div><a class=\"setSpeed\" hidefocus=\"true\" onclick=\"setSpeed(4000);\"><span><img id = \"Speed_4000\" src=\""+blankImg+"\"></span><span>"+slow+"</span></div>";
   Str += "<div><a class=\"setSpeed\" hidefocus=\"true\" onclick=\"setSpeed(6000);\"><span><img id = \"Speed_6000\" src=\""+blankImg+"\"></span><span>"+mid+"</span></div>";
   Str += "<div><a class=\"setSpeed\" hidefocus=\"true\" onclick=\"setSpeed(8000);\"><span><img id = \"Speed_8000\" src=\""+blankImg+"\"></span><span>"+fast+"</span></div>";
   Div.innerHTML = Str;
   var speedObj = document.getElementById("Speed_"+speed.value);
   speedObj.src = speedImg;
   Div.id = "setSpeedDiv";
}
function setSpeed(num){
   var speed = document.getElementById("speedNow");
   var obj = document.getElementById("setSpeedDiv");
   if(obj){
      obj.parentNode.removeChild(obj);
   }
   ScrollSpeed = num;
   speed.value = num;
   if(Scrolling){
      clearInterval(Scrolling);
      Scrolling = null;
      Scrolling = setInterval('goNext()',ScrollSpeed);
   }
}
document.documentElement.onmousedown= function() {
   var obj = document.getElementById("setSpeedDiv");
   if (!onWin && obj){
      document.body.removeChild(obj);
      if(!onMain)
         hidToolBar();
   }
}