// ================================================
// Image rollover scripts for Legal Advice Helpline
// ================================================

// helper function
function isDefined(property) {
  return (typeof property != 'undefined');
}

// ============================================================================================================================
// Generic script for img rollovers
// Identifies any images where the src attribute includes -off and automatically adds an event to swap the src to the -on image
// Also preloads the image
// NOTE naming convention ie. requires 2 images eg. image-on.png and image-off.png
// ============================================================================================================================
var rolloverInitialized = false;
function rolloverInit() {

   if (!rolloverInitialized && isDefined(document.images)) {
      
      // get all images
      var images = new Array();
      if (isDefined(document.getElementsByTagName)) {
         images = document.getElementsByTagName('img');
      }
            
      // get all images with '-off.' in src value
      for (var i = 0; i < images.length; i++) {
         if (images[i].src.indexOf('-off.') != -1) {
            preloadAndAttachEvent(images[i]);            
         }
         
      }
   }
   rolloverInitialized = true;
}

// ============================================================================================================================
// Generic script for input (type="image") buttons
// Identifies any inputs where the src attribute includes -off and automatically adds an event to swap the src to the -on image
// Also preloads the image
// NOTE naming convention ie. requires 2 images eg. btn-on.png and btn-off.png
// NOTE separate to the similar function above due to issue with adding inputs to an array of images
// ============================================================================================================================
var rolloverInputInitialized = false;
function rolloverInputInit() {

   if (!rolloverInputInitialized && isDefined(document.getElementsByTagName)) {
      
      // get all <input type="image">s
      var inputs = document.getElementsByTagName('input');
            
      // get all inputs with '-off.' in src value
      for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == 'image') {
            if (inputs[i].src.indexOf('-off.') != -1) {
                preloadAndAttachEvent(inputs[i]);
            }
        }
       }
   }
   rolloverInputInitialized = true;
}

// ===================================================================
// Shared function for the rollover functions
// Preloads the on and off images and adds the rollover event handlers
// NOTE the naming conventions in the rollover functions
// ===================================================================
function preloadAndAttachEvent(iObject) {           
    // store the off state filename in a property of the image object
    iObject.offImage = new Image();
    iObject.offImage.src = iObject.src;
    
    // store the on state filename in a property of the image object
    // (also preloads the on state image)
    iObject.onImage = new Image();
    iObject.onImage.imageElement = iObject;

    var arVersion = navigator.appVersion.split("MSIE");
    var version = parseFloat(arVersion[1]);
    
    // add onmouseover and onmouseout event handlers once the on state image has loaded
    // Safari's onload is screwed up for off-screen images; temporary fix
    if (navigator.userAgent.toLowerCase().indexOf('safari') != -1) {
        iObject.onmouseover = function() {
            this.src = this.onImage.src;
        };
        iObject.onmouseout = function() {
            this.src = this.offImage.src;
        };
        iObject.onfocus = function() {
            this.src = this.onImage.src;
        };
        iObject.onblur = function() {
            this.src = this.offImage.src;
        };
    }
    else if (version < 7) {
        // IE6 hack - doesn't work!
        iObject.onImage.onload = function() {
            this.imageElement.onmouseover = function() {
                this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.onImage.src + "', sizingMethod='scale')";
            };
            this.imageElement.onmouseout = function() {
                this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.offImage.src + "', sizingMethod='scale')";
            };
            this.imageElement.onfocus = function() {
                this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.onImage.src + "', sizingMethod='scale')";
            };
            this.imageElement.onblur = function() {
                this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.offImage.src + "', sizingMethod='scale')";
            };
        };
    }
    else {
        iObject.onImage.onload = function() {
            this.imageElement.onmouseover = function() {
                this.src = this.onImage.src;
            };
            this.imageElement.onmouseout = function() {
                this.src = this.offImage.src;
            };
            this.imageElement.onfocus = function() {
                this.src = this.onImage.src;
            };
            this.imageElement.onblur = function() {
                this.src = this.offImage.src;
            };
        };
    }
    
    // set src of on state image after defining onload event handler
    // so cached images (that load instantly in IE) will trigger onload
    iObject.onImage.src = iObject.src.replace(/-off\./, '-on.');
}

// attach the rollover functions when document finishes loading
if (isDefined(window.addEventListener)) {
   window.addEventListener('load', rolloverInit, false);
   window.addEventListener('load', rolloverInputInit, false);
}
else if (isDefined(window.attachEvent)) {
   window.attachEvent('onload', rolloverInit);
   window.attachEvent('onload', rolloverInputInit);
}