function replacePortalItem(port_number, imgFileName){
	var thePortal = document.getElementById('portal'+port_number);
	
	
	thePortal = thePortal.firstChild;
	
	while (thePortal.className != 'shadow'){
		thePortal = thePortal.nextSibling;
	}

	
	var aTag = thePortal.childNodes[0];
	aTag.setAttribute('href', './images/large/'+imgFileName);

	return;
}

/*
function addPlayButton(port_number){
	var newPortal = "";
	var newPortal = document.getElementById('portal'+port_number);
	
	
	// put the overlay img there
	var play_button = document.createElement('img');
	play_button.className='play_button';
	play_button.setAttribute('src', './images/play_overlayz.png');
	
	
	
	newPortal.appendChild(play_button);
	
	return true;
}
*/

function addPlayButton(port_number, imgFileName, lightboxId, imgName, imgAvailable, imgDescription){
	var newPortal = "";
	var newPortal = document.getElementById('portal'+port_number);


	// create an a tag
	var newA = document.createElement('a');

	// give it class="lightbox"
	newA.className='lightbox';

	// give it href="./images/large/file.jpg"
	newA.setAttribute('href', './images/large/'+imgFileName);

	// give it rel="lytebox[example s6]"
	newA.setAttribute('rel', 'lyteshow['+lightboxId+']');

	// give it title="Name - Available"
	newA.setAttribute('title', imgName+' - '+ imgAvailable);
	
	// get width and height of thumbnail image
	var test_image = new Image();
	test_image.src='./images/small/'+imgFileName;
	
	var csswidth = test_image.width;
	var cssheight = test_image.height;
	
	if (csswidth == 0) {csswidth = 200;}
	if (cssheight == 0) {cssheight = 200;}
	
	test_image.onload = function(){
		csswidth = test_image.width;
		cssheight = test_image.height;
		newImg.style.left = (csswidth/2)+'px';
		newImg.style.top = (cssheight/2-10)+'px';
	}

	
	
	
	// create an img tag
	var newImg = document.createElement('img');
	newImg.className='play_button';
	// give it src="./images/small/file.jpg"
	newImg.setAttribute('src', './images/play_overlay.png');
	newImg.style.left = (csswidth/2)+'px';
	newImg.style.top = (cssheight/2-10)+'px';
	
	// Give it alt="name"
	newImg.setAttribute('alt', imgName);

	// make img a child of the a tag
	newA.appendChild(newImg)


	// create a div tag
	var newDiv = document.createElement('div');
	
	
	// make it have a child p tag
	var newP = document.createElement('p');
	// give the p tag text of Description
	var pText=document.createTextNode(imgDescription);
	newP.appendChild(pText);
	
	newDiv.appendChild(newP);
	

	// append child- put the div in the a after the img
	newA.appendChild(newDiv);


	// appendChild the a tag into portal
	newPortal.appendChild(newA);
}



function buildportal(port_number, imgFileName, lightboxId, imgName, imgAvailable, imgDescription){
	var newPortal = "";
	var newPortal = document.getElementById('portal'+port_number);

	newPortal = newPortal.firstChild;
	

	while (newPortal.className != 'shadow'){
		newPortal = newPortal.nextSibling;
	}

	// create an a tag
	var newA = document.createElement('a');

	// give it class="lightbox"
	newA.className='lightbox';

	// give it href="./images/large/file.jpg"
	newA.setAttribute('href', './images/large/'+imgFileName);

	// give it rel="lytebox[example s6]"
	newA.setAttribute('rel', 'lyteshow['+lightboxId+']');

	// give it title="Name - Available"
	newA.setAttribute('title', imgName+' - '+ imgAvailable);

	// create an img tag
	var newImg = document.createElement('img');
	// give it src="./images/small/file.jpg"
	newImg.setAttribute('src', './images/small/'+imgFileName);
	// give it style.display:none - we want it to start hidden
	newImg.style.display = 'none';
	
	// Give it alt="name"
	newImg.setAttribute('alt', imgName);

	// make img a child of the a tag
	newA.appendChild(newImg)


	// create a div tag
	var newDiv = document.createElement('div');
	
	
	// make it have a child p tag
	var newP = document.createElement('p');
	// give the p tag text of Description
	var pText=document.createTextNode(imgDescription);
	newP.appendChild(pText);
	
	newDiv.appendChild(newP);
	

	// append child- put the div in the a after the img
	newA.appendChild(newDiv);


	// appendChild the a tag into portal
	newPortal.appendChild(newA);
}

function fadePortals(num_ports){

	// Create array for each portal
	var portal = new Array(num_ports);
	var current = new Array(num_ports);
	var last = new Array(num_ports);
	var thumbs = new Array(num_ports);
	for (var j=0;j<num_ports;j++){
		portal[j]=document.getElementById('portal'+j);
		thumbs[j]=portal[j].getElementsByTagName('a'); // represents all the images within the div that will be rotated
		current[j]=0;
		last[j]=0;

		// hide them all except the first one
		//for (var i=0;i<thumbs[j].length;i++){
		// 	if (i==0) continue; // Don't hide the first one
		// 	thumbs[j][i].childNodes[0].style.display = 'none';
		//}
	}
	
	function switchAll(){
		for (var j=0;j<num_ports;j++){
			switchOne(j);
		}
	}

	function switchOne(portal_id){
		// If only one image in the portal, we don't have to rotate
		if (thumbs[portal_id].length == 1){
			return;
		}
		current[portal_id] = current[portal_id]+1;
		// Do we need to go back to the 1st image?
		if (current[portal_id] >= thumbs[portal_id].length){
			current[portal_id] = 0;
		}
		// Make the changes
		// Effect.dglPuff(thumbs[portal_id][last[portal_id]].childNodes[0], {duration:.6, from:.7});
		

		Effect.dglPuff(thumbs[portal_id][last[portal_id]].childNodes[0], {duration:.5, from:.8});
		Effect.Appear(thumbs[portal_id][current[portal_id]].childNodes[0]);
		last[portal_id] = current[portal_id];
	}
	var rotator = new PeriodicalExecuter(switchAll, 5);
}




function fadePortal(port_num, delay){

	// XXXXXXXXXXXXXXXX
	// WARNING!!!!!
	// THis will probably interfere with fadePortals()


	// Create array for each portal
	var portal;
	var current;
	var last;
	var testthumbs = new Array();
	var thumbs = new Array();
	
	portal=document.getElementById('portal'+port_num);
	
	testthumbs=portal.getElementsByTagName('a'); // represents all the images within the div that will be rotated


	
	for (var j=0;j<testthumbs.length;j++){
		if(typeof(testthumbs[j].childNodes[0].src) == 'string'){
			thumbs[j] = testthumbs[j];
		}
	}

	current=0;
	last=0;
	
	function switchOne(){
		// If only one image in the portal, we don't have to rotate
		if (thumbs.length == 1){
			return;
		}
		
		

		current = current+1;
		// Do we need to go back to the 1st image?
		if (current >= thumbs.length){
			current = 0;
		}

		// Make the changes
		Effect.dglPuff(thumbs[last].childNodes[0], {duration:.45, from:.75});
		Effect.Appear(thumbs[current].childNodes[0], {duration:.4});
		last = current;
	}
	
	var rotator = new PeriodicalExecuter(switchOne, delay);
}