﻿//Add style sheet
//<link href='style/locationHours.css' rel='stylesheet' type='text/css' />
var fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", "style/locationHours.css");
document.getElementsByTagName("head")[0].appendChild(fileref);

var div = document.getElementById("locationHours");

//var today = new Date(); //Don't use the date or time from a clients computer it could be wrong

//Global Vars
var weekShowing = 0; //The currently showing week of weekCount
var weekCount = 0; //How many weeks in the database to show
var dayCount = 0; //How many days in the database to show
var animationTracker = 0; //Use this to track the status of whatever animation is running

//var eventBoxOpenBtnY = 0; //vertical position of the button that opens the event box
//var eventBoxOpenBtnX = 0; //horizontal position of the button that opens the event box
//var eventBoxLocationId = ""; //the locationId of the event box that is open
//var eventBoxDate = ""; //the date of the event box that is open yy mm dd
var eventBoxOpenFromCorner = 0; //the corner of the event box that we will be opening from 1=top left 2=top right 3=bottom left 4=bottom right
//var eventBoxNextLocationId = ""; //the locationId of the event box that will be open after the one that is opened (above) is closed
//var eventBoxNextDate = ""; //the date of the event box that will be open after the one that is opened (above) is closed yy mm dd
//var eventBoxNextOpenFromCorner = 0; //the corner of the event box that we will be opening from after the one that is opened (above) is closed  1=top left 2=top right 3=bottom left 4=bottom right
var eventBoxOpen = false; //Is there an open event details box.
var nowShowingCurrentWeekDate = new Date(); //

var browserAjustX = 0;
var browserAjustY = 0;

var locationIds = new Array();



//var eventBoxRoot; //dom object
//var eventBoxBody; //dom object
//var eventBoxHeader; //dom object

//Need to move vertically 15px
var weekOfAnimation = new Array();
weekOfAnimation[0] = 0;
weekOfAnimation[1] = 0;
weekOfAnimation[2] = 0; 
weekOfAnimation[3] = 0;
weekOfAnimation[4] = 0; 
weekOfAnimation[5] = -0; 
weekOfAnimation[6] = -1; 
weekOfAnimation[7] = -2; 
weekOfAnimation[8] = -3;
weekOfAnimation[9] = -4;
weekOfAnimation[10] = -5;
weekOfAnimation[11] = -4;
weekOfAnimation[12] = -3;
weekOfAnimation[13] = -2;
weekOfAnimation[14] = -1;
weekOfAnimation[15] = -0;
weekOfAnimation[16] = 0;
weekOfAnimation[17] = 0;
weekOfAnimation[18] = 0;
weekOfAnimation[19] = 0;
weekOfAnimation[20] = 0;

//Move it 472 px the 0 is the last frame
var dayHoursAnimation = new Array();
dayHoursAnimation[0] = -4;
dayHoursAnimation[1] = -6;
dayHoursAnimation[2] = -9;
dayHoursAnimation[3] = -13;
dayHoursAnimation[4] = -18;
dayHoursAnimation[5] = -22;
dayHoursAnimation[6] = -32;
dayHoursAnimation[7] = -38;
dayHoursAnimation[8] = -40;
dayHoursAnimation[9] = -40;
dayHoursAnimation[10] = -42;
dayHoursAnimation[11] = -40;
dayHoursAnimation[12] = -40;
dayHoursAnimation[13] = -38;
dayHoursAnimation[14] = -32;
dayHoursAnimation[15] = -22;
dayHoursAnimation[16] = -18;
dayHoursAnimation[17] = -13;
dayHoursAnimation[18] = -9;
dayHoursAnimation[19] = -6;
dayHoursAnimation[20] = -4;

var weekdayNames = new Array();
weekdayNames[0] = "Sun";
weekdayNames[1] = "Mon";
weekdayNames[2] = "Tue";
weekdayNames[3] = "Wed";
weekdayNames[4] = "Thur";
weekdayNames[5] = "Fri";
weekdayNames[6] = "Sat";

var weekdayLetter = new Array();
weekdayLetter[1] = "S";
weekdayLetter[2] = "M";
weekdayLetter[3] = "T";
weekdayLetter[4] = "W";
weekdayLetter[5] = "T";
weekdayLetter[6] = "F";
weekdayLetter[7] = "S";

var monthNames = new Array();
monthNames[0] = "January";
monthNames[1] = "February";
monthNames[2] = "March";
monthNames[3] = "April";
monthNames[4] = "May";
monthNames[5] = "June";
monthNames[6] = "July";
monthNames[7] = "August";
monthNames[8] = "September";
monthNames[9] = "October";
monthNames[10] = "November";
monthNames[11] = "December";

var loopCount = 0;

wsLocation.locHours(0, hoursSucess, hoursFail);

