function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}


function MM_preloadImages() { //v3.0

	var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}


function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}


function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}


var num_of_imgs	= 79;																//the number of numbered images in the images/squares/ directory (they must have sequential names from 1.jpg to *num_of_imgs*.jpg)
var	min_delay	= 200;																//the number of milliseconds corresponding to the shortest delay between changing images -> 200 is 1/5 of a second
var	max_delay	= 0250;																//the number of milliseconds corresponding to the longest delay between changing images -> 900 is 9/10 of a second
var a_time		= 150; 																//this is the time in milliseconds it takes for each half of the flip-in/fip-out animation to happen
var flip		= true;																//this must be set to true in order to animate the image appearances/swaps, a value of false will mean images just "blank" for the_blank ms between changes
var flipFill	= false;															//this must be set to true in order to animate the image appearances during initial table fill, a value of false will mean images just appear

var tableObj	= null;
var the_img_obj	= null;
var the_cells	= null;
var the_squares	= null;
var change_to	= null;
var the_rnum	= null;
var the_delay	= null;
var cur_image	= null;
var flip_dir	= null;
var notInTable	= true;
var filled_up	= false;
var flipping	= false;
var	delay_rng	= max_delay-min_delay;
var empties		= [];
var var_num		= 1;


function addEvent(el,type,listener,useCapture) {
 	
 	if(typeof el == 'string') {el = document.getElementById(el);}
 	if(!el){return false;}
 	if(document.addEventListener) {													// W3C DOM Level 2 Events - used by Mozilla, Opera and Safari
  		if(!useCapture) {useCapture = false;} else {useCapture = true;}
  		el.addEventListener(type,listener,useCapture);
	} else {																		// MS implementation - used by Internet Explorer
  		el.attachEvent("on"+type, listener);
 	}
}


function removeEvent(el,type,listener,useCapture) {
 
 	if(typeof el == 'string') {el = document.getElementById(el);}
 	if(!el){return false;}
 	if(document.removeEventListener) {												// W3C DOM Level 2 Events - used by Mozilla, Opera and Safari
  		if(!useCapture) {useCapture = false;} else {useCapture = true;}
  		el.removeEventListener(type,listener,useCapture);
 	} else {																		// MS implementation - used by Internet Explorer
  		el.detachEvent("on"+type, listener);
 	}
}


function overCell(e) {								

	if (filled_up) {	
		thetarget = (e.target) ? e.target : e.srcElement;							//alert("the target id is " + thetarget.id + ", and the target tagName was " + thetarget.tagName);
		if (thetarget.tagName=="img" || thetarget.tagName=="IMG") {								
			imgObj	= thetarget;
		} else {																				
			if (thetarget.firstChild) {
				imgObj	= thetarget.firstChild;
			} else {
				imgObj	= nuImage();
			}
		}	
		nuSrc			= randomImage();												
		imgObj.width	= 115;
		imgObj.height	= 115;
		imgObj.src		= nuSrc;
		imgObj.style.visibility	= "visible";
	}
}


function overTable() {

	if (filled_up) {
		clearTimeout(change_to);
		notInTable = false;
	}
}


function outTable() {

	if (filled_up) { 
		delay	= min_delay + Math.floor(Math.random()*delay_rng);		 
	} else { 
		delay 	= 100;
	}
	change_to	= setTimeout(randomChange,delay);
	notInTable = true;
}


function randomImage() {

	var imgDir	= "images/squares/";
	var imgExt	= ".jpg";
	var rNum	= Math.floor(Math.random()*79) + 1;
	var rSrc	= imgDir + rNum + imgExt;			
	return rSrc;
}


function randomChange() {

	if (notInTable) {		
		if (!filled_up) {															//if there are squares left to fill, we need to ensure that our random image location is one of those...
			var flipEm	= flipFill;
			var eNum	= Math.floor(Math.random()*empties.length);
			var rNum	= empties[eNum];
			var td_el	= the_cells[rNum];
			the_img_obj	= nuImage(td_el);
			empties.splice(eNum,1);													//now we remove the eNum element from the empties array
			if (empties.length==0) { 												
				filled_up = true;													//alert("the images have all been populated!");
				the_squares	= tableObj.getElementsByTagName("img");
				showAll();
			}
			the_delay 	= 50;
		} else {																	//this is the case where all the squares have been filled and all we do is change the image in any square...
			var flipEm	= true;
			var sqimgs	= the_squares.length;
			var rNum	= Math.floor(Math.random()*sqimgs);				
			the_img_obj	= the_squares[rNum];
			the_delay	= min_delay + Math.floor(Math.random()*delay_rng);
		}
		if (flipEm) {
			flipAway();
		} else {																	//this is used when filling the table the first time, or always if flip animation is disabled (var flip = false in vars section)
			doIt();
		}
	}
}


