var currentEventPreview = 0;
var maxEventsToPreview = 10;

//the template  
var templ = new Template('<div class="eventsPreviewDate">#{eventsPreviewDate}</div><div class="eventsPreviewTitle"><strong><a href="#{eventsPreviewLink}">#{eventsPreviewTitle}</a></strong></div> <div class="eventsPreviewBody">#{eventsPreviewBody}</div>');

function changeEventPreview(direction){

	if(direction == 'back'){
		nextEventNumber = currentEventPreview - 1;
		currentEventPreview = currentEventPreview - 1;
	}else{
		nextEventNumber = currentEventPreview + 1;
		currentEventPreview = currentEventPreview + 1;
	}
	
	if (nextEventNumber > maxEventsToPreview){
		nextEventNumber = 1;
		currentEventPreview = 1;
	}else if (nextEventNumber < 1){
		nextEventNumber = maxEventsToPreview;
		currentEventPreview = maxEventsToPreview;
	}
	
	Element.update('eventInfo', templ.evaluate(eval('eventPreview' + nextEventNumber)));

}