Event.observe(window, "load", initialize, false);

function initialize(){
	runGallery();
	makeThumbnailsClickable();
}


function switchImage(objectId, newSrc) {
  newImage = new Image(); // create a new "image" object
  newImage.src = newSrc; // set it's src attribute to the image we're trying to switch to
  newImage.onload = function() { // when it's done loading run this block
    document.getElementById(objectId).setAttribute('src', newSrc); // swap the src attribute of the bigImage to the src of the new image
    fadeIn('bigImage'); // fade back in!
  }
}
function switchImage2(object, newSrc) {
  newImage = new Image(); // create a new "image" object
  newImage.src = newSrc; // set it's src attribute to the image we're trying to switch to
  newImage.onload = function() { // when it's done loading run this block
    object.parentNode.appendChild(newImage);
    object.parentNode.removeChild(object);
//    object.setAttribute('src', newSrc); // swap the src attribute of the bigImage to the src of the new image
//    fadeIn(object); // fade back in!
  }
}

function fadeOut(thingToFadeOut) {  // function to fade out
  new Effect.Opacity(thingToFadeOut, { duration: 1.0, transition: Effect.Transitions.linear, from: 1.0, to: 0.0 });
}
function fadeIn(thingToFadeIn) {  // function fo fade in
  new Effect.Opacity(thingToFadeIn, { duration: 1.0, transition: Effect.Transitions.linear, from: 0.0, to: 1.0 });
}

function switchSelected(selectedObject, listOfOtherItems) {
  for(var i=0;i<listOfOtherItems.length;i++) { // for each of the things in this list
    //alert("!");
    listOfOtherItems[i].className = listOfOtherItems[i].className.replace(/highlighted/,''); // set everything to "not selected"
  }
  selectedObject.parentNode.className += ' highlighted'; // set the appropriate thing to selected
}

function runGallery() {
  if(document.getElementById) { // Check for the DOM
    if((document.getElementById('galleryHolder'))&&(document.getElementById('bigImage'))) { // Check that our list of thumbnails exists and that the big image exists
      var thumbnailListItems = document.getElementById('galleryHolder').getElementsByTagName('li'); // Get the list items containing our thumbnails
      for(var i=0;i<thumbnailListItems.length;i++) {
        image = thumbnailListItems[i].getElementsByTagName('img')[0]; // Grab the image element
        link = thumbnailListItems[i].getElementsByTagName('a')[0]; // Grab the link containing the image element
        link.parentNode.appendChild(image); // Stick the image ahead of the link in the source
        link.parentNode.removeChild(link); // Delete the link altogether
        image.style.cursor = 'pointer'; // Still want a "pointy hand" cursor
        image.onclick = function() { 
          var thisSrc = this.src // Create a new variable containing the src of the image with which we're about to do the swap
          thisSrc = thisSrc.replace(/thumbnails\/thumb_/,'full_'); // Chop off the _tn because we want the big version
          switchSelected(this, thumbnailListItems); // Switch which image we're calling "selected"
          new Effect.Opacity('bigImage', { duration: 1.0, transition: Effect.Transitions.linear, from: 1.0, to: 0.0, afterFinish: function(){ switchImage('bigImage', thisSrc); }}); // whoa, big string of functions... does fade to transparency, image switch, then fades back from transparency
        }
      }
    }          
  }
}

function makeThumbnailsClickable() {
  if(document.getElementById) { 
    if((document.getElementById('moreImages'))&&(document.getElementById('productImageHolder').getElementsByTagName('img')[0])) { // Check that our list of thumbnails exists and that the big image exists
      if(document.getElementById('moreImages').getElementsByTagName('li')) {
        if(document.getElementById('moreImages').getElementsByTagName('li').length > 1) {
          document.getElementById('moreImages').style.display = "block";
          lis = document.getElementById('moreImages').getElementsByTagName('li');
          for(var i=0;i<lis.length;i++) {
            im = lis[i].getElementsByTagName('img')[0];
            preLdImg(im.src);
            im2 = im.cloneNode(true);
            a = document.createElement('a');
            a.href = "#";
            a.onclick = function() {
              bigImage = document.getElementById('productImageHolder').getElementsByTagName('img')[0];
              bigImage.src = this.getElementsByTagName('img')[0].src.replace(/thumbnail/ig, 'fullsize');
              return false;
            }
            a.appendChild(im2);
            im.parentNode.appendChild(a);
            im.parentNode.removeChild(im);
          }
        }
      }
    }
  }
}