/**
* Preload all mouseover images on the page and define a mouseover and mouseout
* event for those images. All that is required is that the image has a class
* name consisting of mouseover_* with the * being the rollover extension to
* apply to the mouseover image.
*
* i.e. look at the following examples to see how the class name is parsed
*      <img class="mouseover_r" src="myimage.gif" alt=""/>
*      out image = myimage.gif
*      over image = myimage_r.gif
*
* @important! this function must be called by the onload event
*
* @param void
* @return void
*/
function mouseoverSetup()
{
    // set internal vars
    var ext = new Array('gif', 'jpg', 'jpeg', 'png');
    var thisext = null;
    var post = null;
    var re = null;
    var test = null;
    var obj = null;
    var clazz = null;
    var src = null;
    var oversrc = null;

    for (var i = 0; i < document.getElementsByTagName('IMG').length; i++)
    {
        // get img reference
        obj = document.getElementsByTagName('IMG')[i];
        if (obj != null)
        {
            // get out src
            src = obj.getAttribute('src');
            if (src != null)
            {
                // get class name
                clazz = obj.className;

                // strip out additional classes (if they exist)
                re = new RegExp('mouseover_');
                test = clazz.match(re);

                if (test)
                {
                    re = new RegExp('.*(mouseover_[a-zA-Z0-9-]+).*');
                    clazz = clazz.replace(re, '$1');

                    if (clazz != null)
                    {
                        // find the supported extension
                        for (var j = 0; j < ext.length; j++)
                        {
                            re = new RegExp('\\.' + ext[j] + '$');
                            if (src.match(re))
                            {
                                thisext = ext[j];
                                j = ext.length;
                            }
                        }

                        if (thisext != null)
                        {
                            // get this mouseovers postfix
                            re = new RegExp('mouseover(_[a-zA-Z0-9-]+)');
                            post = clazz.replace(re, '$1');

                            // get this mouseovers over src
                            re = new RegExp('\\.' + thisext + '$');
                            oversrc = src.replace(re, post + '.' + thisext);

                            // preload both over and out images
                            obj.overImage = new Image();
                            obj.overImage.src = oversrc;
                            obj.outImage = new Image();
                            obj.outImage.src = src;

                            // setup onmouseover event
                            obj.onmouseover = function()
                            {
                                this.setAttribute('src', this.overImage.src);
                            }

                            // setup onmouseout event
                            obj.onmouseout = function()
                            {
                                this.setAttribute('src', this.outImage.src);
                            }
                        }
                    }
                }
            }
        }

        // reset vars
        thisext = null;
        post = null;
        re = null;
        obj = null;
        clazz = null;
        src = null;
        oversrc = null;
    }
}

addEvent(window, 'load', mouseoverSetup);