function animateDayHoursNext() {
	loopCount--;

	if (eventBoxOpen) {
		var howWide = parseInt(eventShell.style.width.replace("px", ""));
		var takeOff = parseInt(dayHoursAnimation[loopCount]);
		var newWidth = howWide + takeOff;
		if (newWidth > 0) {
			eventShell.style.width = newWidth + "px";
		} else {
			eventShell.parentNode.removeChild(eventShell);
			eventBoxOpen = false;
		}
	}

	
	//Get the position of the first set hours it will be the same as all the others cause' we are moving them together.
	var curPosDay = parseInt(document.getElementById("dayHours1").style.left);
	for (var i = 0; i <= (locationCount - 1); i++) {
		document.getElementById("dayHours" + i).style.left = curPosDay + dayHoursAnimation[loopCount] + "px";
		document.getElementById("dayOfWeekPos").style.left = curPosDay + dayHoursAnimation[loopCount] + "px";
	}

	for (var i = 1; i <= weekCount; i++) {
		document.getElementById("weekOf" + i).style.top = parseInt(document.getElementById("weekOf" + i).style.top) + weekOfAnimation[loopCount] + "px";
	}

	if (loopCount > 0) {
		setTimeout(animateDayHoursNext, 20);
	} else {
		if ((weekShowing + 1) == weekCount) {
			document.getElementById("nextWeek").style.color = "#54514d";
			document.getElementById("nextWeek").style.cursor = "Default";
			document.getElementById("nextWeekPointer").style.color = "#54514d";
			document.getElementById("nextWeekPointer").style.fontWeight = "normal";
			document.getElementById("nextWeekPointer").style.cursor = "Default";
		} else {
			document.getElementById("nextWeek").style.color = "White";
			document.getElementById("nextWeek").style.cursor = "pointer";
			document.getElementById("nextWeekPointer").style.color = "#978c7c";
			document.getElementById("nextWeekPointer").style.fontWeight = "normal";
			document.getElementById("nextWeekPointer").style.cursor = "pointer";
		}
		document.getElementById("prevWeek").style.color = "White";
		document.getElementById("prevWeek").style.cursor = "Pointer";
		document.getElementById("prevWeekPointer").style.color = "#978c7c";
		document.getElementById("prevWeekPointer").style.fontWeight = "normal";
		document.getElementById("prevWeekPointer").style.cursor = "Pointer";
	}
} //animateDayHoursNext

function animateDayHoursPrev() {
	loopCount--;

	if (eventBoxOpen) {
		var howWide = parseInt(eventShell.style.width.replace("px", ""));
		var takeOff = parseInt(dayHoursAnimation[loopCount]);
		var newWidth = howWide + takeOff;
		if (newWidth > 0) {
			eventShell.style.width = newWidth + "px";
			var leftPos = parseInt(eventShell.style.left.replace("px", ""));
			var newPos = leftPos - takeOff;
			eventShell.style.left = newPos + "px";
		} else {
			eventShell.parentNode.removeChild(eventShell);
			eventBoxOpen = false;
		}
	}



	//Get the postion of the first set hours it will be the same as all the others cause' we are moving them together.
	var curPosDay = parseInt(document.getElementById("dayHours1").style.left);
	for (i = 0; i <= (locationCount - 1); i++) {
		document.getElementById("dayHours" + i).style.left = curPosDay + (dayHoursAnimation[loopCount] * -1) + "px";
		document.getElementById("dayOfWeekPos").style.left = curPosDay + (dayHoursAnimation[loopCount] * -1) + "px";
	}

	for (var i = 1; i <= weekCount; i++) {
		document.getElementById("weekOf" + i).style.top = parseInt(document.getElementById("weekOf1").style.top) + (weekOfAnimation[loopCount] * -1) + "px";
	}

	if (loopCount > 0) {
		setTimeout(animateDayHoursPrev, 20);
	} else {
		if (weekShowing == 0) {
			document.getElementById("prevWeek").style.color = "#54514d";
			document.getElementById("prevWeek").style.cursor = "Default";
			document.getElementById("prevWeekPointer").style.color = "#54514d";
			document.getElementById("prevWeekPointer").style.fontWeight = "normal";
			document.getElementById("prevWeekPointer").style.cursor = "Default";
		} else {
			document.getElementById("prevWeek").style.color = "White";
			document.getElementById("prevWeek").style.cursor = "pointer";
			document.getElementById("prevWeekPointer").style.color = "#978c7c";
			document.getElementById("prevWeekPointer").style.fontWeight = "normal";
			document.getElementById("prevWeekPointer").style.cursor = "pointer";
		}
		document.getElementById("nextWeek").style.color = "White";
		document.getElementById("nextWeek").style.cursor = "Pointer";
		document.getElementById("nextWeekPointer").style.color = "#978c7c";
		document.getElementById("nextWeekPointer").style.fontWeight = "normal";
		document.getElementById("nextWeekPointer").style.cursor = "Pointer";
	}
} //animateDayHoursPrev

function eventDetailsButtonOver(obj) {
	if (obj.open == "2") {
		var theClassNow = obj.className;
		var theBigLetterId = obj.id.replace("daybox,", "dayboxBg,");
		var theBigLetter = document.getElementById(theBigLetterId);
		if (theClassNow == "dayA") {
			obj.className = "dayOverA";
			theBigLetter.className = "dayBgOverA"
		} else {
			obj.className = "dayOverB";
			theBigLetter.className = "dayBgOverB"
		}
	}
} //eventDetailsButtonOver

function eventDetailsButtonOut(obj) {
	if (obj.open == "2") {
		var theClassNow = obj.className;
		var theBigLetterId = obj.id.replace("daybox,", "dayboxBg,");
		var theBigLetter = document.getElementById(theBigLetterId);
		if (theClassNow == "dayOverA") {
			obj.className = "dayA";
			theBigLetter.className = "dayBgA"
		} else {
			obj.className = "dayB";
			theBigLetter.className = "dayBgB"
		}
	}
} //eventDetailsButtonOver

function eventDetailsClose(obj) {
	animationTracker = 0;
	eventDetailsCloseAnimation(obj);
} //eventDetailsButtonPushClose

