// Author: imageSwapper.js is written by Mr. Jean
// Location: www.mrjean.net or www.mrjean.be
// License: Don't use without permission!
//
// v 1.0    - Tuesday, July 29, 2008
//          - First version
//
// Description:
// This file is written so images can be dynamically swapped forward and back.
// All images that have to be swapped need a class assigned to it - class.
// Next to that, each image needs a second image with a post assigned to the name.
// This could look like this: filename.jpg -> filename_replaceMe.jpg
// Therefore we have the variable postReplace.
//
// NOTICE:
// Other type of observer is used - http://www.prototypejs.org/api/function/bindAsEventListener
// This method also works around the problem in MSIE when using DOM level 0 style of event handling
// and the event object isn’t passed as the first argument, but has to be read from window.event instead.
// You can forget about that with this method as you don’t have to do it manually.

if (!SWAPIMAGES) { var SWAPIMAGES = new Object() }

SWAPIMAGES = {

	images					:		Array(),
	maxReturn				:		'5',
	preImg					:		null,
	elementToSwap			:		null,
	classToFind				:		'merk',
	postReplace				:		'_grey',
	
	// Temporary variables to hold mouse x-y pos.s	
	tempX					:		'0',
	tempY					:		'0',
	IE						:		null,
	
	swapForward				:		function(e) {
		SWAPIMAGES.elementToSwap = Event.element(e);
		SWAPIMAGES.preImg = new Image();
		SWAPIMAGES.preImg.src = SWAPIMAGES.elementToSwap.src.replace(SWAPIMAGES.postReplace, "");
		SWAPIMAGES.preLoader();
	},

	swapBack				:	function(e) {
		if (SWAPIMAGES.elementToSwap) {
			// some weird stuff going on here but seems to work :-0
			SWAPIMAGES.elementToSwap.src = SWAPIMAGES.elementToSwap.src.replace(SWAPIMAGES.postReplace, "");
			SWAPIMAGES.elementToSwap.src = SWAPIMAGES.elementToSwap.src.replace(".jpg", SWAPIMAGES.postReplace+".jpg");
			SWAPIMAGES.elementToSwap.className = SWAPIMAGES.elementToSwap.className.replace("swapped", "");
		}
	},

	preLoader				:	function() {
		if (SWAPIMAGES.preImg.complete && SWAPIMAGES.preImg.width > 0 && SWAPIMAGES.preImg.height > 0) {
			SWAPIMAGES.maxReturn = 5;
			SWAPIMAGES.elementToSwap.src = SWAPIMAGES.preImg.src;
			if (!SWAPIMAGES.elementToSwap.className.endsWith('swapped')) {
				SWAPIMAGES.elementToSwap.className += "swapped";
			}
		} else {
			if (SWAPIMAGES.maxReturn > 0) {
				SWAPIMAGES.maxReturn -= 1;        
				setTimeout("SWAPIMAGES.preLoader(SWAPIMAGES.elementToSwap)", 300);
			}
		}
	},
	
	checkIfSwapped			:	function() {
		$A(SWAPIMAGES.images).each(function(img) {
			var positionImg = SWAPIMAGES.findPositionElm(img);
			if (!(SWAPIMAGES.tempX > positionImg[0] && SWAPIMAGES.tempX < positionImg[0] + img.width
				&& SWAPIMAGES.tempY > positionImg[1] && SWAPIMAGES.tempY < positionImg[1] + img.height)
				&& img.className.endsWith("swapped")) {
					img.src = img.src.replace(SWAPIMAGES.postReplace, "");
					img.src = img.src.replace(".jpg", SWAPIMAGES.postReplace+".jpg");
					img.className = img.className.replace("swapped", "");
			}
		});
	},
	
	getMouseXY				:	function(e) {		
		if (SWAPIMAGES.IE) { // grab the x-y pos.s if browser is IE
			SWAPIMAGES.tempX = event.clientX + document.body.scrollLeft;
			SWAPIMAGES.tempY = event.clientY + document.body.scrollTop;
		} else {  // grab the x-y pos.s if browser is NS
			SWAPIMAGES.tempX = e.pageX;
			SWAPIMAGES.tempY = e.pageY;
		}  
		// catch possible negative values in NS4
		if (SWAPIMAGES.tempX < 0){SWAPIMAGES.tempX = 0}
		if (SWAPIMAGES.tempY < 0){SWAPIMAGES.tempY = 0}
	},
	
	findPositionElm			:	function(obj) {
		var curleft = curtop = 0;
		if (obj.offsetParent) {
			do {
				curleft += obj.offsetLeft;
				curtop += obj.offsetTop;
			} while (obj = obj.offsetParent);
			return [curleft,curtop];
		}
	},

	loadImages				:	function() {
		if ($('merken')) {
			
			SWAPIMAGES.images = SWAPIMAGES.getElementsByClassName(SWAPIMAGES.classToFind);

			var i = 0;
			$A(SWAPIMAGES.images).each(function(img) {
				
				img.className = "img"+i;
				i++;
				Event.observe(img, 'mouseover', SWAPIMAGES.swapForward.bindAsEventListener());
				Event.observe(img, 'mouseout', SWAPIMAGES.swapBack.bindAsEventListener());
			});
		}
		
		
		new PeriodicalExecuter(SWAPIMAGES.checkIfSwapped, 0.5);
	},
	
	execute					:	function() {
		// Detect if the browser is IE or not.
		// If it is not IE, we assume that the browser is NS.
		SWAPIMAGES.IE = document.all?true:false;
		
		// If NS -- that is, !IE -- then set up for mouse capture
		if (!SWAPIMAGES.IE) document.captureEvents(Event.MOUSEMOVE);
		
		// Set-up to use getMouseXY function onMouseMove
		document.onmousemove = SWAPIMAGES.getMouseXY;
		
		SWAPIMAGES.loadImages();
	},
	
	getElementsByClassName	:	function(className, tag, elm) {
		var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
		var tag = tag || "*";
		var elm = elm || document;
		var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
		var returnElements = [];
		var current;
		var length = elements.length;
		for(var i=0; i<length; i++){
			current = elements[i];
			if(testClass.test(current.className)){
				returnElements.push(current);
			}
		}
		return returnElements;
	}
	
}

Event.observe(window, 'load', SWAPIMAGES.execute, false)