// Lenticulation navigation script

// Array format is iframe #, hash #, title, height
var hashArray = new Array();

hashArray[0] = new Array(1,1,'Wild Parrots of Telegraph Hill',631);
hashArray[1] = new Array(37,37,'Sather Gate',610);
hashArray[2] = new Array(13,13,'Transbay \"L\" Line',668);
hashArray[3] = new Array(5,5,'Swingset',615);
hashArray[4] = new Array(41,41,'Tethered',600);
hashArray[5] = new Array(35,35,'Take a Seat',609);
hashArray[6] = new Array(40,40,'Gypsy Lever',600);
hashArray[7] = new Array(7,7,'Script Girl',607);
hashArray[8] = new Array(25,25,'Body Paint',650);
hashArray[9] = new Array(6,6,'Fembot',605);
hashArray[10] = new Array(8,8,'Voter Registration Drive',608);
hashArray[11] = new Array(9,9,'Photographer',601);
hashArray[12] = new Array(26,26,'Man on the Street',628);
hashArray[13] = new Array(26,27,'Dibs',609);
hashArray[14] = new Array(16,16,'Greek Theater',655);
hashArray[15] = new Array(31,31,'Barbie',635);
hashArray[16] = new Array(24,24,'Mojo',622);
hashArray[17] = new Array(32,32,'Dilophosaurus',632);
hashArray[18] = new Array(2,2,'Grant & Lombard',603);
hashArray[19] = new Array(3,3,'Fallen Leaf Lake',608);
hashArray[20] = new Array(4,4,'MacArthur Station',620);
hashArray[21] = new Array(38,38,'Hackey Sack',610);
hashArray[22] = new Array(12,12,'Fruit of the Loom',660);
hashArray[23] = new Array(15,15,'House Painter',663);
hashArray[24] = new Array(39,39,'Catching Up at Cafe Espresso',600);
hashArray[25] = new Array(14,14,'Birdbath',673);
hashArray[26] = new Array(10,10,'Frank Chiu',659);

var frame=0;
var loadFlag = 0;

function loadImages(direction) {

// hide the embed tag
document.getElementById("embed").style.display = "none";

//I'm using a hash id in the url to enable bookmarking specific lenticulations

//On startup, determine the correct lenticular to display if the url includes a hash identifier
if (loadFlag == 0 && location.hash) {
	currentHash=parseInt(location.hash.slice(1));	
	for (i=0;i<hashArray.length;i++) {
		if (hashArray[i][0] == currentHash) {
			frame = i;
			}
		}
	loadFlag = 1;
	}

//On startup, start with the first lenticular in the array if the url doesn't include a hash identifier
if (loadFlag == 0 && !location.hash) {
	frame=0;
	loadFlag = 1;
	location.hash = 1;
	}

//Navigate the array and set the url hash	
else {
	loadFlag=1;
	if (direction=="next") frame++;
	else if (direction=="prev") frame--;
	if (frame>(hashArray.length-1)) frame=0;
	if (frame<0) frame=hashArray.length-1;
	location.hash = hashArray[frame][0];
	}

//Load the appropriate HTML file in the iframe. I'm using an iframe because it's faster and more robust than DHTML.
document.getElementById("stereoIframe").src = "images_stereogram/iframe/stereo"+hashArray[frame][1]+".html";

//Set the height of the iframe. This is only necessary to support the decorative borders in the page design.
document.getElementById("stereoIframe").style.height = hashArray[frame][3]+"px";

//Display the correct title
document.getElementById("title").innerHTML = hashArray[frame][2];

//Display your location in the navigation
document.getElementById("nav").innerHTML = (frame+1)+" of "+hashArray.length;	

//Display Facebook Share button
var shareButtonUrl = "http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.lenticulations.com%2Findex.html%23"+hashArray[frame][0]+"&t=Lenticulations%3A%20"+encodeURIComponent(hashArray[frame][2])+" target=\"_blank\"";
document.getElementById("shareButton").href = shareButtonUrl;

//Display embed button
var embedButtonUrl = "javascript:embed('stereo"+hashArray[frame][0]+".html');"
document.getElementById("embedButton").href = embedButtonUrl;
	
}

// embed tag
function embed(theUrl) {
var embedLink = "<iframe name=\"stereoIframe\" id=\"stereoIframe\" scrolling=\"no\" frameborder=\"0\" width=\"500\" height=\"660\" src=\"http://www.lenticulations.com/images_stereogram/iframe/"+theUrl+"\"><\/iframe>";
var theField = document.getElementById("embed");
theField.style.display = "block";
theField.value = embedLink;
theField.select();
}




window.onload = loadImages;