var pageReady=false;

var redirectTarget;

function initNav()
{  
  oNavSelected = document.getElementById("NavSelected");
  pageReady = true;  
}

function nOver(obj)
{
  if (pageReady && obj)
  {
    if (oNavSelected != null)
    {
    oNavSelected.style.backgroundColor = '#ccc';
    oNavSelected.style.color = '#000';
  	oNavSelected.style.borderColor = '#000';
    }
    obj.style.backgroundColor = '#f2f2f2';
    obj.style.color = '#03c';
  	obj.style.borderColor = '#03c';
  }
}

function nOut(obj)
{
  if (pageReady && obj)
  {
    obj.style.backgroundColor = '#ccc';
    obj.style.color = '#000';
  	obj.style.borderColor = '#000';
    
    if (oNavSelected != null)
    { 
    oNavSelected.style.backgroundColor = '#f2f2f2';
    oNavSelected.style.color = '#03c';
  	oNavSelected.style.borderColor = '#03c';
    }
  }
}

function tOver(obj)
{
  if (pageReady && obj)
  {
    var oThumb = document.getElementById("oThumb");
    var oThumbSelected = oThumb.cells[currentImage].firstChild;

    if (oThumbSelected != null)
    { 
      oThumbSelected.style.backgroundColor = '#999';
    }
    obj.style.backgroundColor = '#03c';
  }
}

function tOut(obj)
{
  if (pageReady && obj)
  {
    var oThumb = document.getElementById("oThumb");
    var oThumbSelected = oThumb.cells[currentImage].firstChild;
    
    obj.style.backgroundColor = '#999';
    if (oThumbSelected != null)
    { 
      oThumbSelected.style.backgroundColor = '#03c';
    }
  }
}

function bOver(obj){obj.style.borderColor='#03c';obj.style.color='#06f';}
function bOut(obj){obj.style.borderColor='#666';obj.style.color='#03c';}

function nextImage()
{ 
  if (pageReady)
  {
    var oThumb = document.getElementById("oThumb");
    var oThumbSelected = oThumb.cells[currentImage].firstChild;
    var iLength = oThumb.cells.length;
    
    //check to see if the current image is the last image.
    if (currentImage == iLength-2)
    {
      chgImg(0);
    } else {
      chgImg(currentImage+1);
    }    
  }
}

function previousImage()
{
  if (pageReady)
  {
    var oThumb = document.getElementById("oThumb");
    var oThumbSelected = oThumb.cells[currentImage].firstChild;
    var iLength = oThumb.cells.length;
    
    //check to see if the current image is the first image.
    if (currentImage == 0)
    {
      chgImg(iLength-2);
    } else {
      chgImg(currentImage-1);
    }    
  }
}

function chgImg(newImagePosition)
{
  if (pageReady)
  {
    if (imageArray[newImagePosition])
    {
      if (imageArray[newImagePosition][imageSize])
      {
        var filename = imageArray[newImagePosition][imageSize]
      } else {
        for (var i=0;i < imageArray[newImagePosition].length;i++)
        {
          if (imageArray[newImagePosition][i]!=="")
          {
            imageSize=i;
            var filename = imageArray[newImagePosition][imageSize];
            break;
          }
        }      
      }    
    } else {
      alert("Error: Image Array has not been created")
      return;
    }
      
    var newImageSrc = "/img/" +  filename;
    var height =  heightArray[imageSize];
    var width = widthArray[imageSize];
  
    var oImgCell = document.getElementById("imgCell");
    var str = '<img src="' + newImageSrc + '" id="ImgSelected" width="' +width +'" height="'+height+'" style="background-color:#666;">';
    oImgCell.innerHTML = str;
    
    var oThumb = document.getElementById("oThumb");
    var oThumbSelected = oThumb.cells[currentImage].firstChild;
    // dim old image
    oThumbSelected.style.backgroundColor = '#999';
    
    currentImage = newImagePosition; // set global var
    var oThumbSelected = oThumb.cells[currentImage].firstChild;
    // hilight new image
    oThumbSelected.style.backgroundColor = '#03c';
    setSizeButtons();    
    // show content
    setContentVisibility(currentImage);
  }
}

function setContentVisibility(num)
{
  var divArray = document.getElementsByTagName("DIV");
  for (var i=0;i<divArray.length;i++)
  {
    var oDiv = divArray[i];
    if (oDiv.className=="content")
    {
      if (oDiv.id == "content" + num)
      {
        oDiv.style.display="block";
      } else {
        oDiv.style.display="none";
      }
    }
  }  
}

function chgSize(newSize)
{
  if (pageReady)
  {
    if (imageArray[currentImage])
    {
      if (imageArray[currentImage][newSize])
      {
        imageSize =  newSize;
        chgImg(currentImage);    
      } else {
        alert("Error: An image of that size is not available. Please Try a different size")
      }
    } else {
      alert("Error: Image Array has not been created")
    }
  }
}

function setSizeButtons()
{
  if (pageReady)
  {
    // set size button visibility
    var  arrayLength = imageArray[currentImage].length;
    for(var i=0;i<arrayLength;i++)
    {
      var button;
      switch(i)
      {
        case 0:
          button = document.getElementById("smallBtn");
        break;
        case 1:
          button = document.getElementById("mediumBtn");
        break;
        case 2:
          button = document.getElementById("largeBtn");
        break;
        case 3:
          button = document.getElementById("xlargeBtn");
        break;
      }
      
      if (imageArray[currentImage][i]=="")
      {
        button.style.display = "none";
      } else {
        button.style.display = "";
      }
    }
    
    // set size button highlight
    var oSmallBtn = document.getElementById("smallBtn");
    var oMediumBtn = document.getElementById("mediumBtn");
    var oLargeBtn = document.getElementById("largeBtn");
    var oXlargeBtn = document.getElementById("xlargeBtn");
        
    //reset buttons
    oSmallBtn.style.backgroundColor = "#f2f2f2";
    oMediumBtn.style.backgroundColor = "#f2f2f2";
    oLargeBtn.style.backgroundColor = "#f2f2f2";
    oXlargeBtn.style.backgroundColor = "#f2f2f2";
    
    switch(imageSize)
    {
      case 0:
      oSmallBtn.style.backgroundColor = "#fff";
      break;      
      case 1:
      oMediumBtn.style.backgroundColor = "#fff";
      break;
      case 2:
      oLargeBtn.style.backgroundColor = "#fff";
      break;
      case 3:
      oXlargeBtn.style.backgroundColor = "#fff";
      break;      
    }
  }
}