var picno = 0;
var descrip = "";

function viewer(pic)  //shows the picture viewer
 {
 if(document.getElementById("viewer").style.visibility== 'visible')
  {
	closev() //if already open, clears and closes the viewer first
	}
 document.getElementById("imviewer").style.visibility= "hidden";  //hides the image whilst it is loading.
 picno = pic;  //sets picno globally (used for 'next' and 'previous' functions) as the number of the thumbnail chosen
 document.getElementById("viewer").style.top= document.documentElement.scrollTop+document.body.scrollTop+3+'px';  //places the viewer at the top of the page, taking any scrolling into account.
 centerit();  //centers the viewer horizontally
 showv();  //shows the viewer
 return false;  //makes sure that, if javascript is enabled, the link for the thumbnail is aborted
 }
 
var wid = "";
var hei= "";
var oldleftpos= "";
var oldvwid=""; 
var xshad="10px";
var yshad="10px";
var xoffset = 40;
var xscale = 100;
var yoffset = 20;
var yscale = 80;
 
function showv()  //shows the viewer
 {
 document.getElementById("imviewer").src= document.getElementById("pi"+picno).name;  //puts the corrent image in the viewer (the path to the full size image is stored in the name tag of each thumbnail)
 descrip = document.createTextNode(document.getElementById("pi"+picno).alt); //gets the description of the picture and stores it globally in 'descrip'
 document.getElementById("desc").appendChild(descrip);  //adds the description to the text area of the viewer
 resize();  //resizes the viewer
 followpos();  //centers the viewer according to the center of the previous picture shown (so buttons align etc).
 stxpos = parseInt(document.getElementById("viewer").style.left);
 winW = winwidth();
 xshad = (xoffset+((stxpos/winW)*-xscale))+"px";
 document.getElementById("vcopy").style.left = xshad;
 stypos = parseInt(document.getElementById("viewer").style.top);
 winH = winheight();
 var scroll = document.documentElement.scrollTop + document.body.scrollTop;
 yshad = (yoffset+((stypos/winH)*-yscale))+"px";
 document.getElementById("vcopy").style.top = parseInt(yshad)+scroll/4+"px";
 document.getElementById("viewer").style.visibility= 'visible';  //makes the viewer visible
 } 

function scroll()
 {
 var scroll = document.documentElement.scrollTop + document.body.scrollTop;
 document.getElementById("vcopy").style.top = parseInt(yshad)+scroll/4+"px";
 }

function winwidth()
 {
 var winW = 630;
 if (parseInt(navigator.appVersion)>3) 
  {
  if (navigator.appName=="Netscape") 
	 {
   winW = window.innerWidth;
   }
  if (navigator.appName.indexOf("Microsoft")!=-1) 
	 {
   winW = document.body.offsetWidth;
   }
  }
 return winW;
 } 


function winheight()
 {
 var winH = 300;
 if (parseInt(navigator.appVersion)>3) 
  {
  if (navigator.appName=="Netscape") 
	 {
   winW = window.innerHeight;
   }
  if (navigator.appName.indexOf("Microsoft")!=-1) 
	 {
   winW = document.body.offsetHeight;
   }
  }
 return winH;
 }  
 
function followpos()
 {
 winW = winwidth();
 wid = document.getElementById("pi"+picno).width;  //get the thumbnail pictures width
 imwid = wid*3;  //set the pictures width
 if(imwid<260)
  {
	vwid = 280;
	}
 else
  {
  vwid = imwid+20;
  }
 if(oldleftpos=="" || oldvwid=="")
  {
	}
 else
  {
 newleftpos = oldleftpos + ((oldvwid - vwid)/2);
 document.getElementById("viewer").style.left= newleftpos+'px';	
  } 
 }

 
function centerit()
 {
 winW = winwidth();
 wid = document.getElementById("pi"+picno).width;  //get the pictures width
 imwid = wid*3;  //get the pictures width
 if(imwid<260)
  {
	vwid = 280;
	}
 else
  {
  vwid = imwid+20;
  }
 leftcent = (winW-vwid)/2;
 document.getElementById("viewer").style.left= leftcent+'px';
 }
 
 
function resize()  //resizes the box depending on picture dimensions. Called every time a new picture is put in viewer
 {
 wid = document.getElementById("pi"+picno).width;  //get the thumbnail pictures width
 imwid = wid*3;  //get the pictures width
 if(imwid<260)
  {
	vwid = 280;
	}
 else
  {
  vwid = imwid+20;
  }
 document.getElementById("viewer").style.height= 'auto';
 document.getElementById("viewer").style.width= vwid+'px';  
 document.getElementById("whitefill").style.width= vwid+'px'; 
 document.getElementById("imviewer").style.height= '300px';
 document.getElementById("imviewer").style.width= imwid+'px'; 
 document.getElementById("vcopy").style.height= '450px';
 document.getElementById("vcopy").style.width= vwid+'px';   	
 }
 
