document.addEventListener('DOMContentLoaded', function() {
	getData("donation.json");
})

function getData(file)
{
		var rawFile = new XMLHttpRequest();
		rawFile.open("GET", file, false);
		rawFile.onreadystatechange = function (){
        		if(rawFile.readyState === 4)
        		{
            			if(rawFile.status === 200 || rawFile.status == 0)
            			{
					//var allText = rawFile.responseText;
                			displayDataInDocument(rawFile.responseText);
            			}
        		}
    		}
    		rawFile.send(null);
}

function displayDataInDocument(data){
	var donation = JSON.parse(data);
	var donation_array = Object.keys(donation);
	var donation_count = donation_array.length-1;
	var donation_period = '';
	var percent = 0;

	for(var i = 0; i <= donation_count; i++){

		if(donation[donation_array[i]]["duration"] == "month"){
			dateOfDay = new Date();
		        numberOfDay = dateOfDay.getDate();
        		numberOfMonth = dateOfDay.getMonth()+1;
        		numberOfYear = dateOfDay.getFullYear();

			var day_count = daysInMonth(numberOfMonth,numberOfYear) - numberOfDay;
		}
		else if(donation[donation_array[i]]["duration"] == "year"){
			var oneDay = 24*60*60*1000;

			dateOfDay = new Date();
			nextYear = dateOfDay.getFullYear()+1;

			nextDate = new Date(nextYear, 0, 1);
			var day_count = Math.round(Math.abs((dateOfDay.getTime() - nextDate.getTime())/(oneDay)));
		}

		percent = donation[donation_array[i]]["amount"] / donation[donation_array[i]]["amount_required"] * 100;
		donation_period = document.getElementsByClassName(donation_array[i])[0];
		donation_period.getElementsByClassName("title")[0].innerHTML = donation[donation_array[i]]["title"];
        	donation_period.getElementsByClassName("amount")[0].getElementsByTagName("span")[0].innerHTML = donation[donation_array[i]]["amount"];
        	donation_period.getElementsByClassName("amount_required")[0].getElementsByTagName("span")[0].innerHTML = donation[donation_array[i]]["amount_required"];
        	donation_period.getElementsByClassName("donator")[0].innerHTML = donation[donation_array[i]]["donator"];
       		donation_period.getElementsByClassName("day_count")[0].innerHTML = day_count;
        	donation_period.getElementsByClassName("status_bar")[0].style.width=percent+"%";
	}

}

function daysInMonth (month, year) {
	return new Date(year, month, 0).getDate();
}