var Geometry = {};

Geometry.getX = function(e) {
	var x = 0;
	while (e) {
		x += e.offsetLeft;;
		e = e.offsetParent;
	}
	return x;
}

Geometry.getY = function(e) {
	var y = 0;
	while (e) {
		y += e.offsetTop;
		e = e.offsetParent;
	}
	return y;
}

var dateComponent = {};

dateComponent.input = null;
dateComponent.container = null;

dateComponent.year = new Date().getFullYear();
dateComponent.month = new Date().getMonth();

dateComponent.weekdays = ["M","T","O","T","F","L","S"];
dateComponent.months = ["Januari","Februari","Mars","April","Maj","Juni","Juli","Augusti","September","Oktober","November","December"];
dateComponent.length = [31,28,31,30,31,30,31,31,30,31,30,31];

dateComponent.getRealDay = function(day) {
	if (day == 0) {
		return 6;
	}

	return day - 1;
}

dateComponent.isLeapYear = function(yr) {
	return new Date(yr,2-1,29).getDate()==29;
}

dateComponent.pad = function(nr) {
	if (nr < 10) {
		nr = "0" + nr + "";
	}
	return nr;
}

dateComponent.init = function() {
	var inputs = document.getElementsByTagName('input');

	for (var i = 0; i < inputs.length; i++) {
		
		if (inputs[i].className.split(" ")[0] == 'date') {
			
			var button = document.createElement('a');
			button.href = 'javascript:void(0)';
			button.onclick = dateComponent.popup;
			button.className = "dateButton";
			
			var textContainer = document.createElement('span');
			textContainer.appendChild(document.createTextNode('Choose'));
			
			button.appendChild(textContainer);
			
			inputs[i].parentNode.insertBefore(button, inputs[i].nextSibling);
		}
		
	}
}

dateComponent.popup = function(e) {
	if (dateComponent.container == null) {
		dateComponent.display(this);
		dateComponent.input = this.previousSibling;
	} else {
		dateComponent.hide(this);
		if (this.previousSibling != dateComponent.input) {
			dateComponent.display(this);	
			dateComponent.input = this.previousSibling;
		}
	}
}

dateComponent.display = function(el) {
	var container = document.createElement('div');
	container.id = "dateContainer";
	
	container.style.left = (Geometry.getX(el) + el.offsetWidth) + 'px';
	container.style.top = Geometry.getY(el) + 'px';

	var label = document.createElement("div");
	label.id = "dateLabel";
	label.appendChild(document.createTextNode(dateComponent.months[dateComponent.month] + " " + dateComponent.year));
	
	container.appendChild(label);
	
	var table = dateComponent.getTable();
	table.id = "dateTable";
	container.appendChild(table);
		
	document.body.appendChild(container);
	
	dateComponent.container = container;
}

dateComponent.hide = function(el) {
	document.body.removeChild(dateComponent.container);
	dateComponent.container = null;
}

dateComponent.previousMonth = function() {
	if (dateComponent.month == 0) {
		dateComponent.year = dateComponent.year - 1;
		dateComponent.month = 11;
	} else {
		dateComponent.month--;
	}
	
	dateComponent.update();
}

dateComponent.nextMonth = function() {
	if (dateComponent.month == 11) {
		dateComponent.year = dateComponent.year + 1;
		dateComponent.month = 0;
	} else {
		dateComponent.month++;
	}
	
	dateComponent.update();			
}

dateComponent.update = function() {
	var table = document.getElementById("dateTable");
	var newTable = dateComponent.getTable();
	table.parentNode.insertBefore(newTable, table);
	table.parentNode.removeChild(table);
	newTable.id = "dateTable";
	
	var label = document.getElementById("dateLabel");
	label.firstChild.nodeValue = dateComponent.months[dateComponent.month] + " " + dateComponent.year;
}

dateComponent.getTable = function() {
	var table = document.createElement('table');
	
	var date = new Date(dateComponent.year, dateComponent.month, 1);

	var days = (new Date(dateComponent.year, dateComponent.month + 1, 0)).getDate();
	var day = 1;
	var start = false;

	var rowNo = 0;
	var row = table.insertRow(rowNo++);
	for (var i = 0; i < 7; i++) {
		var cell = row.insertCell(row.cells.length);
		cell.className = 'weekday';
		cell.appendChild(document.createTextNode(dateComponent.weekdays[i]));
	}

	var row = table.insertRow(rowNo++);
	
	var pad = dateComponent.getRealDay(date.getDay());

	for (var i = 0; i < pad; i++) {
		var cell = row.insertCell(row.cells.length);
		cell.innerHTML = "&nbsp;";
	}
	
	while (day <= days) {
		date.setDate(day);
		
		if (dateComponent.getRealDay(date.getDay()) == 0) {
			var row = table.insertRow(rowNo++);
		}
		
		var cell = row.insertCell(row.cells.length);
		cell.appendChild(document.createTextNode(day));
		
		cell.onmouseover = function(e) {
			this.className = 'hover';
		}
		
		cell.onmouseout = function(e) {
			this.className = '';
		}
		
		cell.onclick = function(e) {
			dateComponent.input.value = dateComponent.year + "-" + dateComponent.pad(dateComponent.month+1) + "-" + dateComponent.pad(this.firstChild.nodeValue);
			dateComponent.hide(null);
		}
		
		day++;
	}
	
	var row = table.insertRow(rowNo++);
	
	var prevCell = row.insertCell(0);
	
		prevCell.colSpan = "3";
		prevCell.className = "prevCell";
	
		var prev = document.createElement('a');
		prev.href = 'javascript:void(0)';
		prev.onclick = dateComponent.previousMonth;
		prev.appendChild(document.createTextNode("<"));
	
	prevCell.appendChild(prev);
	
	var nextCell = row.insertCell(1);
	
		nextCell.colSpan = "4";
		nextCell.className = "nextCell";

		var next = document.createElement('a');
		next.href = 'javascript:void(0)';
		next.onclick = dateComponent.nextMonth;
		next.appendChild(document.createTextNode(">"));
	
	nextCell.appendChild(next);
	
	return table;
}

window.onload = dateComponent.init;