/*******************************************************************************
 * Image fading
 *
 * Cross browser functions to fade images in a document.
 *
 * Copyright (c) InternedBased bvba - http://www.internedbased.com
 *
 ******************************************************************************/

/**
 * Fade picture of <IMG> element to another, specified by its filename.
 *
 */
function fadeImageTo(img, src) {
	this.degree = 10;         //initial opacity degree (10%)
	this.interval;            //fader interval pointer

	//check for modern browser (IE5+, Firefox, Safari, ...)
	if (document.getElementById) {
		this.img = (typeof img == 'string' ? document.getElementById(img) : img); //img element to be faded
		this.image = new Image(); //fade to this image
		this.image.src = src;

		//get offset left and top of img
		var e = this.img;
		var left = e.clientLeft;
		var top = e.clientTop;
		do {
			left += e.offsetLeft;
			top += e.offsetTop;
		} while ((e = e.offsetParent) != null);

		//check if previous fader instance is running
		if (typeof this.interval != "undefined") {
			clearInterval(this.interval);
			this.interval = undefined;
			this.fadeover.parentNode.removeChild(this.fadeover);
		}

		//create fadeover div and insert into dom
		this.fadeover = document.createElement("img");
		this.fadeover.src = this.image.src;
		this.fadeover.width = parseInt(this.img.clientWidth);
		this.fadeover.height = parseInt(this.img.clientHeight);
		this.fadeover.style.position = "absolute";
		this.fadeover.style.border = 0;
		this.fadeover.style.margin = 0;
		this.fadeover.style.padding = 0;
		this.fadeover.style.left = parseInt(left) + 'px';
		this.fadeover.style.top = parseInt(top) + 'px';
		this.fadeover.style.width = parseInt(this.img.clientWidth) + 'px';
		this.fadeover.style.height = parseInt(this.img.clientHeight) + 'px';
		document.getElementsByTagName('body')[0].appendChild(this.fadeover);

		//set initial opacity
		setOpacity(this.fadeover, this.degree);

		//code for fading
		var fader = this; //reference to myself
		function fadeImage() {
			if (fader.degree < 100) {
				setOpacity(fader.fadeover, fader.degree += 10);
			} else {
				//clear fader interval and unset from memory (to prevent IE memory leaks)
				clearInterval(fader.interval);
				fader.interval = undefined;
				//replace original with faded
				fader.img.src = fader.image.src
				//remove fadeover div
				fader.fadeover.parentNode.removeChild(fader.fadeover);
				//delete fader;
			}
		}

		//start fading
		this.interval = setInterval(fadeImage, 50);
	} else {
		//no fading for old browsers (NS) just plain src replace
		img.src = src;
	}
}

/**
 * Cross-browser methode for setting the opacity of an element in the dom.
 * Supports Internet Explorer, Mozilla and KHtml (and Safari/Chrome?)
 */
function setOpacity(element, opacity) {
	if (element.filters) {
		//MSIE
		if (element.filters[0]) {
			//filter set, change opacity
			if (typeof element.filters[0].opacity == "number") {
				//if IE6+
				element.filters[0].opacity = opacity;
			} else {
				//else if IE5.5-
				element.style.filter = "alpha(opacity=" + opacity + ")";
			}
		} else {
			//no filters set, set new one
			element.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + opacity + ")";
		}
	} else if (typeof element.style.MozOpacity == 'string') {
		//Mozilla
		element.style.MozOpacity = opacity / 100;
	} else if (typeof element.style.KhtmlOpacity == 'string') {
		//KHTML (safari/Chrome?)
		element.style.KhtmlOpacity = opacity / 100;
	}
}