// Need to expose an identifier so we can pass an array of URLs
//
// Right now we just kind of plunk the images down.
// If we need to set margins based on the image size, this is the place to do it.
//
function ImageNavigator(imgList,imageDir) {
 //alert("In ImageNavigator: imageList = "+imgList+"-- imageDir="+imageDir);
 
  var leftActiveURL= imageDir+'images/imgleft-enabled.jpg';
  //alert("leftActiveURL="+leftActiveURL);
  var leftInactiveURL=imageDir+'images/imgleft-disabled.jpg';
  var rightActiveURL=imageDir+'images/imgright-enabled.jpg';
  var rightInactiveURL=imageDir+'images/imgright-disabled.jpg';

  var imgleft=null;
  var imgright=null;
  var imgtarget=null;

  var i=0;
  var productImages=new Array();

  var buttonImages= {
    'left': {
      'active':new Image(),
      'inactive':new Image()
    },
    'right': {
      'active':new Image(),
      'inactive':new Image()
    }
  };

  function addEvent(name,obj,f) {
    if (window.attachEvent) {
      obj.attachEvent("on"+name,f);
    } else if (window.addEventListener) {
      obj.addEventListener(name,f,false);
    }
  }

  // I could have declared both on an off states in the HTML and swapped visibility.
  // I ended up swapping the image and adding and removing events. Probably less overhead
  // the other way, but it's just an image viewer, and it's written now.
  function removeEvent(name,obj,f) {
    if (window.detachEvent) {
      obj.detachEvent("on"+name,f);
    } else if (window.addEventListener) {
      obj.removeEventListener(name,f,false);
    }
  }

  // Action for when the left button is clicked
  function goLeft() {
    //alert(" in goleft method");
    i--;
     //alert(" i = "+i);
     //alert("product images length ="+productImages.length);
    if (i==0) {
      imgleft.src=buttonImages.left.inactive.src;
      removeEvent('mousedown',imgleft,goLeft);
      imgleft.style.cursor='default';
    }
    if (i==(productImages.length-2)) {
      addEvent('mousedown',imgright,goRight);
      imgright.src=buttonImages.right.active.src;
      imgright.style.cursor='pointer';
    }

    // If I just swap src values, the image dimensions must all be identical, or else
    // all images beyond the first may be contorted.
    var img=document.createElement('img');
    img.src=productImages[i].src;
    imgtarget.parentNode.replaceChild(img,imgtarget);
    imgtarget=img;
  }

  // Action for when the right button is clicked
  function goRight() {
    //alert(" in goright method");
    i++;
    
    //alert(" i = "+i);
    //alert("product images length ="+productImages.length);
     
    if (i==(productImages.length-1)) {
      imgright.src=buttonImages.right.inactive.src;
      removeEvent('mousedown',imgright,goRight);
      imgright.style.cursor='default';
    }
    if (i==1) {
      addEvent('mousedown',imgleft,goLeft);
      imgleft.src=buttonImages.left.active.src;
      imgleft.style.cursor='pointer';
    }
    var img=document.createElement('img');
    img.src=productImages[i].src;
    imgtarget.parentNode.replaceChild(img,imgtarget);
    imgtarget=img;
  }

  // Load all images into an array.
  // If the array has more than one member, attach event to the go right button.
  // and make the go right button look active.
  function init() {
    imgleft=document.getElementById('imgleft');
    imgright=document.getElementById('imgright');
    imgtarget=document.getElementById('pimagetarget');

    // No point in loading anything if we don't have some prerequisite elements
    if (imgleft && imgright && imgtarget) {
      // An array isn't a primitive type in javascript, but has a type
      // of 'object' with some prototyped methods and attributes.
      //
      // All we really want to do is differentiate it from "null" which
      // also has a type of 'object'.
      if ((typeof imgList == 'object') && (typeof imgList.length == 'number') && (imgList.length > 0)) {
        for (var i=0;i<imgList.length;i++) {
          var s=new Image();
          s.src=imgList[i];
          productImages.push(s);
        }

        if (productImages.length > 1) {
          buttonImages.left.active.src=leftActiveURL;
          buttonImages.left.inactive.src=leftInactiveURL;
          buttonImages.right.active.src=rightActiveURL;
          buttonImages.right.inactive.src=rightInactiveURL;

          addEvent('mousedown',imgright,goRight);
          imgright.src=buttonImages.right.active.src;
          imgright.style.cursor='pointer';
        }
      }
    }
  }

  // Elements aren't guaranteed to exist until the window "load" event.
  addEvent('load',window,init);
}