// Overlay to display a single item, together with its title and some information about it.
// Elements are created in HTML and populated with data from the main page. The data
// is stored in a series of Javascript arrays until required:
// titlesArray - item titles
// notesArray - information on the items
// imgsArray - an array of arrays, one for each item. Each item may have more than one image.
// The above variables are declared externally to this script, in the main page.


var imagesArray = []; // holds filenames of images for the current item
var imageIndex; // index of current image of the current item
var recIndex;   // index of current item
var overlayTop;
var overlayLeft;
var overlayWidth=800;
var overlayHeight=580;
var veilHeight;
var veilTop;
var veilWidth;
var veilLeft;
var windowWaitHeight=160;
var windowWaitWidth=160;

var ovl_btn_status=[1,1,0,0,1]; // starting configuration of the five form buttons

// Configure setting of a form button
function set_ovl_btn(vButton,vSetting) {
objBtn = document.getElementById('ovl_btn0' + vButton.toString());
    switch (vSetting) {
       case 0: // inactive
 	    objBtn.onclick = null;
 	    objBtn.style.display="none";
	    //objBtn.parentNode.style.display="none";
 	    ovl_btn_status[vButton]="0";
 	break;
       case 1: // active
	    switch (vButton) {
	      case 0: objBtn.onclick = getPreviousRecord; break;
	      case 1: objBtn.onclick = getNextRecord; break;
	      case 2: objBtn.onclick = getPreviousImage; break;
	      case 3: objBtn.onclick = getNextImage; break;
	      case 4: objBtn.onclick = closeWindow; break;
	      default:
	    }
 	    objBtn.style.display="block";
	    //objBtn.parentNode.style.display="block";

 	    ovl_btn_status[vButton]="1";
	break;
      default:
    } 
}

// Just sets the keypress event
function setWaitForKey() {
    document.onkeypress=parseKey;
}

// Clears keypress event
function clearWaitForKey() {
    document.onkeypress=null;
}

// If a key has been pressed, find out what it is and act accordingly.
function parseKey(vKey) {
    if (vKey==null) {
      keycode=event.keyCode;
    } else {
      keycode=vKey.which;
    }
    keyPressed=String.fromCharCode(keycode).toLowerCase();
    switch (keyPressed) {
      case "x": closeWindow(); break;
      case "p": getPreviousRecord(); break;
      case "n": getNextRecord(); break;
      case "r": getPreviousImage(); break;
      case "e": getNextImage(); break;
      default:
    }
}


// Main entry point from calling page.
function showAndPopulateOverlay(vRecIndex) {
    showOverlay();
    populateOverlay(vRecIndex);
}

// Position the overlay centrally and make it visible.
function showOverlay() {
    var arrayPageSize=getPageSize();
    var arrayPageScroll=getPageScroll();
    veilTop=arrayPageScroll[1];
    veilLeft=0;
    veilWidth=arrayPageSize[0];
    veilHeight=arrayPageSize[3];
    overlayTop=arrayPageScroll[1] + ((arrayPageSize[3] - overlayHeight) / 2);
    overlayLeft=((arrayPageSize[0] - overlayWidth) / 2);
    overlayTop= (overlayTop<0) ? 0 : overlayTop;
    windowWaitTop=arrayPageScroll[1] + ((arrayPageSize[3] - windowWaitHeight) / 2);
    windowWaitLeft=((arrayPageSize[0] - windowWaitWidth) / 2);
    windowWaitTop= (windowWaitTop<0) ? 0 : windowWaitTop;
    var objVeil=document.getElementById("main_veil");
    objVeil.style.top=veilTop + "px";
    objVeil.style.left=veilLeft + "px";
    objVeil.style.height=veilHeight + "px";
    objVeil.style.width=veilWidth + "px";
    objVeil.style.display="block";
    var objOvlOuter=document.getElementById("ovl_outer");
    objOvlOuter.style.top= overlayTop + "px";
    objOvlOuter.style.left= overlayLeft + "px";
    objOvlOuter.style.display="block";
    var objWaitOuter=document.getElementById("wait_outer");
    objWaitOuter.style.top= windowWaitTop + "px";
    objWaitOuter.style.left= windowWaitLeft + "px";
    objWaitOuter.style.display="none";
    selectsVisible("hidden");
    setWaitForKey();
}

