// css-popupfading.js
// css pop-up script with javascript-fading
//
// Copyright 2009 francky: www.developerscorner.nl
// See: http://developerscorner.nl/css-exercitions/css-popup-fading.htm
// Inspired by: http://hungred.com/how-to/tutorial-how-does-image-fade-in-when-picture-loaded/ 
// Published under Creative Commons License "Attribution-Noncommercial-Share Alike 3.0 Unported"
// Toegestaan is: 
//      kopiëren, verspreiden en doorgeven,
//      en bewerking naar eigen smaak; :-)
//      op voorwaarde van opnemen van deze bronvermelding in de broncode;
//      alleen voor niet-commercieel gebruik;
//      verspreiden van een bewerking kan alleen onder dezelfde voorwaarden.
// See: http://creativecommons.org/licenses/by-nc-sa/3.0/nl/ (voor NL tekst)
//  or: http://creativecommons.org/licenses/by-nc-sa/3.0/    (for EN text)

var opacity;

function fadeIn(objId,opacity) {
	if ( !opacity ){  // no need to give a starting opacity value (i.e.: 0) in the html
		opacity = 0;
	}
	
	if (document.getElementById) {
		var obj = document.getElementById(objId);
		obj.style.marginLeft = 0;                           // margin left
		
		if (opacity <= 30) {                                 // soft start
			obj.style.filter = "alpha(opacity:"+opacity+")"; // older IE/Win
			obj.style.KHTMLOpacity = opacity/100;            // Safari<1.2, Konqueror
			obj.style.MozOpacity = opacity/100;              // older Mozilla and Firefox
			obj.style.opacity = opacity/100;                 // modern browsers
			opacity += 1;
			window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 1);
		}

		if ( opacity > 30 && opacity <= 60) {                // speeding up
			obj.style.filter = "alpha(opacity:"+opacity+")"; // older IE/Win
			obj.style.KHTMLOpacity = opacity/100;            // Safari<1.2, Konqueror
			obj.style.MozOpacity = opacity/100;              // older Mozilla and Firefox
			obj.style.opacity = opacity/100;                 // modern browsers
			opacity += 2;
			window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 3);
		}
		
		if ( opacity > 60 && opacity <= 100) {               // speeding up more
			obj.style.filter = "alpha(opacity:"+opacity+")"; // older IE/Win
			obj.style.KHTMLOpacity = opacity/100;            // Safari<1.2, Konqueror
			obj.style.MozOpacity = opacity/100;              // older Mozilla and Firefox
			obj.style.opacity = opacity/100;                 // modern browsers
			opacity += 3;
			window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 5);
		}
	}
}

function fadeOut(objId,opacity) {
	if ( !opacity ){   // no need to give a starting opacity value (i.e.: 100) in the html
		opacity = 100;
	}

	if (document.getElementById) {
		var obj = document.getElementById(objId);
		obj.style.marginLeft = 0;                            // switch to opacity control
		
		if ( opacity > 60) {                                 // soft start
			obj.style.filter = "alpha(opacity:"+opacity+")"; // older IE/Win
			obj.style.KHTMLOpacity = opacity/100;            // Safari<1.2, Konqueror
			obj.style.MozOpacity = opacity/100;              // older Mozilla and Firefox
			obj.style.opacity = opacity/100;                 // modern browsers
			opacity -= 3;
			window.setTimeout("fadeOut('"+objId+"',"+opacity+")", 1);
		}
		
		if ( opacity > 30 && opacity <= 60) {                // speeding up
			obj.style.filter = "alpha(opacity:"+opacity+")"; // older IE/Win
			obj.style.KHTMLOpacity = opacity/100;            // Safari<1.2, Konqueror
			obj.style.MozOpacity = opacity/100;              // older Mozilla and Firefox
			obj.style.opacity = opacity/100;                 // modern browsers
			opacity -= 2;
			window.setTimeout("fadeOut('"+objId+"',"+opacity+")", 3);
		}

		if (opacity <= 30 && opacity >= 0 ) {                // speeding up more
			obj.style.filter = "alpha(opacity:"+opacity+")"; // older IE/Win
			obj.style.KHTMLOpacity = opacity/100;            // Safari<1.2, Konqueror
			obj.style.MozOpacity = opacity/100;              // older Mozilla and Firefox
			obj.style.opacity = opacity/100;                 // modern browsers
			opacity -= 1;
			if (opacity > 0) {
				window.setTimeout("fadeOut('"+objId+"',"+opacity+")", 5);
			}
			else {
				obj.style.opacity = 0;
				obj.style.marginLeft = "-9999px";            // avoid hover over the img itself!
			}
		}
	}
}