/*
  Filename: thumbs.js
  
  Description:
  ------------
  
    This file is for the rotation of thumbnail images using
  Javascript.  The images must be specified in an array and are
  automatically loaded into the document. See the example below 
  for more details.
  
                        Written by Dallas Vogels, 2004-07-16
  Example:
  --------

  <html>
  
  <head>
  <title>Javascript Image Test</title>
  <script type="text/javascript" src="thumbs.js">
  </script>
  <script type="text/javascript">
    // load the images, make this global
    p_arrImages = new Array("images/1.png","images/2.png","images/3.png","images/4.png","images/5.png","images/6.png","images/7.png");
    // number of thumbs to show
    p_intShow = 5;
    // base url for image popup
    p_strURLprefix = "moreinfo.php?picture=";
  </script>
  </head>
  
  <body onLoad="preloadImages(p_arrImages)">
  
  <script type="text/javascript">
    output_thumbs(p_arrImages, p_intShow);
  </script>
  
  </body>
  
  </html>  
*/

function preloadImages(arrImages) {
  var d=document; 
  if (d.images) { 
    if(!d.p) {
      d.p=new Array();
    }
    var i,j=d.p.length;
    //a=preloadImages.arguments;
    //alert(arrImages.length);
    for(i=0; i<arrImages.length; i++) {
      d.p[j]=new Image; 
      d.p[j++].src=arrImages[i];
    }
  }
}

function thumb_move(strDirection, seed, arrImages, arrImageIds, intShow, strURLprefix) {
  // init the increment   
  intIncrement = 0;
  
  // check to see direction
  if (strDirection == "right") {
    // move pics to right
    intIncrement = intIncrement + 1;
  }
  if (strDirection == "left") {
    // move pics to left
    intIncrement = intIncrement -1;
  }
    
  // loop through the thumbs
  for (i=0; i<intShow; i++) {
    // set the new seed value, all images start from thumb 0
    intNewValue = document.images["img_thumb_"+i].status + intIncrement;
    
    // determine if the image count has gone below the leftmost threshold (aka thumb 0)
    if (intNewValue < 0) {
      // wrap the images
      intNewValue = arrImages.length - 1;
    }
    // determine if the image count has gone above the rightmost threshold (aka thumb intShow-1)
    if (intNewValue > arrImages.length - 1) {
      // wrap the images
      intNewValue = 0;
    }
    
    /*
    index = i + seed - 1;
      
    if(index >= arrImages.length) {
    	index = index - arrImages.length;
    }*/
      
    
    // show the new image
    document.images["img_thumb_"+i].src = arrImages[intNewValue];
    // init the status value
    document.images["img_thumb_"+i].status = intNewValue;
    // set the href
    //alert(document.getElementById("link_thumb_"+i).href);
    document.getElementById("link_thumb_"+i).href = generateURL(strURLprefix,arrImageIds[intNewValue]);
  }
}

function output_thumbs(seed, arrImages, arrImageIds, intShow, strURLprefix, strBtnRoot) {
  
  intNumThumbs=0;
    
  if (arrImages.length > 1 && intShow > 0) {
    document.write("<table border=\"0\">");
    document.write("<tr>");
    if (arrImages.length > intShow) {
      document.write("  <td valign=\"middle\">");
      document.write("    <a href=\"javascript:thumb_move('left', p_seed, p_arrImages, p_arrImageIds, p_intShow, p_strURLprefix)\"><img src=\""+strBtnRoot+"left.gif\" id=\"img_arrow_left\" border=\"0\" \/><\/a>");
      document.write("  </td>");
    }  
    // initialize the output
    if (arrImages.length > intShow) {
      intNumThumbs = intShow;
    } else {
      intNumThumbs = arrImages.length;
    }
    
    for (i=0; i<intNumThumbs; i++) {
      document.write("  <td valign=\"middle\">");
      index = i + seed - 1;
      
      if(index >= arrImages.length) {
      	index = index - arrImages.length;
      }
      
      document.write("    <a href=\""+generateURL(strURLprefix,arrImageIds[index])+"\" id=\"link_thumb_"+i+"\"><img src=\""+arrImages[index]+"\" border=\"0\" id=\"img_thumb_"+i+"\" width=\"64\" \/></a>");
      document.write("  <\/td>");
    }
    
    if (arrImages.length > intShow) {
      document.write("  <td valign=\"middle\">");
      document.write("    <a href=\"javascript:thumb_move('right', p_seed, p_arrImages, p_arrImageIds, p_intShow, p_strURLprefix)\"><img src=\""+strBtnRoot+"right.gif\" id=\"img_arrow_right\" border=\"0\" \/></a>");
      document.write("  <\/td>");
    }
    document.write("<\/tr>");
    document.write("<\/table>");
  }

  // init the images
  for (i=0; i<intNumThumbs; i++) {
  	index = i + seed - 1;
      
      if(index >= arrImages.length) {
      	index = index - arrImages.length;
      }
    document.images["img_thumb_"+i].status = index;
  }    
}


function generateURL(strURLprefix,image) {
	return strURLprefix.replace("<image_id>", image);
}

