var currentImage;//current category set - eg chiswick, hamptoncourt (variable name is slightly misleading)
var object = null;
var cX = 0;
var cY = 0;
var plateNo = 0; //plate refers to a montage of four images. Each garden has one or more plates.
var imageNumber = null;

//called from handleCsvHttpResponse() in ajax.js
function initPage(){
   document.onmousedown = pickIt;
   document.onmousemove = dragIt;
   document.onmouseup = dropIt;
}

//must be performed after the csv is loaded and so is called from handleCsvHttpResponse() in ajax.js
function autoOpen(){
   var startcategory = getURLVar('opencategory');  
   if(startcategory != null){

      open_viewer();
      //maximize viewer
      var o = document.getElementById('minimize');
      if (o.title == 'maximize') {
         minmaximize();
      }
      
      currentImage = startcategory;

      var image = getURLVar('openimage');  
      if(image != null){
         //these must be set for back, next, previous buttons to understand where we are
         imageNumber = image; 
         plateNo = Math.floor(imageNumber/4);

         load('viewer_image', 'gallery/images/'+startcategory+imageNumber+'.jpg', 'viewer_text', currentImage)
         
         uninitHitboxes();
         
		 setControls();     
         
      }else{
         //load the first plate of startCategory
         load('viewer_image', 'gallery/images/'+startcategory+'_'+0+'.jpg', 'viewer_text', currentImage)
         
         initHitboxes();
         
         document.getElementById('previous').style.backgroundImage = 'url(./gallery/previous_disabled.gif)';  
         document.getElementById('back').style.backgroundImage = 'url(./gallery/back_disabled.gif)';  
      }
   }
}

function pickIt(evt){

   evt = (evt)? evt: ((window.event) ? event : null);
   var objectID = (evt.target) ? evt.target.id : ((evt.srcElement) ? evt.srcElement.id : null);
   if (objectID.indexOf('title_bar') != -1) {
      object = document.getElementById(objectID).parentNode.parentNode.parentNode;
   }
   if(object){
      object.style.zIndex = 100;
      cX = evt.clientX - object.offsetLeft;
      cY = evt.clientY - object.offsetTop;
      return;
   }
   else{
      object = null;
      return;
   }
}

function dragIt(evt){

   evt = (evt) ? evt : ((window.event) ? event : null);
   if(object){
      object.style.left = evt.clientX - cX + 'px';
      object.style.top = evt.clientY - cY + 'px';
      return false;
   }

}

function dropIt(){
   dock(); 
    
   if(object){
      object.style.zIndex = 3;
      object = null;
      return false;
   }
   
}

function minmaximize(){

      var o = document.getElementById('minimize');
      if (o.title == 'minimize') {
         o.title = 'maximize';
         o.style.backgroundImage = 'url(gallery/maximize.gif)';
         document.getElementById('viewer_image').style.display = "none";
         document.getElementById('viewer_text').style.display = "none";         
         document.getElementById('status_bar').style.display = "none";
                                      
         document.getElementById('viewing_area').style.borderBottomWidth = '0px';         
         document.getElementById('viewer').style.borderBottomWidth = '0px';      
      }
      else{
         o.title = 'minimize';
         o.style.backgroundImage = 'url(gallery/minimize.gif)';         
         /*once the js has explicitly set the visibility if viewing_area to visible
         it no longer inherits its visibility from viewer. Hence it must be explicity
         made visible and invisible along with viewer thereafter.*/
         document.getElementById('viewer_image').style.display = "block";
         document.getElementById('viewer_text').style.display = "block";          
         document.getElementById('status_bar').style.display = "block";
                                    
         document.getElementById('viewing_area').style.borderBottomWidth = '2px'; 
         document.getElementById('viewer').style.borderBottomWidth = '1px';           
      }
}

function close_viewer(){
   document.getElementById('viewer').style.display = "none";
   document.getElementById('status_bar').style.display = "none";   
   document.getElementById('viewer_image').style.display = "none";    
}

function open_viewer(){
   document.getElementById('viewer').style.display = "block";
   document.getElementById('status_bar').style.display = "block";
   document.getElementById('viewer_image').style.display = "block"; 
}

