///////////////////////////////////////////////////////////////////////////
//University of Illinois Extension                                       //
//Office of Web Development                                              //
//Alessandro Bellina - bellina@uiuc.edu                                  //
//Copyright 2007 - Board of Trustees                                     //
//                                                                       //
//This code is not open source, and is protected by copyright law.       //
//Any use other than in U of I Extension websites is strictly prohibited.//
///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////
//-to initialize-
//var calendar = new Calendar (document.getElementById ("Monthly_Calendar"));
//calendar.thisMonth();
////////////////////////////////
function Calendar (ref, monthSelect){
	this.calendarWidth = "230px";
	this.cellWidth = "20px";
	
	this.daySelect = monthSelect || false;
	//Today's date
	this.current_date = new Date();

	this.container = ref;
	
	
	this.calendarName = ref+"_ExtCalendar";
	this.maxNumCells = 41;
	this.datePtr = new Date();
	this.monthNav = 1;
	this.sCells = 0;

	//current calendar
	this.currentCalendar = document.createElement ("div");
	this.currentCalendar.style.color ="#000000";
	this.currentCalendar.style.textAlign = "center";
	this.currentCalendar.style.width = this.calendarWidth;
	
	//this.currentCalendar.style.margin="0 auto";

	//month title
	this.monthTitle = document.createElement ("div");
	this.monthTitle.style.textAlign = "center";
	this.monthTitle.style.fontWeight = "bold";
	this.monthTitle.style.fontSize = "110%";
	
	//navigation
	this.nav = document.createElement ("div");
	this.nav.style.textAlign = "center";
		
		
	this.calContainer = document.createElement ("div");
	this.calContainer.appendChild (this.monthTitle);
	this.calContainer.appendChild (this.nav);
	
	this.calContainer.style.position = "absolute";
	this.calContainer.style.zIndex = 500;
	
	
	Event.bind (this.calContainer, "mouseover", this, function (){
		this.onCalendar = true;
	});
	
	Event.bind (this.calContainer, "mouseout", this, function (){
		this.onCalendar = false;
	});
	
	
	//disabling overlay
	this.overlay = document.createElement ("div");
	this.overlay.style.position = "absolute";
	this.overlay.style.width = this.currentCalendar.style.width;
	this.overlay.style.height = "240px";
	//this.overlay.style.top = this.container.offsetTop+"px";
	//this.overlay.style.left = this.container.offsetLeft+"px";
	this.overlay.style.backgroundColor = "#ffffff";
	this.overlay.style.opacity = "0.8";
	this.overlay.style.filter = "alpha (opacity=80)";
	this.overlay.style.zIndex = 400;
		
	this.container.appendChild (this.overlay);

	
	//set styles for container
	this.container.style.position = "relative";
	this.container.style.width = this.currentCalendar.style.width;
	
	
	//CellData - date object array
	this.CellData = new Array();
	
	//CellPtr - td pointers
	this.CellPtr = new Array();
	
	//selected days
	this.selectedDay = null;
	this.selectedCell = null;
	this.maxSelectableDays = 1;
	
	//Month - names of months
	this.Month = new Array("January","February","March","April","May","June","July",
						   "August","September","October","November","December");
	
	//Weekday - names of week days
	this.Week = new Array ("Mon", "Tues", "Wed", "Th", "Fri", "Sat", "Sun");
	
				

	this.monthContainer = document.createElement ("table");
	this.monthContainer.appendChild (document.createElement ("tbody"));
	this.monthContainer.style.margin = "3px";
	this.monthContainer.style.marginTop = "10px";
	
	//create month grid
	for (var i=0; i<=this.maxNumCells; i++){
		if ((i)%7 ==0){
			var week = document.createElement ("tr");
			this.monthContainer.tBodies[0].appendChild (week);
		}
		var cell = document.createElement ("td");
		cell.style.width = this.cellWidth;
		cell.style.overflow = "hidden";
		cell.innerHTML = "&nbsp;";
		week.appendChild (cell);
		
		//add to CellPtr
		this.CellPtr[i] = cell;
	}
	
	//print the finished calendar to the screen
	//this.currentCalendar.innerHTML = cal;

	this.currentCalendar.appendChild (this.monthContainer);
	this.calContainer.appendChild (this.currentCalendar);
	this.container.appendChild (this.calContainer);
	
	//event registration
	Event.register (this, "dateclick");
	Event.register (this, "monthchange");
	
	//initialize
	this.init ();
	this.enable();
}