function eventDetailsCloseAnimation(obj) {

	switch (eventBoxOpenFromCorner) {
		case "1": //1=top left 	
			eventShell.style.width = (245 - (animationTracker * 10)) + "px"
			eventShell.style.height = (245 - (animationTracker * 10)) + "px"
			break;
		case "2": //2=top right
			eventShell.style.width = (245 - (animationTracker * 10)) + "px"
			eventShell.style.height = (245 - (animationTracker * 10)) + "px"
			if (animationTracker > 0) {
				eventShell.style.left = (parseInt(eventShell.style.left.replace("px", "")) + 10) + "px";
				eventRoot.style.left = (parseInt(eventRoot.style.left.replace("px", "")) - 10) + "px";
			}
			break;
		case "3": //3=bottom left
			eventShell.style.width = (245 - (animationTracker * 10)) + "px"
			eventShell.style.height = (245 - (animationTracker * 10)) + "px"
			if (animationTracker > 0) {
				eventShell.style.top = (parseInt(eventShell.style.top.replace("px", "")) + 10) + "px";
				eventRoot.style.top = (parseInt(eventRoot.style.top.replace("px", "")) - 10) + "px";
			}
			break;
		case "4": //4=bottom right
			eventShell.style.width = (245 - (animationTracker * 10)) + "px"
			eventShell.style.height = (245 - (animationTracker * 10)) + "px"
			if (animationTracker > 0) {
				eventShell.style.left = (parseInt(eventShell.style.left.replace("px", "")) + 10) + "px";
				eventShell.style.top = (parseInt(eventShell.style.top.replace("px", "")) + 10) + "px";
				eventRoot.style.left = (parseInt(eventRoot.style.left.replace("px", "")) - 10) + "px";
				eventRoot.style.top = (parseInt(eventRoot.style.top.replace("px", "")) - 10) + "px";
			}
			break;
	}
	animationTracker++;
	if (animationTracker < 19) {
		setTimeout(function () { eventDetailsCloseAnimation(obj) }, 10);
	} else {
		eventShell.parentNode.removeChild(eventShell);
		eventBoxOpen = false;
		if (obj != undefined) {
			eventDetailsOpen(obj);
		}
	}

} //eventDetailsBoxClose

function eventDetailsFail() {
	eventDetailsBody.innerHTML = "Could not not retrieve event data.";
} //eventDetailsFail

function eventDetailsOpen(obj) {
	if (!eventBoxOpen) {
		eventBoxOpen = true;
		var element = obj;
		if (element.open == "2") {
			//Get the absolute pos of the item clicked
			eventBoxOpenBtnY = 0;
			eventBoxOpenBtnX = 0;

			while (element != null) {
				eventBoxOpenBtnY += element.offsetTop;
				eventBoxOpenBtnX += element.offsetLeft;
				if (element.style.position == "static" || element.style.position == "") {
					element = element.offsetParent;
				} else {
					element = element.offsetParent;
					eventBoxOpenBtnY += element.offsetTop;
					eventBoxOpenBtnX += element.offsetLeft;
					element = null;
				}
			}
			//Now we know where to place the box
			//Adjust the box position and watermark based on the corner we will be opening from.
			//1=top left 2=top right 3=bottom left 4=bottom right

			//Event Animation Open Close Div
			eventShell = document.createElement("div"); //Global for animation
			div.appendChild(eventShell);
			eventShell.className = "eventDetails";
			eventShell.style.width = "65px"; //This is the opening size before the animation starts
			eventShell.style.height = "65px"; //This is the opening size before the animation starts
			eventShell.style.overflow = "hidden";
			eventShell.style.position = "absolute";
			eventShell.style.top = eventBoxOpenBtnY;
			eventShell.style.left = eventBoxOpenBtnX;

			//Event box root
			eventRoot = document.createElement("div"); //Global for animation
			eventShell.appendChild(eventRoot);
			eventRoot.style.position = "absolute";


			var cornerWatermark = document.createElement("div");
			cornerWatermark.innerHTML = "&nbsp;";

			var watermarkBg = document.createElement("div");
			eventRoot.appendChild(watermarkBg);
			watermarkBg.innerHTML = "&nbsp;";

			//Header
			var eventHeader = document.createElement("div");
			eventRoot.appendChild(eventHeader);
			//eventHeader.id = "eventHeaderDate" + dateForId + "LocId" + locationId;
			eventHeader.onmouseup = function () { eventDetailsClose(); };
			eventHeader.className = "eventDetalsHeader";


			//Corner shading watermark

			var topWatermark = true;

			switch (obj.openPos) {
				case "1": //1=top left 
					cornerWatermark.className = "cornerWatermarkTopLeft";
					watermarkBg.className = "cornerWatermarkTopLeft";
					eventRoot.style.top = "0px";
					eventRoot.style.left = "0px";
					eventBoxOpenFromCorner = "1";
					break;
				case "2": //2=top right
					//eventBoxOpenBtnX = eventBoxOpenBtnX - 180; //final position when animation ends
					eventRoot.style.top = "0px";
					eventRoot.style.left = "-180px";
					cornerWatermark.className = "cornerWatermarkTopRight";
					watermarkBg.className = "cornerWatermarkTopRight";
					eventBoxOpenFromCorner = "2";
					break;
				case "3": //3=bottom left
					eventRoot.style.top = "-180px";
					eventRoot.style.left = "0px";
					cornerWatermark.className = "cornerWatermarkBottomLeftFooter";
					watermarkBg.className = "cornerWatermarkBottomLeftBg";
					topWatermark = false;
					eventBoxOpenFromCorner = "3";
					break;
				case "4": //4=bottom right
					eventRoot.style.top = "-180px";
					eventRoot.style.left = "-180px";
					cornerWatermark.className = "cornerWatermarkBottomRightFooter";
					watermarkBg.className = "cornerWatermarkBottomRightBg";
					topWatermark = false;
					eventBoxOpenFromCorner = "4";
					break;
			}

			if (topWatermark) {
				eventHeader.appendChild(cornerWatermark);
			}

			var imgCloseX = document.createElement("img");
			eventHeader.appendChild(imgCloseX);
			imgCloseX.src = "image/UI/closeBox.gif";
			imgCloseX.className = "eventCloseX";

			var libraryName = document.createElement("div");
			eventHeader.appendChild(libraryName);
			libraryName.className = "eventHeadText";
			libraryName.innerHTML = obj.locName;

			var eventDate = new Date(obj.date)
			var dateString = monthNames[eventDate.getMonth()] + " " + eventDate.getDate() + ", " + eventDate.getFullYear();

			var eventDate = document.createElement("div");
			libraryName.appendChild(eventDate);
			eventDate.className = "eventDetalsDate";
			eventDate.innerHTML = dateString;
			//Event Body
			eventDetailsBody = document.createElement("div"); //global
			eventRoot.appendChild(eventDetailsBody);
			eventDetailsBody.className = "eventDetalsBody";
			eventDetailsBody.innerHTML = "Loading Events..."

			//Footer
			var eventFooter = document.createElement("div");
			eventRoot.appendChild(eventFooter);
			eventFooter.className = "eventDetalsFooter";
			eventFooter.onmouseup = function () { eventDetailsClose(); };

			//Corner Shading watermark
			if (!topWatermark) {
				eventFooter.appendChild(cornerWatermark);
			}
		}

		//pass it to animation to open the box
		animationTracker = 0;
		eventDetailsOpenAnimation(obj);
	} else { //if(!eventBoxOpen)
		eventDetailsClose(obj);
	}


} //eventDetailsButtonPushOpen