function previous(){
   document.getElementById('next').style.backgroundImage = 'url(./gallery/next.gif)';  

   index = csvArray.findIndexByCol(currentImage, 1);

   if(imageNumber == null){
      if(plateNo > 0){
         plateNo--;
         load('viewer_image', 'gallery/images/'+currentImage+'_'+plateNo+'.jpg', 'viewer_text', currentImage)    
         if(plateNo == 0){
            document.getElementById('previous').style.backgroundImage = 'url(./gallery/previous_disabled.gif)';  
         }
      }   
   }
   else
   {
      if(imageNumber > 1){
         imageNumber--;
         load('viewer_image', 'gallery/images/'+currentImage+imageNumber+'.jpg', 'viewer_text', currentImage)    
         if(imageNumber == 1)
            document.getElementById('previous').style.backgroundImage = 'url(./gallery/previous_disabled.gif)';   
      }
   }
}

function next(){
   document.getElementById('previous').style.backgroundImage = 'url(./gallery/previous.gif)';  

   index = csvArray.findIndexByCol(currentImage, 1);

   if(imageNumber == null){
      if(plateNo + 1 < parseInt(csvArray[index][4]/4)){
         plateNo++;
         load('viewer_image', 'gallery/images/'+currentImage+'_'+plateNo+'.jpg', 'viewer_text', currentImage)    
         if(plateNo + 1 == parseInt(csvArray[index][4]/4))
            document.getElementById('next').style.backgroundImage = 'url(./gallery/next_disabled.gif)';  
         
         //unregister all onClick events and reregister acording to number of images on tile
         uninitHitboxes();
         initHitboxes();  
      }
   }
   else{
      if(imageNumber < parseInt(csvArray[index][4])){
         imageNumber++;
         load('viewer_image', 'gallery/images/'+currentImage+imageNumber+'.jpg', 'viewer_text', currentImage)   
         if(imageNumber == parseInt(csvArray[index][4]))
            document.getElementById('next').style.backgroundImage = 'url(./gallery/next_disabled.gif)';     
      }
   }
}

function backUp(){
   //back button to only function in zoom view, i.e. individual image mode
   if(imageNumber != null){
      initHitboxes();
      
      //find which pate current image is on
      plateNo = Math.ceil(imageNumber / 4) - 1;
      //must unset imageNumber so that next and previous will operate on tiles rather than images.
      imageNumber = null;

   //hide/display controls - like setControls but for plates
   index = csvArray.findIndexByCol(currentImage, 1);
      if(plateNo == Math.ceil(parseInt(csvArray[index][4] / 4) - 1))
         document.getElementById('next').style.backgroundImage = 'url(./gallery/next_disabled.gif)';  
      else
         document.getElementById('next').style.backgroundImage = 'url(./gallery/next.gif)';  
      if(plateNo == 0)
         document.getElementById('previous').style.backgroundImage = 'url(./gallery/previous_disabled.gif)';  
      else
         document.getElementById('previous').style.backgroundImage = 'url(./gallery/previous.gif)';        
      document.getElementById('back').style.backgroundImage = 'url(./gallery/back_disabled.gif)';  
      
      load('viewer_image', 'gallery/images/'+currentImage+'_'+plateNo+'.jpg', 'viewer_text', currentImage)  
   }
}

function imageClick(e){
   var boxNumber;
   var id;
   
   uninitHitboxes();

   if (!e) 
      var e = window.event//IE does not assign the event to e

   //find which hitbox triggered the event
   //the box number is found by taking the number from the end of the element id       
   if(e.srcElement){
      id = e.srcElement.id;
      boxNumber = id.charAt(e.srcElement.id.length - 1);
   }else{
      if(e.target){
         id = e.target.id;
         boxNumber = id.charAt(e.target.id.length - 1);
      }
   }
   
   //boxes are numbered 1 to 4. There are four images per plate.
   imageNumber = plateNo * 4 + parseInt(boxNumber);//This gives us the image number
   
   setControls();

   //load the image
   load('viewer_image', 'gallery/images/'+currentImage+imageNumber+'.jpg', 'viewer_text', currentImage)

}