//init
//- creates the calendar
Calendar.prototype.init = function (){

	//nav styles
	this.nav.style.padding = "5px";
	this.nav.style.fontSize = "90%";
	this.nav.style.height = "10px";
	
	//define buttons
	var currentMonth = document.createElement ("input");
	currentMonth.type = "button";
	if (this.daySelect == false)
		currentMonth.value = "Today";
	else
		currentMonth.value = "Current";
	currentMonth.style.marginLeft = "5px";
	currentMonth.style.marginRight = "5px";
	Event.bind (currentMonth, "click", this, function (){
		this.thisMonth();
	});
	
	var nextMonth = document.createElement ("input");
	nextMonth.type = "button";
	nextMonth.value = "Next >";
	Event.bind (nextMonth, "click", this, function (){
		this.nextMonth();
	});
	
	
	var prevMonth = document.createElement ("input");
	prevMonth.type = "button";
	prevMonth.value = "< Back";
	Event.bind (prevMonth, "click", this, function (){
		this.prevMonth();
	});
	
	currentMonth.style.fontSize = "100%";
	currentMonth.style.fontWeight = "bold";
	prevMonth.style.fontSize = "100%";
	nextMonth.style.fontSize = "100%";
	
	this.nav.appendChild (prevMonth);
	this.nav.appendChild (currentMonth);
	this.nav.appendChild (nextMonth);
	
	
}


//printMonth
//- thisMonth: A month from 0-11. 0 is January, 11 is December.
//******************
// This function will create a month calendar.
Calendar.prototype.monthPrint = function (thisYear,thisMonth,thisDay){
	this.month = thisMonth;
	this.year = thisYear;
	this.day = thisDay || null;

	//datePtr - pointer to a calendar starting on the 1st day  of the month passed.
	this.datePtr.setFullYear (this.year,this.month,1);
	//fire the "monthchange" event, because we have just gone to another month.
	var tempdate = new Date();
	tempdate.setFullYear (this.year, this.month, 1);
	this.monthChange (tempdate);
	
	//day of week (0-6) where we should start printing calendar days.
	startDay = this.datePtr.getDay();
	this.monthTitle.innerHTML = this.Month[thisMonth]+" "+this.year;
	
	for (var i=0; i<=this.maxNumCells; i++){
		var cellPtr = this.CellPtr[i];
		if (i>=startDay){
			var data = this.datePtr.getDate ();
			if (this.datePtr.getMonth() == thisMonth){
				
				this.CellData[i] = new Date ();
				this.CellData[i].setFullYear (thisYear,thisMonth,data);
				
				cellPtr.innerHTML = data;	
		
				if (!this.daySelect && this.selectedDay!= null &&
					this.selectedDay.getMonth() == thisMonth && 
					this.selectedDay.getFullYear () == thisYear	&&
					this.selectedDay.getDate() == data ){
					
					cellPtr.style.border = "1px solid #000000";
					cellPtr.style.backgroundColor = "#cccccc";
				}else{	
					cellPtr.style.backgroundColor = "#ffffff";
					cellPtr.style.border = "1px solid #cccccc";
				}
				
				if (!this.daySelect)
					cellPtr.style.cursor = "pointer";
				cellPtr.style.display = "";
				cellPtr.style.visibility = "visible";
				
				cellPtr.style.padding = "5px";
				
							
				this.installMouseOverHandler (cellPtr, i);
				this.installMouseOutHandler (cellPtr, i);
				this.installClickHandler (cellPtr, i);
				
				temp = this.datePtr.getDate();
				temp++;
				this.datePtr.setDate (temp);
			}else{
				cellPtr.innerHTML = "&nbsp;"
				cellPtr.style.display = "none";
				cellPtr.style.visibility = "hidden";
				cellPtr.onmouseover = cellPtr.onmouseout = null;
				cellPtr.onmouseclick = null;
				
			}
		}else{
			cellPtr.innerHTML = "&nbsp;"
			cellPtr.style.border = "1px solid #cccccc";
			cellPtr.style.backgroundColor = "#eeeeee";
			cellPtr.style.cursor = "default";
			cellPtr.onmouseover = cellPtr.onmouseout = null;
			cellPtr.onclick = null;
		}
	}
	
	if (this.day != null){
		var sDate = new Date();
		sDate.setFullYear (this.year);
		sDate.setMonth (this.month);
		sDate.setDate (this.day);
		this.selectDay (sDate);
	}
	
}
Calendar.prototype.installMouseOverHandler = function (ptr, num){
	if (this.daySelect == false){
		Event.bind (ptr, "mouseover", this, function (){
			if (!this.dateSelected (this.CellData[num])){
				ptr.style.border = "1px solid #000000";
				ptr.style.padding = "5px";
				ptr.style.backgroundColor = "#eeeeee";
			}
		});	
	}
}
Calendar.prototype.installMouseOutHandler = function (ptr, num){
	if (this.daySelect == false){
		Event.bind (ptr, "mouseout", this, function (){
			if (!this.dateSelected (this.CellData[num])){
				ptr.style.border = "1px solid #cccccc";
				ptr.style.padding = "5px";
				ptr.style.backgroundColor = "#ffffff";
			}
		});	
	}
}
Calendar.prototype.installClickHandler = function (ptr,num){
	if (this.daySelect == false){
			Event.bind (ptr, "click", this, function (){
			this.selectDay (this.CellData[num]);
		});
	}
} 
Calendar.prototype.setMaxSelectableDays = function(num){
	this.maxSelectableDays = num;	
}
Calendar.prototype.selectDay = function (dateObj){
	if (this.selectedCell != null){	
		this.selectedCell.style.border = "1px solid #cccccc";
		this.selectedCell.style.padding = "5px";
		this.selectedCell.style.backgroundColor = "#ffffff";		
	}
	
	if (this.selectedDay == null || 
		this.selectedDay!= null && 
		!(this.selectedDay.getMonth() == dateObj.getMonth() && 
		this.selectedDay.getFullYear () == dateObj.getFullYear()	&&
		this.selectedDay.getDate() == dateObj.getDate())){
		
		this.selectedDay = dateObj;
	}
		
	this.selectedCell = this.getCell (dateObj);
	if (this.selectedCell !=null && !this.daySelect){
		this.selectedCell.style.border = "1px solid #000000";
		this.selectedCell.style.padding = "5px";
		this.selectedCell.style.backgroundColor = "#cccccc";
	}
	this.dateChange (dateObj);
}
Calendar.prototype.getCell = function (dateObj){
	for (var i=0; i<this.CellData.length; i++){
		if (this.CellData[i] && 
			this.CellData[i].getMonth() == dateObj.getMonth() && 
			this.CellData[i].getFullYear () == dateObj.getFullYear() &&
			this.CellData[i].getDate() == dateObj.getDate())

			return this.CellPtr[i];
	}
	return null;
}
Calendar.prototype.dateSelected = function (dateObj){
	if (this.selectedDay.getMonth() == dateObj.getMonth() && 
		this.selectedDay.getFullYear () == dateObj.getFullYear() &&
		this.selectedDay.getDate() == dateObj.getDate())
		
		return true;

	return false;
}

