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

function mouseoverArticle()	// Highlight article
{
	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';
}
function getAjaxFile(fileName)
{
	ajax.requestFile = 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 getAjasFile 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');
}
window.onload = initAjaxDemo;