function drawBackgroundCircles(){



	  var secondBackground = document.getElementById("second-background");
	 // alert(secondBackground);
	var minuteBackground = document.getElementById("minute-background");
	//alert(minuteBackground);
	var hourBackground = document.getElementById("hour-background");
	//alert(hourBackground);
	var dayBackground = document.getElementById("day-background");
	//alert(dayBackground);
	var strokeColor = '#fbfbfb';
	  drawCircle(secondBackground, 1, strokeColor, 16);

	 drawCircle(minuteBackground, 1, strokeColor, 16);

	  drawCircle(hourBackground,  1, strokeColor, 16);

	  drawCircle(dayBackground, 1, strokeColor, 16);
}

function drawCircle(canvas, endPercentage, strokeColor, lineWidth){
	var endRadians = endPercentage * (2 * Math.PI);
	var x = canvas.width / 2;
	var y = canvas.height / 2;
	context = canvas.getContext('2d');
	context.clearRect(0, 0, canvas.width,canvas.height);
	context.beginPath();
	if(endPercentage == 1){
		context.arc(x, y, 65, 0, 2*Math.PI);
	}
	else{
		context.arc(x, y, 65, 2 * Math.PI, endRadians);
	}
	if(strokeColor){
		context.strokeStyle=strokeColor;
	}
	else{
		context.strokeStyle="#282828";
	}
	if(lineWidth){
		context.lineWidth=lineWidth;
	}
	else{
		context.lineWidth = 10;
	}
	context.stroke();
}


function createTimer(targetDate) {
    today  = new Date();
    todayEpoch  = today.getTime();

    target = new Date(targetDate);
    targetEpoch = target.getTime();

    totalSeconds = (targetEpoch - todayEpoch)/1000; // get difference and convert to seconds
	window.requestAnimFrame = (function(callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
          window.setTimeout(callback, 1000);
        };
      })();
	  drawBackgroundCircles();
    updateTimer(true);
	setInterval(function(){totalSeconds -=1; updateTimer()}, 1000);

}



function leadingZero(time) {
    return (time < 10) ? "0" + time : time;
}

function updateTimer(firstUpdate) {
    var seconds = totalSeconds;

    var days = Math.floor(seconds / 86400);
    seconds -= days * 86400;

    var hours = Math.floor(seconds / 3600);
   seconds -= hours * (3600);

    var minutes = Math.floor(seconds / 60);
    seconds -= minutes * (60);

   seconds = Math.floor(seconds);
	var numSecLeftDiv = document.getElementById("num-sec-left");
	secondsPercentage= (seconds / 60);
	var secondsCanvas = document.getElementById("second-timer");
	drawCircle(secondsCanvas, secondsPercentage);
	if(seconds == 1){
		numSecLeftDiv.innerHTML = seconds + "<br/><span class='time-label'>second</span>";
	}
	else{
		numSecLeftDiv.innerHTML = seconds + "<br/><span class='time-label'>seconds</span>";
	}

	if(seconds <= 0 || firstUpdate == true){
		var numMinLeftDiv = document.getElementById("num-min-left");
		minutesPercentage= (minutes / 60);
		var minutesCanvas = document.getElementById("minute-timer");
		drawCircle(minutesCanvas, minutesPercentage);
		if(minutes==1){
			numMinLeftDiv.innerHTML = minutes + "<br/><span class='time-label'>minute</span>";
		}
		else{
			numMinLeftDiv.innerHTML = minutes + "<br/><span class='time-label'>minutes</span>";
		}
	}

	if(minutes <= 0 || firstUpdate == true){
		var numHoursLeftDiv = document.getElementById("num-hours-left");
		hoursPercentage= (hours / 24);
		var hoursCanvas = document.getElementById("hour-timer");
		drawCircle(hoursCanvas, hoursPercentage);
		if(hours == 1){
			numHoursLeftDiv.innerHTML = hours + "<br/><span class='time-label'>hour</span>";
		}
		else{
			numHoursLeftDiv.innerHTML = hours + "<br/><span class='time-label'>hours</span>";
		}
	}

	if(hours <= 0 || firstUpdate == true){
var numDaysLeftDiv = document.getElementById("num-days-left");
		daysPercentage= (days / 365);
		var daysCanvas = document.getElementById("day-timer");
		drawCircle(daysCanvas, daysPercentage);
		if(days ==1 ){
			numDaysLeftDiv.innerHTML = days + "<br/><span class='time-label'>day</span>";
		}
		else{
		numDaysLeftDiv.innerHTML = days + "<br/><span class='time-label'>days</span>";
		}
	}

}// JavaScript Document