Calendar.prototype.monthShift = function (newYear,newMonth){
	if (newMonth > 11){
		newYear++;
		newMonth = 0;
	}
	else if (newMonth < 0){
		newYear--;
		newMonth = 11;
	}
	this.monthPrint (newYear,newMonth);
}
Calendar.prototype.nextMonth = function (){
	this.month++;
	this.monthShift (this.year, this.month);
	if (this.daySelect){
		var shifting_date = new Date();
		shifting_date.setFullYear (this.year, this.month, 1);
		this.dateChange (shifting_date);
	}
}
Calendar.prototype.prevMonth = function (){
	this.month--;
	this.monthShift (this.year, this.month);
	
	if (this.daySelect){
		var shifting_date = new Date();
		shifting_date.setFullYear (this.year, this.month, 1);
		this.dateChange (shifting_date);
	}
}
Calendar.prototype.thisMonth = function (){
	this.selectedDay = this.current_date;
	this.monthPrint (this.current_date.getFullYear(),this.current_date.getMonth(), this.current_date.getDate());
	this.selectDay (this.current_date);
}
Calendar.prototype.gotoDate = function (dateObj){
	this.selectedDay = dateObj;
	this.monthPrint (dateObj.getFullYear(),dateObj.getMonth(), dateObj.getDate());
	this.selectDay (dateObj);
}	

Calendar.prototype.disable = function (){
	this.overlay.style.zIndex = 600;
	this.overlay.style.display = "";
	this.overlay.style.visibility = "visible";
}
Calendar.prototype.enable = function (){
	this.overlay.style.zIndex = 400;
	this.overlay.style.display = "none";
	this.overlay.style.visibility = "hidden";
}
Calendar.prototype.dateChange = function (obj){
	Event.trigger (this, "dateclick", obj);
}
Calendar.prototype.monthChange = function (obj){
	Event.trigger (this, "monthchange", obj);	
}
Calendar.prototype.getContainer = function (){
	return this.calContainer;	
}
Calendar.prototype.hide = function (){
	this.container.className = "Hidden";
}
Calendar.prototype.mouseOnCalendar = function (){
	return this.onCalendar;	
}