/*

Javascript functions which provide useful funcitonality for rollovers. 

How to use: 

<.. include this js file >

.. now within HTML scope..
<img id="btnCreateAccount" src="' . $layoutImagePath . '/button_300_create_account_0.gif" >
<script>
  //registerRollover( Element ID, OFF image full path, ON image full path );
    registerRollover( 'btnCreateAccount', '<? print( $layoutImagePath . "/") ?>button_300_create_account_0.gif',  '<? print( $layoutImagePath . "/") ?>button_300_create_account_1.gif' ); // id, off image, on image
</script>
...
*/

    // imageElementId is the id for an html image element
    // offSrc is full web path to 'off' image
    // onSrc is full web path to 'on' image    
    function registerRollover( imageElementId, offSrc, onSrc ) {
        
        if( document.getElementById ) {

            element = document.getElementById( imageElementId );
            element.onmouseover = setSrc( element, onSrc );
            element.onmouseout  = setSrc( element, offSrc );
        }
    }
    
    // this returns a new function which will be used by the respective event handler.
    function setSrc( elementRef, newSrc) {
        
        return ( function() { elementRef.src = newSrc } );
    }