function flipAway () {																//animate shrinking or flipping of 'old' image...

	delay	= the_delay;
	imgObj	= the_img_obj;
	
	if (!flipping && notInTable) {													//check to see if another animation is in progress, if not (and if cursor is NOT over the table), start the animation
		cur_image	= imgObj;
		flipping	= true;
		dir			= Math.floor(Math.random()*2);
		if (dir==1) {
			flip_dir	= "horiz";
			flip_param	= "width";
		} else {
			flip_dir	= "vert";
			flip_param	= "height";
		}
		if (!filled_up) {
			f_time	= 50;
		} else {
			f_time	= a_time;
		}
		window["shrink_"+var_num] = new Fx.Style(imgObj,flip_param,f_time);			//we might not need variable variable names if we use flipping to preclude a new animation interrupting a current animation...
		window["shrink_"+var_num].start(0); 										//tries to read height/width value and goes from current to 0															
//		setTimeout(changeImage,f_time+delay);
		setTimeout(changeImage,f_time+300);
	} else {
		setTimeout(flipAway,50);													//if another animation is in progress, set a timeout to try again later in 50 msec
	}
}


function changeImage() {

//	imgObj		= cur_image;
	imgObj		= the_img_obj;
	addEvent(imgObj,"load",flipBack,false);
	nuSrc		= randomImage();	
	imgObj.src	= nuSrc;
}


function flipBack() {																//animate expansion or flipping of 'new' image...

//	imgObj		= cur_image;
	imgObj		= the_img_obj;
	removeEvent(imgObj,"load",flipBack,false);
	imgObj.style.visibility	= "visible";
	
	if (flip_dir=="horiz") {
		flip_param	= "width";
		flip_end	= 115;
	} else {
		flip_param	= "height";
		flip_end	= 115;
	}
	if (!filled_up) {
		delay	= 50;
		f_time	= 100;
	} else {
		delay	= min_delay + Math.floor(Math.random()*delay_rng);
		f_time	= a_time;
	}
	window["grow_"+var_num] = new Fx.Style(imgObj,flip_param,f_time);				//we might not need variable variable names if we use flipping to preclude a new animation interrupting a current animation...
	window["grow_"+var_num].start(flip_end); 										//tries to read current height/width value and goes from current to 50/51		
	flipover	= setTimeout(endFlip,f_time+50);
	change_to	= setTimeout(randomChange,delay);
}


function endFlip() {

	flipping = false;
}


function showAll() {

	for (i=0; i<the_cells.length; i++) {
		if (the_cells[i].firstChild) {
			the_cells[i].firstChild.style.width			= "115px";
			the_cells[i].firstChild.style.height		= "115px";
			the_cells[i].firstChild.style.visibility	= "visible";
		} else {																	alert("image number " + i + " is missing!");
		
		}
	}
}


function nuImage(td_el) {

	var imgObj = document.createElement("IMG");
	imgObj.width	= 115;
	imgObj.height	= 115;
	imgObj.style.visibility	= "hidden";
	td_el.appendChild(imgObj);
	return imgObj;
}


function doIt () {																	//this is used when there is no flip animation (during initial fill)

	addEvent(the_img_obj,"load",goThere,false);
	the_img_obj.src	= randomImage();
}


function goThere() {																//this is used when there is no flip animation (during initial fill)

	the_img_obj.style.visibility	= "visible";
	removeEvent(the_img_obj,"load",goThere,false);
	if (notInTable) {
		change_to	= setTimeout(randomChange,the_delay);
	}
}


function init() {
	
	tableObj	= document.getElementById("the_table");
	tableObj.style.background	= "none";
	the_cells	= tableObj.getElementsByTagName("td");
	for (i=0; i<the_cells.length; i++) {
		var cellObj	= the_cells[i];
		addEvent(cellObj,"mouseover",overCell,false);							
	}	
	addEvent(tableObj,"mouseover",overTable,false);
	addEvent(tableObj,"mouseout",outTable,false);
	for (i=0; i<the_cells.length; i++) {
		empties[i] = i;
	}
	change_to	= setTimeout(randomChange,100);
	MM_preloadImages('images/btn_enter_hover.gif');
}