var events; //matrix of all multimedia. columns are date, title, link
var eventsPosition; //index of furthest left, visible events that is displayed. so eventsPosition, eventsPosition+1, and eventsPosition+2 are seen
var eventsXmlDoc; //used to load the external file we will read
var eventsXmlLocation = '/now/events-xml.xml'; //location of the xml file we will read
$().ready(function() {
	eventsXmlDoc = $.ajax({url:eventsXmlLocation, success: loadEvents});
});

function shiftEvents(direction){
	//shift eventsPosition one set of 3 left or right
	//if we reach the extreme left or right, hide the arrow in that direction
	if (direction == 'left'){
		eventsPosition -= 3;
		if (eventsPosition <= 0){ //if we pass 0, move back to 0
			eventsPosition = 0;
		}
	} else {
		eventsPosition += 3;
		if (eventsPosition >= events.length-1){ //if we pass length, move back to that point
			eventsPosition = events.length-1;
		}
	}
	//if there are 3 are fewer events, there should be no arrows
	if (eventsPosition <= 2){
		document.getElementById("left_link").style.visibility = "hidden";
		if (events.length-1 <= 2) {
			document.getElementById("right_link").style.visibility = "hidden";
		}
		else {
			document.getElementById("right_link").style.visibility = "visible";
		}
	} else if (eventsPosition >= events.length-3){
		//if we're anywhere in the last set, hide the right arrow
		document.getElementById("left_link").style.visibility = "visible";
		document.getElementById("right_link").style.visibility = "hidden";
	} else { //otherwise, make both arrows reappear
		document.getElementById("left_link").style.visibility = "visible";
		document.getElementById("right_link").style.visibility = "visible";
	}		

	//set all three dates and titles with elements from the array, starting from eventsPosition
	for (i=1; i<4; i++){ //start at 1 to match element name, -1 from eventsPosition so we're in the right place of the array
		if (eventsPosition+i-1 <= events.length-1){
			document.getElementById("eventdate" + i).innerHTML = events[eventsPosition+i-1][0];
			document.getElementById("eventtitle" + i).innerHTML = events[eventsPosition+i-1][1];
			document.getElementById("eventlink" + i).href = events[eventsPosition+i-1][2];
			document.getElementById("event" + i).style.visibility = "visible";
		} else {//the furthest right set is not complete, so clear the blank slots
			document.getElementById("event" + i).style.visibility = "hidden";
		}
	}
}

function loadEvents(data, status){
	//create a multidimensional array. num of events x num of properties (3)
	events = new Array();
	$(data).find('event').each(function(i) {
		events[i] = new Array();
		events[i][0] = $(this).find('date').text();
		events[i][1] = $(this).find('title').text();
		events[i][2] = $(this).find('link').text();
	});
	eventsPosition = 3; //because we're going to start by shifting 3 to the left, so this really starts us at 0
	shiftEvents('left');
}

function eventsActivate(direction){
	//change the hovered over arrow image to an active version of it
	if (direction == 'left'){
		document.getElementById("eventsleftarrow").src = "/now/design-files/images/leftarrow-active.gif";
	} else {
		document.getElementById("eventsrightarrow").src = "/now/design-files/images/rightarrow-active.gif";
	}
}

function eventsDeactivate(direction){
	//change the activated arrow image back to normal
	if (direction == 'left'){
		document.getElementById("eventsleftarrow").src = "/now/design-files/images/leftarrow.gif";
	} else {
		document.getElementById("eventsrightarrow").src = "/now/design-files/images/rightarrow.gif";
	}
}