/*  JS Code file: itnix_menus.js */
        /*  Description: it adds two events listeners to those imgs tags that whose class name contains 'butState' */
        /*  Version: 2.0 */
        /*  All source code & concepts (c) copyright 1998, 2009 by ItNix, LLC. */
        /*  All rights reserved worldwide. */


/**
  * setImages: This function is the main function that calls each individual image for processing
  * post-condition: img tags marked with class name 'butState' now have two mouse event listeners
  */

var imgs = null; // variable used as an array of images;


function setImages() {
  var numButtons = 0;
  var images = document.getElementsByTagName( 'img' );
  //alert( "number of imgs in the document: " + images.length );

  for( var j = 0; j < images.length; j++ ) {
    var temp = images[j];
    if( temp.className == 'butState' )
      numButtons++;
  }

  imgs = new Array( numButtons ); //Creates an array for each button that has a state.

  for( var i = 0; numButtons > 0 && i < images.length; i++) {
    var tempImg = images[ i ];
    if( tempImg.className == 'butState' ) {
      setImage( tempImg );
      setEvent( tempImg );
    }
  }
  //alert("# of images in array: " + imgs.length );
  //alert("Number of counted images with button state: " + numButtons );
}




function getImageByName( theImgObj ) {
  var imgInfo = "";
  if( theImgObj != null ) {
    if( theImgObj.src == "undefined" )
      imgInfo = theImgObj;
    else
      imgInfo = theImgObj.src;

    if( imgInfo != null || imgInfo != "" ) {
      //alert( "source: " + imgInfo + ", base: " + document.base );
      var img = new Image();
      //var patFolder = /images\/(\w+\/)*/gi; //looks for fol/, fol/fol2/, fol/fol2/fol3/... etc
      var patImgName = /\w+(-ovr)?\.\w+$/; // looks for name.gif, name.jpg, name.jpeg... etc

      //var foldName = imgInfo.match( patFolder )[0]; // returns an array with matching
      //alert("About to get the image name from this src: " + theImgObj.src );
      var imgName  = imgInfo.match( patImgName )[0];

      //alert("current imgName: " + imgName );

      imgName = imgName.split( '.' )[0];

      //alert('image name separated by \".\": ' + imgName );

      if( imgName.split( '-' ).length > 0 ) {
        imgName = imgName.split( '-' )[0];
        //alert( "image name separated by \"-\": " + imgName );
      }

      //alert( "final name of the picture: " + imgName );
      return imgName;
    }
  }
  else {
    return "";
  }
}



/**
  * setImage: This function takes an image object and if it has been marked to have event listeners, its lowsrc will be set
  *           to its roll over image.
  * param: theImgObj- an image object whose src attribute is used to find its lowsrc attribute
  * post-condition: if 'theImgObj' has been marked as a "butState" on its class attribute, and its lowsrc image exists
  *                 the object 'theImgObj' will have both, src and lowsrc, set up for use
  */
function setImage( theImgObj ) {
  var imgInfo = "";
  if( theImgObj != null ) {
    if( theImgObj.src == "undefined" )
      imgInfo = theImgObj;
    else
      imgInfo = theImgObj.src;

    if( imgInfo != null || imgInfo != "" ) {
      //alert( "source: " + imgInfo + ", base: " + document.base );
      var img = new Image();
      var patFolder = /images\/(\w+\/)*/gi; //looks for fol/, fol/fol2/, fol/fol2/fol3/... etc
      var patImgName = /\w+\.\w+$/; // looks for name.gif, name.jpg, name.jpeg... etc

      var foldName = imgInfo.match( patFolder )[0]; // returns an array with matching
      var imgName  = imgInfo.match( patImgName )[0];

      if( ( foldName != null || foldName != "" ) && (imgName != null || imgName != "" ) ) {
        var imgType = imgName.split( '.' )[1]; // index 0 holds the name of the picture, index 1 holds the type
        imgName = imgName.split( '.' )[0];    // type of the picture
        img.src = foldName+imgName+"."+imgType;
        var check = theImgObj != null && foldName != "" && imgName != "" && imgType != "" ;

        if( check === true ) { // if all the parameters, (folderName, imgName, imgType), exist then we may proceed
          //var newLowsrc = foldName+imgName+"_ovr."+imgType;
          //alert(" new lowsrc: " + newLowsrc );
          //theImgObj.lowsrc = foldName + imgName+"_ovr."+ imgType;
          img.lowsrc = foldName + imgName + "-ovr."+ imgType;
        }
        //imgs.push( img );
        //imgs.push(theImgObj);
        imgs[ imgName ] = img;
        //alert("setting image with name, " + imgName + ", : " + imgs[ imgName ].src );
     }
    }
  }
}






/**
  * setEvent: it sets two event listeners to the image with id, theId.
  *   The image ends up with two event listeners for the events onmouseover and onmouseout.
  */
function setEvent(theImageObj) {

  var img = theImageObj; //document.getElementById(theId);// retrieve the img object
  //w3c standard browsers
  if( img && document.addEventListener ) {
    img.addEventListener('mouseover', function(event) { toggleImg(event); }, true );
    img.addEventListener('mouseout', function(event) { toggleImg(event); }, true );
  }
  //IE browsers
  else if( img && document.attachEvent ) {
      img.attachEvent('onmouseover', function(event) { toggleImg(event); ;} );
      img.attachEvent('onmouseout', function(event) { toggleImg(event);} );
  }
}




/**
  * on_action(e): this function uses the image that fired the current event and sets the img's lowsrc property to be
  *   its src property, its src property to be its lowsrc.  In other words, img.src = img.lowsrc, and img.lowsrc = img.src
  */
  function toggleImg(e) {

    var evt = null;
    var elem = null;


  //for( var i = 0; i < imgs.length; i++)
    //alert("image " + i + ": " + imgs['about'].src );



    // we need this because IE and standard browsers work differently
    if( !e ){
      evt = window.event;
    }
    else {
      evt = e;
    }
    // we need this because IE and standard browsers work differently
    //elem is the source of the event, therefore, we use the id from the source to set its 'src' and 'lowsrc' properties
    if( e.srcElement )
      elem = e.srcElement;
    else
      elem = e.target;

    if( elem != null ) {
      var imgName = getImageByName( elem );
      var img = imgs[ imgName ];
      //alert("about to retrive the image with name, " + imgName );
      var temp = img.src;
      //alert("image src: " + temp + ", image lowsrc: " + img.lowsrc );
      img.src = img.lowsrc;
      img.lowsrc = temp;
      elem.src = img.src;
      //alert(" image name before it gets assigned to the array: " + imgName );
      imgs[ imgName ].src = img.src;
      imgs[ imgName ].lowsrc = img.lowsrc;
      //alert("Image-"+imgName+".src = " + imgs[ imgName ].src + ", image-"+imgName+".lowsrc = " + imgs[ imgName].lowsrc );
    }
  }