var membersLoaded;;

function getMembers(){
	
	//Set up the request function
	var xmlHttp = new XMLHttpRequest();
	var versions = ["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp", "Microsoft.XMLHttp"];

	for (var i = 0; i < versions.length; i++){
		try{
			xmlHttp = new ActiveXObject(versions[i]);
		} catch(e) {}
	}
	
	
	xmlHttp.onreadystatechange = function() {
		
		//If the request is successful, get the xml info and load the bottom content
		if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
			loadMembers(xmlHttp);
		}
	}

	//Request the xml file
	xmlHttp.open("GET", "http://fijiunk.com/Pages/members/members.xml", true);
	xmlHttp.send(null);
}

//This loads the data onto the Members page
function loadMembers(xmlHttp) {
	
	//Convert XML to DOM
	var xmlDoc = xmlHttp.responseXML;
	
	//Get the members content div
	var frame = document.getElementById("members");

	//Initialize
	var pic = document.createElement("div");
	pic.setAttribute("id", "pic");
		
	var memberInfo = document.createElement("div");
	memberInfo.setAttribute("id", "mInfo");
		
	var memberList = document.createElement("div");
	memberList.setAttribute("id", "mList");
	memberList.style.overflow="scroll";
		
	//Create members list
	var listNodes = xmlDoc.getElementsByTagName("name");
	var listElem = new Array();
	
	for (var i = 0; i < listNodes.length; i++){
		
		listElem[i] = document.createElement("div");
		listElem[i].setAttribute("id", "listElem");
		listElem[i].appendChild(document.createTextNode(listNodes[i].childNodes[0].nodeValue));
		memberList.appendChild(listElem[i]);		
	}	
	
	//Add the event listener for onmouseover for each element in the member list
	for(var i=0; i<listElem.length; i++)
	{
	  var closureMaker = function(listElem) {
	    return function(event){ overList(listElem); };
	  };
	  var closure = closureMaker(listElem[i]);
	  memberList.childNodes[i].addEventListener('mouseover', closure, false);
	}

	//Add the event listener for onmouseout for each element in the member list
	for(var i=0; i<listElem.length; i++)
	{
	  var closureMaker = function(listElem) {
	    return function(event){ outList(listElem, "#b5b5b6" ); };
	  };
	  var closure = closureMaker(listElem[i]);
	  memberList.childNodes[i].addEventListener('mouseout', closure, false);
	}
	
	//Add the event listener for onclick for each element in the member list
	for(var i=0; i<listElem.length; i++)
	{
	  var closureMaker = function(picElem, infoElem, xmlDoc, index) {
	    return function(event){ getMemberInfo(picElem, infoElem, xmlDoc, index);  };
	  };
	  var index = i;
	  var closure = closureMaker(pic, memberInfo, xmlDoc, index);
	  memberList.childNodes[i].addEventListener('click', closure, false);
	}
	
	//Add all elements to the content div
	frame.appendChild(pic);
	frame.appendChild(memberInfo);
	frame.appendChild(memberList);
		
}

function getMemberInfo(picElem, infoElem, xmlDoc, index) {
	
	if(membersLoaded){
		//Delete old info 
		infoElem.removeChild(document.getElementById('name'));
		infoElem.removeChild(document.getElementById('hometown'));
		infoElem.removeChild(document.getElementById('phone'));
		infoElem.removeChild(document.getElementById('major'));
		infoElem.removeChild(document.getElementById('pledgeYear'));
		infoElem.removeChild(document.getElementById('status'));
	}

	//Get the member clicked
	var currentMember = xmlDoc.getElementsByTagName("member")[index];
	
	//Check to see if there is a pic
	var picNode;
	if(currentMember.getElementsByTagName("picture")[0]) {
		picNode = "url(../../images/" + currentMember.getElementsByTagName("picture")[0].getAttribute('src') + ")";
	}
	else
		picNode = "url(../../images/pics/noPic.png)";
	
	//Get the info for each node
	var name = currentMember.getElementsByTagName("name")[0].childNodes[0].nodeValue;
	var hometown = currentMember.getElementsByTagName("hometown")[0].childNodes[0].nodeValue;
	var phone = currentMember.getElementsByTagName("phone")[0].childNodes[0].nodeValue;
	var major = currentMember.getElementsByTagName("major")[0].childNodes[0].nodeValue;
	var pledgeYear = currentMember.getElementsByTagName("pledgeYear")[0].childNodes[0].nodeValue;
	var status = currentMember.getElementsByTagName("status")[0].getAttribute("value");
	
	//Check to see if notes
	var notes = "";
	if(currentMember.getElementsByTagName("notes")[0])
		notes = " (" + currentMember.getElementsByTagName("notes")[0].childNodes[0].nodeValue + ")";
	
	//Change picture
	picElem.style.background=picNode;
	
	//Change member information
	var legacy = "";
	if(currentMember.getAttribute('legacy') == 'yes')
		legacy = " (Legacy)";
	
	var nameP = document.createElement("p");
	nameP.setAttribute('id', 'name');
	nameP.appendChild(document.createTextNode("Name: " + name + notes + legacy));
	
	var hometownP = document.createElement("p");
	hometownP.setAttribute('id', 'hometown');
	hometownP.appendChild(document.createTextNode("Hometown: " + hometown));
	
	var phoneP = document.createElement("p");
	phoneP.setAttribute('id', 'phone');
	phoneP.appendChild(document.createTextNode("Phone: " + phone));
	
	var majorP = document.createElement("p");
	majorP.setAttribute('id', 'major');
	majorP.appendChild(document.createTextNode("Major: " + major));
	
	var pledgeYearP = document.createElement("p");
	pledgeYearP.setAttribute('id', 'pledgeYear');
	pledgeYearP.appendChild(document.createTextNode("Pledge year: " + pledgeYear));
	
	var statusP = document.createElement("p");
	statusP.setAttribute('id', 'status');
	statusP.appendChild(document.createTextNode("Status: " + status));
	
	infoElem.appendChild(nameP);
	infoElem.appendChild(hometownP);
	infoElem.appendChild(phoneP);
	infoElem.appendChild(majorP);
	infoElem.appendChild(pledgeYearP);
	infoElem.appendChild(statusP);
	
	//Set to true so it deletes the old info on the click
	membersLoaded = true;
}

//Changes to yellow when the mouse hovers over
function overList (elem, index) {
	elem.style.backgroundColor="yellow";
}

//Change back to gray when mouse is not hovering over
function outList (elem, color) {
	elem.style.backgroundColor=color;
}