/*
    REQUIRES:
    addEvent.js (http://ejohn.org/projects/flexible-javascript-events/).
    
    DESCRIPTION:
    This function will add rollovers to image inputs. The function fires
    on window.load and rollovers will be added to all inputs with the type
    attribute "image".
    
    The filename of the image for the over state should be the same
    as the one for the up state, but with 'On' appended.
    e.g. if the name of the up state image is 'btnSearch.gif' the over
    image must be called 'btnSearchOn.gif'.
    
*/

function addSubmitRollovers(){
    
    var inps = document.body.getElementsByTagName('INPUT');
    
    if(null == inps) return;
        
    var onRollOver = function(){ 
                        if(this.hasFocus) return false; 
                        this.src = this.over_img.src;
                        this.hasFocus = true; 
                    };
    
    var onRollOut =  function(){ 
                        this.src = this.up_img.src; 
                        this.hasFocus = false; 
                    };
                    
    for(var i=0,l=inps.length;i<l;i++){         

        // Skip anything but image inputs
        var inp = inps[i];
        if(inp.type != 'image') continue;

        // Preload and assign images to input
        inp.up_img = new Image();
        inp.up_img.src = inp.src;
        inp.over_img = new Image(); 
        inp.over_img.src = inp.src.replace(/\.(gif|jpg|png)$/,'On.$1');

        // Assign functions
        inp.onmouseover = inp.onfocus = onRollOver;
        inp.onmouseout = inp.onblur = onRollOut;
    }
}


domFunction(addSubmitRollovers,{'footer':'id'})