/*
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 = document.getElementsByTagName( "IMG" );
	for( var i = 0; i < images.length; i++ ) {
		var img = images[i];
		if( img.getAttribute( "rollover" ) != undefined ) {
			rolloverImages[ rolloverImages.length ] = img.getAttribute( "rollover" );
		
			img.setAttribute( "original", images[i].getAttribute( "src" ) );
			
			img.onmouseover = function() {
				this.setAttribute( "src", preloadedImages[ this.getAttribute( "rollover" ) ].src );
			}
			img.onmouseout = function() {
				this.setAttribute( "src", this.getAttribute( "original" ) );
			}
		}
	}
	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 ];
		}
	}
}