var wwCalDayLbls = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
var wwCalMonthLbls = ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
var wwCalMonthNums = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
var wwCalDayCt = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var currDate = new Date();
var dateFormat = "MM/dd/yyyy";

var wwPopupCal = null;
function popUpCalendar(ctrl, outputId, initialDate){
	if (!wwPopupCal) {
  	wwPopupCal = new wwCalendar(ctrl, outputId, initialDate);
  }
  else {
		wwPopupCal.show(ctrl, outputId, initialDate);
  }
}

function wwCalendar(ctrlIn, outputIdIn, initialDateIn, params){
	var ctrl = ctrlIn;
	var outputId = outputIdIn;
	var initialDate = initialDateIn
	var parsedDate = parseDate();
	this.day = parsedDate.day;
	var defaultDay = parsedDate.day;
	this.month = parsedDate.month;
	var defaultMonth = parsedDate.month;
	this.year = parsedDate.year;
	var defaultYear = parsedDate.year;
	this.delimiter = parsedDate.delim;
	var container = null;
	var paramList = new Object();
	var selectedDate = null;
	
	function parseParameters(pList){
			paramList.cDisplay = (pList && pList.onCloseDisplay != "undefined") ? params.onCloseDisplay : "none";
	}
	
	this.show = function(ctrlIn, outputIdIn, initialDateIn, parameters){
		ctrl = ctrlIn;
		outputId = outputIdIn;
		initialDate = initialDateIn
		parsedDate = parseDate();
		this.day = parsedDate.day;
		defaultDay = parsedDate.day;
		this.month = parsedDate.month;
		defaultMonth = parsedDate.month;
		this.year = parsedDate.year;
		defaultYear = parsedDate.year;
		this.delimiter = parsedDate.delim;
		var selectedDate = null;
		container.style.display = "block";
		parseParameters(parameters);
		this.generateHTML(this.day, this.month, this.year);
		positionCalendar();
	}
	
	function positionCalendar(){
		if (ctrl != null && ctrl != "") {
			var currLeft = currTop = 0;
			var tmpObj = ctrl;
			if (tmpObj.offsetParent) {
				do {
					currLeft += tmpObj.offsetLeft;
					currTop += tmpObj.offsetTop;
				}
				while (tmpObj = tmpObj.offsetParent)
			} 
			container.style.left = currLeft + "px";
			container.style.top = (currTop + ctrl.offsetHeight) + "px";
		}
	};

	function parseDate(){
		if (initialDate == null || initialDate == "") {
			this.day = currDate.getDate();
			this.month = currDate.getMonth();
			this.year = currDate.getFullYear();
		}
		else {
			//getting delimiter
			var delimiter = "";
			for (var i = 0; i < dateFormat.length; i++) {
		  	if (dateFormat.charAt(i) != 'M' && dateFormat.charAt(i) != 'd' && dateFormat.charAt(i) != 'y') {
		  		delimiter = dateFormat.charAt(i);
					break;
		  	}
		  }
			
			//getting date
			var wwDateArray = initialDate.split(delimiter);
			var wwDateFormatArray = dateFormat.split(delimiter);
			
			for(var i=0; i<wwDateFormatArray.length; i++){
				switch(wwDateFormatArray[i].charAt(0)){
					case 'd':
						this.day = parseInt(wwDateArray[i], 10);
						break;
					case 'M':
						this.month = parseInt(wwDateArray[i], 10);
						this.month--;
						break;
					case 'y':
						//get full year from short year
						if(wwDateFormatArray[i].length == 2)
							this.year = ("20" + wwDateArray[i]);
						else
							this.year = wwDateArray[i];
						break;
				}
			}
		}
		return {day: this.day, month: this.month, year: this.year, delim: delimiter};
	};
	

	this.generateHTML = function(day, month, year){
		//getting first day of month
		var dayOne = new Date(year, month, 1);
		//getting week day of first day of month
		var weekDay = dayOne.getDay();
		//getting # of days in month
		var monthLength = (32 - new Date(year, month, 32).getDate());
		var monthName = wwCalMonthLbls[month];
		
		//create container
		if (container == null) {
			container = document.createElement("div");
			container.className = "wwCalendarContainer";
			document.body.appendChild(container);
		}
		else {
			while (container.firstChild) { container.removeChild(container.firstChild); }
		}
		
		//create header
		var headerTbl = document.createElement("table");
		headerTbl.className = "wwCalendarHeader";
		var headerRow = headerTbl.insertRow(0);
		var backYear = headerRow.insertCell(0);
		backYear.style.cursor = "pointer";
		backYear.generateHTML = this.generateHTML;
		backYear.onclick = function(){
			year--;
			this.generateHTML(day, month, year);
		}
		backYear.appendChild(document.createTextNode("<<"));
		var backMonth = headerRow.insertCell(1);
		backMonth.style.cursor = "pointer";
		backMonth.generateHTML = this.generateHTML;
		backMonth.onclick = function(){
			if(month == 0)
				month = 11;
			else
				month--;
			this.generateHTML(day, month, year);
		}
		backMonth.appendChild(document.createTextNode("<"));
		var monthTitle = headerRow.insertCell(2);
		monthTitle.style.cursor = "default";
		monthTitle.appendChild(document.createTextNode(wwCalMonthLbls[month] + " " + year));
		var forwardMonth = headerRow.insertCell(3);
		forwardMonth.style.cursor = "pointer";
		forwardMonth.generateHTML = this.generateHTML;
		forwardMonth.onclick = function(){
			if(month == 11)
				month = 0;
			else
				month++;
			this.generateHTML(day, month, year);
		}
		forwardMonth.appendChild(document.createTextNode(">"));
		var forwardYear = headerRow.insertCell(4);
		forwardYear.style.cursor = "pointer";
		forwardYear.generateHTML = this.generateHTML;
		forwardYear.onclick = function(){
			year++;
			this.generateHTML(day, month, year);
		}
		forwardYear.appendChild(document.createTextNode(">>"));
		
		//create days of week
		var mainTbl = document.createElement("table");
		mainTbl.className = "wwCalendarContent";
		var row1 = mainTbl.insertRow(0);
		for(var i=0; i<wwCalDayLbls.length; i++){
			var newCell = row1.insertCell(i);
			newCell.style.cursor = "default";
			newCell.appendChild(document.createTextNode(wwCalDayLbls[i]));
		}
		
		//create main calendar
		var dayCt = 1;
		var sentinel = true;
		var dayRow = new Array();
		//for weeks
		for(var i=0; sentinel; i++){
			dayRow[i] = mainTbl.insertRow(i + 1);
			//for days
			for(var j=0; j<7; j++){
				var newCell = dayRow[i].insertCell(j);
				if(dayCt <= monthLength && (i > 0 || j >= weekDay)){
					if(month == currDate.getMonth() && year == currDate.getFullYear() && dayCt == currDate.getDate())
						newCell.className = "wwCalendarToday";
					if(dayCt == defaultDay && month == defaultMonth && year == defaultYear)
						newCell.className = "wwCalendarDefault";
					newCell.style.cursor = "pointer";
					newCell.onmouseover = function(){
						this.className += " wwCalendarHover";
					}
					newCell.onmouseout = function(){
						this.className = this.className.replace('wwCalendarHover', '');
					}
					newCell.month = month;
					newCell.year = year;
					newCell.container = container;
					newCell.display = paramList.cDisplay;
					// formatting date correctly & outputting it to field.
					newCell.onclick = function(){
						//getting delimiter
						var delimiter = "";
						for (var i = 0; i < dateFormat.length; i++) {
					  	if (dateFormat.charAt(i) != 'M' && dateFormat.charAt(i) != 'd' && dateFormat.charAt(i) != 'y') {
					  		delimiter = dateFormat.charAt(i);
								break;
					  	}
					  }
						
						var day = "";
						day = (this.firstChild.nodeValue.length == 1) ? "0" + this.firstChild.nodeValue : this.firstChild.nodeValue;
						
						//getting date
						var dateString = "";
						var wwDateFormatArray = dateFormat.split(delimiter);
						for(var i = 0; i < wwDateFormatArray.length; i++){
							switch(wwDateFormatArray[i].charAt(0)){
								case 'd':
									dateString += day;
									break;
								case 'M':
									dateString += wwCalMonthNums[this.month];
									break;
								case 'y':
									if (wwDateFormatArray[i].length == 2) {
										var newYear = (parseInt(this.year) - 2000);
										newYear = (newYear < 10) ? ("0" + newYear) : newYear;
								  	dateString += newYear;
								  }
								  else 
								  	dateString += this.year;
									break;
							}
							dateString += delimiter;
						}
						dateString = dateString.substr(0, dateString.length - 1);
						document.getElementById(outputId).value = dateString;
						if(selectedDate){
							selectedDate.className = selectedDate.className.replace('wwCalendarSelected', '');
						}
						selectedDate = this;
						this.className += " wwCalendarSelected";
						this.container.style.display = this.display;
					}
					newCell.appendChild(document.createTextNode(dayCt++));
				} else {
					newCell.style.cursor = "default";
				}
			}
			if(dayCt > monthLength)
				sentinel = false;
		}
		
		//create footer
		var footer = document.createElement("div");
		footer.className = "wwCalendarFooter";
		footer.style.cursor = "pointer";
		footer.generateHTML = this.generateHTML;
		footer.onclick = function(){
			this.generateHTML(currDate.getDate(), currDate.getMonth(), currDate.getFullYear());
		}
		footer.appendChild(document.createTextNode(currDate.toDateString()));
		
		//create clear button
		var clearBtn = document.createElement("div");
		clearBtn.className = "wwCalendarClear";
		clearBtn.style.cursor = "pointer";
		clearBtn.appendChild(document.createTextNode("Clear"));
		clearBtn.container = container;
		clearBtn.display = paramList.cDisplay;
		clearBtn.onclick = function(){
			document.getElementById(outputId).value = "";
			this.container.style.display = this.display;
		}
		
		headerTbl.onmouseover = function(){ container.style.display = "block"; };
		mainTbl.onmouseover = function(){ container.style.display = "block"; };
		footer.onmouseover = function(){ container.style.display = "block"; };
		clearBtn.onmouseover = function(){ container.style.display = "block"; };
		container.display = paramList.cDisplay;
		container.onmouseout = function(){ container.style.display = this.display;	};
		
		//append to container
		container.appendChild(headerTbl);
		container.appendChild(mainTbl);
		container.appendChild(footer);
		container.appendChild(clearBtn);
		container.style.display = "block";
	};
	
	parseParameters(params);
	this.generateHTML(this.day, this.month, this.year);
  positionCalendar();
}


