// copyright © Jon Collier 2010, All Rights Reserved.
// problem with window height expanding comes from cover!!!!!!!!!!!!!!!!!!!!
// Even though should be exactly same dimensions as blackBack

var $pt = function(){
  this.imPad = 10;
  this.winPad = 20;
  this.imURL = null;
  this.minHeight = 30;
  //this.blackCover = null;
  this.lastBodyW = null;
  this.lastBodyH = null;
  this.isIE6plus = (document.compatMode && document.all);
  this.active = false;
}
//////////////////////////////////////////////

////// Expt function:
//
//$pt.prototype.coverWithClickArea = function(){
////alert("coverWithClickArea");
//  cover = document.createElement("div");
//  cover.id = "cover45003";
//  cover.className = "clickbox"; 
//  
//  this.tbody = document.documentElement;  //// new new new!
//  var dsocleft=parseInt((this.isIE6plus)? this.tbody.scrollLeft : pageXOffset);
//  var dsoctop=parseInt((this.isIE6plus)? this.tbody.scrollTop : pageYOffset);
//
//  innerW = this.tbody.clientWidth;
//  cover.style.width = innerW + "px"; 
//
//  innerH = this.tbody.clientHeight;
//  cover.style.height = innerH + "px";  
//  
//  cover.style.left =  dsocleft + "px";
//  cover.style.top = dsoctop + "px";
//  
//  firstDiv = document.getElementsByTagName('div')[0];
//  (document.body).insertBefore(cover, firstDiv);
//  
//  var obj = this;
//  //setTimeout(function () { obj.addClick(); }, 200);
//
//  $('#cover45003').click(function () { obj.sayHi(); obj.deleteCoverNode(); });
//}

//////////////////////////////////////////////
//////////////////////////////////////////////

$pt.prototype.keepBackFixed = function(){ 
  if (this.active){
	var dsocleft=(this.isIE6plus)? this.tbody.scrollLeft : pageXOffset;
	var dsoctop=(this.isIE6plus)? this.tbody.scrollTop : pageYOffset;
	
	L1 = parseInt(dsocleft);
	T1 = parseInt(dsoctop);
	
	_L = L1+"px";
	_T = T1 +"px";

	blackCover = document.getElementById("blackBack381439735674");
	blackCover.style.left = _L;
	blackCover.style.top = _T;
	//blackCover.style.left = parseInt(dsocleft)+"px";
//	blackCover.style.top = parseInt(dsoctop) +"px";
	
	cover = document.getElementById("cover45003");
	cover.style.left = _L;
	cover.style.top = _T;
	
	imgBox = document.getElementById("imgBox381439735674");
	ImgBox.style.left = (L1 + this.Loffset) + "px";
	ImgBox.style.top = (T1 + this.Toffset) + "px";
  }
}


