function showText(obj){
	var eid = "thumb" + obj.id + "_overlay";
	document.getElementById(eid).style.visibility = "visible";
	document.getElementById(eid).style.cursor = "pointer";
}

function hideText(obj){
	var eid = "thumb" + obj.id + "_overlay";
	document.getElementById(eid).style.visibility = "hidden";
	document.getElementById(eid).style.cursor = "default";
}

function printHTML(html){
	document.getElementById("story_content").innerHTML = html;
}

function printError(){
	document.getElementById("story_content").innerHTML = '<div id="story_description">Unable to display this story at this time.</div>';
}

function clearStoryWindow(){
	document.getElementById("story_content").innerHTML = "";
}

var cur_story = 1;
function showStory(obj){
	hideText(obj);
	clearStoryWindow();
	document.getElementById("story_window").style.visibility = "visible";
	document.getElementById("story_copy").style.visibility = "hidden";
	
	cur_story = Number(obj.id); // id tag, used for prev next buttons
	var story_db_id = db_ids[cur_story-1]; // get the corresponding database id field for this story
	var ajax_url = 'format_story_detail.php?dbid=' + story_db_id;

	new Ajax.Request(ajax_url,
		{
    	method:'get',
    	onSuccess: function(transport){
      		var response = transport.responseText;
			printHTML(response);
    	},
    	onFailure: function(){ printError(); }
  		}
	);
}

function hideStory(){	
	document.getElementById("story_window").style.visibility = "hidden";
	document.getElementById("story_copy").style.visibility = "visible";
}

function prevStory(){
	var prev_story = (cur_story == 1) ? total_stories : cur_story - 1;
	var doc_obj = document.getElementById(prev_story);
	showStory(doc_obj);
}

function nextStory(){
	var next_story = (cur_story == total_stories) ? 1 : cur_story + 1;
	var doc_obj = document.getElementById(next_story);
	showStory(doc_obj);
}

/**/
function clickHandler(obj){
	var v = document.getElementById("story_window").style.visibility;
	if(v != "visible") showStory(obj);
}

function mouseOverHandler(obj){
	var v = document.getElementById("story_window").style.visibility;
	if(v != "visible") showText(obj);
}

function mouseOutHandler(obj){
	var v = document.getElementById("story_window").style.visibility;
	if(v != "visible") hideText(obj);
}

var total_stories = 0;
function setEvents(){
  if( document.getElementById &&
      document.getElementsByTagName ){
	  
	// assign events to all div tags within the thumb_container
    if( document.getElementById('thumb_container') ){
      var gallery = document.getElementById('thumb_container');
      var links = gallery.getElementsByTagName('div');
      for( var i=0; i < links.length; i++ ){
        links[i].onclick = function(){ clickHandler(this) }
		links[i].onmouseover = function(){ mouseOverHandler(this) }
		links[i].onmouseout = function(){ mouseOutHandler(this) }
      }
	  total_stories = i; // store in global variable
    }
  }
}  

window.onload = setEvents;