/*
 * Event functions.
 * Description: Add eventlisteners to DOM elements to enforce unobtrusive js.
 */
function addEvent(obj, evType, fn, useCapture) {
	useCapture = useCapture || false;
	
	if (obj.addEventListener) {
		obj.addEventListener(evType, fn, useCapture);
		return true;
	} else if (obj.attachEvent) {
		obj["e" + evType + fn] = fn;
		obj[evType + fn] = function () { obj["e" + evType + fn](window.event); };
		var r = obj.attachEvent("on" + evType, obj[evType + fn]);
		return r;
	} else {
		obj["on" + evType] = fn;
		return true;
	}
}

function removeEvent(obj, evType, fn) {
	if (obj.detachEvent) {
		obj.detachEvent("on" + evType, obj[evType + fn]);
		obj[evType + fn] = null;
	} else {
		obj.removeEventListener(evType, fn, false);
	}
}

function addLoadEvent(f) {
	var oldOnload = window.onload;
	
	if (typeof window.onload !== "function") {
		window.onload = f;
	}
	else {
		window.onload = function () {
			oldOnload();
			f();
		};
	}
}

function cancelEvent(e) {
	var evt = e || window.event;
	
	evt.cancelBubble = true;
	evt.returnValue = false;
	
	if (evt.stopPropagation) {
		evt.stopPropagation();
		evt.preventDefault();
	}
	
	return false;
}

/*
 * IE Compatiblity.
 */
if (!Array.prototype.indexOf) {
	Array.prototype.indexOf = function(elt /*, from*/) {
		var len = this.length;
		var from = Number(arguments[1]) || 0;

		from = (from < 0) ? Math.ceil(from) : Math.floor(from);

		if (from < 0) {
			from += len;
		}

		for (; from < len; from++) {
			if (from in this && this[from] === elt) {
				return from;
			}
		}

		return -1;
	};
}

/* Easing functions.
 * t: Current time (ms)
 * b: Beginning value
 * c: Change in value
 * d: Duration (ms)
 */
function easeInOutSine(t, b, c, d) {
	return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
}

/* Add datepicker functionality when the DOM is loaded. */
function animatePicker(elPicker, iTime) {
	var
		iFps			= 30,								// Frames per second for the animation.
		iFrameInterval	= 1000 / iFps,						// The time per frame in ms.
		iDxMax			= elPicker.offsetWidth,				// The distance (x) to move in pixels.
		iDyMax			= elPicker.offsetHeight,			// The distance (y) to move in pixels.
		iFrame			= 0,								// Reset current frame counter.
		iFrames			= Math.ceil(iTime / 1000 * iFps),	// Number of frames the animation will run.
		iDx,
		iDy,
		oTimer;
		
	if (elPicker.style.display === "block") {
		// Set element height to 0 and increase it gradually with an interval.
		elPicker.setAttribute("style", "display: block; clip: rect(auto 0px 0px auto);");
	
		// Increase the element's dimensions until the full dimensions are reached.
		oTimer = setInterval(function () {
			// Calculate the distance to move in this frame interval.
			iDx	= easeInOutSine(iFrameInterval * ++iFrame, 0, iDxMax, iTime);
			iDy = easeInOutSine(iFrameInterval * ++iFrame, 0, iDyMax, iTime);
		
			elPicker.setAttribute("style", "display: block; clip: rect(auto " + iDx + "px " + iDy + "px auto);");
				
			if (iFrame === iFrames) {
				// Animation completed, stop interval.
				clearInterval(oTimer);
				//elPicker.style.clip = "rect(auto auto auto auto)"; //"rect(auto " + iDxMax + "px " + iDyMax + "px auto)";
				elPicker.setAttribute("style", "display: block;");
			}
		}, iFrameInterval);
	} else {
		// Element is hidden, stop running timers.
		clearInterval(oTimer);
	}
}