function eventDetailsOpenAnimation(obj) {

	switch (obj.openPos) {
		case "1": //1=top left 
			eventShell.style.width = ((animationTracker * 10) + 65) + "px";
			eventShell.style.height = ((animationTracker * 10) + 65) + "px";
			break;
		case "2": //2=top right
			eventShell.style.width = ((animationTracker * 10) + 65) + "px";
			eventShell.style.height = ((animationTracker * 10) + 65) + "px";
			if (animationTracker > 0) {
				eventShell.style.left = (parseInt(eventShell.style.left.replace("px", "")) - 10) + "px";
				eventRoot.style.left = (parseInt(eventRoot.style.left.replace("px", "")) + 10) + "px";
			}
			break;
		case "3": //3=bottom left
			eventShell.style.width = ((animationTracker * 10) + 65) + "px";
			eventShell.style.height = ((animationTracker * 10) + 65) + "px";
			if (animationTracker > 0) {
				eventShell.style.top = (parseInt(eventShell.style.top.replace("px", "")) - 10) + "px";
				eventRoot.style.top = (parseInt(eventRoot.style.top.replace("px", "")) + 10) + "px";
			}
			break;
		case "4": //4=bottom right
			eventShell.style.width = ((animationTracker * 10) + 65) + "px";
			eventShell.style.height = ((animationTracker * 10) + 65) + "px";
			if (animationTracker > 0) {
				eventShell.style.left = (parseInt(eventShell.style.left.replace("px", "")) - 10) + "px";
				eventShell.style.top = (parseInt(eventShell.style.top.replace("px", "")) - 10) + "px";
				eventRoot.style.left = (parseInt(eventRoot.style.left.replace("px", "")) + 10) + "px";
				eventRoot.style.top = (parseInt(eventRoot.style.top.replace("px", "")) + 10) + "px";
			}
			break;
	}


	animationTracker++;
	if (animationTracker < 19) {
		setTimeout(function () { eventDetailsOpenAnimation(obj) }, 10);
	} else {
		wsEvent.wsEventOneLocOneDateAllFields(obj.date, obj.locId, eventDetailsSuccess, eventDetailsFail);
	}

}

