﻿
// Utility ///////////////////////////////////////////////
LOS="style=\"position:absolute;left:0;top:0;width:0;height:0;border-style:solid;border-width:0;padding:0;\"";

// URL parameter extraction function from http://www.netlobo.com/url_query_string_javascript.html
function getURLParam( param ) {
	  param = param.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
	  var regexS = "[\\?&]"+param+"=([^&#]*)";
	  var regex = new RegExp( regexS );
	  var results = regex.exec( window.location.href );
	  if( results == null )
		    return "";
	  else
		    return results[1];
}
// End borrowed

function findDims() {
	// Select an appropriate content scale
	if(screen.height > 1150)
		conHeight = 1000;
	else if(screen.height > 950)
		conHeight = 800;
	else if(screen.height > 850)
		conHeight = 700;
	else if(screen.height > 750)
		conHeight = 600;
	else
		conHeight = 450;
	conWidth = Math.round(conHeight*1.5);
}
document.write("<div id=\"outerTD\" style=\"position:absolute;left:-900px;top:-900px;visibility:hidden;width:500px;height:500px;border-width:0;overflow:scroll;\"><div id=\"innerTD\" style=\"width:100%;height:1000px;border-width:0;\"></div></div>"); // used for finding the width of scrollbars
function findPos() {
	// Window size finding code from http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
	winWidth = 0;
	winHeight = 0;
	if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		winWidth = window.innerWidth;
		winHeight = window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		//IE 6+ in 'standards compliant mode'
		winWidth = document.documentElement.clientWidth;
		winHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		winWidth = document.body.clientWidth;
		winHeight = document.body.clientHeight;
	}
	// End borrowed

	var outerTD = document.getElementById("outerTD");
	var innerTD = document.getElementById("innerTD");
	scrollerWidth = outerTD.offsetWidth-outerTD.clientWidth;
	rScrollerWidth = scrollerWidth/conWidth;

	conX = Math.round(0.44*(winWidth-conWidth));
	if(conX < 0)
		conX = 0;
	conY = Math.round(0.02*winHeight);
}

function layOutEle(eId, rX, rY, rW, rH, rB) {
	var ele = document.getElementById(eId);
	var elePar = ele.parentNode;
	var bw = Math.round(rB*conHeight);

	ele.style.left=""+Math.round(rX*elePar.clientWidth)+"px";
	ele.style.top=""+Math.round(rY*elePar.clientHeight)+"px";
	ele.style.width=""+Math.round(rW*elePar.clientWidth-2*bw)+"px";
	ele.style.height=""+Math.round(rH*elePar.clientHeight-2*bw)+"px";
	ele.style.borderWidth=""+bw+"px";
}

// Channels /////////////////////////////////////////////
channels = {};

function channel(id, content) {
	this.id = id;
	this.content = content;
}
channel.prototype.write = function() {
	document.write("<div id=\"channel\" "+LOS+"><div id=\"channelContent\" style=\"position:absolute;left:0;top:0;width:0;\">"+this.content+"</div></div>");
}
channel.prototype.layOut = function() {
	layOutEle("channel", 0, 0.25, 0.3125, 0.75, 0.0023);

	var ele = document.getElementById("channelContent");
	var elePar = ele.parentNode;
	ele.style.left=""+Math.round(0.05*elePar.clientWidth)+"px";
	ele.style.width=""+Math.round(0.9*elePar.clientWidth)+"px";
}
function defineChannel(id, content) {
	channels[id] = new channel(id, content);
}

// Shows ///////////////////////////////////////////////
shows = {};

