//var ajax = new sack();
var articleListObj;
var activeArticle = false;
var closedArticle = false;
var contentObj // Reference to article content <div>

function mouseoverArticle()
{
if(this==clickedArticle)return;
if(activeArticle && activeArticle!=this)
	{
	if(activeArticle==clickedArticle)
		activeArticle.className='articleClick';
	else
		activeArticle.className='';
	}
this.className='articleMouseOver';
activeArticle = this; // Storing reference to this article
}

function showContent() // Displaying content in the content <div>
{
contentObj.innerHTML = ajax.response; // ajax.response is a variable that contains the content of the external file
}

function showWaitMessage()
{
contentObj.innerHTML = 'Finding article.....<br>Please wait<br /><img src=files/loader.gif>';
}
function getAjaxFile(fileName)
{
ajax.requestFile = 'xhtml/'+fileName; // Specifying which file to get
ajax.onCompletion = showContent; // Specify function that will be executed after file has been found
ajax.onLoading = showWaitMessage; // Action when AJAX is loading the file
ajax.runAJAX(); // Execute AJAX function
}

function selectArticle() // User have clicked on an article
{
getAjaxFile(this.id + '.html'); // Calling the getAjaxFile function. argument to the function is id of this <li> + '.html', example "article1.html"
if(clickedArticle && clickedArticle!=this)clickedArticle.className='articleMouseOver';
this.className='articleClick';
clickedArticle = this;
}


function initAjaxDemo()
{
articleListObj = document.getElementById('articleList');
//var articles = articleListObj.getElementsByTagName('LI');
//for(var no=0;no<articles.length;no++){
//articles[no].onmouseover = mouseoverArticle;
//articles[no].onclick = selectArticle;
}

contentObj = document.getElementById('contentContainer');

initAjaxDemo();