var thumbs = [];

function load_popup() {

	// create popup tags
	var popup = document.createElement('div');
		popup.id = "popup";
		popup.innerHTML = "<table style='position:absolute;top:0;left:0;width:100%;height:2000px;background:url(dark_translucent.png);'><tr><td align='center' valign='top'><table id='popup_frame'><tr><td id='popup_frame_inner' align='center'><div><table width='100%'><tr><td width='50'></td><td id='popup_nav' align='center'></td><td id='popup_x' align='right' width='50'></td></tr></table></div><div id='popup_img'></div><div id='popup_txt'></div><div id='popup_close'></div></td></tr></table></td></tr></table>";

	document.body.appendChild(popup); 
	document.getElementById("popup").style.display = "none"; 



	// create an array of each link
	var links = document.getElementsByTagName("a");

	// loop through each of these links 	
	for (var i=0; i < links.length; i++) {
	
		// if the link has a class of "thumb"...	
		if (links[i].className == "thumb") {	

			// add to global thumbs array
			thumbs.push(links[i]);

			// get the value of the link source
			var source = links[i].getAttribute("href");

			// preload
			// preload = new Image();
			// preload.src = source;		

			// remove the link's href 
			links[i].setAttribute("href", 'javascript:void(0)');

			// store the big image source in the title attribute
			links[i].setAttribute("title", source);

			// set the link's onclick to load its source in the div	
			links[i].onclick = function() { open_popup(this) };
		}
	} 
} 

function open_popup(link) {

	// get title (source) from incoming link
	big_image = link.title;

	// change popup image to clicked link's source
	document.getElementById("popup_img").innerHTML = "<a id='img_next'><img src='" + big_image + "'></a>"; 
	document.getElementById("img_next").setAttribute("href", 'javascript:void(0)');

	// make popup visible
	document.getElementById("popup").style.display = "block";

	// find array value of current link 
	for (var i=0; i < thumbs.length; i++) {
		if ( thumbs[i]==link ) { 

			// add alt text
			document.getElementById("popup_txt").innerHTML = link.getElementsByTagName("img")[0].alt;

			// wipe out preexisting buttons
			document.getElementById("popup_nav").innerHTML = "";
			
			// add prev button
			var prev = document.createElement('a');
				prev.id = "button_prev"
				prev.className = "pop_button";
				prev.innerHTML ="&lsaquo; previous";
				prev.setAttribute("href", 'javascript:void(0)');					
			document.getElementById("popup_nav").appendChild(prev);
			var prev_link;
			// if this isn't the first illustration, go back; else loop to end
			if (i > 0) { prev_link = thumbs[i-1]; } else { prev_link = thumbs[thumbs.length-1]; }	
			document.getElementById("button_prev").onclick = function() { open_popup(prev_link) }; 

			// add divider
			var divider = document.createElement('span');
				divider.innerHTML =" &#124; ";
			document.getElementById("popup_nav").appendChild(divider); 

			// add next button
			var next = document.createElement('a');
				next.id = "button_next"
				next.className = "pop_button";
				next.innerHTML ="next &rsaquo;";
				next.setAttribute("href", 'javascript:void(0)');
			document.getElementById("popup_nav").appendChild(next);
			var next_link;
			// if this isn't the last illustration, go next; else loop to beginning
			if (i < thumbs.length-1) { next_link = thumbs[i+1]; } else { next_link = thumbs[0]; }
			document.getElementById("button_next").onclick = function() { open_popup(next_link) };  
			// also, add this behavior to the image link
			document.getElementById("img_next").onclick = function() { open_popup(next_link) }; 

			// add close buttons
			var close = document.createElement('a');
				close.id = "button_close"
				close.className = "pop_button";
				close.innerHTML ="close";
				close.setAttribute("href", 'javascript:void(0)');
			document.getElementById("popup_close").innerHTML = "";
			document.getElementById("popup_close").appendChild(close);
			document.getElementById("button_close").onclick = function() { document.getElementById("popup").style.display = "none"; };  			
			
			var x = document.createElement('a');
				x.id = "x"
				x.innerHTML ="x";
			document.getElementById("popup_x").innerHTML = "";
			document.getElementById("popup_x").appendChild(x);
			document.getElementById("x").setAttribute("href", 'javascript:void(0)');
			document.getElementById("x").onclick = function() { document.getElementById("popup").style.display = "none"; }
		}
	}
}