function updateBigImage(inIndex) {	
	fadeDuration = 0.2;
	appearDuration = 0.7;
	imageDir='images/big/';
	imageName = imageList[inIndex];
	thumbId = "t"+inIndex;
	
	$('bigImage').fade({ duration: fadeDuration, afterFinish: function(){
	   $('bigImage').observe("load", function(){
	  		setThumb(thumbId); 
		   	$('bigImage').appear({duration: appearDuration});  
	   });	
	   $('bigImage').writeAttribute('src', ''); 
	   $('bigImage').writeAttribute('src', imageDir+imageName); 	   
	   $('bigImage').setStyle({ height: "510px", width:"auto"});   
     } 
	}); 
   	imageListIndex = inIndex;
   	return false;
}


function setThumb(inID) {
	var ts = $$('#thumbs a.selected');
	ts[0].removeClassName('selected');
	$(inID).addClassName('selected');
}

function prevImage() {
	if(imageListIndex == 0) {
		imageListIndex = imageList.length-1; }
	else {
		imageListIndex--; }
	updateBigImage(imageListIndex);
	return false;
}

function nextImage() {
	if(imageListIndex == imageList.length-1) {
		imageListIndex = 0; }
	else {
		imageListIndex++; }
	updateBigImage(imageListIndex);
	return false;
}

function hideImage(inEntryID) {
	new Effect.Fade(inEntryID, {duration:.4, queue: { position: 'end', scope: inEntryID, limit:2 }});
}

function showImage(inEntryID) {
	setTimeout(function(){new Effect.Appear(inEntryID, {duration:.6, queue: { position: 'end', scope: inEntryID, limit:1 }})},700);
}


/*
function hideImage(inEntryID) {
	$(inEntryID).fade({duration: 0.7, queue: { position: 'end', scope: inEntryID, limit:1 }});  
}

function showImage(inEntryID) {
	$(inEntryID).appear({duration: 0.7, queue: { position: 'end', scope: inEntryID, limit:1 }});  
}
*/


/*

<script type="text/javascript">
var RollIt = {
    timeout : null,
    showPopup : function(){
        clearTimeout(this.timeout);
        if($('rollit').style.display == 'none'){
            this.timeout = setTimeout(function(){new Effect.BlindDown('rollit', {duration:.3, fps:40})},400);
        }
    },
    hidePopup : function(){
        if($('rollit').style.display == 'none'){
            clearTimeout(this.timeout);
        }else{
            this.timeout = setTimeout(function(){new Effect.BlindUp('rollit', {duration:.3, fps:40})},300);
        }
    }    
}
</script>

<div style="padding: 10px; background: #fff999;">
<a href="#" onclick="hoverThumbnail.showImage('e_37')" onmouseout="hoverThumbnail.showImage('e_37')" onmouseover="hoverThumbnail.hideImage('e_37')">Roll over Me</a>
</div>

<div id="rollit" style="display:none; background: #ff9999;" onmouseout="RollIt.hidePopup('rollit')" onmouseover="RollIt.showPopup('rollit')"> 

<h3 style="margin: 0;">Roll It</h3>
By keeping your mouse hovering over this div or over the link that made it appear, it will stay open.

<br/><br/>
But, if you roll away from this div, it will roll back up.
</div>

<div style="background: #fff999; padding: 10px;">
  Here's a bunch of other content
</div>
*/