// Copyright (c) 2009 by Ken Dykes (Dognose Productions)
//
var fade_opacities = new Array();
var fade_IDs = new Array();
var fade_items = new Array();
var fade_increments = new Array();
var fade_reverses = new Array();
var fade_maxes = new Array();
var fade_mins = new Array();

function fadeUp(id, slowness, newtext, reverses, max, min) {
	if(!reverses)
		reverses = 0;		// do once in one direction
	if(!max || (max > 100))
		max = 100;
	if(!min || (min < 0))
		min = 0;
	fadeThing('up', id, slowness, newtext, reverses, max, min);
}

function fadeDown(id, slowness, newtext, reverses, max, min) {
	if(!reverses)
		reverses = 0;		// do once in one direction
	if(!max || (max > 100))
		max = 100;
	if(!min || (min < 0))
		min = 0;
	fadeThing('down', id, slowness, newtext, reverses, max, min);
}

function fadeThing(direction, id, slowness, newtext, reverses, max, min) {	// slowness in milliseconds
	if(!reverses)
		reverses = 0;		// do once, one direction
	if(!max || (max > 100))
		max = 100;
	if(!min || (min < 0))
		min = 0;
	fade_reverses[id] = reverses;
	fade_maxes[id] = max;
	fade_mins[id] = min;
	fade_increments[id] = direction;
	fade_items[id] = document.getElementById(id);;
	if(!fade_items[id]) {
		document.write('<br>could not lookup document id='+id);
		return;
	}
	if(fade_increments[id] == 'up') {
		fade_opacities[id] = fade_mins[id];		// starting opacity
		fade_increments[id] = 1;
	}
	else if(fade_increments[id] == 'down') {
		fade_opacities[id] = fade_maxes[id];
		fade_increments[id] = -1;
	}
	else {
		document.write('<br>invalid call to fadeThing, direction should be up|down, not='+direction);
		return;
	}

		// set the opacity initally before setting any 'new text', reduces flicker
		// onscreen between zero and 100% opacity in up/down mixes
	fade_items[id].style.filter = 'alpha(opacity='+fade_opacities[id]+')';	// IExplorer 5.5 to 7 ?
	fade_items[id].style.opacity = fade_opacities[id] / 100;		// Newer Mozilla and Safari

	if(newtext)
		fade_items[id].firstChild.nodeValue = newtext;

		// probably should be window.setInterval() for pendantic correctness
	fade_IDs[id] = setInterval(function() {fadeStep(id)}, slowness);
}

function fadeStep(id) {
	if(fade_increments[id] == 0) {
		clearInterval(fade_IDs[id]);
		fade_IDs[id] = 'idle';
	}

	fade_opacities[id] = fade_opacities[id] + fade_increments[id];

	if((fade_opacities[id] <= fade_mins[id]) || (fade_opacities[id] >= fade_maxes[id])) {
		if(fade_reverses[id] < 0)		// go forever
			fade_increments[id] = -fade_increments[id];
		else if(fade_reverses[id] > 0) {
			fade_reverses[id]--;
			fade_increments[id] = -fade_increments[id];
			// alert('switching direction incr now='+fade_increments[id]+' reverses left='+fade_reverses[id]+' opacity='+fade_opacities[id]);
			return;		// kinda like "goto increment before this if clause :)
		}
		else {
			clearInterval(fade_IDs[id]);
			fade_IDs[id] = 'idle';
		}
	}

	fade_items[id].style.opacity = fade_opacities[id] / 100;		// Modern Mozilla and Safari
        fade_items[id].style.MozOpacity = (fade_opacities[id] / 100);		// older Mozilla and Netscape
        fade_items[id].style.KhtmlOpacity = (fade_opacities[id] / 100);		// older Safari
        fade_items[id].style.filter = "alpha(opacity=" + fade_opacities[id] + ")";    // IExplorer 4 to 7 ?

}

// here is the css approach:
//	.transparent75 {
//		filter:alpha(opacity=75);	/* ie4 to ie7 */
//		-moz-opacity:0.75;		/* older mozilla and netscape */
//		-khtml-opacity: 0.75;		/* older safari */
//		opacity: 0.75;			/* newer mozilla, safari, chrome, opera */
//		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)";	 /* ie8 */
//		zoom:1;				/* so the elmement triggers "hasLayout" */
//	}
// use something like:  <img class="transparent75" src="g/image.jpg">
//
// IExplorer 7 requires the hasLayout css be triggered before opacity is acted upon. zoom:1 should do that
//     see: http://haslayout.net/haslayout  for sordid history of hasLayout
// IExplorer 7 also has a bug where the text will be bold-faced unless you set the css background-color
//   ie: use something like <div style="zoom:1; background-color:#ffffee;" id="magical_msg">xxx</div>