function showMore(el){
//if (el == curLI) { return false; }
	// get the surrounding li...
	var li = getLI(el);
	var a = getMoreLink(li);
	if (el == null || li == null){ return false; }
	// 
	if (li == curLI){
		// toggle this one
		if (YAHOO.util.Dom.hasClass(li, "closed")) { openEvent(li); }
		else { closeEvent(li); }
	}
	else {
		// show this one and hide the old one
		if (curLI != null){
			closeEvent(curLI);
		}
		openEvent(li);
	}
}
var closeEvent = function(el){
	var li = el;
	YAHOO.util.Dom.addClass(li, "closed");
	YAHOO.util.Dom.removeClass(li, "opened");
	var moreLink = getMoreLink(li);
	if (moreLink != null){
		moreLink.innerHTML = 'Read more >';
	}
	curLI = null;
}

var openEvent = function(el){
	var li = el;
	YAHOO.util.Dom.removeClass(li, "closed");
	YAHOO.util.Dom.addClass(li, "opened");
	var moreLink = getMoreLink(li);
	if (moreLink != null){
		moreLink.innerHTML = '< Hide detail';
	}
	curLI = li;
}

var curLI;
var initDone = false;
var initEvents = function(){
	if (!initDone){
		initDone = true;
		// get all the li's in the events list
		var rows = YAHOO.util.Dom.getElementsByClassName('', 'li', 'eventsList');	
		var l = rows.length;
		for (i=0;i<l;i++){
			closeEvent(rows[i]);
			// setup the click event
			rows[i].onclick = function(){ 
				showMore(this); 
				//return false;
			}
		}
	}
}

//
function getLI(pEl){
	for (i=0;i<3;i++){
		if (pEl == null){ return null; }
		if (pEl.nodeName.toUpperCase() == 'LI'){
			return pEl;
		} else {
			pEl = pEl.parentNode;
		}
	}
	return null;
}

function getTitle(li){
	// return the first h5
	var els = YAHOO.util.Dom.getElementsByClassName('', 'h5', li);
	return (els.length>0)?els[0]:null;
}

function getMoreLink(li){
	// return the first p class='more'
	var els = YAHOO.util.Dom.getElementsByClassName('more', 'p', li);
	// now get it's first child node
	//return (els.length>0)?els[0].childNodes[0]:null;
	return (els.length>0)?els[0]:null;
}

YAHOO.util.Event.addListener(window, "load", initEvents);
// write some initial styles out
document.write('<style type="text/css">\n');
document.write('#eventsDiv li { cursor:default; background-color:#fff; border:none; }\n');
document.write('#eventsDiv li p, #eventsDiv li img { display:none; }\n');
document.write('#eventsDiv li img.thumb { display:block; }\n');
document.write('#eventsDiv li p.more { display:block; margin-top:0; font-weight:normal; clear:none; }\n');
document.write('</style>\n');