function eventDetailsSuccess(result) {
	//Body Text
	//From Web Service via Evanced
	//<e>
	//	<i>40650</i> //evanced event id 
	//	<t>Baby Lapsit Storytime</t> //event title
	//	<p>http://www.saclibrary.org/image/UI/logo.gif</p> //image url
	//	<g>Baby Storytime</g> //evanced tevent type
	//	<l>3</l> //evanced library id this is not the same as the spl locationId. The spl location table has the evanced library id in it.
	//	<d>1/5/2012</d> //event date
	//	<a>Bond with your baby and make...</a> //description
	//	<s>10:05:00 AM</s> //start time
	//	<x>10:30:00 AM</x> //end time
	//	<r>0</r> //registration is required to attend 1=true 0=false
	//</e>

	var howMany = result.getElementsByTagName("e").length;

	var bodyString = "";

	for (var e = 0; e < howMany; e++) {

		//Start Time
		var st = result.getElementsByTagName("s")[e].childNodes[0].nodeValue;
		var sts = st.split(":");
		var sh = sts[0];
		var sm = "";
		if (sts[1] != "00") {
			sm = ":" + sts[1];
		}
		var stap = st.split(" ");
		var startTime = "";
		if (stap[1] == "AM") {
			if (sh == "12" & sts[1] == "00") {
				startTime = "12 midnight";
			} else {
				startTime = sh + sm + " a.m.";
			}
		} else {
			if (sh == "12" & sts[1] == "00") {
				startTime = "12 noon";
			} else {
				startTime = sh + sm + " p.m.";
			}
		}
		//End Time
		var et = result.getElementsByTagName("x")[e].childNodes[0].nodeValue;
		var ets = et.split(":");
		var eh = ets[0];
		var em = "";
		if (ets[1] != "00") {
			em = ":" + ets[1];
		}
		var etap = et.split(" ");
		var endTime = "";
		if (etap[1] == "AM") {
			if (eh == "12" & ets[1] == "00") {
				endTime = "12 midnight";
			} else {
				endTime = eh + em + " a.m.";
			}
		} else {
			if (eh == "12" & ets[1] == "00") {
				endTime = "12 noon";
			} else {
				endTime = eh + em + " p.m.";
			}
		}

		var reg = "";
		if (result.getElementsByTagName("r")[e].childNodes[0].nodeValue == "1") {
			reg = "<span id='" + result.getElementsByTagName("i")[e].childNodes[0].nodeValue + "' " +
			"class='linkOut' " +
			"onmouseover='overSignUp(this)' " +
			"onmouseout=' outSignUp(this)' " +
			"onclick='openSignUpWindow(this)'>" +
			"Registration is required to attend" +
			"</span><br />";
		}
		var image = "";
		if (result.getElementsByTagName("p")[e].hasChildNodes()) {
			image = "<img src='" + result.getElementsByTagName("p")[e].childNodes[0].nodeValue + "' alt='' class='floatRight' style ='display:none;' width='80px' height='80px' onload='setImageDimensions(this)'/>";
		}


		bodyString = bodyString + "<b>" + result.getElementsByTagName("t")[e].childNodes[0].nodeValue + "</b>" +
			"<br />" + startTime + " to " + endTime + "<br />" +
			reg +
			image +
			result.getElementsByTagName("a")[e].childNodes[0].nodeValue + "<br /><br />";

	}

	eventDetailsBody.innerHTML = bodyString;
}

function eventListFail() {

} //eventListFail

function eventListSucess(result) {
	//locationIds[i]
	//document.getElementById("evtImgWedge,2" + locId + "," + dateThis.getDate() + "/" + dateThis.getDay() + "/" + dateThis.getFullYear() + ",1"
	//Loop thru locations
	var howMany = locationIds.length;

	for (var l = 0; l < howMany; l++) {
		var dateCount = result.getElementsByTagName("locId" + locationIds[l])[0].getElementsByTagName("d").length;
		for (var d = 0; d < dateCount; d++) {
			var dString = result.getElementsByTagName("locId" + locationIds[l])[0].getElementsByTagName("d")[d].childNodes[0].nodeValue;

			var wedge = document.getElementById("evtImgWedge," + locationIds[l] + "," + dString);
			if (wedge.open != "0") {
				wedge.style.visibility = "visible";
				var dayBox = document.getElementById("daybox," + locationIds[l] + "," + dString);
				dayBox.style.cursor = "pointer";
				dayBox.open = "2";
			}
		}
	}

	//	alert(result.getElementsByTagName("d").length);
} //eventListSucess

function hoursFail() {
	div.innerHTML = "Could not retrieve the location hours. Please try this page again later";
} //hoursFail

