// JavaScript Document

var overlayHTML =  "<div id='overlay'>&nbsp;</div>";
var articleHTML ="";
	
	articleHTML +="<div id='modal-box'>";
	articleHTML +="<div id=\"header\"><img src=\"/images/ArticleView/article-header.gif\" alt=\"Article Mast Head\" width=\"615\" height=\"104\" /></div>";
	articleHTML +="<div id=\"content\"></div>";
	articleHTML += "<div id=\"mb-footer\">";
	articleHTML += "<div id=\"description\">&nbsp;</div>";
	articleHTML += "<a id='mb-btn' href='test.html'><img  id='close-btn' src=\"/images/ArticleView/article-close-btn.gif\"/></a>";
	articleHTML +="</div>";
	articleHTML += "</div>";
$.fn.viewTest = function(headline,content,pubdate)
{
	var c_headline = headline;
	var c_content = content;
	var c_date = pubdate;
	var overlayHTML =  "<div id='overlay'>&nbsp;</div>";
	
	$("body").append(overlayHTML);
			
			$("div#overlay").css("opacity",0)
				.width($(document).width())
				.height($(document).height())
				.animate({opacity:.85},750);
				
			displayArticle();
			function displayArticle()
			{
				$("body").append(articleHTML);
				$("#modal-box #content").empty().append("<h1>" + c_headline + "</h1>" + c_content);
				$("#modal-box #mb-footer #description").empty().append("<p>published date: "+c_date+"</p>");
				$("#overlay").width($(document).width()).height($(document).height());
				$("#modal-box").css("opacity",0)
				.css("left",$(window).width()/2 - $("#modal-box").width()/2)
				.css("top",25).animate({opacity:1},750);
				$('#modal-box a#mb-btn').bind("click",closeArticle);
				
			}
			function closeArticle()
			{
				$("#overlay").animate({opacity:0},750).remove();
				$("#modal-box").hide().remove();
				return false;
			}
	return "done";
};