var AllOrigSrc= new Array();
var ImgThumTagHtml= new Array();
var IndexShiftImg=0;
var indexPic=0;
var ScrollBar=true;
var FirstTime=true;
var MainDiv="";
var HeightBox="";
var WidthBox="";


function SetThumImg()
{
   HeightBox =document.all["hid_Heightbox"].value; 
   WidthBox =document.all["hid_widthtbox"].value;
   var Images= document.all["hid_AllImgSrc"].value; 
   AllImgID= new Array();
   AllThumSrc= new Array();
   AllCaptionImg= new Array();
   while (Images != "")
      {
        d=Images.indexOf(";");
        tempImg = Images.substring(0,d<0 ? Images.length:d);
        AllOrigSrc[indexPic]= tempImg.substring(0,tempImg.indexOf(','));
	    AllImgID[indexPic] = AllOrigSrc[indexPic].substring(AllOrigSrc[indexPic].lastIndexOf('/')+1, AllOrigSrc[indexPic].lastIndexOf('_'));
	    tempThumSrc = AllOrigSrc[indexPic].substring(0,AllOrigSrc[indexPic].lastIndexOf('_')); 
	    AllThumSrc[indexPic] =tempThumSrc +"_thum.jpg"; 
	    dd= tempImg.lastIndexOf(",");
	    AllCaptionImg[indexPic]= tempImg.substring(dd+1,tempImg.length); 
	    // Creat thum Image Box     // style='margin-top:"+ ((0.03)*HeightBox)+"px'
	    ImgThumTagHtml[indexPic]= "<img src='"+ AllThumSrc[indexPic]+"'  class='MarginImg'  id=img_"+ AllImgID[indexPic] +" OnClick='SetOrigImg("+ indexPic +")' alt='"+ AllCaptionImg[indexPic]+"'/> </td><td></td> "; 
	    Images =Images.substring(d+1,Images.length);   
	    indexPic++;
	    	    
      }
   // Creat Main Image Box and Defult is First Image (indexPic=0)
   defultIndex =0; 
   document.all["origImgs"].src = AllOrigSrc[defultIndex]; 
   MoveScrollL= false;
   MoveScrollR= false;   //style='height: " +((1.2)*HeightBox)+ " ' 
   MainDiv="<div id='InThumDiv'   class='ScrollThumDiv'  align='center' >";   
   MainDiv =MainDiv+" <table  style='margin:5px;'> <tr> "; 
   SetKaderSelectedImg(defultIndex,MoveScrollL,MoveScrollR);
   
    
}



function SetOrigImg(indexImg)
{
  
  document.all["origImgs"].src = AllOrigSrc[indexImg];
  document.all["lblCaptionImg"].innerText = AllCaptionImg[indexImg];
  if ( indexImg < (indexPic-1) )
          document.all["InThumDiv"].scrollLeft = document.getElementById("td"+(indexImg+1)).offsetLeft;
  else
          document.all["InThumDiv"].scrollLeft = document.getElementById("td"+indexImg).offsetLeft;
  
  IndexShiftImg = indexImg;
  MoveScrollL= false;
  MoveScrollR= false; 
  SetKaderSelectedImg(IndexShiftImg,MoveScrollL,MoveScrollR);
}



function SetKaderSelectedImg(indexImg, MoveScrollL,MoveScrollR )
{
   thumImageBoxs="";
   sLeft=0;  
   if (!(FirstTime))
         sLeft= document.all["InThumDiv"].scrollLeft;
       
   for (i=0;i<indexPic; i++)
    {
      if (i== indexImg)  
            divHtmltagImg = "<td  id=td" + i + " style='BORDER-RIGHT:2px solid; BORDER-TOP:2px solid;  BORDER-BOTTOM: 2px solid; BORDER-LEFT: 2px solid; BACKGROUND-COLOR: gainsboro;  BORDER-COLOR: #3399cc;' align='center'>";
	  else
	        divHtmltagImg = "<td id=td" + i + " style='BACKGROUND-COLOR: gainsboro' align='center'>";   
	  thumImageBoxs = thumImageBoxs+divHtmltagImg+ImgThumTagHtml[i];  
    }
   
   document.all["ThumDiv"].innerHTML = MainDiv+ thumImageBoxs+ "</tr> </table></div> ";  
 
  for (j=0; j<indexPic ; j++)   
   {
     if ( document.getElementById("img_"+ AllImgID[j])["height"] > ( 0.85*HeightBox) )    
           {
              document.getElementById("img_"+ AllImgID[j])["height"]= (0.8)*HeightBox; 
           }
     
    
   }
   
 if ((ScrollBar)&(!(FirstTime)))
 {
   
   if (MoveScrollL)
       
        document.all["InThumDiv"].scrollLeft=sLeft-((0.8)*WidthBox);   
        
   else if (MoveScrollR)
     
       document.all["InThumDiv"].scrollLeft=sLeft+((0.8)*WidthBox);  
      
   else
       document.all["InThumDiv"].scrollLeft=sLeft; 
 }
   
  // to set scroll right in firefox, it set with offsetLeft of first image (td0)      
 if (FirstTime)
     {
      document.all["InThumDiv"].scrollLeft =  document.getElementById("td0").offsetLeft;
     }
     
  FirstTime=false;
  if( document.all["origImgs"].width > 500)
       document.all["origImgs"].width = 500;
 } 


  
 
function ShiftLeft()
{
 
  if (IndexShiftImg < (indexPic-1))
  {
    IndexShiftImg++;
    document.all["origImgs"].src = AllOrigSrc[IndexShiftImg];
    document.all["lblCaptionImg"].innerText = AllCaptionImg[IndexShiftImg];
  }
  
  document.all["InThumDiv"].scrollLeft = document.getElementById("td"+IndexShiftImg).offsetLeft;
  
  MoveScrollL=true ;
  MoveScrollR= false; 
  SetKaderSelectedImg(IndexShiftImg,MoveScrollL,MoveScrollR);
 
}




function ShiftRight()
{
  document.all["InThumDiv"].scrollLeft = document.getElementById("td"+ IndexShiftImg ).offsetLeft;
  if (IndexShiftImg >0)
   {
    IndexShiftImg--;
    document.all["origImgs"].src = AllOrigSrc[IndexShiftImg];
    document.all["lblCaptionImg"].innerText = AllCaptionImg[IndexShiftImg];
   }
  MoveScrollL= false; 
  MoveScrollR= true;
  SetKaderSelectedImg(IndexShiftImg,MoveScrollL,MoveScrollR);
  
 
}

function checkHeight()  // For Mozilla 
{
  for (j=0; j<indexPic ; j++)   
   {
     if ( document.getElementById("img_"+ AllImgID[j])["height"] > ( 0.85*HeightBox) )    
           {
              document.getElementById("img_"+ AllImgID[j])["height"]= (0.8)*HeightBox; 
           }
   }
      document.all["InThumDiv"].scrollLeft =  document.getElementById("td0").offsetLeft;
        
}