/*
Add rollover functionality to image tags and preload the rollover images.

Usage:
<img src="plaatje.jpg" rollover="rollover.jpg">

In this example rollover.jpg will be preloaded onload. 
On mouseover the image "plaatje.jpg" will be replaced with "rollover.jpg",
onmouseout the other way around.

Important: call initRollover() onload

Written by Meinaart van Straalen - Zicht nieuwe media ontwerpers b.v. (c) 2005

*/


var preloadedImages = new Array();
// This functions loops through all images in the current document and checks 
// if they have a "rollover" attribute. If so then it adds rollover functionality
// and preload the rollover images.
function initRollover() {
    if( !document.getElementById ) return;
    
    var rolloverImages = new Array();
        
    var images = $ES('img, input[type=image]');
    
    images.each ( function ( img ) {
        if( $type(img.getAttribute( "rollover" )) ) {
            
            var fnHover = null;
            var fnOut = null;
            
            var isFiltered = false;
            try {
                isFiltered = (img.getAttribute( "src" ).indexOf('.png') > -1 && $type(img.filters) && $type(img.filters.item(0)));
            } catch(e) {}
            
            if( isFiltered ) {
                rolloverImages.push ( img.getAttribute( "rollover" ) );
                img.setAttribute('name', img.filters.item(0).src);
                fnHover = function () {
                    this.filters.item(0).src = preloadedImages[ this.getAttribute( "rollover" ) ].src;
                };
                fnOut = function () {
                    this.filters.item(0).src = this.getAttribute( "name" );
                };
            } else {
                rolloverImages.push ( img.getAttribute( "rollover" ) );
                img.setAttribute('name', img.getAttribute('src'));
                fnHover = function () {
                    this.setAttribute( "src", preloadedImages[ this.getAttribute( "rollover" ) ].src );
                };
                fnOut = function () {
                    this.setAttribute( "src", this.getAttribute( "name" ) );
                };
            }
            
            img.addEvent('mouseover', fnHover, img );
            img.addEvent('mouseout', fnOut, img );
        }
    } );
    preloadImages( rolloverImages );
}

// This function preloads an array of images, it also checks if the image is
// already loaded. The preloaded images are stored in an array with their filename
// as key.
function preloadImages( images ) {
	for( var i = 0; i < images.length; i++ ) {
		var img = preloadedImages[ images[i] ];
		if( img == undefined ) {
			img = preloadedImages[ images[i] ] = new Image();
			img.src = images[ i ];
		}
	}
}