/****************** Time Picker ***********************/
//time format is either 12 hour or 24 hour
var timeFormat = 12;

var timePicker = null;
function popUpClock(ctrl, outputId){
	if(timePicker == null)
		timePicker = new wwTimePicker(ctrl, outputId);
	else
		timePicker.show(ctrl, outputId);
}

function wwTimePicker(ctrlIn, outputIdIn){
	var ctrl = ctrlIn;
	var outputId = outputIdIn;
	var container = null;
	
	this.show = function(showCtrl, showOutputId){
		ctrl = showCtrl;
		outputId = showOutputId;
		renderHTML();
		positionTime();
	}
	
	function positionTime(){
		var currLeft = currTop = 0;
		var tmpObj = ctrl;
		if (tmpObj.offsetParent) {
			do {
				currLeft += tmpObj.offsetLeft;
				currTop += tmpObj.offsetTop;
			}
			while (tmpObj = tmpObj.offsetParent)
		}
		container.style.left = currLeft + "px";
		container.style.top = (currTop + ctrl.offsetHeight) + "px";
	};
	
	function renderHTML(){
		if(container == null){
			container = document.createElement("div");
			container.className = "wwTimeContainer";
			document.getElementsByTagName("body").item(0).appendChild(container);
		} else {
			container.removeChild(container.firstChild);
			container.removeChild(container.firstChild);
			container.removeChild(container.firstChild);
			container.removeChild(container.firstChild);
		}
		
		//hours
		var hourSelect = document.createElement("select");
		hourSelect.id = "wwTimeHour";
		for(var i=1; i<=timeFormat; i++){
			hourSelect[i - 1] = new Option(i, i);
		}
		container.appendChild(hourSelect);
		
		//minutes
		var minuteSelect = document.createElement("select");
		minuteSelect.id = "wwTimeMinute";
		for(var i=0; i<60; i++){
			minuteSelect[i] = new Option((i<10)?"0"+i:i, (i<10)?"0"+i:i);
		}
		container.appendChild(minuteSelect);
		
		//if 12 hour am pm
		if(timeFormat == 12){
			var amPmSelect = document.createElement("select")
			amPmSelect.id = "wwTimeAmPm";
			amPmSelect[0] = new Option("am", "am");
			amPmSelect[1] = new Option("pm", "pm");
			container.appendChild(amPmSelect);
		}
		
		var okButton = document.createElement("input");
		okButton.setAttribute("type", "button");
		okButton.setAttribute("value", "OK");
		okButton.container = container;
		okButton.onclick = function(){
			var timeOut = hourSelect.value + ":" + minuteSelect.value;
			timeOut += (timeFormat == 12) ? " " + amPmSelect.value : "";
			document.getElementById(outputId).value = timeOut;
			this.container.style.display = "none";
		};
		container.appendChild(okButton);
		container.style.display = "block";
	};
	
	renderHTML();
	positionTime();
}