//Initialize the base and the number of pics to display
var base=0, display=4;

function dispSlideShow()
  {
  // The big picture that will change when thumbnail is clicked
  document.write('<img id=\"bigpic\" src=\"' + folder + pic[0][1] + '\" width=\"600\" height=\"500\"><br><br>');

  // The Green Left Arrow used to control the thumbnails


  // Display the thumbpics
  for (i = 0; i < display; i++)
    {
    document.write('<a onClick=\"showpic(' + i + ');\"><img id=\"thmid'+ i +'\" src=\"' + folder + pic[i%pic.length][0] + '\" width=\"'+ w + '\" height=\"' + h + '\" alt=\"Pic' + (i+1) + '\"></a>');
    }

  document.write('<br><a onClick=\"scrollleft();\"><img src=\"greenarrowleft.png\" width=\"80\" height=\"54\" alt=\"greenarrowleft\"></a> &nbsp;');
  document.write('<a onClick=\"scrollright();\"><img src=\"greenarrowright.png\" width=\"80\" height=\"54\" alt=\"greenarrowright\"></a>');
  }// End dispSlideShow

// Used to show the big picture
function showpic(n)
  {
  document.getElementById('bigpic').src= folder + pic[(base+n)%pic.length][1];
  }

// Used to scrolleft
function scrollleft()
  {
  base--;
  if (base < 0) base += pic.length;
  for (i=0; i < display; i++)
    {
    document.getElementById('thmid'+ i).src= folder + pic[(base+i)%pic.length][0];
    document.getElementById('thmid'+ i).alt= "Pic" + ((base + i)%pic.length + 1);
    }
  }

// Used to scrollright
function scrollright()
  {
  base++;
  base%=pic.length;
  for (i=0; i < display; i++)
    {
    document.getElementById('thmid'+ i).src= folder + pic[(base+i)%pic.length][0];
    document.getElementById('thmid'+ i).alt= "Pic" + ((base + i)%pic.length + 1);
    }
  }

// Proload Slideshow pictures
function preloadslide()
  {
  for (i=0; i<pic.length; i++)
    {
    var preloadimg = new Image();
    preloadimg.src = folder + pic[i][0];
    //var preloadimg = new Image();
    //preloadimg.src = folder + pic[i][1];
    }
  }