//calculates which controls to enable/disable given the current imageNumber
function setControls(){
   index = csvArray.findIndexByCol(currentImage, 1);
      if(imageNumber == parseInt(csvArray[index][4]))
         document.getElementById('next').style.backgroundImage = 'url(./gallery/next_disabled.gif)';  
      else
         document.getElementById('next').style.backgroundImage = 'url(./gallery/next.gif)';  
      if(imageNumber == 1)
         document.getElementById('previous').style.backgroundImage = 'url(./gallery/previous_disabled.gif)';  
      else
         document.getElementById('previous').style.backgroundImage = 'url(./gallery/previous.gif)';  
      document.getElementById('back').style.backgroundImage = 'url(./gallery/back.gif)';
}

//applies event handlers and cursor rollover to hitboxes
function initHitboxes(){
   
   index = csvArray.findIndexByCol(currentImage, 1);
   numberOfImages = csvArray[csvArray.findIndexByCol(currentImage, 1)][4];
   numberOfPlates = Math.ceil(numberOfImages/4);
   numberOfActiveBoxes = 4;
   
   //if this is the last plate
   if(numberOfPlates == plateNo + 1){
      if(numberOfImages % 4 != 0){
         numberOfActiveBoxes = numberOfImages % 4;
      }
   }
   //alert(numberOfActiveBoxes);

   //only register the onClick events acording to how many images on plate
   for(i = 1; i <= numberOfActiveBoxes; i++){   
      document.getElementById('hitbox'+i).onclick = imageClick;
      try{
         document.getElementById('hitbox'+i).style.cursor = 'pointer';
      }
      catch(eOldIEVersion){
         document.getElementById('hitbox'+i).style.cursor = 'hand';  
      }     
   }
}

//removes onClick from the hitboxes rendering them invisible
function uninitHitboxes(){
   document.getElementById('hitbox1').onclick = null;
   document.getElementById('hitbox2').onclick = null;
   document.getElementById('hitbox3').onclick = null;
   document.getElementById('hitbox4').onclick = null;   
   
   document.getElementById('hitbox1').style.cursor = 'default';   
   document.getElementById('hitbox2').style.cursor = 'default'; 
   document.getElementById('hitbox3').style.cursor = 'default'; 
   document.getElementById('hitbox4').style.cursor = 'default';          
}

//handles all actions associated with user clicking on thumbnail
function thumbnail_click(image_name){  

if(csvArray[0] != ""){//this is not a nice way to detect if the csv has loaded but I 
					  //don't want to have move the event handler out of the html

   //make sure window is visible, incase it has been closed
   open_viewer();

   //reset   
   imageNumber = null;  
   plateNo = 0;   
      
   //if not already maximized then maximize the window in response to thumbnail click
   var o = document.getElementById('minimize');
   if (o.title == 'maximize') {
      minmaximize();
   }
   
   //reset plate to zero as we always want to display the first plate. Then load the image and set global variable
   //for use by other functions.
   load('viewer_image', 'gallery/images/'+image_name+'_'+plateNo+'.jpg', 'viewer_text', image_name)
   currentImage = image_name;

   initHitboxes(); //must be after plateNo and currentImage are set
   
   //hide/display controls
   document.getElementById('previous').style.backgroundImage = 'url(./gallery/previous_disabled.gif)'; 
   document.getElementById('next').style.backgroundImage = 'url(./gallery/next.gif)'; 
   document.getElementById('back').style.backgroundImage = 'url(./gallery/back_disabled.gif)'; 
   
   //show viewer
   document.getElementById('viewer').style.display = 'block';  
}   
   
}

//loads requested image while setting viewer title bar, status bar, etc.
//o - id of image display area object, arg - url of image to display,
//o2 - id of text area object, arg - name of category (eg, Chiswick. the exact title is calculated automatically);
function load(o, arg, o2, arg2) 
{
   //fetch the CSV index of the current garden
   index = csvArray.findIndexByCol(arg2, 1);
   
   //set status message to loading
   var elem = document.getElementById('status');	
   removeAllChildNodes(elem);
   t1 = document.createTextNode('loading');  
   elem.appendChild(t1);

   //clear textbox
   var textbox = document.getElementById(o2);	
   removeAllChildNodes(textbox);
   
   //clear image
   document.getElementById(o).style.backgroundImage = 'none';
   
   //create new image. set new image and text when loaded
   var image = new Image();
   /*the onload function must be overridden before setting the source.*/
   image.onload = function(){	
      //set viewer image
      document.getElementById(o).style.backgroundImage = 'url('+arg+')';
   
      //set viewer main text ****DISABLED****
   	  removeAllChildNodes(textbox);   
      //textbox.appendChild(generateTextNodes(csvArray[index][3]));

      //set the viewers status text to 'done'
      removeAllChildNodes(elem);
      t1 = document.createTextNode('done');
      elem.appendChild(t1); 
      
      //set the viewers title bar text
      var title = document.getElementById('title');	
   	removeAllChildNodes(title);
      if(imageNumber == null){
         t1 = document.createTextNode(csvArray[index][2]+' '+(plateNo+1)+'/'+Math.ceil(csvArray[index][4]/4));  
      }
      else{
         t1 = document.createTextNode(csvArray[index][2]+' '+imageNumber+'/'+csvArray[index][4]);
      }
      title.appendChild(t1);   
   }
	
	image.src = arg;
   
}

