/*	General rollover functionality

	Dependencies:
		x.js
		x_loadmngr.js
		
	You have to create an anonymous function and create your rollovers there. Then add that function to the loadManagers pool of functions that it calls when the page is fully loaded. i.e.:
	
	var someFunc = function () {
		createRollover( "imgElementId", "/path/to/image" );
		createRollover( "imgElementId", "/path/to/image" );
		createRollover( "imgElementId", "/path/to/image" );
	};
	xLoadMngr.add( someFunc );
*/

function createRollover (
	imgID,
	rolloverImg
) {
	ele = xGetElementById( imgID );
	
	ele.overImg = new Image();
	ele.overImg.src = rolloverImg;
	
	ele.outImg = new Image();
	ele.outImg.src = ele.src;
	
	ele.over = function () {
		this.src = this.overImg.src;
	};
	
	ele.out = function () {
		this.src = this.outImg.src;
	};
	
	xAddEventListener( ele, 'mouseover', rolloverListener, false );
	xAddEventListener( ele, 'mouseout', rolloutListener, false );
}

function rolloverListener ( e ) {
	var evt = new xEvent( e );
	var ele = evt.target;
	while (ele && !ele.over) {
		ele = xParent( ele );
	}
	ele.over();
}

function rolloutListener ( e ) {
	var evt = new xEvent( e );
	var ele = evt.target;
	while (ele && !ele.out) {
		ele = xParent( ele );
	}
	ele.out();
}