// global arrays
var fading_els = new Array();		// this is used to store whether an element is "busy" with a transition, or is free to be transitioned
var myOpacity = new Array();		// this is used to store an elements current opacity
var nextOpacity = new Array();
nextOpacity['opac'] = new Array();
nextOpacity['ms'] = new Array();
	
	
	// fade an element through an opacity range - rather use fadeTo() for smoother transitions
	function opacity(id, opacStart, opacEnd, millisec) {
		if (fading_els[id] == "busy") {
			nextOpacity["opac"][id] = opacEnd;
			nextOpacity["ms"][id]   = millisec;
			return;
		}
		
	    //speed for each frame
	    var speed = Math.round(millisec / 100);
	    var timer = 0;
//		document.getElementById(id).style.display = '';			// this line has been removed for compatibility with motion.js
	
	    //determine the direction for the blending, if start and end are the same nothing happens
	    if(opacStart > opacEnd) {
			fading_els[id] = 'busy';
	        for(i = opacStart; i >= opacEnd; i--) {
	            setTimeout("setOpacity(" + i + ",'" + id + "')",(timer * speed));
	            timer++;
	        }
			setTimeout("nextOpac('" + id + "')", (timer * speed));
	    } else if(opacStart < opacEnd) {
			fading_els[id] = 'busy';
	        for(i = opacStart; i <= opacEnd; i++) {
	            setTimeout("setOpacity(" + i + ",'" + id + "')",(timer * speed));
	            timer++;
	        }
			setTimeout("nextOpac('" + id + "')", (timer * speed));
	    }
	}
	
	
	// fade to a specific opacity from current opacity
	function fadeTo(id, opacEnd, millisec) {
		var opacStart = myOpacity[id];
		if (parseInt(opacStart) !== opacStart) {
			if (document.getElementById(id).style.display == "none") { opacStart = 0; } else { opacStart = 100; }
		}
		opacity(id, opacStart, opacEnd, millisec);
	}
	
	
	// fades in/out for an element. Can specify the time in ms. 
	function fade(id, inout, millisec) {
		if (inout.toLowerCase() == 'in') {
			faceTo(id, 100, millisec);
		} else {
			faceTo(id, 0, millisec);
		}
	}
	

	//change the opacity for different browsers
	function setOpacity(opacity, id) {
		try {
		    var object = document.getElementById(id).style;
			object.display = "block";
		    object.opacity = (opacity / 100);
		    object.MozOpacity = (opacity / 100);
		    object.KhtmlOpacity = (opacity / 100);
		    object.filter = "alpha(opacity=" + opacity + ")";
			myOpacity[id] = opacity;
	    } catch(ex) { }
		try {	// this is to prevent the dodgy antialiasing bug in ie6 where text gets jagged black pixels around it when faded in
			if (opacity == 100) { document.getElementById(id).style.removeAttribute('filter'); }
		} catch (ex) { }
		if (opacity == 0) { document.getElementById(id).style.display = 'none'; }
	}
	
	function changeOpac(opacity, id) {
		setOpacity(opacity, id);
	}


// -----------------------------------------------------------------------------------------------------------------------------
	
	// CLEAN UP FUNCTION - look and see if we need to do more transitioning - used for chaining animations
	function nextOpac(id) {
		fading_els[id] = '';
		try {
			if (nextOpacity['opac'][id] !== '') {
				fadeTo(id, nextOpacity['opac'][id], nextOpacity['ms'][id]);
				nextOpacity['opac'][id] = '';
			}
		} catch(ex) { }
	}