/*
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 zzPreloadedImages = 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 zzInitRollover() {
	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", zzPreloadedImages[ this.getAttribute( "rollover" ) ].src );
			}
			img.onmouseout = function() {
				this.setAttribute( "src", this.getAttribute( "original" ) );
			}
		}
	}
	zzPreloadImages( rolloverImages );
}

// add rollover functionality to inputs with image as type.
function zzInitInputRollover() {
	if( !document.getElementById ) return;
	
	var rolloverImages = new Array();
	var images = new Array();
	var inputs = document.getElementsByTagName( "input" );
	for(j=0; j < inputs.length; j++){
		if(inputs[j].getAttribute('type', 'image')){
			images[images.length] = inputs[j];
		}
	}	
	
	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", zzPreloadedImages[ this.getAttribute( "rollover" ) ].src );
			}
			img.onmouseout = function() {
				this.setAttribute( "src", this.getAttribute( "original" ) );
			}
		}
	}
	zzPreloadImages( 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 zzPreloadImages( images ) {
	for( var i = 0; i < images.length; i++ ) {
		var img = zzPreloadedImages[ images[i] ];
		if( img == undefined ) {
			img = zzPreloadedImages[ images[i] ] = new Image();
			img.src = images[ i ];
		}
	}
}

zzAddLoadEvent(function() {
  zzInitRollover();
  zzInitInputRollover();
  zzCheckNavigation();
});