﻿///Basic Parameter Parts
var imgdetails = new Object();

var slides_show_timer = new Array();  ///indicates the slides show speed of the images
slides_show_timer[0] = 1000;  
slides_show_timer[1] = 3000;
slides_show_timer[2] = 5000;

var thum_poptimer = 500;  ///the thumb div popup speed
var sort_timer = 500;     

var slidesshow_counter = 0; ///counting the sildes img index array
var tumb_counter =0;        ///counting the thumb img index array
var slides_show_speed = 1;  ///slides_show_timer index

var thumbshow_counter = 0;  
var thumbshow_timer = 1;    ///the thumb div showing speed (timer)
var thumbshow_adjuster = 5; ///the thumb div showing speed (height/timer)

var content_margin_counter = 0;
var content_margin = 0;  //the margin of the content div

var browser=navigator.appName;
var b_version=navigator.appVersion;

var table_width = 540; ///how many pixels will the thumb div moved
var total_width; 


var photostr = "photos/images/";  //Gallery photo path
var thumbstr = "photos/thumb/";  //Gallery Thumb path


///function parts

function startup()  //start up function (innitial parameters and start up time functions
{
	total_width = imgdetails.imgsrc.length*80+(imgdetails.imgsrc.length-2)*2+10; /// Total width of the pic_thum_content

	

	write_thumb();
	slidesshow();
	
	if (browser == "Microsoft Internet Explorer")
	{ 
		if (b_version.split("MSIE")[1].split(".")[0] == 6)
		{
			table_width = 270;
			total_width = (imgdetails.imgsrc.length*80+(imgdetails.imgsrc.length-2)*2+10)/2;
			//display_arrow = 150;
		}
	}

}


function slidesshowclick()   ///This function starts the slidesshow Auto play button 
{
    clearTimeout(slidestimer);
    slidesshow();
}

   
function slidesshow()   ///Starts slidesshow when pageload
{
	
    document.getElementById("imgshow_show_img").src = photostr + imgdetails.imgsrc[slidesshow_counter];
	document.getElementById("imgshow_text").innerHTML = imgdetails.text[slidesshow_counter];
	slidesshow_counter++;
	if (slidesshow_counter >= imgdetails.imgsrc.length )
	    slidesshow_counter = 0;
    slidestimer = setTimeout("slidesshow()", slides_show_timer[slides_show_speed]);
}


function write_thumb() //Put the pic thumb into the Thumb field when page load
{ 
	var thum_html = "<img src="+thumbstr+imgdetails.imgsrc[0]+" border=0 onmousedown=\"changepic(this)\" >";
	for (var i = 1; i < imgdetails.imgsrc.length ; i++)
	  {
	    thum_html = thum_html + "<img src="+thumbstr+imgdetails.imgsrc[i]+" border=0 onmousedown=\"changepic(this)\" class=\"imgshow_firstimg\">";
	  }

    document.getElementById("imgshow_pic_thumb_content").innerHTML = thum_html;
}


function changepic(obj) //change the slidesshow pic when click on the pic thumb
{
    document.getElementById("imgshow_show_img").src = photostr + obj.src.split("mb/")[1];
	obj.style.border = "1px solid #ccc";
	var parentnode = obj.parentNode;
	var mark;
       for ( i=0; i<parentnode.childNodes.length; i++ )
       {
	       if (parentnode.childNodes[i] != obj)
	          parentnode.childNodes[i].style.border = "none";
	      
		   if (parentnode.childNodes[i] == obj)
		      mark = i;
       }
      document.getElementById("imgshow_text").innerHTML = imgdetails.text[mark];
     
	  var getobj = document.getElementById("imgshow_pic_thumb_content");
	  for (i=0; i<getobj.childNodes.length ; i++ )
	  {
	       if (getobj.childNodes[i].src.split("mb/")[1] == obj.src.split("mb/")[1])
	          slidesshow_counter = i;
	  
	  }
      clearTimeout(slidestimer);
}

	
function stopplay() //stop slidesshow play
{
	 clearTimeout(slidestimer);
}

	
function play_pre_nex(obj) //play previous or next photo
{
	 if (obj == "pre" && slidesshow_counter>0)
         slidesshow_counter--;
	 else if (slidesshow_counter < imgdetails.imgsrc.length && obj == "nex")
	     slidesshow_counter++;

	 if (slidesshow_counter >= imgdetails.imgsrc.length )
	     slidesshow_counter = 0;
	 else if (slidesshow_counter < 0)
		 slidesshow_counter = imgdetails.imgsrc.length-1;

	 document.getElementById("imgshow_show_img").src = photostr+imgdetails.imgsrc[slidesshow_counter];
	 document.getElementById("imgshow_text").innerHTML = imgdetails.text[slidesshow_counter];
	

	 var getobj = document.getElementById("imgshow_pic_thumb_content");
	 for (i=0; i<getobj.childNodes.length ; i++ )
	 {
	   if (getobj.childNodes[i].src.split("mb/")[1] == imgdetails.imgsrc[slidesshow_counter])
	       changepic(getobj.childNodes[i]);
	 }
	 // alert(slidesshow_counter);
     if (slidesshow_counter%6 == 0 && slidesshow_counter != 0 && obj == "nex")
	       moveleft();
     if ((slidesshow_counter%6+1)%6 == 0 && obj == "pre")
           moveright();
		 
	clearTimeout(slidestimer);
}