addLoadEvent(function () {
	var
		elDatePicker	= document.getElementById("datePickerFields"),
		elDay			= document.getElementById("datePickerDay"),
		elMonth			= document.getElementById("datePickerMonth"),
		elMonthName		= document.getElementById("datePickerMonthName"),
		elYear			= document.getElementById("datePickerYear"),
		elDate			= document.getElementById("sDatePicked"),
		elDayPicker		= document.createElement("div"),
		elMonthPicker	= document.createElement("div"),
		elYearPicker	= document.createElement("div"),
		iYear			= (new Date()).getFullYear(),
		aMonthName		= [
			"Januari",
			"Februari",
			"Maart",
			"April",
			"Mei",
			"Juni",
			"Juli",
			"Augustus",
			"September",
			"Oktober",
			"November",
			"December"],
		elItem,
		i;

	// Disable manual input.
	elDay.readOnly				= true;
	elMonthName.readOnly		= true;
	elYear.readOnly				= true;
	
	// Set some styling for usability.
	elDay.style.cursor			= "pointer";
	elMonthName.style.cursor	= "pointer";
	elYear.style.cursor			= "pointer";
	
	elDayPicker.className		= "datePickerFieldsDay"
	elMonthPicker.className		= "datePickerFieldsMonth";
	elYearPicker.className		= "datePickerFieldsYear";
	
	// Generate day picker.
	for (i = 1; i <= 31; i++) {
		elItem				= document.createElement("div");
		elItem.className	= "datePickerItemDay";
		elItem.innerHTML	= i;
		
		// Add click event for each option.
		addEvent(elItem, "click", function (e) {
			elDay.value					= this.innerHTML;
			elDayPicker.style.display	= "none";
			elDate.value				= elDay.value + "-" + elMonth.value + "-" + elYear.value;
		});
		
		elDayPicker.appendChild(elItem);
	}

	// Add clear div to fix parent's height.
	elItem				= document.createElement("div");
	elItem.style.clear = "both";
	elDayPicker.appendChild(elItem);
	
	// Generate month picker.
	for (i = 0; i < 12; i++) {
		elItem				= document.createElement("div");
		elItem.className	= "datePickerItemMonth";
		elItem.innerHTML	= aMonthName[i];
		
		// Add click event for each option.
		addEvent(elItem, "click", function (e) {
			elMonth.value				= aMonthName.indexOf(this.innerHTML) + 1;
			elMonthName.value			= this.innerHTML;
			elMonthPicker.style.display	= "none";
			elDate.value				= elDay.value + "-" + elMonth.value + "-" + elYear.value;
		});
		
		elMonthPicker.appendChild(elItem);
	}
	
	// Add clear div to fix parent's height.
	elItem				= document.createElement("div");
	elItem.style.clear = "both";
	elMonthPicker.appendChild(elItem);
	
	// Generate year picker.
	for (i = iYear; i > iYear - 196; i--) {
		elItem				= document.createElement("div");
		elItem.className	= "datePickerItemYear";
		elItem.innerHTML	= i;
		
		// Add click event for each option.
		addEvent(elItem, "click", function (e) {
			elYear.value				= this.innerHTML;
			elYearPicker.style.display	= "none";
			elDate.value				= elDay.value + "-" + elMonth.value + "-" + elYear.value;
		});
		
		elYearPicker.appendChild(elItem);
	}
	
	// Add clear div to fix parent's height.
	elItem				= document.createElement("div");
	elItem.style.clear = "both";
	elYearPicker.appendChild(elItem);
	
	// Add the pickers to the container element.
	elDatePicker.appendChild(elDayPicker);
	elDatePicker.appendChild(elMonthPicker);
	elDatePicker.appendChild(elYearPicker);

	// Add event handling to the input fields.
	addEvent(elDay, "click", function (e) {
		elDayPicker.style.display	= elDayPicker.style.display === "block" ? "none" : "block";
		elMonthPicker.style.display	= "none";
		elYearPicker.style.display	= "none";
		
		animatePicker(elDayPicker, 400);
	});
	
	addEvent(elMonthName, "click", function (e) {
		elDayPicker.style.display	= "none";
		elMonthPicker.style.display	= elMonthPicker.style.display === "block" ? "none" : "block";
		elYearPicker.style.display	= "none";

		animatePicker(elMonthPicker, 400);
	});
	
	addEvent(elYear, "click", function (e) {
		elDayPicker.style.display	= "none";
		elMonthPicker.style.display	= "none";
		elYearPicker.style.display	= elYearPicker.style.display === "block" ? "none" : "block";
		
		animatePicker(elYearPicker, 400);
	});
});