function displayElement(vElementName,vOn) {
    var objElement=document.getElementById(vElementName);
    if (objElement) {
      if (vOn) {
	objElement.style.display="block";
      } else {
	objElement.style.display="none";
      }
    }
}
 
// Populate the overlay with data for the current item.
function populateOverlay(vRecIndex) {
    // initialise close button
    set_ovl_btn(4,1);
    recIndex=vRecIndex;
    var objOvlBanner=document.getElementById("ovl_banner");
    objOvlBanner.innerHTML=titlesArray[recIndex];
    var objOvlLCC=document.getElementById("ovl_left_column_container");
    objOvlLCC.innerHTML=notesArray[recIndex];
    if (recIndex==0) {
      set_ovl_btn(0,0);
    } else {
      set_ovl_btn(0,1);
    }
    if (recIndex==titlesArray.length - 1) {
      set_ovl_btn(1,0);
    } else {
      set_ovl_btn(1,1);
    }    
    imagesArray=imgsArray[recIndex];
    imageIndex=0;
    setImgSrc(imageIndex);
}

// Set the source file for the main image.
function setImgSrc(vIndex) {
    if (imagesArray.length>0) { // should always happen!
      displayElement("ovl_img",false);
      displayElement("wait_outer",true);

      var objOvlImg=document.getElementById("ovl_img");
      objOvlImg.onload=showMainImg;
      objOvlImg.src=imagesArray[vIndex];
    }
    if (vIndex==0) {
      set_ovl_btn(2,0);
    } else {
      set_ovl_btn(2,1);
    }
    if (vIndex==imagesArray.length - 1) {
      set_ovl_btn(3,0);
    } else {
      set_ovl_btn(3,1);
    }
}

function showMainImg() {
    displayElement("wait_outer",false);
    displayElement("ovl_img",true);
    var objOvlImg=document.getElementById("ovl_img");
    objOvlImg.onload=function(){};
}
function getPreviousRecord() {
    if (recIndex>0) {
      recIndex--;
      populateOverlay(recIndex);
    }
}

function getNextRecord() {
    if (recIndex<titlesArray.length - 1) {
      recIndex++;
      populateOverlay(recIndex);
    }
}

function getPreviousImage() {
    if (imageIndex>0) {
      imageIndex--;
      setImgSrc(imageIndex);
    }
}

function getNextImage() {
    if (imageIndex<imagesArray.length - 1) {
      imageIndex++;
      setImgSrc(imageIndex);
    }
}

function closeWindow() {
    var objWaitOuter=document.getElementById("wait_outer");
    objWaitOuter.style.display="none";
    var objOvlOuter=document.getElementById("ovl_outer");
    objOvlOuter.style.display="none";
    var objVeil=document.getElementById("main_veil");
    objVeil.style.display="none";

    selectsVisible("visible");
    clearWaitForKey();
}

function selectsVisible(vVisibility) {
    // Use reg exp to determine whether to add class name - in case overlay
    // is called twice without dismissing first
    var pClassN=/(hideSelects)+/i;
    if (vVisibility=="visible") {  
    document.body.className = document.body.className.replace(pClassN, '');
    } else {
      if (!(pClassN.test(document.body.className))) {
      document.body.className +=' hideSelects';
      }
    }
}

// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.org
//
function getPageScroll(){

	var yScroll;

	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
		yScroll = document.documentElement.scrollTop;
	} else if (document.body) {// all other Explorers
		yScroll = document.body.scrollTop;
	}

	arrayPageScroll = new Array('',yScroll) 
	return arrayPageScroll;
}

// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize(){
	
	var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	if (self.innerHeight) {	// all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}


	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;
}