function hoursSucess(result) {

	today = new Date(result.getElementsByTagName("today")[0].childNodes[0].nodeValue);
	
	locationCount = result.getElementsByTagName("loc").length;
	var allDayCount = result.getElementsByTagName("day").length;
	dayCount = allDayCount / locationCount;
	weekCount = dayCount / 7;

	div.innerHTML = "";

	var table = document.createElement("table");
	div.appendChild(table);
	table.cellspacing = "0";
	table.cellpadding = "0";
	table.border = "0";
	table.style.borderWidth = "0px";
	table.style.borderCollapse = "collapse";

	var tbody = document.createElement("tbody");
	table.appendChild(tbody);
	var trHeader = document.createElement("tr");
	tbody.appendChild(trHeader);
	var tdHeaderPrint = document.createElement("td");
	trHeader.appendChild(tdHeaderPrint);
	tdHeaderPrint.style.backgroundColor = "black";
	//Print button
	printImg = document.createElement("img");
	tdHeaderPrint.appendChild(printImg);
	printImg.src = "http://www.saclibrary.org/image/UI/printerIconOff.gif";
	printImg.onmouseover = function () { printOver() };
	printImg.onmouseout = function () { printOut() };
	printImg.onmouseup = function () { printOpen() };
	printImg.style.position = "relative";
	printImg.style.top = "8px";
	printImg.style.left = "5px";
	printImg.className = "cursorPointer";

	printLink = document.createElement("b");
	tdHeaderPrint.appendChild(printLink);
	printLink.innerHTML = " Print";
	printLink.style.color = "#978c7c";
	printLink.style.position = "relative";
	printLink.style.top = "4px";
	printLink.style.left = "10px";
	printLink.className = "cursorPointer";
	printLink.onmouseover = function () { printOver() };
	printLink.onmouseout = function () { printOut() };
	printLink.onmouseup = function () { printOpen() };

	var tdHeaderWeekDays = document.createElement("td");
	trHeader.appendChild(tdHeaderWeekDays);
	tdHeaderWeekDays.style.backgroundColor = "black";
	var divWeekHeader = document.createElement("div");
	tdHeaderWeekDays.appendChild(divWeekHeader);
	divWeekHeader.id = "weekHeader";
	var divDayOfWeekPos = document.createElement("div");
	divWeekHeader.appendChild(divDayOfWeekPos);
	divDayOfWeekPos.id = "dayOfWeekPos";
	divDayOfWeekPos.style.position = "relative";
	divDayOfWeekPos.style.left = "0px";
	divDayOfWeekPos.style.width = "1600px";
	//Days of the week in the header
	for (var w = 0; w < weekCount; w++) {
		for (var d = 0; d < 7; d++) {
			var divDayName = document.createElement("div");
			divDayOfWeekPos.appendChild(divDayName);
			if (today.getDay() == d & w == 0) {
				divDayName.className = "dayNameToday";
			} else {
				divDayName.className = "dayName";
			}
			divDayName.innerHTML = weekdayNames[d];
		}
		var divBlank = document.createElement("div");
		divDayOfWeekPos.appendChild(divBlank);
		divBlank.className = "dayNameBlankSpace";
		divBlank.innerHTML = "&nbsp;";
	}

	var divNextWeek = document.createElement("div");
	divWeekHeader.appendChild(divNextWeek);
	divNextWeek.id = "nextWeek";
	divNextWeek.onmouseover = function () { mouseOverNextWeek(); };
	divNextWeek.onmouseout = function () { mouseOutNextWeek(); };
	divNextWeek.onmouseup = function () { mouseUpNextWeek(); };
	divNextWeek.innerHTML = "Next Week <span id='nextWeekPointer'>>></span>";
	
	var divPrevWeek = document.createElement("div");
	divWeekHeader.appendChild(divPrevWeek);
	divPrevWeek.id = "prevWeek";
	divPrevWeek.onmouseover = function () { mouseOverPrevWeek(); };
	divPrevWeek.onmouseout = function () { mouseOutPrevWeek(); };
	divPrevWeek.onmouseup = function () { mouseUpPrevWeek(); };
	divPrevWeek.innerHTML = "<span id='prevWeekPointer'><<</span> Previous Week";

	var divWeekOfHeader = document.createElement("div");
	divWeekHeader.appendChild(divWeekOfHeader);
	divWeekOfHeader.id = "weekOfHeader";

	for (var w = 0; w < weekCount; w++) {

		var weekOfDate = new Date(result.getElementsByTagName("date")[w * 7].childNodes[0].nodeValue);
		var weekOfDateEnd = new Date(result.getElementsByTagName("date")[(w * 7) + 6].childNodes[0].nodeValue);
		if(w == 0) nowShowingCurrentWeekDate = weekOfDate;	
		var divWeekOf = document.createElement("div");
		divWeekOfHeader.appendChild(divWeekOf);
		divWeekOf.id = "weekOf" + (w + 1);
		divWeekOf.style.position = "relative";
		divWeekOf.style.top = "0px";
		divWeekOf.style.textAlign = "center";
		divWeekOf.style.height = "25px";
		//Is the month the same on for the end of the week
		if (weekOfDate.getMonth() == weekOfDateEnd.getMonth()) {
			divWeekOf.innerHTML = monthNames[weekOfDate.getMonth()] + " " + weekOfDate.getDate() + " - " + (weekOfDateEnd.getDate());
		} else {
			divWeekOf.innerHTML = monthNames[weekOfDate.getMonth()] + " " + weekOfDate.getDate() + " - " + monthNames[weekOfDateEnd.getMonth()] + " " + weekOfDateEnd.getDate();
		}
	}

	var howMany = result.getElementsByTagName("loc").length;
	var abRow = "A";

	//Loop thru the locations
	for (var i = 0; i < howMany; i++) {

		//For alternating the styles on every other row
		if (i % 2 == 0) {
			abRow = "B";
		} else {
			abRow = "A";
		}

		//Build up the locationId Array
		locationIds[i] = result.getElementsByTagName("id")[i].childNodes[0].nodeValue;

		//Location Name Address
		var trLoc = document.createElement("tr");
		tbody.appendChild(trLoc);
		var tdLoc = document.createElement("td");
		trLoc.appendChild(tdLoc);
		tdLoc.className = "address" + abRow;
		var aLocName = document.createElement("a");
		tdLoc.appendChild(aLocName);
		aLocName.href = "?pageId=" + result.getElementsByTagName("pageId")[i].childNodes[0].nodeValue;
		aLocName.innerHTML = result.getElementsByTagName("name")[i].childNodes[0].nodeValue;
		var spLocAdd = document.createElement("span");
		tdLoc.appendChild(spLocAdd);
		spLocAdd.innerHTML = "<br />" + result.getElementsByTagName("address")[i].childNodes[0].nodeValue +
			"<br />" + result.getElementsByTagName("city")[i].childNodes[0].nodeValue +
			", " + result.getElementsByTagName("state")[i].childNodes[0].nodeValue +
			" " + result.getElementsByTagName("zip")[i].childNodes[0].nodeValue;
		
		//Hours
		var tdHr = document.createElement("td");
		trLoc.appendChild(tdHr);
		//Hours - Wrapper overflow
		var divHrWrap = document.createElement("div");
		tdHr.appendChild(divHrWrap);
		divHrWrap.className = "hours"
		//Hours - Mover
		var divHrRow = document.createElement("div");
		divHrWrap.appendChild(divHrRow);
		divHrRow.id = "dayHours" + i;
		divHrRow.style.position = "relative";
		divHrRow.style.left = "0px";
		divHrRow.style.width = "1600px";

		//Make a subset of hours for this location
		var hoursXML = result.getElementsByTagName("loc")[i];

		var howManyHours = hoursXML.getElementsByTagName("hrs").length;

		for (var h = 0; h < howManyHours; h++) {

			var dateThis = new Date(result.getElementsByTagName("date")[h].childNodes[0].nodeValue);
			var dayOfWeek = parseInt( hoursXML.getElementsByTagName("day")[h].childNodes[0].nodeValue);
			var openHours = "Closed";

			if (hoursXML.getElementsByTagName("oh")[h].hasChildNodes()) {


				if (hoursXML.getElementsByTagName("om")[h].childNodes[0].nodeValue != "0") {
					openHours = hoursXML.getElementsByTagName("oh")[h].childNodes[0].nodeValue + ":" + hoursXML.getElementsByTagName("om")[h].childNodes[0].nodeValue;
				} else {
					openHours = hoursXML.getElementsByTagName("oh")[h].childNodes[0].nodeValue;
				}
				//Closed for lunch?
				if (hoursXML.getElementsByTagName("clh")[h].hasChildNodes()) {
					if (hoursXML.getElementsByTagName("clm")[h].childNodes[0].nodeValue != "0") {
						openHours = openHours + "-" + hoursXML.getElementsByTagName("clh")[h].childNodes[0].nodeValue + ":" + hoursXML.getElementsByTagName("clm")[h].childNodes[0].nodeValue + "<br />";
					} else {
						openHours = openHours + "-" + hoursXML.getElementsByTagName("clh")[h].childNodes[0].nodeValue + "<br />";
					}
					if (hoursXML.getElementsByTagName("olm")[h].childNodes[0].nodeValue != "0") {
						openHours = openHours + hoursXML.getElementsByTagName("olh")[h].childNodes[0].nodeValue + ":" + hoursXML.getElementsByTagName("olm")[h].childNodes[0].nodeValue;
					} else {
						openHours = openHours + hoursXML.getElementsByTagName("olh")[h].childNodes[0].nodeValue;
					}

				}
				if (hoursXML.getElementsByTagName("cm")[h].childNodes[0].nodeValue != "0") {
					openHours = openHours + "-" + hoursXML.getElementsByTagName("ch")[h].childNodes[0].nodeValue + ":" + hoursXML.getElementsByTagName("cm")[h].childNodes[0].nodeValue;
				} else {
					openHours = openHours + "-" + hoursXML.getElementsByTagName("ch")[h].childNodes[0].nodeValue;
				}
			} // Open Hours

			//How will the event box open
			var evtBoxOpen = "0" //Will the box open at all. This will be determined by the events list web service. So we will set to 0 if the branch is closed. 1 if the branch is open today. 2 if the branch is open and has an event.
			var evtBoxOpenPos = "0" //the corner of the event box that we will be opening from after the one that is opened (above) is closed 0=none 1=top left 2=top right 3=bottom left 4=bottom right

			if (openHours != "Closed") {
				evtBoxOpen = "1"
				//If the location is within the last 4 open the event box up
				if ((howMany - i) < 5) {
					//Open Up
					if(dayOfWeek > 4){
						//Open Left
						evtBoxOpenPos = "4";
					}else{
						//Open Right
						evtBoxOpenPos = "3";
					}
				} else {
					if (dayOfWeek > 4) {
						//Open Left
						evtBoxOpenPos = "2";
					}else{
						//Open Right
						evtBoxOpenPos = "1";
					}
				}
			}

			//Hours - Day Box
			var divDayBox = document.createElement("div");
			divHrRow.appendChild(divDayBox);
			divDayBox.id = "daybox," + locationIds[i] + "," + (dateThis.getMonth() + 1) + "/" + dateThis.getDate() + "/" + dateThis.getFullYear(); //locationId, date
			divDayBox.className = "day" + abRow;
			divDayBox.onmouseup = function () { eventDetailsOpen(this) };
			divDayBox.onmouseover = function () { eventDetailsButtonOver(this) };
			divDayBox.onmouseout = function () { eventDetailsButtonOut(this) };
			divDayBox.open = evtBoxOpen;
			divDayBox.openPos = evtBoxOpenPos;
			divDayBox.date = (dateThis.getMonth() + 1) + "/" + dateThis.getDate() + "/" + dateThis.getFullYear();
			divDayBox.locId = locationIds[i];
			divDayBox.locName = result.getElementsByTagName("name")[i].childNodes[0].nodeValue;
			
			//Hours - Background
			var divHrBg = document.createElement("div");
			divDayBox.appendChild(divHrBg);
			divHrBg.id = "dayboxBg," + locationIds[i] + "," + (dateThis.getMonth() + 1) + "/" + dateThis.getDate() + "/" + dateThis.getFullYear(); 
			divHrBg.className = "dayBg" + abRow;
			divHrBg.innerHTML = weekdayLetter[dayOfWeek];

			//Hours - Event Image Wedge
			var imgDayEvt = document.createElement("img");
			divDayBox.appendChild(imgDayEvt);
			imgDayEvt.className = "eventButtonOpen";
			imgDayEvt.src = "image/UI/bottomRightCorner.gif";
			imgDayEvt.id = "evtImgWedge," + locationIds[i] + "," + (dateThis.getMonth() + 1) + "/" + dateThis.getDate() + "/" + dateThis.getFullYear();
			imgDayEvt.open = evtBoxOpen;

			//Hours - Bottom border
			var divTodayBorder = document.createElement("div");
			divDayBox.appendChild(divTodayBorder);
			if(dateThis.getDate() == today.getDate()){
				divTodayBorder.className = "bottomBorderToday";
			}else{
				divTodayBorder.className = "bottomBorder" + abRow;
			}
			//Hours - Open Closed
			var divHours = document.createElement("div");
			divDayBox.appendChild(divHours);
			if (hoursXML.getElementsByTagName("f")[h].childNodes[0].nodeValue == "False") {
				divHours.className = "timesBlk";
			}else{
				divHours.className = "timesRed";
			}
			divHours.innerHTML = openHours;

			if (hoursXML.getElementsByTagName("day")[h].childNodes[0].nodeValue == "7") {
				var divBlank = document.createElement("div");
				divHrRow.appendChild(divBlank);
				divBlank.className = "dayNameBlankSpace";
				divBlank.innerHTML = "&nbsp;";
			}
		} //hours loop h
	} //location loop i

	setTimeout("wsEvent.wsEventLocDateOnly(" + (dayCount - today.getDay()) + ", eventListSucess, eventListFail)", 1000);

} //hoursSucess