$pt.prototype.showIm2 = function(iURL){
  this.lastImgHeight = 0;
  this.tbody = document.documentElement;  //// new new new!  
  var dsocleft=parseInt((this.isIE6plus)? this.tbody.scrollLeft : pageXOffset);
  var dsoctop=parseInt((this.isIE6plus)? this.tbody.scrollTop : pageYOffset);
	
  //alert ("topOffset = " + dsoctop);
//////////////////////////////////////////////////////////////////

  nowBodyW = document.body.clientWidth;
  nowBodyH = document.body.clientHeight; ////  =  actual window height, LARGER than innerH

  flag = 0;
  
  if (nowBodyW != this.lastBodyW){flag = 1; this.lastBodyW = nowBodyW;}
  if (nowBodyH != this.lastBodyH){flag = 1; this.lastBodyH = nowBodyH;}

 // if (!this.blackCover){
  if (!document.getElementById("blackBack381439735674")){
	blackCover = document.createElement("div");
	blackCover.id = "blackBack381439735674";
	blackCover.className = "transbox"; // works in all browsers
	///////////////////
	//var obj = this;// for use in closure below
//		  
//	if (window.attachEvent){
//	  blackCover.attachEvent("onclick", function () { obj.hideIm2(); });
//	}else{
//	  blackCover.addEventListener("click", function () { obj.hideIm2(); }, false);
//	}
	///////////////////

  //////  This fails here but succeeds in last function, because DOM hasn't properly added blackCover.id yet:
  ////$('#blackBack381439735674').click(function () { obj.hideIm2(); });

  
	if (flag){  /// body/window is a new size so make nearly invisible for now to avoid ugly resize
	  blackCover.style.width = "1px";
	  blackCover.style.height = "1px";
	}
	
	 firstDiv = document.getElementsByTagName('div')[0];
	(document.body).insertBefore(blackCover, firstDiv);
  }
  
  //// this fails:  blackCover.style.width = "100%";
  innerW = this.tbody.clientWidth;
  blackCover.style.width = innerW + "px";  /// 	 NEW NEW NEW
//  blackCover.style.height = parseInt(this.lastBodyH * 1.1) + "px"; // this works so far

  innerH = this.tbody.clientHeight;
  blackCover.style.height = innerH + "px";  /// 	 NEW NEW NEW
  
  blackCover.style.left =  dsocleft + "px";
  blackCover.style.top = dsoctop + "px";
  this.active = true;
  
  $(document).ready(function(){ 
	$(document).pngFix(); 
  }); 
  
  this.coverWithClickArea2();
  this.makeImgBox(iURL);
}


$pt.prototype.coverWithClickArea2 = function(){
//alert("coverWithClickArea");
  cover = document.createElement("div");
  cover.id = "cover45003";
  cover.className = "clickbox"; 
  
  //this.tbody = document.documentElement;  //// Already defined in showIm2
  var dsocleft=parseInt((this.isIE6plus)? this.tbody.scrollLeft : pageXOffset);
  var dsoctop=parseInt((this.isIE6plus)? this.tbody.scrollTop : pageYOffset);

  innerW = this.tbody.clientWidth;
  cover.style.width = innerW + "px"; 

  innerH = this.tbody.clientHeight;
  cover.style.height = innerH + "px";  
  
  cover.style.left =  dsocleft + "px";
  cover.style.top = dsoctop + "px";
  
  //document.getElementById("blackBack381439735674").appendChild(cover);
  OriginalWrapDiv = document.getElementsByTagName('div')[1];
  (document.body).insertBefore(cover, OriginalWrapDiv);
}


$pt.prototype.makeImgBox = function(iURL){
	//// Make ImgBox fresh each time, to avoid weird IE6 bug sometimes placing it in bottom right corner of window
  //if (!this.ImgBox){
  //blackCover = document.getElementById("blackBack381439735674");
  ImgBox = document.createElement("div");
  ImgBox.id = "imgBox381439735674";
  ImgBox.className = "hid"; // works in all browsers, setAttribute is unnecessary
  //blackCover.appendChild(ImgBox);
   OriginalWrapDiv = document.getElementsByTagName('div')[2];
  (document.body).insertBefore(ImgBox, OriginalWrapDiv);
 
  this.imURL = iURL;
 
  ImgBox.style.display = "block";
  ImgBox.style.visibility = "visible";

  imgNode = document.createElement("img");
  imgNode.src = this.imURL
  imgNode.border = "0";
  imgNode.id = "img381439735674";
  
  ImgBox.appendChild(imgNode);
	
  ImgBox.style.left = "-2000px";

  // need closure:
  var obj = this;
//  setTimeout(function () { obj.reposImg(); }, 100);
  
  setTimeout(function () { obj.checkImLoaded(); }, 100);

////// new version, but fails in IE6 of course:
//  var obj = this;
//  
//  $('#img381439735674').load(function(){
//	obj.reposImg();
//  });
}