function galleryShow(id) {
	this.id = id;
	this.captions = new Array();
	this.buffer = 0;
}
galleryShow.prototype.selectPiece = function(n) {
	var other = (this.buffer == 0? 1 : 0);
	var bImg = document.getElementById("selectionImg"+this.buffer);
	var oImg = document.getElementById("selectionImg"+other);
	if(n != oImg.galleryN && n != bImg.galleryPN) {
		document.getElementById("selectionLdg").style.visibility="visible";
		bImg.galleryPN = n;
		if(n != bImg.galleryN) {
			document.getElementById("selectionCap"+this.buffer).innerHTML = this.captions[n];
			bImg.src = "shows/"+this.id+"/"+conWidth+"x"+conHeight+"/"+n+".jpg";
		} else {
			this.pieceLoaded(this.buffer);
		}
	}
}
galleryShow.prototype.pieceLoaded = function(which) {
	var other = (which == 0? 1 : 0);
	layOutPiece(which);
	document.getElementById("selectionCap"+other).style.visibility="hidden";
	document.getElementById("selectionImg"+other).style.visibility="hidden";
	var wImg = document.getElementById("selectionImg"+which);
	wImg.galleryN = wImg.galleryPN;
	wImg.galleryPN = 0;
	wImg.style.visibility="visible";
	document.getElementById("selectionCap"+which).style.visibility="visible";
	document.getElementById("selectionLdg").style.visibility="hidden";
	this.buffer = other;
}
galleryShow.prototype.write = function() {
	document.write("<div id=\"thumbs\" "+LOS+"><div style=\"font-size:0;\">"); // The second div is a fix for Firefox; without it there will be a little extra space below each thumb.  Do not apply the style to the outer div or scrolling with the mouse wheel will stop working.
	var n;
	for(n = 1; n < this.captions.length; n++)
		document.write("<img class=\"THUMB\" style=\"margin:0;border-style:solid;border-width:0;\" src=\"shows/"+this.id+"/thumbs/"+conWidth+"x"+conHeight+"/"+n+".jpg\" alt=\"\" onclick=\"shows['"+this.id+"'].selectPiece("+n+");\" />");
	document.write("</div></div>");

	document.write("<div id=\"selection\" "+LOS+">");
	for(n = 0; n < 2; n++) {
		document.write("<img id=\"selectionImg"+n+"\" onload=\"shows['"+this.id+"'].pieceLoaded("+n+");\" class=\"SELIMAGE\" style=\"visibility:hidden;position:absolute;left:0;top:0;border-style:solid;border-width:0;padding:0;\" src=\"\" alt=\"(Caption below)\" />");
		document.write("<div id=\"selectionCap"+n+"\" class=\"SELCAPTION\" style=\"visibility:hidden;position:absolute;left:0;top:0;width:0;height:0;padding:0;\"></div>");
	}
	document.write("<div id=\"selectionLdg\" style=\"visibility:hidden;position:absolute;left:0;top:0;border-style:solid;border-width:0;padding:0;\">Loading...</div>");
	document.write("</div>");

	this.selectPiece(Math.round(Math.random()*(this.captions.length-2))+1);

	// Preload the close-up images of all photos in the gallery
	for(n = 1; n < this.captions.length; n++)
		document.write("<img class=\"IMGPRELD\" src=\"shows/"+this.id+"/"+conWidth+"x"+conHeight+"/"+n+".jpg\" alt=\"\" />");
}
function layOutPiece(which) {
	var img = document.getElementById("selectionImg"+which);
	var cap = document.getElementById("selectionCap"+which);
	var sel = img.parentNode;
	var selPar = sel.parentNode;

	var bw = Math.round(0.0023*conHeight);
	var imgP = Math.round(0.008888889*conHeight);
	var capP = Math.round(0.01875*conHeight);

	img.style.borderWidth=""+bw+"px";
	img.style.padding=""+imgP+"px";
	img.style.width="";
	img.style.height="";
	img.style.left=""+Math.round((sel.clientWidth-img.offsetWidth)/2)+"px";
	img.style.top="-"+bw+"px";

	cap.style.padding=""+capP+"px";
	cap.style.top=""+(img.offsetTop+img.offsetHeight)+"px";
	cap.style.width=""+(sel.clientWidth-2*capP)+"px";
	cap.style.height=""+((sel.clientHeight-cap.offsetTop)-2*capP)+"px";
}
galleryShow.prototype.layOut = function() {
	var offset = Math.round((rScrollerWidth-0.0141667)*conWidth);
	var navEle = document.getElementById("navBar");
	navEle.style.width=""+(navEle.clientWidth+offset)+"px";
	navEle = document.getElementById("prints");
	navEle.style.left=""+(navEle.offsetLeft+offset)+"px";

	layOutEle("selection", 0.333333, 0.25, 0.5, 0.75, 0.0023);
	var selLdg = document.getElementById("selectionLdg");
	var sel = selLdg.parentNode;
	selLdg.style.borderWidth=""+Math.round(0.00375*conHeight)+"px";
	selLdg.style.padding=""+Math.round(0.01*conHeight)+"px";
	selLdg.style.left=""+((sel.clientWidth-selLdg.offsetWidth)/2)+"px";
	selLdg.style.top=""+(0.32*sel.clientHeight-selLdg.offsetHeight/2)+"px";
	layOutPiece(0);
	layOutPiece(1);

	layOutEle("thumbs", 0.854167, 0.25, 0.131667+rScrollerWidth, 0.75, 0.0023);
	var thumbList = document.getElementById("thumbs").childNodes[0].childNodes;
	var t;
	for(t = 0; t < thumbList.length; t++) {
		thumbList[t].style.margin=""+Math.round(0.0023*conHeight)+"px";
		thumbList[t].style.borderWidth=""+Math.round(0.0023*conHeight)+"px";
	}
}
function defineGalleryShow(id) {
	caps = (shows[id] = new galleryShow(id)).captions;
}