function mouseOverNextWeek() {
	if ((weekShowing + 1) < weekCount & loopCount == 0) {
		var element = document.getElementById("nextWeekPointer");
		element.style.color = "white";
		element.style.fontWeight = "bold";
	}
} //mouseOverNextWeek

function mouseOutNextWeek() {
	if ((weekShowing + 1) < weekCount & loopCount == 0) {
		var element = document.getElementById("nextWeekPointer");
		element.style.color = "#978c7c";
		element.style.fontWeight = "normal";
	}
} //mouseOutNextWeek

function mouseOverPrevWeek() {
	if (weekShowing != 0 & loopCount == 0) {
		var element = document.getElementById("prevWeekPointer");
		element.style.color = "white";
		element.style.fontWeight = "bold";
	}
} //mouseOverPrevWeek

function mouseOutPrevWeek() {
	if (weekShowing != 0 & loopCount == 0) {
		var element = document.getElementById("prevWeekPointer");
		element.style.color = "#978c7c";
		element.style.fontWeight = "normal";
	}
} //mouseOutPrevWeek

function mouseUpNextWeek() {
	if (loopCount == 0 & (weekShowing + 1) < weekCount) {

		loopCount = dayHoursAnimation.length;
		weekShowing++;

		//Change the date to print
		nowShowingCurrentWeekDate.setDate(nowShowingCurrentWeekDate.getDate() + 7);
		//Run the animation
		animateDayHoursNext();
	}
} //mouseUpNextWeek