$pt.prototype.showDimensions = function(){
	bb = document.getElementById("blackBack381439735674");
	cc = document.getElementById("cover45003");
	
	bL = bb.style.left;
	bT = bb.style.top;
	bW = bb.style.width;
	bH = bb.style.height;
	
	cL = cc.style.left;
	cT = cc.style.top;
	cW = cc.style.width;
	cH = cc.style.height;
	
	fb = "Back left = " + bL + ", back top = " + bT + ", back width = " + bW + ", back height = " + bH + "\n";
	fb += "Cover left = " + cL + ", Cover top = " + cT + ", Cover width = " + cW + ", Cover height = " + cH ;
	alert (fb)
}


$pt.prototype.checkImLoaded = function(){
  imgNode = document.getElementById("imgBox381439735674").firstChild;
  nowH = imgNode.height;// the image
  
  if (nowH > this.minHeight && nowH === this.lastImgHeight){
	this.imgNaturalHeight = nowH;
	this.reposImg();
  }else{
	this.lastImgHeight = nowH;
	var obj = this;
	setTimeout(function () { obj.checkImLoaded(); }, 100);
  }
}

//  when image downloaded, check its dimensions, then reposition and scale it using padding (imPad and winPad):
$pt.prototype.reposImg = function(){
  ImgBox = document.getElementById("imgBox381439735674");
  imgNode = ImgBox.firstChild;
//  this.imgNaturalHeight = imgNode.height;// the image
//  
//  if (this.imgNaturalHeight < this.minHeight){
//	var obj = this;
//	setTimeout(function () { obj.reposImg(); }, 100);
//  }else{
	
	this.defineImgFinalSize();
	
	//alert ("reposImg w2 = " + this.w2 + ", h2 = " + this.h2);
	  
	imgNode.style.width = this.w2 + "px";
	imgNode.style.height = this.h2 + "px";
	
	var obj = this;// for use in closure below
	
	//$('#imgBox381439735674').click(function () { obj.hideIm2(); });// hideIm2 now works, as long as it's not triggered by blackBack
	//$('#imgBox381439735674').click(function () { obj.hideIm3(); });
	
	//// this works, but is unncessary to stop hideIm3 from triggering in cover:
	//$('#imgBox381439735674').click(function () { obj.sayHi(); false});
	
	//$('#blackBack381439735674').click(function () { obj.hideIm3(); });
	//this.coverWithClickArea2();
	
	$('#cover45003').click(function () { obj.hideIm3();});
  //$('#cover45003').click(function () { obj.sayYo();});
	//$('#imgBox381439735674').click(function () { obj.showDimensions();});
	$('#imgBox381439735674').click(function () { obj.hideIm3();});
	
	//if (window.attachEvent){
//	  ImgBox.attachEvent("onclick", function () { obj.hideIm2(); });
//	}else{
//	  //ImgBox.addEventListener("click", function () { obj.hideIm2(); }, false);
//	  ImgBox.addEventListener("click", function () { obj.hideIm2(); }, true);
//	}

	////////////////////////////////////////////////////////////////////////////////////////////
	var dsocleft=(this.isIE6plus)? this.tbody.scrollLeft : pageXOffset;
	var dsoctop=(this.isIE6plus)? this.tbody.scrollTop : pageYOffset;
	
	this.Loffset = this.winPad + parseInt((this.maxW - this.w2)/2);
	this.Toffset = this.winPad + parseInt((this.maxH - this.h2)/2); 
	
	ImgBox.style.padding = this.imPad + "px";
	ImgBox.style.left = (dsocleft + this.Loffset) + "px";
	ImgBox.style.top = (dsoctop + this.Toffset) + "px";
	ImgBox.style.width = this.w2 + "px";
	ImgBox.style.height = this.h2 + "px";
	
	//// final IE6 correction sometimes needed:
	var obj = this;
	setTimeout(function () { obj.correctBack(); }, 100);	
  //}
}

