// ---------------------------------------------------------------
// Class BackgroundFader
//
// Version: 1.0
// Date: 2005-06-02
// Author: Adam Michela (www.axentric.com/aside/fat/)
// Adjusted to Publicform library: Andreas Doelling (doelling@publicform.de)
//
// Class for fading the background color of one or more elements from 
// one color to another.
// ---------------------------------------------------------------

function BackgroundFader(elementTypes) {
	// -----------------------------------------------------
	// Properties
	// -----------------------------------------------------
	this.elementTypes = elementTypes;
	
	
	// -----------------------------------------------------
	// Method makeHex
	// Converts RGB color value to hexadecimal format.
	// -----------------------------------------------------
	this.makeHex = function(r, g, b) {
		r = r.toString(16); if (r.length == 1) r = '0' + r;
		g = g.toString(16); if (g.length == 1) g = '0' + g;
		b = b.toString(16); if (b.length == 1) b = '0' + b;
		return "#" + r + g + b;
	}
	
	// -----------------------------------------------------
	// Method fadeAll
	// Iterates through all elements searching for elements with 
	// a CSS class name containing "fade" or "fade-xxx".
	// For those elements fadeElement() is called.
	// -----------------------------------------------------
	this.fadeAll = function() {
		for(var i=0; i<elementTypes.length; i++) {
			var a = document.getElementsByTagName(elementTypes[i]);
			for (var k = 0; k < a.length; k++) {
				var o = a[k];
				var r = /fade-?(\w{3,6})?/.exec(o.className);
				if (r) {
					if (!r[1]) r[1] = "";
					if (o.id) this.fadeElement(o.id,null,null,"#"+r[1]);
				}
			}
		}
	}
	
	
	// -----------------------------------------------------
	// Method fadeElement
	// Fades the background color of the given element.
	// -----------------------------------------------------
	this.fadeElement = function (id, fps, duration, from, to) {
		if(this != arguments.callee.scope){
	      if(typeof arguments.callee.apply == "function") {
			  	return arguments.callee.apply(arguments.callee.scope, arguments);
			} else {
		  		return  arguments.callee.scope.fadeElement();
			}
	    }
		if (!fps) fps = 30;
		if (!duration) duration = 3000;
		if (!from || from=="#") from = "#FFFF33";
		if (!to) to = this.getBgcolor(id);
		
		var frames = Math.round(fps * (duration / 1000));
		var interval = duration / frames;
		var delay = interval;
		var frame = 0;
		
		if (from.length < 7) from += from.substr(1,3);
		if (to.length < 7) to += to.substr(1,3);
		
		var rf = parseInt(from.substr(1,2),16);
		var gf = parseInt(from.substr(3,2),16);
		var bf = parseInt(from.substr(5,2),16);
		var rt = parseInt(to.substr(1,2),16);
		var gt = parseInt(to.substr(3,2),16);
		var bt = parseInt(to.substr(5,2),16);
		
		var r,g,b,color;
		while (frame < frames) {
			r = Math.floor(rf * ((frames-frame)/frames) + rt * (frame/frames));
			g = Math.floor(gf * ((frames-frame)/frames) + gt * (frame/frames));
			b = Math.floor(bf * ((frames-frame)/frames) + bt * (frame/frames));
			color = this.makeHex(r,g,b);
		
			var methodReference = this.setBgcolor(id, color);
			window.setTimeout(methodReference, delay);

			frame++;
			delay = interval * frame; 
		}
		var methodReference = this.setBgcolor(id, color);
		window.setTimeout(methodReference, delay);
	}
	this.fadeElement.scope = this;
	
	
	// -----------------------------------------------------
	// Method setBgcolor
	// Sets the background color for the element specified by 
	// the given id.
	// -----------------------------------------------------
	this.setBgcolor = function(id, color) {
		return (function(){
	        /* This inner function is to be executed with - setTimeout
	           - and when it is executed it can read, and act upon, the
	           parameters passed to the outer function:-
	        */
			var o = document.getElementById(id);
			o.style.backgroundColor = color;
    	});
	}
	
	
	// -----------------------------------------------------
	// Method getBgcolor
	// Returns the background color of the element specified by 
	// the given id.
	// -----------------------------------------------------
	this.getBgcolor = function (id) {
		var o = document.getElementById(id);
		while(o) {
			var c;
			if (window.getComputedStyle) c = window.getComputedStyle(o,null).getPropertyValue("background-color");
			if (o.currentStyle) c = o.currentStyle.backgroundColor;
			if ((c != "" && c != "transparent") || o.tagName == "BODY") { break; }
			o = o.parentNode;
		}
		if (c == undefined || c == "" || c == "transparent") c = "#FFFFFF";
		var rgb = c.match(/rgb\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/);
		if (rgb) c = this.makeHex(parseInt(rgb[1]),parseInt(rgb[2]),parseInt(rgb[3]));
		return c;
	}
	
}