// Links ////////////////////////////////////////////////
links = new Array();

function link(desc, url, nt, ico, x, y, w, h, b) {
	this.description = desc;
	this.icon = ico;
	this.href = url;
	this.newTab = nt;
	this.rX = x;
	this.rY = y;
	this.rW = w;
	this.rH = h;
	this.rB = b;
}
link.prototype.write = function() {
	document.write("<div id=\""+this.icon+"\" "+LOS+">");
	if(thisPage.link != this) {
		document.write("<a href=\""+this.href+"\"");
		if(this.newTab)
			document.write(" target=\"_blank\">");
		else
			document.write(">");
	}
	document.write("<img src=\"interface/"+conWidth+"x"+conHeight+"/"+this.icon+".png\" alt=\""+this.description+"\" />");
	if(thisPage.link != this)
		document.write("</a>");
	document.write("</div>");
}
link.prototype.layOut = function() {
	layOutEle(this.icon, this.rX, this.rY, this.rW, this.rH, this.rB);
}
function defineLink(desc, url, nt, ico, x, y, w, h, b) {
	links.push(new link(desc, url, nt, ico, x, y, w, h, b));
}

// Pages ////////////////////////////////////////////////
EPT="www.EmulsionPhoto.com :: ";
pages = {};

function page(ttl, ch, sh, id) {
	this.title = ttl;
	this.channel = channels[ch];
	this.show = shows[sh];
	this.id = id;
}
page.prototype.write = function() {
	document.title = EPT+this.title;

	findDims();

	document.write("<div id=\"content\" style=\"position:absolute;left:0;top:0;width:"+conWidth+"px;height:"+conHeight+"px;\">");
		document.write("<div id=\"navBar\" "+LOS+">");
		var n;
		for(n = 0; n < links.length; n++)
			links[n].write();
		document.write("</div>");
		this.channel.write();
		this.show.write();
		document.write("<div id=\"Cnotice\" "+LOS+">All photographs Copyright &copy; 2004-2009 Marcus Bockman</div>");
	document.write("</div>");

	this.layOut();
}
page.prototype.layOut = function() {
	findPos();

	var conEle = document.getElementById("content");
	conEle.style.left=""+conX+"px";
	conEle.style.top=""+conY+"px";

	layOutEle("navBar", 0, 0, 1.0, 0.21875, 0.0023);
	var n;
	for(n = 0; n < links.length; n++)
		links[n].layOut();
	this.channel.layOut();
	this.show.layOut();
	layOutEle("Cnotice", 0.0, 1.0, 1.0, 0.05, 0.0);
}
function definePage(ttl, ch, sh, id) {
	return pages[id] = new page(ttl, ch, sh, id);
}
function defineLinkedPage(ttl, ch, sh, id, nt, x, y, w, h, b) {
	var np = new page(ttl, ch, sh, id);
	np.link = new link(EPT+ttl, "index.htm?p="+id, nt, id, x, y, w, h, b);
	pages[id] = np;
	links.push(np.link);
	return np;
}
