/****************************************************************************************
          Script to automate image rollovers and click effects, using just HTML
                  v1.1 written by Mark Wilton-Jones, 30-31/12/2003
                     updated 29/04/2004 for Konqeror XHTML fix
*****************************************************************************************

Please see http://www.howtocreate.co.uk/jslibs/ for details and a demo of this script
Please see http://www.howtocreate.co.uk/tutorials/jsexamples/testingRoll.html for examples
Please see http://www.howtocreate.co.uk/jslibs/termsOfUse.html for terms of use

To use this, insert the following HTML just before the </body> tag:

<script type="text/javascript" language="javascript1.2" src="PATH TO SCRIPT/imgRoll.js"></script>

To apply a hover or click effect to any image or image input, simply add the desired extra
attributes to the image or input definition. The attribute names must ALWAYS be written in
lower case:
	hoversrc="hover.gif"     produces a hover/rollover effect
	activesrc="hover.gif"    produces a click/active effect
The syntax of these attributes is identical to the src attribute.

	Regular image:
		<img src="root.gif" height="50" width="50" alt="" border="0">
	Hover:
		<img src="root.gif" hoversrc="hover.gif" height="50" width="50" alt="" border="0">
	Click:
		<img src="root.gif" activesrc="active.gif" height="50" width="50" alt="" border="0">
	Hover and click:
		<img src="root.gif" hoversrc="hover.gif" activesrc="active.gif" height="50" width="50" alt="" border="0">
	Hover and click on an image input:
		<input type="image" src="root.gif" hoversrc="hover.gif" activesrc="active.gif" height="50" width="50" alt="" border="0">

Warnings:

	This script attaches the following event handlers to the images; mouseover, mouseout, mousedown, mouseup
	These will override any that you specify
	They may also affect any mousedown and mouseup event detection on parent elements

	The HTML will not validadate as valid core HTML 4 (but adding custom attributes is a valid practice)
_______________________________________________________________________________________*/

var MWJ_img_cache = new Object();
for( var i = 0; i < 2; i++ ) {
	var ar = i ? ( document.getElementsByTagName ? document.getElementsByTagName('input') : ( document.all ? document.all.tags('INPUT') : [] ) ) : document.images;
	for( var x = 0; ar[x]; x++ ) {
		var im = ar[x];
		if( im.getAttribute ) { im.hoversrc = im.getAttribute('hoversrc'); im.activesrc = im.getAttribute('activesrc'); }
		if( im.hoversrc || im.activesrc ) {
			if( !MWJ_img_cache[im.src] ) { MWJ_img_cache[im.src] = new Image(); MWJ_img_cache[im.src].src = im.src; }
			im.rootsrc = im.src;
			im.onmouseout = function () { this.src = this.rootsrc; };
		}
		if( im.hoversrc ) {
			if( !MWJ_img_cache[im.hoversrc] ) { MWJ_img_cache[im.hoversrc] = new Image(); MWJ_img_cache[im.hoversrc].src = im.hoversrc; }
			im.onmouseover = function () { this.src = this.hoversrc; };
		}
		if( im.activesrc ) {
			if( !MWJ_img_cache[im.activesrc] ) { MWJ_img_cache[im.activesrc] = new Image(); MWJ_img_cache[im.activesrc].src = im.activesrc; }
			im.onmousedown = function (e) {
				e = e ? e : window.event;
				if( e.button > 1 || e.which > 1 ) { return; }
				this.src = this.activesrc;
			};
			im.onmouseup = function (e) {
				e = e ? e : window.event;
				if( e.button > 1 || e.which > 1 ) { return; }
				this.src = this.hoversrc ? this.hoversrc : this.rootsrc;
			};
		}
	}
}