/**
 * @namespace DatePicker
 * @author Rick Hopkins
 * @version 0.1
 * @classDescription A date picker object. Created with the help of MooTools v1.1
 */

var DatePicker = new Class({
	/** set and create the date picker text box */
	initialize: function(rsID, options){
		this.inputName = rsID;
		this.id = rsID + '_cal';
		this.containerID = this.id + '_container';
		this.input = false;
		this.calendar = false;
		this.calImageURL = 'cal.gif';
		this.format = options.format || 'mm/dd/yyyy';
		this.value = options.value || '';
		this.zIndex = options.zIndex || false;
		this.monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
		this.daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
		this.dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
		this.interval = null;
		this.active = false;
		
		/** create the parent container */
		document.write('<div id="' + this.containerID + '" style="position: relative; width: 194px; padding: 0px;' + (this.zIndex ? ' z-index: ' + this.zIndex + ';' : '') + '"></div>');
		
		/** set some actions for the container div */
		$(this.containerID).onmouseover = function(){
			$clear(this.interval);
			}.bind(this);
		$(this.containerID).onmouseout = function(){
			this.interval = setInterval(
				function(){
					if (this.calendar && !this.active){ this.calendar.setStyles({'display':'none'}); }
					}.bind(this), 
				500);
			}.bind(this);
		
		/** create the text box */
		this.input = new Element('input');
		this.input.setProperties({'type':'text', 'name':this.inputName, 'value':this.value, 'readOnly':true});
		this.input.setStyles({'width':'194px', 'background':'url(\'' + this.calImageURL + '\') no-repeat center right'});
		this.input.injectInside($(this.containerID));
		
		/** create the onclick action */
		this.input.onclick = this.createCal.bind(this);
		}, 
	
	/** Create the calendar and allow the user to select a date */
	createCal: function(month, year){
		/** clear the interval */
		$clear(this.interval);
		
		/** create the div container if it doesn't exist */
		if (!this.calendar){
			this.calendar = new Element('div');
			this.calendar.injectAfter(this.input);
			}
		
		/** create the date object */
		var date = new Date();
		
		/** create the date object */
		if (month && year){
			date.setFullYear(year, month);
			}
		date.getYear() % 4 == 0 ? this.daysInMonth[1] = 29 : this.daysInMonth[1] = 28;
		
		/** set the day to first of the month */
		date.setDate(1);
		var firstDay = 1 - date.getDay();
		
		/** get the position of the input box, position div and show with styles */
		var hdStyle = 'font-weight: bold; text-align: center; background-color: #EEEEEE;';
		var dayStyle = 'text-align: center;';
		
		/** set the styles on the div */
		this.calendar.setStyles({'position':'absolute', 'top':'19px', 'left':'1px', 'display':'', 'width':'195px', 'backgroundColor':'#FFFFFF', 'border':'1px solid #CCCCCC', 'padding':'1px', 'margin':'0px 0px 3px 0px'});
		
		/** create the month select box */
		var monthSelStr = '<select id="' + this.id + '_monthSelect" class="input-date2">';
		for (var m = 0; m < this.monthNames.length; m++){
			if (date.getMonth() == m){
				monthSelStr += '<option selected="selected" value="' + m + '">' + this.monthNames[m] + '</option>';
				} else {
				monthSelStr += '<option value="' + m + '">' + this.monthNames[m] + '</option>';
				}
			}
		monthSelStr += '</select>';
		
		/** create the year select box */
		var yearSelStr = '<select id="' + this.id + '_yearSelect" class="input-date2">';
		for (var y = (date.getFullYear() + 5); y >= (date.getFullYear() - 20); y--){
			if (date.getFullYear() == y){
				yearSelStr += '<option selected="selected" value="' + y + '">' + y + '</option>';
				} else {
				yearSelStr += '<option value="' + y + '">' + y + '</option>';
				}
			}
		yearSelStr += '</select>';
		
		/** start creating calendar */
		var calStr = '<table width="194" cellspacing="0" cellpadding="0" style="border-left: 1px solid #E0E0E0; border-top: 1px solid #E0E0E0;">';
		calStr += '<tr>';
		calStr += '<td colspan="7" style="' + hdStyle + ' border-bottom: 1px solid #E0E0E0; border-right: 1px solid #E0E0E0;">' + monthSelStr + yearSelStr + '</td>';
		calStr += '</tr>';
		
		/** create day names */
		calStr += '<tr>';
		for (var i = 0; i < this.dayNames.length; i++){
			calStr += '<td style="' + hdStyle + ' border-bottom: 1px solid #E0E0E0; border-right: 1px solid #E0E0E0;">' + this.dayNames[i].substr(0, 1) + '</td>';
			}
		calStr += '</tr>';
		
		/** create the day cells */
		while (firstDay <= this.daysInMonth[date.getMonth()]){
			calStr += '<tr>';
			for (i = 0; i < 7; i++){
				if ((firstDay <= this.daysInMonth[date.getMonth()]) && (firstDay > 0)){
					calStr += '<td style="' + dayStyle + ' border-bottom: 1px solid #E0E0E0; border-right: 1px solid #E0E0E0; cursor: pointer;" class="' + this.id + '_calDay' + '" axis="' + date.getFullYear() + '|' + (date.getMonth() + 1) + '|' + firstDay + '">' + firstDay + '</td>';
					} else {
					calStr += '<td style="' + dayStyle + ' border-bottom: 1px solid #E0E0E0; border-right: 1px solid #E0E0E0;">&nbsp;</td>';
					}
				firstDay++;
				}
			calStr += '</tr>';
			}
		
		/** close the date picker table */
		calStr += '</table>';
		
		/** put html string into div container */
		this.calendar.innerHTML = calStr;
		
		/** set the onmouseover events for all calendar days */
		$$('td.' + this.id + '_calDay').each(function(el){
			el.onmouseover = function(){
				el.setStyle('background-color', '#E0E0E0');
				}.bind(this);
			}.bind(this));
		
		/** set the onmouseout events for all calendar days */
		$$('td.' + this.id + '_calDay').each(function(el){
			el.onmouseout = function(){
				el.setStyle('background-color', '#FFFFFF');
				}.bind(this);
			}.bind(this));
		
		/** set the onclick events for all calendar days */
		$$('td.' + this.id + '_calDay').each(function(el){
			el.onclick = function(){
				ds = el.axis.split('|');
				this.input.value = this.formatValue(ds[0], ds[1], ds[2]);
				this.calendar.remove();
				this.calendar = false;
				}.bind(this);
			}.bind(this));
		
		/** set the onchange event for the month & year select boxes */
		$(this.id + '_monthSelect').onfocus = function(){ this.active = true; }.bind(this);
		$(this.id + '_monthSelect').onchange = function(){
			this.createCal($(this.id + '_monthSelect').value, $(this.id + '_yearSelect').value);
			this.active = false;
			}.bind(this);
		
		$(this.id + '_yearSelect').onfocus = function(){ this.active = true; }.bind(this);
		$(this.id + '_yearSelect').onchange = function(){
			this.createCal($(this.id + '_monthSelect').value, $(this.id + '_yearSelect').value);
			this.active = false;
			}.bind(this);
		}, 
	
	/** Format the returning date value according to the selected formation */
	formatValue: function(year, month, day){
		/** setup the date string variable */
		var dateStr = '';
		
		/** check the length of day */
		if (day < 10){ day = '0' + day; }
		if (month < 10){ month = '0' + month; }
		
		/** check the format & replace parts // thanks O'Rey */
		dateStr = this.format.replace( /dd/i, day ).replace( /mm/i, month ).replace( /yyyy/i, year );
		
		/** return the date string value */
		return dateStr;
		}
	});