// Author: Chris Smith
// Date: 09 May 2009
// Filename: rollover.js
//
// Purpose: Change button displayed on rollover


/* *****************************************************
   *                Function rolloverInit()            *
   ***************************************************** */
   
// Purpose:  The purpose of this function is to search all
//           images on the page and then check to see if the
//           image is encapsulated by the anchor tag <a>.
//           For each image that has the anchor node as its' parent
//           the function setupRollover is called.  The function
//           setupRollover will modify the image properties to use the
//           default image when the mouse pointer is not on the image,
//           and then use a different image when the mouse pointer is
//           on or hovering over the image.
//
//  Input:  All Images on a page - see for loop
//
//  Output: Send the Images that are encapsulated by the anchor tag
//          to the the function setupRollover.
//
//  Parameters: IMAGEDIR - Image Directory

var IMAGEDIR = "/silvermaplestudio/images/";

function rolloverInit(){
    for (var ctr = 0; ctr < document.images.length; ctr++) {
        if ( ( document.images[ctr].parentNode.tagName == "A" ) && ( (document.images[ctr].parentNode.className == "rollover") || (document.images[ctr].parentNode.className == "menuLink") )) {
            setupRollover(document.images[ctr], ctr);
        } // end if (document.images[ctr].parentNode.tagName == "A")
    } // end for (var ctr=0; ctr<document.images.length; ctr++)
} // end function

/* *****************************************************
   *                Function setupRollover()           *
   ***************************************************** */

// Purpose: The purpose of this function is to take an image that is
//          encapsulated by the anchor tag and apply two new properties
//          or objects to the image (outImage, and overImage).  
function setupRollover(thisImage, thisCtr) {

    var curPageString = document.location.href ? document.location.href : document.location;
    var curPage = extractPageName(curPageString);
    var curHREF = extractPageName(thisImage.parentNode.href);
    var toggleID = 0;
    
    if (curPage == "") {
	    curPage = "index.htm"
    }

    if (curHREF == curPage) {
        document.images[thisCtr].src = IMAGEDIR + thisImage.id + "_on.png";
    }
            
    // Mouse goes off of Image
    thisImage.outImage = new Image();
    thisImage.outImage.src = thisImage.src;
    thisImage.onmouseout = function() {

        if ((curHREF == curPage)) {

            this.src == IMAGEDIR + thisImage.id + "_on.png";
        }
        else if (toggleID == 1) {
            this.src == IMAGEDIR + thisImage.id + "_on.png";
        }
        else {
            this.src = this.outImage.src;
        }
    }

    // Mouse is on the Image
    thisImage.overImage = new Image();
    thisImage.overImage.src = IMAGEDIR + thisImage.id + "_on.png";
    thisImage.onmouseover = function() {
        this.src = this.overImage.src;
    }


    // Mouse Clicked on the Image
    thisImage.clickedImage = new Image();
    thisImage.clickedImage.src = "/silvermaplestudio/images/" + thisImage.id + "_on.png";
    thisImage.onclick = function() {
        if (toggleID == 0) {
            toggleID = 1;
        }
        else {
            toggleID = 0;
        }
        this.src = this.clickedImage.src;
    }
    
} 

function extractPageName(pageString) {
    var myLocArray = pageString.split('/');
    return (myLocArray.length < 2) ? pageString : myLocArray[myLocArray.length - 1].toLowerCase();
}