var data_picker_num = 0;

YUI.add('datepicker', function(Y){
	var monthname = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
	date_now = new Date();
	Y.DatePicker = function(option){
		this.parent_id = option.parent_id? option.parent_id : null;
		this.type = option.type? option.type : "text";
		this.button = option.button? option.button : null;
		this.output = option.output? option.output : null;
		this.format = option.format? option.format : "MM/dd/yyyy";
		this.num = data_picker_num;
		this.selectYear = date_now.getFullYear();
		this.selectMonth = date_now.getMonth() + 1;
		this.selectDate = date_now.getDate();
		this.pageYear = this.selectYear;
		this.pageMonth = this.selectMonth;
		this.id = "calendar_" + data_picker_num;
		this.init();
		data_picker_num++;
	}
		
	Y.DatePicker.prototype = {
		header_bar: null,
		content_bar: null,
		footer_bar: null,
		selected_node: null,
		
		init: function(){
			if(this.type != "calendar"){
				var overlay = new Y.Overlay({
					bodyContent: "<div id='widget_" + this.id + "' class='popup_calendar'></div>",
					visible: false,
					zIndex: 2
				});
				overlay.render("body");

				this.parent_id = 'widget_' + this.id;
				var widget = Y.get("#" + this.parent_id)
				this.render();
				this.overlay = overlay;
				Y.get("#" + this.button).on("click", this.showOverlay, "", this)
			}
		},
		
			
		getSelectDate: function(){
			var d = new Date(this.selectYear, this.selectMonth - 1, this.selectDate)
			var format = this.format.replace("yyyy", d.getFullYear()).replace("yy", d.getFullYear())
			format = format.replace("MMM", d.getMonth() + 1).replace("MM", d.getMonth() + 1).replace("dd", d.getDate())
			 
			return format 
		},
			
		getDateCode: function(year, month, day){
			return "date_" + this.num + "_" + year + "_" + month + "_" + day;
		},
		
		hideOverlay: function(){
			this.overlay.set("visible", false);
		},
		
		setYear: function(year){
			if(this.pageYear != year){
				this.pageYear = year;
				this.setPage();
			}
		},
		
		setMonth: function(month){
			if(month > 12 || month < 1){
				alert("Error Month");
				return;
			}
			if(this.pageMonth != month){
				this.pageMonth = month;
				this.setPage();
			}
		},
			
		setPage: function(){
			var root = this;
			var lastdate = new Date(this.pageYear, this.pageMonth, 0).getDate();
			var firstday = new Date(this.pageYear, this.pageMonth - 1, 1).getDay();
			var lastMonthDay = new Date(this.pageYear, this.pageMonth - 1, 0).getDate();
			
			var preYear, preMonth, nextYear, nextMonth;
			if((this.pageMonth - 1) == 0){
				preMonth = 12;
				preYear = this.pageYear - 1;
			} else {
				preMonth = this.pageMonth - 1;
				preYear = this.pageYear;
			}
			
			if((this.pageMonth + 1) == 13){
				nextMonth = 1;
				nextYear = this.pageYear + 1;
			} else {
				nextMonth = this.pageMonth + 1
				nextYear = this.pageYear;
			}

			var predays = firstday, dayNow = 1;

			//caculate week NO
			var wkfirstday = new Date(this.pageYear, this.pageMonth - 1, 1);
			var wkbeginday = new Date(this.pageYear, 0, 0);
			var weekNo = parseInt((wkfirstday.getTime() - wkbeginday.getTime())/(7*60*60*24*1000)) + 1
			
			//set content
			if(firstday > 0){
				startDate = lastMonthDay - firstday + 1;
			}
			
			var cbody = [];
			cbody[cbody.length] = "<tbody class='calendar_content'>";
			cbody[cbody.length] = "<tr>";
			cbody[cbody.length] = "<td>" + weekNo + "</td>";
			for(i = 0; i < 7 ; i++){
				if(predays > 0){
					cbody[cbody.length] = "<td id='" + this.getDateCode(preYear, preMonth, startDate) + "' class='calendar_date not_current'>" + startDate + "</td>";
					startDate++;
					predays--;
				} else {
					cbody[cbody.length] = "<td id='" + this.getDateCode(this.pageYear, this.pageMonth, dayNow) + "' class='calendar_date'>" + dayNow + "</td>";
					dayNow++;
				}
			}
			cbody[cbody.length] = "</tr>";
			weekNo ++;
			
			var style = "class='calendar_date'";
			var month = this.pageMonth;
			var year = this.pageYear
			for(i = 1; i < 6; i++){
				cbody[cbody.length] = "<tr>";
				cbody[cbody.length] = "<td>" + weekNo + "</td>";
				for(j = 0; j < 7; j++){
					if(dayNow > lastdate){
						dayNow = 1;
						style = "class='not_current calendar_date'";
						month = nextMonth;
						year = nextYear;
					}
					cbody[cbody.length] = "<td id='" + this.getDateCode(year, month, dayNow) + "'" + style + ">" + dayNow + "</td>";
					dayNow++;				
				}
				cbody[cbody.length] = "</tr>";
				weekNo ++;
			}
			cbody[cbody.length] = "</tbody>";
			
			var content_body = this.content_bar.query(".calendar_content")
			if(content_body != null){
				this.content_bar.removeChild(content_body)
			}
			this.content_bar.appendChild(Y.Node.create(cbody.join("")));
			
			//set current date
			this.header_bar.query(".year_now").set("innerHTML", this.pageYear);
			this.header_bar.query(".month_now").set("innerHTML", this.pageMonth);
			if(this.selectMonth == this.pageMonth && this.selectYear == this.pageYear){
				this.selected_node = this.content_bar.query("#" + this.getDateCode(this.selectYear, this.selectMonth, this.selectDate));
				this.selected_node.addClass("selected");
			}
			
			
			//event handle
			var changeDate = function(){
				var dateArr = this.get("id").split("_");
				root.setDate(parseInt(dateArr[2]), parseInt(dateArr[3]), parseInt(dateArr[4]))
				root.fire("dateChange")
			}
			
			var hover_date = function(){
				this.addClass("hover");
			}
			
			var restore_date = function(){
				this.removeClass("hover");
			}
			this.content_bar.queryAll(".calendar_date").on("click", changeDate);
			this.content_bar.queryAll(".calendar_date").on("mouseover", hover_date);
			this.content_bar.queryAll(".calendar_date").on("mouseout", restore_date);
		},
		
		showOverlay: function(e, root){
			root.overlay.set("align", {
				node:"#" + root.button,
				points:["tr", "br"]
			});
			root.overlay.set("visible", true)
		},
		
		setDate: function(year, month, day){
			this.selectYear = year ? year: this.selectYear;
			this.selectMonth = month ? month: this.selectMonth;
			this.selectDate = day ? day: this.selectDate
			this.footer_bar.query(".select_date").set("innerHTML", this.selectYear + "/" + this.selectMonth + "/" + this.selectDate)
			this.pageYear = this.selectYear;
			this.pageMonth = this.selectMonth;
			if(this.type != 'calendar' && this.overlay != undefined){
				this.hideOverlay();
				Y.get("#" + this.output).set("value", this.getSelectDate());
			}
			this.setPage();
		},
			
		reset: function(){
			this.selectYear = date_now.getFullYear();
			this.selectMonth = date_now.getMonth() + 1;
			this.selectDate = date_now.getDate();
			this.pageYear = this.selectYear;
			this.pageMonth = this.selectMonth;
			this.setPage();
		},
			
		resetSelectedNode: function(){
			if(this.selectedNode != null){
				this.selectedNode.removeClass("selected");
				this.selectedNode = null;
			}
		},
		
		render: function(){
			var root = this;
			var root_node = Y.Node.create("<div id='" + this.id + "' class='calendar'></div>")
			var header = [];
			header[header.length] = "<div class='date_picker'>"
			header[header.length] = 	"<div>"
			header[header.length] = 		"<div class='pre_year'></div>"
			header[header.length] = 		"<div class='pre_month'></div>"
			header[header.length] = 		"<div class='year_now'></div>"
			header[header.length] = 		"<div class='month_now'></div>"
			if(this.type != "calendar"){
				header[header.length] = 		"<div class='calendar_close'></div>"
			}
			header[header.length] = 		"<div class='next_year'></div>"
			header[header.length] = 		"<div class='next_month'></div>"
			header[header.length] = 	"</div>"
			header[header.length] = "</div>"
			this.header_bar = Y.Node.create(header.join(""))
			
			var content = [];
			content[content.length] = "<table>"
			content[content.length] = 	"<colgroup>"
			content[content.length] = 		"<col width='2%' class='total_week'>"
			content[content.length] = 		"<col width='14%'  class='weekend'>"
			content[content.length] = 		"<col width='14%'>"
			content[content.length] = 		"<col width='14%'>"
			content[content.length] = 		"<col width='14%'>"
			content[content.length] = 		"<col width='14%'>"
			content[content.length] = 		"<col width='14%'>"
			content[content.length] = 		"<col width='14%'  class='weekend'>"
			content[content.length] = 	"</colgroup>"
			content[content.length] = 	"<thead>"
			content[content.length] = 		"<tr>"
			content[content.length] = 			"<th>WK</th>"
			content[content.length] = 			"<th>Su</th>"
			content[content.length] = 			"<th>Mo</th>"
			content[content.length] = 			"<th>Tu</th>"
			content[content.length] = 			"<th>We</th>"
			content[content.length] = 			"<th>Th</th>"
			content[content.length] = 			"<th>Fr</th>"
			content[content.length] = 			"<th>Sa</th>"
			content[content.length] = 		"</tr>"
			content[content.length] = 	"</thead>"
			content[content.length] = "</table>"
			this.content_bar = Y.Node.create(content.join(""))
			
			var footer = [];
			footer[footer.length] = "<div class='calendar_bottom'>"
			footer[footer.length] = 	"<input type='button'  id='calendar_today_" + this.num + "' value='Today'></input>"
			footer[footer.length] = 	"<span class='select_date'></span>"
			footer[footer.length] = "</div>"
			this.footer_bar = Y.Node.create(footer.join(""))
			
			root_node.appendChild(this.header_bar)
			root_node.appendChild(this.content_bar)
			root_node.appendChild(this.footer_bar)
			Y.get('#' + this.parent_id).appendChild(root_node)
			
			//calendar button control
			var preYear = function(){root.setYear(root.pageYear - 1)}
			var nextYear = function(){root.setYear(root.pageYear + 1)}
			var preMonth = function(){
				if(root.pageMonth == 1){
					root.pageYear = root.pageYear - 1;
					root.setMonth(12)
				} else {
					root.setMonth(root.pageMonth - 1)
				}
			}
			
			var nextMonth = function(){
				if(root.pageMonth == 12){
					root.pageYear = root.pageYear + 1;
					root.setMonth(1);
				} else {
					root.setMonth(root.pageMonth + 1)
				}
			}
			
			var closeCalendar = function(){
				root.hideOverlay();
			}
			
			var reset = function(){
				root.reset();
			}
			if(this.header_bar.query(".pre_year")){
				this.header_bar.query(".pre_year").on("click", preYear);
			}
			if(this.header_bar.query(".pre_month")){
				this.header_bar.query(".pre_month").on("click", preMonth);
			}
			if(this.header_bar.query(".next_year")){
				this.header_bar.query(".next_year").on("click", nextYear);
			}
			if(this.header_bar.query(".next_month")){
				this.header_bar.query(".next_month").on("click", nextMonth);
			}
			if(this.type != "calendar"){
				this.header_bar.query(".calendar_close").on("click", closeCalendar);
			}
			this.footer_bar.query("#calendar_today_" + this.num).on("click", reset)
			this.setDate();
		}
	}
	
	Y.augment(Y.DatePicker, Y.Event.Target);
}, '0.0.2', {requires:['node', 'event', 'overlay']});