$pt.prototype.defineImgFinalSize = function(){
  ImgBox = document.getElementById("imgBox381439735674");
	
  innerH = document.documentElement.clientHeight;
  innerW = document.documentElement.clientWidth;
  
  w = ImgBox.firstChild.width;
  h = this.imgNaturalHeight;
  WHratio = w/h;
  
  totalPad = (this.imPad *2) + (this.winPad *2);
  this.maxW = innerW - totalPad;
  this.maxH = innerH - totalPad;
  
  wResize = 0;
  hResize = 0;
  hExcess = 0;
  wExcess = 0;
  
  if (w > this.maxW){this.w2 = this.maxW; wResize = 1; wExcess = w - this.maxW;
  }else{ this.w2 = w;};
  
  if (h > this.maxH){this.h2 = this.maxH; hResize = 1; hExcess = h - this.maxH;
  }else{ this.h2 = h;};
  
  if (wResize || hResize){
	if (wExcess > hExcess){
	  this.h2 = parseInt(this.w2 / WHratio); 
	}else{
	  this.w2 = parseInt(this.h2 * WHratio);  
	}
  }
  
  //alert ("defineImgFinalSize w2 = " + this.w2 + ", h2 = " + this.h2);
}


// this caused very annoying FF error, because it was triggered twice when the image box was clicked, and 2nd time couldn't find ImgBox node of course, grrrrrr!  Why twice????
$pt.prototype.hideIm3 = function(){
  this.active = false;
  blackCover = document.getElementById("blackBack381439735674");
  cover = document.getElementById("cover45003");
  imgBox = document.getElementById("imgBox381439735674");
  
  if (imgBox){// ESSENTIAL BUG FIX
	this.imgNaturalHeight = null;
	this.imURL = null;
	blackCover.style.left = "-9999px";
  
	//pNode = document.getElementById("imgBox381439735674").parentNode;
	//removedNode1 = blackCover.removeChild(imgBox);
	//alert ("hideIm3 removedNode.id = " + removedNode.id);
	
	pn2 = blackCover.parentNode;
	pn2.removeChild(blackCover);
	pn2.removeChild(imgBox);
	//pn3 = cover.parentNode;
	pn2.removeChild(cover);
	
	//alert ("pn2=== pn3: " + (pn2 === pn3));// true
  }
}

$pt.prototype.absorbClick = function(){
	x = 1;
}


$pt.prototype.correctBack = function(){
  if (this.active){
	innerW = document.documentElement.clientWidth;
	innerH = document.documentElement.clientHeight;
	
	blackCover = document.getElementById("blackBack381439735674");
	blackCover.style.width = innerW + "px";
	blackCover.style.height = innerH + "px";
	//
	
	cover = document.getElementById("cover45003");
	cover.style.width = innerW + "px";
	cover.style.height = innerH + "px";
	 
	//var dsocleft=(this.isIE6plus)? this.tbody.scrollLeft : pageXOffset;
//	var dsoctop=(this.isIE6plus)? this.tbody.scrollTop : pageYOffset;
//	
//	cover.style.left = parseInt(dsocleft) + "px";
//	cover.style.top = parseInt(dsoctop) + "px";
	
	// recentre img - completely wack - TODO TODO  TODO TODO  TODO TODO  TODO TODO  TODO TODO  TODO TODO 
	
	//imgNode = ImgBox.firstChild;
//	this.defineImgFinalSize();
//	
//	//alert ("correctBack w2 = " + this.w2 + ", h2 = " + this.h2);
//	
//	imgNode.style.width = this.w2 + "px";
//	imgNode.style.height = this.h2 + "px";
  }
}

//// omit var to create singleton:

var $pt = new $pt();

////  This included just to demonstrate possible click event detection
////  If each large image had same filename as thumb, but kept in another folder, then this could 
////  be used to expand the relevant  thumb.  Alternatively a naming convention could be used, which would allow
////  all images to be kept in the same folder.

$(document).ready(function(){ 
//  $('img.ptExp').mousedown(function(){
//	//alert (this.src);

//    // need closure:
//  var obj = this;
//  setTimeout(function () { obj.reposImg(); }, 100);

  $(window).scroll(function () { $pt.keepBackFixed(); }); 
  $(window).resize(function () { $pt.correctBack(); }); 
  //$(window).bind('scroll', posData, keepBackFixed);
});