<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Datumpje-prik</title>
<script>
var today,periodStart,periodEnd,periodWeekStart,periodWeekEnd,periodLength,
    days,clicked,cantClick=false;

//Sorry. Prototypes are fun. Using dollars to at least separate these from the built-in methods.
Date.prototype.$dayOfWeek=function(){return (this.getDay()+6)%7;} //monday..sunday = 0..6
Date.prototype.$startOfDay=function(){return new Date(this-(((this.getHours()*60+this.getMinutes())*60+this.getSeconds())*1000+this.getMilliseconds()));}
Date.prototype.$addDays=function(n){return new Date(this.valueOf()+n*24*3600*1000);}
Date.prototype.$addWeeks=function(n){return new Date(this.valueOf()+n*7*24*3600*1000);}
Date.prototype.$naturalDate=function(){return this.getFullYear()+"-"+("00"+(this.getMonth()+1)).slice(-2)+"-"+("00"+this.getDate()).slice(-2);}

function diffDays(d1,d2){return ~~(Math.abs(d1-d2)/1000/3600/24);}

function localDateStringToDate(s){return new Date(s+"T00:00:00");}

function appendPath(s,p){
	if(s.length==0)return p;
	if(p.length==0)return s;
	if(s[s.length-1]=="/"){
		if(p[0]=="/")return s+p.slice(1);
		else return s+p;
	} else {
		if(p[0]=="/")return s+p;
		else return s+"/"+p;
	}
}

function setupCalendar(){
	var cal=document.getElementById("calendar"),
	    maxnum=Math.max.apply(null,days)+1,
	    startOffset=diffDays(periodWeekStart,periodStart),
	    tr,td,span,w,d,idx;
	cal.innerHTML="";
	tr=document.createElement("tr");
	for(d=0;d<7;d++){
		td=document.createElement("td");
		td.innerHTML=["mon","tue","wed","thu","fri","sat","sun"][d];
		tr.appendChild(td);
	}
	cal.appendChild(tr);
	for(w=0;w<~~(periodLength/7);w++){
		tr=document.createElement("tr");
		for(d=0;d<7;d++){
			td=document.createElement("td");
			if(7*w+d>=startOffset){
				idx=7*w+d-startOffset;
				span=document.createElement("span");
				span.classList.add("calendar-day-fillspan");
				span.setAttribute("style","width:"+(days[idx]+clicked[idx])/maxnum*100+"%");
				td.appendChild(span);
				span=document.createElement("span");
				span.classList.add("calendar-day-datelabel");
				span.appendChild(document.createTextNode(periodStart.$addDays(idx).$naturalDate()));
				td.appendChild(span);
				if(!cantClick&&!localStorage.getItem("hasSubmitted"))
					(function(idx){
						td.addEventListener("click",function(){
							clicked[idx]=!clicked[idx];
							setTimeout(setupCalendar,0);
						},false);
					})(idx);
			}
			tr.appendChild(td);
		}
		cal.appendChild(tr);
	}
	if(localStorage.getItem("hasSubmitted")){
		document.getElementById("status").innerHTML="You have already submitted!";
		document.getElementById("submitbtn").setAttribute("disabled","");
	} else {
		document.getElementById("status").style.display="none";
		document.getElementById("submitbtn").removeAttribute("disabled");
	}
}

function submitdays(){
	var xhr;
	cantClick=true;
	xhr=new XMLHttpRequest();
	xhr.addEventListener("readystatechange",function(ev){
		var result;
		if(this.readyState!=4)return;
		alert(this.responseText);
		result=JSON.parse(this.responseText);
		if(result==true){
			alert("Submitted successfully!");
			localStorage.setItem("hasSubmitted","true")
		} else alert("Error while submitting!");
	},false);
	xhr.open("POST",location.protocol+"//"+location.host+appendPath(location.pathname,"/adddays"));
	xhr.send(JSON.stringify(clicked));
}


(function(){
	var xhr;
	today=new Date().$startOfDay();
	xhr=new XMLHttpRequest();
	xhr.addEventListener("readystatechange",function(ev){
		var result;
		if(this.readyState!=4)return;
		result=JSON.parse(this.responseText);
		periodStart=new Date(localDateStringToDate(result["periodStart"]));
		periodEnd=new Date(localDateStringToDate(result["periodEnd"]));
		periodWeekStart=periodStart.$addDays(-periodStart.$dayOfWeek());
		periodWeekEnd=periodEnd.$addDays(6-periodEnd.$dayOfWeek());
		periodLength=diffDays(periodStart,periodEnd)+1;
		days=Array.apply(null,new Array(periodLength)).map(function(){return 0;});
		clicked=days.map(function(){return false;});
		setupCalendar();
	},false);
	xhr.open("GET",location.protocol+"//"+location.host+appendPath(location.pathname,"/dates"));
	xhr.send();

	xhr=new XMLHttpRequest();
	xhr.addEventListener("readystatechange",function(ev){
		var result;
		if(this.readyState!=4)return;
		days=JSON.parse(this.responseText);
		setupCalendar();
	},false);
	xhr.open("GET",location.protocol+"//"+location.host+appendPath(location.pathname,"/days"));
	xhr.send();
})();

window.addEventListener("load",function(){
	;
},false);
</script>
<style>
tbody#calendar > tr{
	height:40px;
}
tbody#calendar > tr > td{
	position:relative;
	width:80px;
	height:inherit;
	text-align:center;
	vertical-align:middle;
	border:1px #ddd solid;
}
.calendar-day-fillspan{
	display:inline-block;
	position:absolute;
	background-color:#6f6;
	opacity:40%;
	left:0;
	top:0;
	height:100%;
	z-index:-10000;
}
.calendar-day-datelabel{
	color:#888;
	font-size:8pt;
}
</style>
</head>
<body>
<div id="status"></div>
<table><tbody id="calendar"><tr><td>Loading...</td></tr></tbody></table>
<input id="submitbtn" type="button" onclick="submitdays()" value="Submit your days">
</body>
</html>