// JavaScript Document ///// www.santiago.bz

////// DEFINE GLOBALS
var targ;

var width;
		
var height;

var flag;

var myvis;

var newWidth = 0;

// WHENEVER USER CLICKS ON STAGE
document.onclick = checkEvent;
 
// CHECK TO SEE WHAT HAS BEEN CLICKED
function checkEvent(e) {

////// CHECK THE EVENT.TARGET

if (!e) { var e = window.event; }
	
if (e.srcElement) { targ = e.srcElement;} else if (e.target) { targ = e.target; }
	
if (targ.nodeType == 3) { targ = targ.parentNode; } // defeat Safari bug
	
		if ( targ.className == "image" ) { // ONLY HAPPENS IF YOU CLICK ON AN OBJECT 
											// WITH THE image CLASS
			
					width = targ.width  * 6 ; // THIS DEPENDS ON THE PROPORTION OF THE THUMBNAIL
						
					height = targ.height * 6 ; // CHANGE THIS NUMBER IF YOU WANT BIGGER
						
					desc = targ.alt; 	// CONTENTS OF THE ALT PROPERTY IN THE IMG TAG
										// USED TO STORE THE DESCRIPTION OF THE IMAGE
										
					src = targ.name; 	// CONTENTS OF THE NAME  PROPERTY IN THE IMG TAG
										// USED TO STORE THE SRC OF THE NEW IMAGE TO BE LOADED
					
					flag = true;		// IS THE BIG IMAGE BEING DISPLAYED OR NOT?
				
		controlDisplay(flag); 	// THIS IS WHAT HANDLES EVERYTHING AFTER THE USER HAS CLICKED ON 				
								// A THUMBNAIL DECLARING THE VALUE OF flag
		}

		if ( targ.className == "close" ) {	
		
			width = 10;
			
			height = 10;
			
			desc = " ";
			
			src = "img/transparent.gif";
			
			flag = false;
		
		controlDisplay(flag); 	// THIS IS WHAT HANDLES EVERYTHING AFTER THE USER HAS CLICKED ON 				
								// A THUMBNAIL DECLARING THE VALUE OF flag
		}

}

function updateSrc(desc, src) {

	document.getElementById('imagedisplay').src = src;
	
	document.getElementById('description').innerHTML = desc;
	
}

function updateVisibility(flag) {

	if (flag) { myvis = "visible"; } else { myvis = "hidden"; }

	document.getElementById('background').style.visibility = myvis;
		
	document.getElementById('container').style.visibility = myvis;

}


function controlDisplay(flag) {

	if ( flag == true ) {
					
					testIntervalId = setInterval ( "checkPlus()", 0.05 );
	}
	else {
					
					testIntervalId = setInterval ( "checkMinus()", 0.05 );
	}

}


	
function checkPlus() {

		updateVisibility(flag);
	
		var r = width/height;
			
		newWidth += 100; // GROWTH  SPEED
		
		newHeight = Math.round(newWidth / r);
	
		document.getElementById('background').style.opacity = newWidth / width / 4;
	
		transformDisplay(newWidth, newHeight);
	
	if (newHeight >= (height-10) && newWidth >= (width-10)) {
	
		clearInterval ( testIntervalId );
		
		newWidth = width;
		newHeight = height;
		
		updateSrc(desc, src);
		
	}

}

function checkMinus() {

		var r = width/height;
		
		newWidth -= 100;
		
		newHeight = Math.round(newWidth / r);
		
	transformDisplay(newWidth, newHeight);
		
	if (newWidth < 10) {
	
		clearInterval ( testIntervalId );
		
		newWidth = 0;
					
		flag = false;
					
		updateSrc(desc, src);
		
		updateVisibility(flag);
	
	}

}

function transformDisplay(newWidth, newHeight) {

		
		document.getElementById("display").style.opacity = newWidth / width;
		document.getElementById("imagedisplay").style.opacity = newWidth / width;
		document.getElementById("imagedisplay").style.width = newWidth + "px";
		document.getElementById("imagedisplay").style.height = newHeight + "px";


}