var storyTeasers = null;

function openStoriesList( teaserFile, div ){
	runServerOperation( teaserFile+"?a="+Math.floor(Math.random()*100), null, openStoriesList_Callback );
}

function openStoriesList_Callback( passthroughObj, returnObj ){
	storyTeasers = returnObj.stories;
	drawStoryList();
}

function drawStoryList(){
	html = "";
	for( i=0; i<storyTeasers.length; i++ ){
		id     = storyTeasers[i].storyId;
		img    = storyTeasers[i].storyImg;
		title  = storyTeasers[i].storyTitle;
		date   = storyTeasers[i].storyDate;
		teaser = storyTeasers[i].storyTeaser;
		dateArr = date.split('-');
		newDate = dateArr[1] + '/' + dateArr[2] + '/' + dateArr[0];

		html += "<div id='story"+i+"' class='item_unselected' style='position:absolute; top:"+i*100+"px; width:800px; height:100px;' ";
		html += "onmouseover='this.className = \"item_selected\";' ";
		html += "onmouseout='this.className = \"item_unselected\";' ";		
		html += "onClick=\"OpenStoryViewer('xml/story-"+id+".jso', '"+addSlashes(title)+"')\" ";
		html += ">";
		if( img.length > 0 ){
			html += "<div class='thumb_wrapper'><img src='"+img+"'></div>";
		}
		html += "<div style='position:absolute; left:130px; top:5px;' class='heading'>" + title + "</div>"
		html += "<div style='position:absolute; right:5px; top:5px;' class='heading'>" + newDate + "</div>"
		html += "<div style='position:absolute; left:130px; top:25px;' class='text'>" + teaser + "</div>";
		html += "</div>";
	}
	html += "<div id='storyDetails' class='' style='visibility:hidden; background:#FFF; position:absolute; width:670px; height:527px; left:130px; top:0px; border:2px SOLID #88D; padding:5px 5px 5px 5px;'></div>";
	document.getElementById("pageBody").innerHTML = html;
}


function OpenStoryViewer( storyFile ){
	runServerOperation( storyFile+"?a="+Math.floor(Math.random()*100), null, OpenStoryViewer_Callback, null);

}

function OpenStoryViewer_Callback( passthroughObj, returnObj ){
	DrawStoryViewer( returnObj );
}


var sId = null;
function DrawStoryViewer( storyInfo ){

	title = storyInfo.storyTitle;
	date = storyInfo.storyDate;
	layoutInfo = storyInfo.layoutInfo;
	comments = storyInfo.comments;
	dateArr = date.split('-');
	newDate = dateArr[1] + '/' + dateArr[2] + '/' + dateArr[0];
	storyId = storyInfo.storyId;
	
	sId = storyId;
	
	var BreadCrumbHTML = "";
	BreadCrumbHTML += "<a href='javascript:CloseStoryViewer()' style='color:#93AFDB;'>home</a> :: " + title;
	document.getElementById("breadCrumbTrail").innerHTML = BreadCrumbHTML;

	document.getElementById("storyDetails").style.visibility = 'visible';
	
	header  = "<div style='position:absolute; width:665px; height:21px; left:0; top:0; background:#EEF; border-bottom:1px SOLID #88D;'>";
	header += "<div style='position:absolute; right:3; top:3; cursor:pointer;' onclick='CloseStoryViewer();'><img src='images/close.png'></div>";
	header += "<div class='heading' style='position:absolute; left:5px; top:3px;'>"+title+"</div>";
	header += "<div class='heading' style='position:absolute; right:25px; top:3px;'>"+newDate+"</div>";
	header += "</div>";
	
	storyHTML = "<div style='position:absolute; left:10px; top:22px; width:655px; height:500px; overflow:auto;'>";
	storyHTML += "<br><div style='width:570px;'>";
	for( i=0; i<layoutInfo.length; i++){
		if( layoutInfo[i].img ){
			storyHTML += "<div class='block_"+layoutInfo[i].align+"'>";
			storyHTML += "<div class='thumb_wrapper'><img src='"+layoutInfo[i].img+"'></div></div>";
		} else {
			storyHTML += "<div class='text'>" + layoutInfo[i].text + "<br></div>"
		}
	}
	storyHTML += "</div><br>";
	storyHTML += "<div class='heading' style='border-bottom:1px DOTTED #888; width:570px;'>Comments</div><br>";
	if( comments.length > 0 ){
		<!-- ---------- Comments Go Here ---------- -->
		for( i=0; i<comments.length; i++){
			storyHTML += "<div class='label'>"+comments[i].name+"</div>";
			storyHTML += "<div class='text'>"+comments[i].comment+"</div><br>";		
		}
	} else {
		storyHTML += "<div class='text'>No Comments...</div><br><br>";
	}
	
	<!-- ---------- New Comment Form ---------- -->
	storyHTML += "<div class='heading' style='border-bottom:1px DOTTED #888; width:570px;'>Add Comment:</div><br>";
	storyHTML += "<div class='label'>";
	storyHTML += "Name:<br><input id='commentName' type='text' class='text textbox' name='name'><br><br>";
	storyHTML += "Comment:<br><textarea id='commentText' class='text textbox' style='width:570px; height:150px;'></textarea><br>";
	storyHTML += "<input type='button' class='text button' value='Save Comment' onclick='SaveComment();'><br><br>";	
	storyHTML += "</div>";
	
	document.getElementById("storyDetails").innerHTML = header + storyHTML;
}

function CloseStoryViewer(){
	document.getElementById("storyDetails").style.visibility = "hidden";
	document.getElementById("storyDetails").innerHTML = "";
	document.getElementById("breadCrumbTrail").innerHTML = "";
}

function SaveComment(){
	var name = document.getElementById('commentName').value;
	var comment = document.getElementById('commentText').value;
	
	var args = "action=addComment&storyId="+sId+"&name="+name+"&comment="+comment;
	ajaxServerRequest('ajaxScripts/comments.php', args, SaveComment_Callback, null);
}

function SaveComment_Callback(passthroughObj, returnObj){
	CloseStoryViewer(); //Close and reopen the story
	OpenStoryViewer( "xml/story-"+sId+".jso" );
}