var ajax = new sack();
var articleListObj;
var activeArticle = false;
var clickedArticle = false;
var contentObj	

function mouseoverArticle()	// マウスオーバー時のハイライト
{
	if(this==clickedArticle)return;
	if(activeArticle && activeArticle!=this){
		if(activeArticle==clickedArticle)
			activeArticle.className='articleClick';
		else
			activeArticle.className='';
		
	}
	this.className='articleMouseOver';
	activeArticle = this;	
}

function showContent()
{
	contentObj.innerHTML = ajax.response;	// ajax.responseは外部ファイルのコンテンツ情報を入れ込む変数	
}

function showWaitMessage()
{
	contentObj.innerHTML = 'Loading';
}
function getAjaxFile(fileName)
{
	ajax.requestFile = fileName;	// ゲットするファイルを指定
	ajax.onCompletion = showContent;	//ファイルをゲットした後に実行される関数を指定
	ajax.onLoading = showWaitMessage;	// AJAXがファイルを読み込んでいる間のアクション
	ajax.runAJAX();		//AJAX関数を実行	
}

function selectArticle()	// ユーザーが右側のメニューリストをクリックした時に実行される関数
{
	getAjaxFile(this.id + '.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('oabox');
}
window.onload = initAjaxDemo;