/**
 * define spacer image used by alphapng functions
 */
var spacerImage = 'images/common/spacer.gif';

/**
* 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');

                            if ((thisext == 'png') && (document.all))
                            {
                                // get this mouseovers over src
                                re = new RegExp('\\.' + thisext + '$');
                                oversrc = src.replace(re, post + '.' + thisext);

                                // get the dimensions
                                width   = obj.getAttribute('width');
                                height  = obj.getAttribute('height');

                                // force the spacer for transparent backgrounds
                                obj.setAttribute('src', spacerImage);

                                // setup the new properties (replace mouseovers)
                                obj.overFilter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + oversrc + '\', sizingMethod=scale)';
                                obj.outFilter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=scale)';

                                // apply the defaults
                                obj.style.filter = obj.outFilter;
                                obj.style.width = width + 'px';
                                obj.style.height = height + 'px';
                                //alert('overFilter = ' + obj.overFilter);

                                // setup onmouseover event
                                obj.onmouseover = function()
                                {
                                    this.style.filter = this.overFilter;
                                    //alert('over: ' + this.overFilter);
                                }

                                // setup onmouseout event
                                obj.onmouseout = function()
                                {
                                    this.style.filter = this.outFilter;
                                    //alert('out: ' + this.overFilter);
                                }
                            }
                            else
                            {
                                // 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);