/********************************************
 * JBON CALENDAR PICKER											*
 ********************************************/

var picker = {};
picker.Calendar = {
	manifest: {
		author: "J.Bon",
		date: "05/30/2007",
		email: "bon9it@yahoo.com",
		name: "CALENDAR PICKER",
		version: "1.0"
	},
	config: {
		affectTo: null,
		pattern: "dd/mm/yyyy",
		className: "jbon-calendar-picker",
		name: "CALENDAR",
		icon: {
			nextMonth: "/jbon/picker/calendar/next.gif",
			previousMonth: "/jbon/picker/calendar/previous.gif",
			application: "/jbon/picker/calendar/calendar.gif"
		}
	},
	variable: {
		calendarUtil: new Calendar(),
		daysInMonth: null,
		calendarWrapper: null
	},
	toString: function() {
		var tString = "";
		for (var m in this.manifest) {
			tString += m + ": " + this.manifest[m] + "\n";
		}
		return tString;
	},
	implement: function() {
		var calendars = document.getElementsByClassName(this.config.className);
		for (var i = 0; i < calendars.length; i++) {
			var cp = calendars[i];
			if (cp.tagName.equalsIgnoreCase("input")) {
				//cp.readOnly = true;
				cp.style.cursor = "pointer";
			}
			cp.onfocus = function() {
				picker.Calendar.show(this);
			};
			cp.onblur = function() {
				//picker.Calendar.hide(this);
			};
		}
		
		document.onclick = function(e) {
			if (!e) e = window.event;
			var elem = (e.target) ? e.target : e.srcElement;
			var dp = $("calendar-wrapper");
			
			var pare = getParent(elem, {id: "calendar-wrapper"});
			if(dp){
				if(elem.className != "jbon-calendar-picker" && elem.id != dp.id && dp.style.display != 'none'){
					if (!pare || dp.id != pare.id)
						dp.style.display = 'none';
				}
			}
			
		}
	},
	init: function(sDate) {
		if (sDate) {
			this.variable.calendarUtil.setDate(this.config.startDate);
		}
	},
	show: function(_affectTo) {
		this.config.affectTo = _affectTo;
		this.render(true);

		this.variable.calendarWrapper.style.display = "block";
		this.variable.calendarWrapper.style.position = "absolute";
		
		if (navigator.getName() == navigator.IE) {
			this.variable.calendarWrapper.style.left = getOffsetX(this.config.affectTo) + this.config.affectTo.offsetWidth + 1 + 'px';
			this.variable.calendarWrapper.style.top = getOffsetY(this.config.affectTo) + 1 + 'px';
		} if (navigator.getName() == navigator.FIREFOX) {
			this.variable.calendarWrapper.style.left = getOffsetX(this.config.affectTo) + this.config.affectTo.offsetWidth + 'px';
			this.variable.calendarWrapper.style.top = getOffsetY(this.config.affectTo) + 'px';
		}
	},
	hide: function() {
		this.variable.calendarWrapper.style.display = "none";
	},
	getDate: function() {
		return this.config.pattern.replace("mm", this.variable.calendarUtil.getMonth()).replace("dd", this.variable.daysInMonth[i]).replace("yyyy", this.variable.calendarUtil.getYear()).replace("yy", this.variable.calendarUtil.getYear().right(2));
	},
	setYear: function(yyyy) {
		this.variable.calendarUtil.setYear(yyyy);
		picker.Calendar.render();
	},
	setMonth: function(mm) {
		this.variable.calendarUtil.setMonth(mm);
		picker.Calendar.render();
	},
	nextMonth: function() {
		this.variable.calendarUtil.nextMonth();
		picker.Calendar.render();
	},
	nextYear: function() {
		this.variable.calendarUtil.nextYear();
		picker.Calendar.render();
	},
	previousMonth: function() {
		this.variable.calendarUtil.previousMonth();
		picker.Calendar.render();
	},
	previousYear: function() {
		this.variable.calendarUtil.previousYear();
		picker.Calendar.render();
	},
	render: function(isSynchornizedValue) {
		
		if (isSynchornizedValue && Calendar.isDate(toEngDate(this.config.affectTo.value))) {
			this.variable.calendarUtil.setDate(toEngDate(this.config.affectTo.value));
		}
		
		if (!this.config.pattern) this.config.pattern = "mm/dd/yyyy";
		
		/* get first day of week */
		var tempCalendar = new Calendar();
		tempCalendar.setDate(this.variable.calendarUtil.getDate());
		tempCalendar.setDay(1);
		var _firstDayOfWeek = tempCalendar.getDayOfWeek();
		this.variable.daysInMonth = new Array();
		for (var i = 0; i < _firstDayOfWeek; i++) {
			this.variable.daysInMonth[i] = '';
		}
		var lastDayInMonth = this.variable.calendarUtil.getLastDayInMonth();
		for (var i = 0; i < lastDayInMonth; i++) {
			this.variable.daysInMonth[i + _firstDayOfWeek] = i + 1;
		}
		for (var i = this.variable.daysInMonth.length ; i < 42; i++) {
			this.variable.daysInMonth[i] = '';
		}
		
		if (!this.variable.calendarWrapper) this.variable.calendarWrapper = create$("div", {id: "calendar-wrapper", style: "display:none; position: absolute;"});
		
		var html = "";
		html += "<div id=\"calendar-header\">";
			html += "<table border=\"0\" cellspacing=\"1\" cellpadding=\"1\"><tr valign=\"middle\">";
				//html += "<td><img style=\"cursor:pointer;\" onclick=\"picker.Calendar.hide();\" width=\"30\" src=\"../img/" + this.config.icon.application + "\" /></td><td>" + this.config.name + " [<a href=\"#\" onclick=\"picker.Calendar.hide();\">X</a>]</td>";
			html += "</tr></table>";
		html += "</div>";
		
		html += "<div id=\"calendar-controls\">";
			html += "<table border=\"0\" cellspacing=\"2\" cellpadding=\"1\"><tr valign=\"middle\">";
				html += "<td align=\"right\">tháng <select onchange=\"picker.Calendar.setMonth(this.value);\">";
				for (var i = 0; i < Calendar.monthsOfYear.length; i++) {
					html += "<option value=\"" + (i + 1) + "\" ";
					if (i+1 == this.variable.calendarUtil.getMonth()) html += " selected=\"true\" ";
					html += " >" + Calendar.monthsOfYear[i] + "</option>";
				}
				html += "</select> ";
				html += " năm <select id=\"cboYear\" onchange=\"picker.Calendar.setYear(this.value);\">";
				for (var i = Calendar.getYear(); i > Calendar.getYear() - 5; i--) {
					html += "<option value=\"" + (i + 1) + "\" ";
					if (i+1 == this.variable.calendarUtil.getYear()) html += " selected=\"true\" ";
					html += " >" + (i + 1) + "</option>";
				}
				html += "</select></td>";
				//html += "<td><img style=\"cursor:pointer;\" width=\"12\" src=\"../img/" + this.config.icon.previousMonth + "\" onclick=\"picker.Calendar.previousMonth();\" /> ";
				//html += "<img style=\"cursor:pointer;\" width=\"12\" src=\"../img/" + this.config.icon.nextMonth + "\" onclick=\"picker.Calendar.nextMonth();\" /></td>";
			html += "</tr></table>";
		html += "</div>";
		
		html += "<div id=\"calendar-days\">";
			html += "<table border=\"0\" cellspacing=\"2\" cellpadding=\"2\">";
				html += "<tr>";
				for (var i = 0; i <  Calendar.vn_daysOfWeek.length; i++) {
					html += "<td class=\"calendar-day-of-week\">" + Calendar.vn_shortDaysOfWeek[i] + "</td>" ; 
				}
				html += "</tr>";
				
				var curCalendar = new Calendar();
				var curDay = curCalendar.getDay();
				var curMonth = curCalendar.getMonth();
				var curYear = curCalendar.getYear();
				for (var i = 0 ; i < this.variable.daysInMonth.length; i++) {
					if (i%7 == 0) html += "<tr>";
					if (this.variable.daysInMonth[i] != '') {
						var toValue = formatDate(this.config.pattern.replace("mm", this.variable.calendarUtil.getMonth()).replace("dd", this.variable.daysInMonth[i]).replace("yyyy", this.variable.calendarUtil.getYear()));
						if ((curDay < this.variable.daysInMonth[i] && curMonth == this.variable.calendarUtil.getMonth() && curYear == this.variable.calendarUtil.getYear()) || (curMonth < this.variable.calendarUtil.getMonth() && curYear == this.variable.calendarUtil.getYear()) || (curYear < this.variable.calendarUtil.getYear())) {
							html += "<td>";
							html += this.variable.daysInMonth[i];
						} else {
							html += "<td class=\"calendar-day\" onclick=\"picker.Calendar.config.affectTo.value='" + toValue + "';picker.Calendar.hide();\" >";
							if (curDay == this.variable.daysInMonth[i] && curMonth == this.variable.calendarUtil.getMonth() && curYear == this.variable.calendarUtil.getYear()) {
								html += "<span class=\"calendar-today\">" + this.variable.daysInMonth[i] + "</span> ";
							} else {
								html += this.variable.daysInMonth[i];
							}
						}
						html += "</td>";
					} else {
						html += "<td class=\"calendar-day\">" + this.variable.daysInMonth[i] + "</td>" ;
					}
					
					if ((i+1)%7 == 0) html += "</tr>";
				}
			html += "</table>";
		html += "</div>";
	
		this.variable.calendarWrapper.innerHTML = html;
		
		
		
		
		
		/*
		var calendarHeader =  create$("div", {id: "calendar-header"}, calendarWrapper);
			var tbl = create$("table", {border: 0, cellspacing: 2, cellpadding: 0}, calendarHeader);
			var tr = create$("tr", {}, tbl);
			var td = create$("td", {}, tr);
				td.innerHTML = "<h3>CALENDAR PICKER</h3>";
			td = create$("td", {align: "right"}, tr);
				td.innerHTML = "[<a href=\"javascript:;\" onclick=\"picker.Calendar.hide();\">x</a>]";
				
		var calendarControls = create$("div", {id: "calendar-controls"}, calendarWrapper);
			tbl = create$("table", {border: 0, cellspacing: 3, cellpadding: 2}, calendarControls);
				tr = create$("tr", {}, tbl);
					td = create$("td", {}, tr);
						var inp = create$("input", {type: "button", value: "<"}, td);
						inp.onclick = function() {
							picker.Calendar.previousMonth();
						};
						
					td = create$("td", {}, tr);
						var sel = create$("select", {id: "cboMonth", onchange: picker.Calendar.hide}, td);
						for (var i = 0; i < Calendar.monthsOfYear.length; i++) { 
							var opt;
							if (i+1 == calendarUtil.getMonth()) {
								opt = create$("option", {value: (i + 1), selected: true}, sel);
							} else {
								opt = create$("option", {value: (i + 1)}, sel);
							}
							opt.innerHTML = i+1;
						} 
					td = create$("td", {}, tr);
						var inp = create$("input", {type: "button", value: ">"}, td);
						inp.onclick = function() {
							picker.Calendar.nextMonth();
						}; 
		
		var calendarDays = create$("div", {id: "calendar-days"}, calendarWrapper);
			tbl = create$("table", {border: 0, cellspacing: 2, cellpadding: 1}, calendarDays);
				tr = create$("tr", {}, tbl);
				for (var i = 0; i <  Calendar.daysOfWeek.length; i++) {
					td = create$("td", {"class":"calendar-day-of-week"}, tr);
					td.innerHTML = Calendar.daysOfWeek[i].substr(0, 3);
				}
				for (var i = 0 ; i < _daysInMonth.length; i++) {
					if (i%7 == 0) tr = create$("tr", {}, tbl);
					td = create$("td", {className: "calendar-day"}, tr);
					td.innerHTML = _daysInMonth[i];
					td.onchange = function() {
						picker.Calendar.setMonth(_daysInMonth[i]);
					};
					if ((i+1)%7 == 0) tr = create$("tr", {}, tbl);
				}*/
				
		var days = document.getElementsByClassName("calendar-day");
		for (var i = 0; i < days.length; i++) {
			var cd = days[i];
			if (cd.innerHTML.trim() != "") {
				cd.onmouseover = function() {
					this.style.backgroundColor = "#428F23";
				};
				cd.onmouseout = function() {
					this.style.backgroundColor = "";
				};
			}
		}
		
		
	}
};