function changeplayspeed(obj)  // change the slidesshow speed
{
    slides_show_speed = obj;
    clearTimeout(slidestimer);
	slidesshow();
}

function showthumb() //pop up the photo thumb field
{
    var thumb_field = document.getElementById("imgshow_pic_thumb"); 
	thumb_field.style.display = "block";
	thumb_field.style.height = thumbshow_counter;
    thumbshow_counter = thumbshow_counter+thumbshow_adjuster ;
    if (thumbshow_counter >= 125)
	  {
         clearTimeout(thumbshowtime);
		 document.getElementById("imgshow_showthumb_button").innerHTML = "<a href=\"javascript:void(0)\" class=\"imgshow_showthumb\" onclick=\"hiddenthumb()\" id=\"imgshow_showlink\" style=\"color:#FFFFFF\">Hide Thumb</a>";
	  }
    else
         thumbshowtime = setTimeout("showthumb()", thumbshow_timer);
}

function hiddenthumb() // hide the photo thumb field
{
     var thumb_field = document.getElementById("imgshow_pic_thumb"); 
     thumb_field.style.height = thumbshow_counter;
     thumbshow_counter = thumbshow_counter - thumbshow_adjuster;
     if (thumbshow_counter <= 0)
	    {
	      thumb_field.style.display = "none";
          clearTimeout(thumbhiddetime);
		  document.getElementById("imgshow_showthumb_button").innerHTML =  "<a href=\"javascript:void(0)\" class=\"imgshow_showthumb\" onclick=\"showthumb()\" id=\"imgshow_showlink\" style=\"color:#FFFFFF\">Show Thumb</a>";
		}
     else
         thumbhiddetime = setTimeout("hiddenthumb()", thumbshow_timer);
}

function moveleft() //Thumb field next page
{
    var obj = document.getElementById("imgshow_pic_thumb_content");
	var matchstr = "px";
	var matchstr2 = "pt";
	var px = new RegExp(matchstr);
	var pt = new RegExp(matchstr2);
	if (px.test(content_margin)== true)
      content_margin = content_margin.split("p")[0];
    if (pt.test(content_margin)== true)
      content_margin = content_margin.split("p")[0];
    
	document.getElementById("imgshow_right").style.display = "block";
	
	if ( content_margin > -total_width )
       {
         obj.style.marginLeft = content_margin_counter;
         content_margin_counter = content_margin_counter -10;
	          if (content_margin_counter + table_width  < content_margin)
	               {
	                  clearTimeout( content_margin_counter_timer_left)
	                  content_margin = obj.style.marginLeft;
	               }
	          else
                      content_margin_counter_timer_left = setTimeout("moveleft()", 1);
       }
 	if (content_margin <=  -total_width + table_width)
        document.getElementById("imgshow_left").style.display = "none";
}

function moveright()  //Thumb field previous page
{
    var obj = document.getElementById("imgshow_pic_thumb_content");
	var matchstr = "px";
	var matchstr2 = "pt";
	var px = new RegExp(matchstr);
	var pt = new RegExp(matchstr2);
	if (px.test(content_margin)== true)
      content_margin = content_margin.split("p")[0];
    if (pt.test(content_margin)== true)
      content_margin = content_margin.split("p")[0];
    
	document.getElementById("imgshow_left").style.display = "block";
	
	if (content_margin < 0)
		{  
           obj.style.marginLeft = content_margin_counter;
           content_margin_counter = content_margin_counter+10;
	           if (content_margin_counter - table_width  > content_margin)
	                {
	                   clearTimeout( content_margin_counter_timer_right)
	                   content_margin = obj.style.marginLeft;
	                }
	           else
                       content_margin_counter_timer_right = setTimeout("moveright()", 1);
        }

    if (content_margin >=  -table_width)
	      document.getElementById("imgshow_right").style.display = "none";
}

function hover_eff(obj)  //change the pic when hover the arrow images
{
     if (obj == 1)
	   document.getElementById("imgshow_left").src = "images/lefton.gif";
     else if (obj == 2)
       document.getElementById("imgshow_right").src = "images/righton.gif";
	 else if (obj == 3)
       document.getElementById("imgshow_left").src = "images/left.gif";
	 else if (obj == 4)
       document.getElementById("imgshow_right").src = "images/right.gif";
}


function thisfocus(obj)  //change the color and font-weight when the Category is chosen (Autoplay/Stop  Slow/Medium/Fast  Prev/Next)
{
    var grandp = obj.parentNode.parentNode;
	var grandc;
    for (i=0;i<grandp.childNodes.length;i++ )
	{
	   try{
             grandc = grandp.childNodes[i].childNodes[0];
             grandc.style.color = "black";
          }
	   catch (e){}
    }
	obj.style.color = "orange";
	
  }
/*-----
Div id used
container: The container for everything
pic_container: field for the main slides show
show_img: the img id for the slide show img
toolbar: the field of the tools (Thumb bar, action bar etc)
thumb_container: the outer thumb field, has fixed size and hidden overflow property
pic_thumb: the middle thumb field, has fixed size and hidden overflow property
pic_thumb_content: inner thumb container which contain the really pic thumbs (which is inside the pic_thumb)
action_bar: The control panel
text: The text field of the Pic
showthumb_button: The Hide/Show Thumb button
------*/