/*  JS Code file: itnix_menus.js */
        /*  Description: Loads images to the HTML file as either static images or rollovers */
        /*  Version: 1.2 */
        /*  All source code & concepts (c) copyright 2008, 2009 by ItNix, LLC. */
        /*  All rights reserved worldwide. */
        /*  Last change: 29jul09 */
        /*  Changed by: Ivan Carrazco */
        /* new gifs ( chico, mediano and grande) have been included, and about_images has been included */

var imgDir = "images/"; // this path is relative to the current path of the HTML file, no the this file ( itnix_mouseovers.js )
var btnDir = "images/buttons";
var galDir = "images/gallery";
var parDir = "images/partners";

var jpgs = [];
var gifs = [];

//list of gifs images
gifs[0] = 'poweredby';
gifs[1] = 'slogan';
gifs[2] = 'chico';
gifs[3] = 'mediano';
gifs[4] = 'grande';

// list of jpegs images
jpgs[0] = 'logo';
jpgs[1] = 'construction_images/content/';
jpgs[2] = 'aviation_images/content/';
jpgs[3] = 'infotech_images/content/';
jpgs[4] = 'marketing_images/content/';
jpgs[5] = 'systems_images/content/';
jpgs[6] = 'training_images/content/';
jpgs[7] = 'about_images/content/';



/**
  * loadImages: loads the images in the arrays
  */
function loadImages() {
 initImages( gifs, '.gif', false);
 initImages( jpgs, '.jpg', false);
}



/**
  * initImages: loads images as rollovers or as static images, depending on the input, asBtn
  * param: array - array of strings, representing the name of the images to be loaded to the HTML file
  * param: suffix- the file extension of the pictures currently loaded
  * param: asBtn - if true, images are loaded as rollovers, otherwise they're loaded as static images
  */
function initImages( array, suffix, asBtn ) {
    if( asBtn == true ) {
      initRollOvers( array, suffix );
    }
    else {
      initStaticImages( array, suffix );
    }
}



/**
  * initStaticImages: loads the pictures specified by the array as static images
  * param: array - an array of picture names, which will be loaded to the HTML file
  * param: suffix - the image extension to be used for the pictures, i.e. jpeg, jpg, gif, etc
  */
function initStaticImages( array, suffix ) {
  if( checkImgType( suffix ) == false ) {
    return;
  }

  if( array.length > 0 ) {
      for( var i = 0; i < array.length; i++ ) {
        var info = array[i];
        //for each picture name, get directory, and add image to html file accordingly
        addStaticImage( info, suffix );
      }// End of for-loop
  }
}



/**
  * initImages: it adds the events to event listeners to the images specified in the array
  * param: array - an array of picture names, which will be loaded to the HTML file
  * param: suffix - the image extension to be used for the pictures, i.e. jpeg, jpg, gif, etc
  */
function initRollOvers( array, suffix ) {
  // this method initializes only if the array contains some data, otherwise it skips and nothing gets initialized
  if( array.length > 0 ) {
      for( var i = 0; i < array.length; i++ ){
        var butName = array[i];
        addRollOver( butName, suffix );
        setEvent(butName);
      }// end of for-loop
  }
}



/**
  * addRollOver: uses the img's lowsrc property to add a lowsrc value to the existing image, imgName, on the document
  * param: imgName - string representing the name of the image to be loaded to the HTML file
  * param: type - string representing the extension of the imgName file
  */
function addRollOver( information, type ) {
  var onState = "_on"; // this variable may be changed to suit your needs
  var offState = "_off"; // this variable may be changed to suit your needs
  var data = information.split('_');
  var imgId = data[0];
  var dir   = data[1];//translateLoc( data[1] )
  var loc = "";
  var theImg = document.getElementById( imgId );

  if( checkImgType( type ) != true ) {
    return;
  }

  if( dir == "" || dir == null ) {
      dir = imgDir;
  }
  loc = dir + imgId + type;



  if( document.images[ imgId ] ){
    document.images[ imgId ].src =    loc;
    document.images[ imgId ].lowsrc = loc;
   }
   else if ( document[ imgId ] ) {
    document[ imgId ].src =    loc;
    document[ imgId ].lowsrc =  loc;
   }
}




/**
  * addStaticImage: loads a static image of type, 'type'
  * param: imgName - string representing the name of the image to be loaded to the HTML file
  * param: type - string representing the extension of the imgName file
  */
function addStaticImage( information, type ) {
  var data = information.split('_');
  var imgId = data[0];
  var dir   = data[1];//translateLoc( data[1] );
  var loc = "";
  var theImg = document.getElementById( imgId );

  //alert('Image id: ' + imgId );

  if( checkImgType( type ) != true ) {
    return;
  }

  if( dir == "" || dir == null ) {
      dir = imgDir;
  }

  loc = dir + imgId + type;
  //alert( ' location of file: ' + loc );

  if( document.images[imgId] ) {
    var imgSrc = imgDir + imgId + type;
    document.images[ imgId ].src = loc;
  }
  else if( document[ imgId]  ) {
    document[ imgId ].src = loc;
  }
  else if( theImg != null ) {
    theImg.src = loc;
  }
}


/**
  * 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(theId) {

  var img = document.getElementById(theId);// retrieve the img object
  //w3c standard browsers
  if( img && document.addEventListener ) {
    img.addEventListener('mouseover', function(event) { on_action(event); }, true );
    img.addEventListener('mouseout', function(event) { off_action(event); }, true );
  }
  //IE browsers
  else if( img && document.attachEvent ) {
      img.attachEvent('on'+'mouseover', function(event) { on_action(event);} );
      img.attachEvent('on'+'mouseout', function(event) { off_action(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 on_action(e) {

    var evt = null;
    var elem = null;

    // 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( document.images ) {
      var img = document.images[elem.id];
      var temp = img.src;
      img.src = img.lowsrc;
      img.lowsrc = temp;
    }
    else {
      var img = document[elem.id];
      var temp = img.src;
      img.src = img.lowsrc;
      img.lowsrc = temp;

    }
  }




/**
  * off_action(e): this function uses the image that fired the current event and sets the img's lowsrc property to be
  *   its src property.  In other words, img.src = img.lowsrc and img.lowsrc = img.src
  */
  function off_action(e) {
    var evt = null;
    var elem = null;
    if( !e ){
      evt = window.event;
    }
    else {
      evt = e;
    }

    if( e.srcElement )
      elem = e.srcElement;
    else
      elem = e.target;

    if( document.images ) {
      var img = document.images[elem.id];
      var temp = img.src;
      img.src = img.lowsrc;
      img.lowsrc = temp;
    }
    else {
      var img = document[elem.id];
      var temp = img.src;
      img.src = img.lowsrc;
      img.lowsrc = temp;
    }
  }




/**
  * checkImgType: checks to see if the provided type is correct and/or accepted
  * param: type - string reprensentation of the for a picture file
  * returns: true if 'type' is recognized and/or accepted, false otherwise
  */
  function checkImgType( type ) {
    switch( type ) {
      case '.jpeg':
        return true;
      case '.jpg':
        return true;
      case '.gif':
        return true;
      default:
        return false;
    }
  }