//////////////////////////////////  1 IMAGE - WITH TEXT  ///////////////////////////////////////////


function changeCaption(index) {
	
	var caption = document.getElementById("caption");
	caption.innerHTML = captions[index];
	caption.style.visibility = "";
	
}


function createImage(index) {

	var theSrc = "images/";
	var holder = document.getElementById("picture");
	var content = ""
	
	// exceptions... list gets longer...
	if (images[index] == "2011_13") {
			content += "<div style='border: 1px solid #ffffff; width: 700px; height: 394px; '>"
			
			content += "<video autobuffer controls preload autoplay loop poster='images/2011_13_still.jpg' width='700' height='394'>" 
			content += "<source src='media/i_keep_trying.ogv' type='video/ogg'>" 
			content += "<source src='media/i_keep_trying.mp4' type='video/mp4'>"
			// content += "<source src='media/i_keep_trying.webm'>"
			content += "!--[if !IE]><!-->"
			content += "<object type='video/quicktime' data='media/i_keep_trying.mp4' width='700' height='394'>" 
			content += "<!--<![endif]-->"
			content += "<param name='src' value='media/i_keep_trying.mp4'>" 
			content += "<param name='autoplay' value='true'>" 
			content += "<param name='autoStart' value='1'>" 
			content += "<param name='loop' value='true'>" 
			content += "<p><a href='media/i_keep_trying.mp4'>Download this video file.</a></p>" 
			content += "</object>" 
			content += "</video>"
			
			content += "</div>"
	}
	
	else if (images[index] == "audio") {
			content += "<img src=\"images/2010_01.jpg\" border=0 style=\"margin-bottom:10px;\">"
			
			content += "<div class=\"player\" style=\"position:relative;\">"
			content += "<object type=\"application/x-shockwave-flash\" data=\"http://flash-mp3-player.net/medias/player_mp3_maxi.swf\" width=25 height=20>"
        	content += "<param name=\"movie\" value=\"http://flash-mp3-player.net/medias/player_mp3_maxi.swf\" />"
        	content += "<param name=\"FlashVars\" value=\"mp3=http%3A//www.brianhubble.com/media/demonstrates.mp3&amp;showslider=0&amp;width=25&amp;bgcolor=ffffff\" />"
			content += "</object>"
			content += "<div id=\"on-state\" style=\"position:absolute; top:50%; height:20px; margin-top:-8px; margin-left: 25px;\">&nbsp; audio transcript &nbsp; 3:26</div>"
			content += "</div>"
			
	}
	
	else if (images[index] == "audio2") {
			content += "<img src=\"images/2010_02.jpg\" border=0 height=525 style=\"margin-bottom:10px;\">"
			
			content += "<div class=\"player\" style=\"position:relative;\">"
			content += "<object type=\"application/x-shockwave-flash\" data=\"http://flash-mp3-player.net/medias/player_mp3_maxi.swf\" width=25 height=20>"
        	content += "<param name=\"movie\" value=\"http://flash-mp3-player.net/medias/player_mp3_maxi.swf\" />"
        	content += "<param name=\"FlashVars\" value=\"mp3=http%3A//www.brianhubble.com/media/no_matter.mp3&amp;showslider=0&amp;width=25&amp;bgcolor=ffffff\" />"
			content += "</object>"
			content += "<div id=\"on-state\" style=\"position:absolute; top:50%; height:20px; margin-top:-8px; margin-left: 25px;\">&nbsp; audio transcript &nbsp; 1:43</div>"
			content += "</div>"
			
	}
	
	else {
	
		content += "<img src=\"images/" + images[index] + ".jpg\" border=0 >"
		
	}
	
	holder.innerHTML = content;
	holder.style.display = "";
	
}


function getPage(index) {

	// create image
	createImage(index);
	
	// check to see if there is a "more" state
	getMore(index);
	
	
	// build arrows
	var dirSize = eval(images.length);
	
	var holder = document.getElementById("arrows");
	
	
	var content = ""
	
	// first image on page
	if (index == 0){
	
		content += "<a href=\"javascript:getPage('1');\">&gt;</a>"
	
	}
	
	// last image on page
	else if (index == Number(dirSize-1) ){
			var prevPage = Number(dirSize-2);
		content += "<a href=\"javascript:getPage('" + prevPage + "');\">&lt;</a>"
		content += " &nbsp; &nbsp; &nbsp; "
		content += "<span style='color: #ffffff;'>&gt;</a>"
	}
	
	else {
	
		var prev = Number(index) - 1;
		var next = Number(index) + 1;
	
		content += "<a href=\"javascript:getPage('" + prev + "');\">&lt;</a>"
		content += " &nbsp; &nbsp; &nbsp; "
		content += "<a href=\"javascript:getPage('" + next + "');\">&gt;</a>"
		
	}
	
	holder.innerHTML = content;
	holder.style.display = "block";	
	changeCaption(index);
	
}

function getMore(index) {

	var holder = document.getElementById("moreless");
	
	var content = ""
	
	// if there isn't a 'more' for the image
	if (moreImages[index] == "") {
		content += ""
	}
	
	// if there is a 'more'
	else {
		content += " | &nbsp; <a href=\"javascript:moreImage('" + index + "');\">detail</a>"
		
	}
	
	holder.innerHTML = content;
	
}

function moreImage(index) {
	
	var theSrc = "images/";
	var holder = document.getElementById("picture");
	var content = ""
	
	content += "<img src=\"images/" + moreImages[index] + ".jpg\" border=0 >"
	
	holder.innerHTML = content;
	holder.style.display = "";
	getLess(index);
	
}

function getLess(index) {
	
	var holder = document.getElementById("moreless");
	
	var content = ""
	
	content += " | &nbsp; <a href=\"javascript:getPage('" + index + "');\">back</a>"
	
	holder.innerHTML = content;
	
}