function opacity(id, opacStart, opacEnd, millisec) { 
    //speed for each frame 
    var speed = Math.round(millisec / 100); 
    var timer = 0;

    //determine the direction for the blending, if start and end are the same nothing happens 
    if(opacStart > opacEnd) { 
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) { 
        for(i = opacStart; i <= opacEnd; i++) 
            {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); 
            timer++;
        }
    }
}

//change the opacity for different browsers 
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    if(opacity > 0) {
      object.visibility = "visible";
      object.opacity = (opacity / 100);
      object.MozOpacity = (opacity / 100);
      object.KhtmlOpacity = (opacity / 100);
      object.filter = "alpha(opacity=" + opacity + ")";
    } else {
      object.visibility = "hidden";
    }
}

//Highlight a link on the page selector
function highlightPageLink(elementId,mouseIsOver) {
  var thisContainer = document.getElementById(elementId + "_linkContainer");
  var thisLink = document.getElementById(elementId + "_link");
  if(mouseIsOver) {
    thisContainer.style.borderColor = "#979fa2";
    thisContainer.style.borderWidth = "1px";
    thisContainer.style.borderStyle = "solid";
  } else {
    thisContainer.style.borderWidth = "1px";
    thisContainer.style.borderColor = "white";
  }
}

//Get a dress image
function showDress(dressCode) {
  //Show image loading panel
  document.getElementById("dressImage_1").style.display = "none";
  document.getElementById("imageLoadingPanel").style.visibility = "visible";
  //Disable image next/previous buttons
  document.getElementById("prevImage_link").className = "pageLinkDeactivated";
  document.getElementById("nextImage_link").className = "pageLinkDeactivated";
  for(var c = 2; c <= totalImageCount; c++) {
    //re-hide all images,thumbnails and captions
    document.getElementById("dressImage_" + c).style.visibility = "hidden";
    document.getElementById("dressThumbnail_" + c).style.display = "none";
    document.getElementById("dressImageCaption_" + c).style.display = "none";
  }
  var firstImage = document.getElementById("dressImage_1");
  firstImage.style.visibility = "visible";
  firstImage.style.opacity = 1;
  firstImage.style.MozOpacity = 1;
  firstImage.style.KhtmlOpacity = 1;
  firstImage.style.filter = "alpha(opacity=100)";
  document.getElementById("dressThumbnail_1").style.display = "block";
  document.getElementById("dressImageCaption_1").style.display = "block";
  //reset counts to 0
  currentlyShownDress = 1;
  totalImageCount = 0;
  //Get dress details from the web server
  getDressDescription(dressCode);
  getDressImages(dressCode);
}

function nextDressImage() {
  if(totalImageCount > 0) {
    if(currentlyShownDress < totalImageCount) {
      //Make current image div invisible and make new one visible
      switchDressImage(currentlyShownDress, currentlyShownDress + 1);
      //Switch captions
      document.getElementById("dressImageCaption_" + currentlyShownDress).style.display = "none";
      currentlyShownDress++;
      document.getElementById("dressImageCaption_" + currentlyShownDress).style.display = "block";
      //Update count field
      document.getElementById("imageCount").innerHTML = currentlyShownDress + " of " + totalImageCount;
      //Since there must be more than one dress, highlight previous image button
      document.getElementById("prevImage_link").className = "pageLink";
      //If we're at the last image in the set, de-highlight next image button
      if(currentlyShownDress == totalImageCount)
        document.getElementById("nextImage_link").className = "pageLinkDeactivated";
    }
  }
}

function prevDressImage() {
  if(totalImageCount > 0) {
    if(currentlyShownDress > 1) {
      //Make current image div invisible and make new one visible
      switchDressImage(currentlyShownDress, currentlyShownDress - 1);
      document.getElementById("dressImageCaption_" + currentlyShownDress).style.display = "none";
      currentlyShownDress--;
      document.getElementById("dressImageCaption_" + currentlyShownDress).style.display = "block";
      //Update count field
      document.getElementById("imageCount").innerHTML = currentlyShownDress + " of " + totalImageCount;
      //If we've gone back to the first image, de-highlight previous button
      if(currentlyShownDress == 1)
        document.getElementById("prevImage_link").className = "pageLinkDeactivated";
      //There must be at least one dress after this one, so highlight next button
      document.getElementById("nextImage_link").className = "pageLink";
    }
  }
}

//Switch dress images by fading in/out.  Tasty.
function switchDressImage(oldDressIndex,newDressIndex) {
  //Fade in/out thumbnails
  document.getElementById("dressThumbnail_" + oldDressIndex).style.display = "none";
  document.getElementById("dressThumbnail_" + newDressIndex).style.display = "block";
  //Fade in/out main images
  opacity("dressImage_" + oldDressIndex,100,0,600);
  opacity("dressImage_" + newDressIndex,0,100,600);
}