window.addEvent("domready", function() {
	var selectbox = $E('#month-selection-form .month-select-box');
	selectbox.addEvent('change',function(){
		var selectionForm = $E('#month-selection-form');
		selectionForm.submit();
	});
	
	
	// Set up the popup box.
	(function() {
		var popup = $("calendar-popup");
		var close = $("calendar-close");
		var waiting = $("calendar-waiting");
		var events = $E(".events", popup);
		var wait = false;
		var top = -1;
		var popupX = -1; //X co-ordinate of the popup
		var popupXLeft = true; //States whether the popups X value should be its left or right
		
		function positionPopup(){
			positionPopup(-1,-1);
		}
		
		function positionPopup(targetX, targetY) {
			// Calculate new dimensions.
			var width = popup.getStyle("width").toInt();
			var height = popup.getStyle("height").toInt();
			
			if(targetY >= 0){
				var innerHeight = window.innerHeight || document.body.clientHeight;
				var pageYOffset = window.pageYOffset || document.documentElement.scrollTop;
				top = targetY;
			}else{
				var innerHeight = window.innerHeight || document.body.clientHeight;
				var pageYOffset = window.pageYOffset || document.documentElement.scrollTop;
				top = (innerHeight / 2) - (height / 2) + pageYOffset;
			}
			var left = 0;
			if(targetX >= 0){
				
				popupX = targetX;
				var innerWidth = window.innerWidth || document.body.clientWidth;
			 
				if(popupX > (innerWidth/2)){
					popupXLeft = false;
				}else{
					popupXLeft = true;
				}
				if(popupXLeft){
					popup.setStyles({
					left: popupX,
					top: top
					});
				}else{
					popup.setStyles({
					left: popupX-width,
					top: top
					});
				}
			}else{
				popupX = -1;
				popup.setStyles({
				marginLeft: -width/2,
				top: top
				});
			}
			
			
			
		}
		
		function closePopup() {
			popup.setStyle("display", "none");
		}
		
		function openPopup(){
			openPopup(-1,-1);
		}
		
		function openPopup(targetX,targetY) {
			events.setStyle("display", "none");
			waiting.setStyle("display", "block");
			popup.setStyle("display", "block");
			
			positionPopup(targetX,targetY);
		}
		
		function loadContent(content) {
			events.innerHTML = content;
			waiting.setStyle("display", "none");
			events.setStyle("display", "block");
			popup.setStyle("display", "block");
			
			positionPopup(popupX,top);
		}
		
		// Set up various events.
		close.addEvent("click", function(e) {
			var e = new Event(e);
			e.stop();
			closePopup();
			$ES("td","#event-calendar .calendar-body-table").each(function(e){
				e.removeClass("selected-day");
			});
		});
		
		var xhr = new XHR({
			onSuccess: function(response) {
				wait = false;
				loadContent(response);
			},
			
			onFailure: function() {
				wait = false;
				loadContent("Sorry, an error occurred.");
			}
		});
		
		
		function eventPanelClicked(target) {
			while (target != document) {
				if (target.tagName == "TD") {
					var day = $E(".calendar-day-number", target);
					if (day && day.innerHTML) {
						return day.innerHTML;
					}
				}
				
				target = target.parentNode;
			}
			
			return false;
		}
		
		$E(".calendar-body-table").addEvent("click", function(e) {
			var e = new Event(e);
			if (wait) {
				return;
			}
			
			var day = eventPanelClicked(e.target);
			if (!day) {
				return;
			}
			//Remove selected class from each of the boxes
			$ES("td","#event-calendar .calendar-body-table").each(function(e){
				e.removeClass("selected-day");
			});
			//And add for the new ones
			while (e.target != document) {
				if (e.target.tagName == "TD") {
					e.target.addClass("selected-day");
					break;
				}
				e.target = e.target.parentNode;
			}
			
			e.preventDefault();
			openPopup(e.page.x,e.page.y);
			xhr.send("calendar_details.php?month=" + selectedMonth + "&year=" + selectedYear + "&day=" + day);
			wait = true;
		});
	})();
});