function generateTextNodes(text){
	
	var container = document.createElement('span')
	var pointer = 0;
	var offset = 0;
	while(pointer < text.length){
		offset += pointer;
		var temptext = text.slice(offset, text.length);
		var index = temptext.search('<a class="intext" href="');
		if(index != -1){
			//append text before link
			var start = temptext.slice(0, index);
		    var t1 = document.createTextNode(start);  
      		container.appendChild(t1);  
      		pointer = index + 24;
      		//extract the url of the link
      		var index = temptext.search('">');
			var url = temptext.slice(pointer, index);
			var a = document.createElement('a');
			a.setAttribute('href', url);
			a.setAttribute('class', 'intext');
			pointer = index + 2;
			//extract the text for the link
      		var index = temptext.search('</a>');
			var linktext = temptext.slice(pointer, index);
			t1 = document.createTextNode(linktext);  
      		a.appendChild(t1);  
      		container.appendChild(a);
      		pointer = index + 4;		
		}
		else{
			var t1 = document.createTextNode(temptext);  
			container.appendChild(t1); 
			pointer = text.length
		}
	
	}
	return container;
}

//snaps viewer to docking position if it is released when nearby
function dock(){
/*
   var header = document.getElementById('header');
   var viewer = document.getElementById('viewer');
   
   header_pos = findPos(header);
   viewer_pos = findPos(viewer);
   
   header_pos[0] += 398;
   header_pos[1] += 90;
   
   //alert (header_pos[0] + ', ' + header_pos[1]);
   //alert (viewer_pos[0] + ', ' + viewer_pos[1]);

   if(viewer_pos[1] < header_pos[1] + 30 && viewer_pos[1] > header_pos[1] - 30){
      viewer.style.top = '150px';
   }
   if(viewer_pos[0] < header_pos[0] + 40 && viewer_pos[0] > header_pos[0] - 40){
      viewer.style.left = (header_pos[0])+'px';
   }   
*/
}

//function to automatically remove all child nodes from the argument node
function removeAllChildNodes(elem){

	//var elem = document.getElementById('text');	
	
	if ( elem.hasChildNodes() )
	{
		while ( elem.childNodes.length >= 1 )
		{
			elem.removeChild( elem.firstChild );       
		} 
	}

}

//finds the position of an element relative to the window egde
function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}

//function searches three dimensional array and returns the index of value.
//You must provide the inner index value
Array.prototype.findIndexByCol = function(value,cIdx){
var ctr = "";
for (var i=0; i < this.length; i++) {
// use === to check for Matches. ie., identical (===), ;
if (this[i][cIdx] == value) {
//alert(this[i][cIdx]+"===="+value);
return i;
}
}
return ctr;
};


function getURLVar(urlVarName) {
	//divide the URL in half at the '?'
	if (window.location.hash) {
		setTimeout(function(){
			window.scrollBy(0, -150)
		}, 100);
	}
	
	var urlHalves = document.location.search.split('?');
	var urlVarValue = null;
	if(urlHalves[1]){
		//load all the name/value pairs into an array
		var urlVars = urlHalves[1].split('&');
		//loop over the list, and find the specified url variable
		for(i=0; i<=(urlVars.length); i++){
			if(urlVars[i]){
			//load the name/value pair into an array
			var urlVarPair = urlVars[i].split('=');
			if (urlVarPair[0] && urlVarPair[0] == urlVarName) {
					//I found a variable that matches, load it's value into the return variable
					urlVarValue = urlVarPair[1];
				}
			}
		}
	}
	return urlVarValue;   
}