var activeButton = null ;
 var shortcutsOn = false ;
 var nextPicKey="n" ;
 var previousPicKey="b" ; 
 var randomPicKey="r" ;
 var biggerKey="i" ;
 var smallerKey="o" ;
 var activeImageIndex = 0 ;
 var imageCount = 47 ;
 var inPlayMode = false ;
 
 /* formatting, etc... image info */
 var gShowFileNumbers = false ;
 var comments = new Array ("", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "") ;
 var filenames= new Array ("", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "") ;
 var imgWidths = new Array("320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320", "320") ;
 var imgHeights = new Array("240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240", "240") ;
 // end image info

 /*functions */

 
 function getImgPth(){
    
  return "imgs/img_".concat((activeImageIndex+"").concat(".jpg")) ; 
 }

 function displayImage(){

  var  ele, n = 0 ;
  var fieldsetEle ;

  // set table display width
  ele=document.getElementById("tableDisplaySpace") ;
  ele.width = imgWidths[activeImageIndex] ;

  //set image
  ele=document.getElementById("imageSpace") ;
  ele.src=getImgPth() ;
  ele.width = imgWidths[activeImageIndex] ; 
  ele.height = imgHeights[activeImageIndex] ;

  /* Optional info spaces
  set filename space of image display
  */    
  ele = document.getElementById("filenameSpace") ;
  ele.innerHTML = filenames[activeImageIndex] ;
  ele.className= ele.innerHTML.length ? "isFilename" : "isHidden"  ;


  /*set fileNumber space of image */ 
  ele=document.getElementById("filenumberSpace") ;    
  ele.innerHTML = "Photo " + (activeImageIndex + 1) + " of " + imageCount ;


  /* set comment text space   */  
  ele = document.getElementById("commentSpace") ;
  ele.innerHTML = comments[activeImageIndex] ;
  ele.className = ele.innerHTML.length ?  "isCommentText" : "isHidden"  ;
  
  /* set comment fieldset space */ 
  fieldsetEle=document.getElementById("commentFieldSet") ;
  fieldsetEle.className = ele.innerHTML.length  ?  "isCommentFieldSet" : "isHidden"  ;
    
 }

 
 function setup(){
  displayImage() ;
 }
 
 
 //functions dealing with buttons
 function turnOn(ele){
  if(ele.id=="play" && inPlayMode) {
   ele.src="imgs/StopOn.jpg" ; 
  } 
  else if(!inPlayMode) 
   ele.src = ele.alt ;
 
 }
 
 function turnOff(ele){
  if(!inPlayMode) ele.src = (ele.src).replace("On.jpg","Off.jpg" ) ;
 }
 

 function goBack(){
  if(!inPlayMode){
   activeImageIndex = activeImageIndex == 0 ? imageCount - 1 : activeImageIndex - 1 ; 
   displayImage() ; 
  }
 }
 
 function nextPressed(){
  if(!inPlayMode){
   goNext()  ;
  }

 }
 
 function goNext(){ 
   activeImageIndex = (activeImageIndex == imageCount - 1) ? 0 : activeImageIndex + 1 ; 
   displayImage() ;
 }
 
 function goRandom(){
   activeImageIndex = Math.round(Math.random()*(imageCount - 1)) ;
   displayImage() ;
 }

 function goPlay(ele){
  var stopOffPth =  "imgs/StopOff.jpg" ;
  inPlayMode = !inPlayMode ;
  ele.src = inPlayMode ? stopOffPth : (ele.alt).replace("On.jpg","Off.jpg") ;
  
  showOrHideSlideshowControls()
  //____ deal with the shortcut space...
  var shortcutText = document.getElementById("shortcutsSpace");

  if(inPlayMode){
   shortcutText.innerHTML =  "<span style=\"color:#666\">Playing:Shortcuts Disabled</span>" ;
  }
  else{
   var onOff = shortcutsOn ?   "00f\">Shortcuts On" : "000\">Shortcuts Off";
   var innerStr="<a class=\"shortCutLink\" href=\"Javascript:toggleKeyCommands()\"><span style=\"color:#" + onOff + "</span></a>";
   shortcutText.innerHTML = innerStr;
  }
  if(inPlayMode) 
   setTimeout("doPlay()",(parseInt((document.getElementById("durationMenu").value)))*1000) ;

 }
 
 function doPlay(){

  var randomCheckboxTrue = document.getElementById("randomCheckbox").checked ;
  var duration = (parseInt((document.getElementById("durationMenu").value)))*1000 ;
 
  if(inPlayMode){
   randomCheckboxTrue ? goRandom() : goNext() ;
   setTimeout("doPlay()",duration) ;
  }
 
  
 }

 function  showOrHideSlideshowControls(){
  var ele = document.getElementById("slideshowControls") ;

 if(inPlayMode){
  ele.innerHTML = "<form action=\"#\" name = \"slideshowParameters\" class=\"formText\" >Play randomly:<input id=\"randomCheckbox\" type=\"checkbox\" name=\"slideshowRandomCB\" value=\"playRandomly\" />  &nbsp;&nbsp;&nbsp;Duration:<select id=\"durationMenu\" name=\"durationDropDownMenu\"><option name=\"2\" value=\"2\" >2</option><option name=\"3\" value=\"3\" >3</option><option name=\"5\" value=\"5\" >5</option><option name=\"7\" value=\"7\" >7</option><option name=\"10\" value=\"10\" >10</option><option name=\"15\" value=\"15\" >15</option></select></form>"; 
 }
 else{
  ele.innerHTML="";
 } 

}

 //___________________________________ KeyPress functions
 
 function userKeyDown(e){
  if(inPlayMode || !shortcutsOn){
   return false;
  }
  var key = window.event ? e.keyCode : e.which;
  var theKey = (String.fromCharCode(key)).toLowerCase();
  var bigger = theKey==biggerKey;
  var smaller = theKey==smallerKey;
    
  if(theKey == nextPicKey){
   activeButton = document.getElementById("next");
   goNext();
  }
  else if(theKey == previousPicKey){
   activeButton = document.getElementById("back");
   goBack(); 
  }
  else if(theKey == randomPicKey){
   activeButton = document.getElementById("random");
   goRandom(true);
  }
  else if(bigger || smaller){
   scaleUpOrDown(bigger, smaller);
  }
 
  
  if(activeButton != null){
    turnOn(activeButton);
   }

  return true ;
 }
  
 function userKeyUp(){
  if(activeButton != null){
    turnOff(activeButton);
   activeButton = null;
  }
  return true;
 }

 function toggleKeyCommands(){

  var ele = document.getElementById("shortcutsSpace");
  var onOff = shortcutsOn ? "000\">Shortcuts Off" : "00f\">Shortcuts On";
  var innerStr="<a class=\"shortCutLink\" href=\"Javascript:toggleKeyCommands()\"><span style=\"color:#" + onOff + "</span></a>";
  ele.innerHTML = innerStr;
  shortcutsOn = !shortcutsOn;

  if(shortcutsOn) showShortCutAlert();
  
 }
 

 function showShortCutAlert(){	
    var str="Key command shortcuts:\n";	
    str+="'" + nextPicKey + "'	for next photo\n";
    str+= "'" + previousPicKey + "'	goes back one pic\n";
    str+= "'" + randomPicKey + "'	for a random image\n";
    str+= "'" + biggerKey + "'	zooms in the displayed photo\n";
    str+= "'" + smallerKey + "'	zooms out the displayed photo\n";
    str+= "Some browsers may not be compatible";
    
    alert(str);
 }
 
 function scaleUpOrDown(isBigger, isSmaller){

  var minDimension = 64;
  var scaleFactor = 1.25;
  var maxDimension = screen.width*scaleFactor;
  var ele = document.getElementById("imageSpace");
  var tableEle = document.getElementById("tableDisplaySpace");
  
  if(isBigger && (ele.width > maxDimension || ele.height > maxDimension)){
   alert("Maximum dimension");
   return ;
  }   
  else if(isSmaller && (ele.width < minDimension || ele.height < minDimension)){
   alert("Minimum dimension");
   return ;
  }

  var newWidth = isBigger ? scaleFactor * ele.width : ele.width/scaleFactor;
  var newHeight = isBigger ? scaleFactor * ele.height : ele.height/scaleFactor;
  
  ele.width=newWidth+"";
  ele.height=newHeight+""; 
  tableEle.width=newWidth+"";
 }