function mouseUpPrevWeek() {
	if (loopCount == 0 & weekShowing != 0) {

		loopCount = dayHoursAnimation.length;
		weekShowing--;
		//Change the date to print
		nowShowingCurrentWeekDate.setDate(nowShowingCurrentWeekDate.getDate() - 7);
		//Run the animation
		animateDayHoursPrev();
	}
} //mouseUpPrevWeek

function openSignUpWindow(obj) {
	var urlString = "http://cal.saclibrary.org/SPLeventsignup.asp?ID=" + obj.id;
	window.open(urlString, "", "width=760px,height=720px,menubar=no,resizable=no,titlebar=no,toolbar=no,status=no,scrollbars=yes,location=no");
}; //openSignUpWindow

function overSignUp(obj) {
	obj.className = "linkOver";
}; //overSignUp

function outSignUp(obj) {
	obj.className = "linkOut";
} // outSignUp

function printOpen() {
	var urlString = "http://dev.saclibrary.org/print/hoursAndLocs/default.aspx?date=" + (nowShowingCurrentWeekDate.getMonth() + 1) + "-" + nowShowingCurrentWeekDate.getDate() + "-" + nowShowingCurrentWeekDate.getFullYear();
	window.open(urlString, "", "width=650px,height=750px,menubar=no,resizable=no,titlebar=no,toolbar=no,status=no,scrollbars=yes,location=no");
}

function printOver() {
	printImg.src = "http://www.saclibrary.org/image/UI/printerIconOn.gif";
	printLink.style.color = "#ffffff";
}

function printOut() {
	printImg.src = "http://www.saclibrary.org/image/UI/printerIconOff.gif";
	printLink.style.color = "#978c7c";
}

function setImageDimensions(obj) {
	var imgSrc = obj.src;
	var eventNumber = obj.id.replace("headImg", "");
	//Size the image if its really big. No bigger than 100 wide 
	var newImg = new Image();
	newImg.src = imgSrc;
	var imageH = newImg.height;
	var imageW = newImg.width;
	if (imageW > 80 || imageH > 200) {
		if ((imageH * 0) > (imageW * 0)) {
			imageW = Math.round(imageW / (imageH / 200));
			imageH = 200;
		} else {
			imageH = Math.round(imageH / (imageW / 80));
			imageW = 80;
		};
	}	
	obj.style.width = imageW;
	obj.style.height = imageH;
	obj.style.display = "block";
} //setImageDimensions