function previous()  //changes the picture in the viewer to one picture before (by order of images[])
 {
 if(picno==1) //stops the viewer showing pictures used in the navigation area
  {
  alert("You are already viewing the first picture"); 
	}
 else
  {
	document.getElementById("imviewer").style.visibility= "hidden";  //hides the image whilst it is replaced.
	setold();
	closev();
	picno = picno-1; //sets the picture number as the one before
  showv();
	}
 }

  
function next()   //changes the picture in the viewer to one picture after (by order of images[])
 {
 if(picno==document.images.length-11) //prevents the viewer moving on from last thumbnail
  {
	alert("You are already viewing the last picture.");
	}
 else
  {	
	document.getElementById("imviewer").style.visibility= "hidden";  //hides the image whilst it is replaced.
	setold();
	closev();
  picno = picno+1; //sets the reference as the next picture
  showv();
	}
 }

function unhideim()
 {
 document.getElementById("imviewer").style.visibility= "visible";
 }
 
function setold()   
 {
 wid = document.getElementById("pi"+picno).width;  //get the current thumbnail's width
 imwid = wid*3;  //calculate et the pictures width
 if(imwid<260)
  {
	oldvwid = 280;
	}
 else
  {
  oldvwid = imwid+20;
  }
 oldleft = document.getElementById("viewer").style.left;
 oldleftpos = parseInt(oldleft);
 }
 
function closevf()
 {
 document.getElementById("imviewer").style.visibility= "hidden";  //hides the image.
 closev();
 oldleftpos= "";
 oldvwid=""; 
 xshad="10px";
 yshad="10px";
 }

function closev() //closes (and clears) the viewer
 {
 document.getElementById("desc").removeChild(descrip);   //removes the description text from the viewer
 document.getElementById("viewer").style.visibility= 'hidden';  //makes the viewer invisible again
 document.getElementById("imviewer").src= "#";  //empties any picture from the viewer
 }

// All the code from this point down is to perform the task of dragging and dropping the Viewer.
// Determine browser and version.

function Browser() {

  var ua, s, i;

  this.isIE    = false;
  this.isNS    = false;
  this.version = null;

  ua = navigator.userAgent;

  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  // Treat any other "Gecko" browser as NS 6.1.

  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = 6.1;
    return;
  }
}

var browser = new Browser();

// Global object to hold drag information.

var dragObj = new Object();
dragObj.zIndex = 0;


function dragStart(event, id) 
 {
 var el;
 var x, y;
 dragObj.elNode = document.getElementById(id);
 

  // Get cursor position with respect to the page.

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }
 
 // Save starting positions of cursor and element.

	dragObj.cursorStartX = x;
  dragObj.cursorStartY = y;
  dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
  dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);

  if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
  if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;

  // Update element's z-index.

  dragObj.elNode.style.zIndex = ++dragObj.zIndex;

  // Capture mousemove and mouseup events on the page.

  if (browser.isIE) {
    document.attachEvent("onmousemove", dragGo);
    document.attachEvent("onmouseup", dragStop);
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS) {
    document.addEventListener("mousemove", dragGo,   true);
    document.addEventListener("mouseup",   dragStop, true);
    event.preventDefault();
  }
}
	
function dragGo(event) {

  var x, y;
  // Get cursor position with respect to the page.

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  // Move drag element by the same amount the cursor has moved.

  dragObj.elNode.style.left =
    (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
  dragObj.elNode.style.top  =
    (dragObj.elStartTop  + y - dragObj.cursorStartY) + "px";
	
	var drxpos = (dragObj.elStartLeft + x - dragObj.cursorStartX);
	winW = winwidth();
	var xshad = (xoffset+((drxpos/winW)*-xscale))+"px";
	document.getElementById("vcopy").style.left = xshad;
	
	var drypos = (dragObj.elStartTop + y - dragObj.cursorStartY);
	winH = winheight();
	var scroll = document.documentElement.scrollTop + document.body.scrollTop;
	yshad = (yoffset+((drypos/winH)*-yscale))+"px";
	document.getElementById("vcopy").style.top = parseInt(yshad)+scroll/4+"px";
	
  if (browser.isIE) {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS)
    event.preventDefault();
}
		
function dragStop(event) {

  // Stop capturing mousemove and mouseup events.

  if (browser.isIE) {
    document.detachEvent("onmousemove", dragGo);
    document.detachEvent("onmouseup",   dragStop);
  }
  if (browser.isNS) {
    document.removeEventListener("mousemove", dragGo,   true);
    document.removeEventListener("mouseup",   dragStop, true);
  }
}