// FILE:  fading.js
// AUTHOR: Adam Yukio Toda

/* STATIC GLOBAL VARIABLES */

var TRANS_SPEED = 15;		// Speed of transparency in milliseconds 
var SLOW_CHANGE_RATE = 2;		// Shades of Transparency change per TRANS_SPEED.
var MEDIUM_CHANGE_RATE = 5;
var FAST_CHANGE_RATE = 10;
var VERY_FAST_CHANGE_RATE = 15;
var HIDDEN_OPACITY = 0;
var SHOW_OPACITY = 100;
var IMAGE_TRANSPARENT_OPACITY = 30;	// Opacity of non-selected items (100 being completely opaque).

/* OTHER GLOBAL VARIABLES */

var imgsLength = 0;		// Length of Imgs Array.
var infoLength = 0;		// Length of hiddenInfo Array

/* ARRAYS */
var imgs = new Array();
var hiddenInfo = new Array();



/* ELEMENT OBJECT
 * --------------
 *
 */
 
/* CONSTRUCTOR
 * -----------
 * Creates an image object.  The image object has values for controlling
 * it's opacity, so the appropriate image can be changed on screen.
 */
 
 function image(id, opacity) {
	//Fields
	this.id = id;
	this.opacity = opacity;
	this.timer;
	
	//Methods
	this.changeOpacity = changeOpacity;
 }
 
 

 /* METHOD: changeOpacity
 * ----------------------------
 * Function that takes in a new Opacity to change the panel to, and 
 * a change rate.  This function is meant to be used in a timer for
 * a slow transparency change effect.  This function can also be
 * used to change the opacity in one step by just making the change
 * the difference between the existing panel opacity and the new
 * opacity.  This function will automatically determine if a change 
 * is making the opacity more opaque or transparent.
 */

function changeOpacity(newOpacity, change) {	
	// Used for making the image opaque.
	if (newOpacity > this.opacity && Math.abs(this.opacity + Math.abs(change) - newOpacity) > newOpacity%Math.abs(change)) 
 		this.opacity += Math.abs(change);
 		
	// Used for making the image transparent
	else if (newOpacity < this.opacity && (this.opacity - Math.abs(change) - newOpacity) > newOpacity%Math.abs(change)) 
		this.opacity -= Math.abs(change);

	// Used to stop the fading.
	else { 
		clearInterval(this.timer);
		this.opacity = newOpacity;
	}

	// Applying the transparency changes.  
	try { getObject(this.id).filters.alpha.opacity = this.opacity; }
	catch(e) {
		if (getObject(this.id).style.opacity != undefined) 
			getObject(this.id).style.opacity = this.opacity/100; 
		else if (getObject(this.id).style.MozOpacity != undefined)
			getObject(this.id).style.MozOpacity = this.opacity/100;
		else	
			clearInterval(this.timer); 	
	}
	
	// Makes Hidden Layers appear behind all visible layers.
	// Visible layers need to have a z-index higher than 1.
	/*if (this.opacity == 0) { 
		getObject(this.id).style.zIndex = 1;
	} */
}



/* FUNCTIONS */

/* HIDING AND SHOWING FUNCTIONS */

function showInfo(imgID) {
	
	// SHOW THE INFO //
	getObject(imgID + "Info").style.zIndex = 3;
	window.clearInterval(hiddenInfo[imgID + "Info"].timer);
	hiddenInfo[imgID + "Info"].timer = setInterval("hiddenInfo['"+ imgID + "Info'].changeOpacity(" + SHOW_OPACITY + ", " + VERY_FAST_CHANGE_RATE + ")", TRANS_SPEED);
	
	// HIDES ALL OTHER PICTURES //
	for (var i=0; i < imgsLength; i++) {
		
		// HIDES ALL SMALL PICTURES
		if (imgs[i].id != imgID) {
			window.clearInterval(imgs[i].timer);
			imgs[i].timer = setInterval("imgs[" + i + "].changeOpacity(" + IMAGE_TRANSPARENT_OPACITY + ", " + FAST_CHANGE_RATE + ")", TRANS_SPEED);
		}
		
		// HIDES OTHER INFO DIVS
		if (hiddenInfo[i].id != imgID + "Info") {
			window.clearInterval(hiddenInfo[i].timer);
			hiddenInfo[i].timer = setInterval("hiddenInfo[" + i + "].changeOpacity(" + HIDDEN_OPACITY + ", " + VERY_FAST_CHANGE_RATE + ")", TRANS_SPEED);
		}
	}
}

function hideInfo(imgID) {

	// HIDE ALL INFO //
	for (var i=0; i < infoLength; i++) {
		window.clearInterval(hiddenInfo[i].timer);
		hiddenInfo[i].timer = setInterval("hiddenInfo[" + i + "].changeOpacity(" + HIDDEN_OPACITY + ", " + MEDIUM_CHANGE_RATE + ")", TRANS_SPEED);
	}
		
	// SHOWS ALL OTHER PICTURES //
	for (var i=0; i < imgsLength; i++) {
		if (imgs[i].id != imgID) {
			window.clearInterval(imgs[i].timer);
			imgs[i].timer = setInterval("imgs[" + i + "].changeOpacity(" + SHOW_OPACITY + ", " + MEDIUM_CHANGE_RATE + ")", TRANS_SPEED);
		}
	}
}



 

/* OBJECT LOADING FUNCTIONS
 * ------------------------
 * Loads the image objects for the hidden info and the small mouseover images.
 */


function loadImageObject(imgID, visible) {
	if (visible) imgs.push(new image(imgID, SHOW_OPACITY));
	else imgs.push(new image(imgID, HIDDEN_OPACITY));
	
	imgs[imgID + "Info"] = new image(imgID + "Info", HIDDEN_OPACITY);
	imgsLength++;
	
	for (var i=0; i < imgsLength; i++) {
		if (imgs[i].id == imgID) {
			imgs[imgID] = imgs[i];
		}
	}
}


function loadImageInfoObject(infoID) {
	hiddenInfo.push(new image(infoID, HIDDEN_OPACITY));
	infoLength++;
	
	for (var i=0; i < infoLength; i++) {
		if (hiddenInfo[i].id == infoID) {
			hiddenInfo[infoID] = hiddenInfo[i];
		}
	}
}


/* FUNCTION getObject
 * ------------------
 * Helper function used to retrieve objects in web space.  Shorter form
 * of using the document.getElementById command.
 */

function getObject(obj) {
	if (document.getElementById) return document.getElementById(obj);
	else if (document.all) return document.all[obj];
}


/* END OF JAVASCRIPT CODE */