/*
		CSS3 Clocks Tutorial
		--------------------
		Javascript gets and sets the time and date
	*/
	
	months = new Array("JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC");
	day = 1
	month = 0;
	
	shownday = 1;
	shownmonth = 0;
	var t; // setInterval variable
		
	$(document).ready(function(){
		// When the page has loaded...
	
		// Set the time - it won't update until the calendar reaches the right
		// date, but it would look odd having all the hands point to 12...
		setTime();
	
		// Get the current date and time
	    d = new Date();

		// Get the current date
		day = d.getDate();
		month = d.getMonth();

		// Set the calendar to the right date
		t = setInterval("flipcalendar()",800);
	});
	
	function setTime() {
		// Get the current date and time
	    d = new Date();
			
		// Get the hours
        h = d.getHours();
        if(h > 12) h = h - 12;
		
		// Get the minutes
        m = d.getMinutes();
		
		// Get the seconds
        s = d.getSeconds();
	
		// How much does each second, minute or hour represent in degrees?	
		mdelta = 6; // 360 degrees divided by 60 mins/secs = 6 degrees 
		hdelta = 30; // 360 degrees divided by 12 hours = 30 degrees

		// The hour hand should have an extra number of degrees for the minutes 
        hextra = (m/60)*30;
	
		// Finally, set the images to rotate to correct position for start
		
		// NOTE: we don't rotate the div here - which the transition is applied to
        $('.secondhand img').css({webkitTransform: 'rotate('+mdelta*s+'deg)',MozTransform: 'rotate('+mdelta*s+'deg)',OTransform: 'rotate('+mdelta*s+'deg)',transform: 'rotate('+mdelta*s+'deg)'});
        $('.minutehand img').css({webkitTransform: 'rotate('+mdelta*m+'deg)',MozTransform: 'rotate('+mdelta*m+'deg)',OTransform: 'rotate('+mdelta*m+'deg)',transform: 'rotate('+mdelta*m+'deg)'});
        $('.hourhand img').css({webkitTransform: 'rotate('+((hdelta*h)+hextra)+'deg)',OTransform: 'rotate('+((hdelta*h)+hextra)+'deg)',MozTransform: 'rotate('+((hdelta*h)+hextra)+'deg)',transform: 'rotate('+((hdelta*h)+hextra)+'deg)'});
	}
	
	

	function flipcalendar() {
		doanimation = false;
		setTime();
		if (month>shownmonth) {
			doanimation = true;
			shownmonth = shownmonth+1;
		} else {
			$(".calendar-flip .calendar-month").css({visibility:"hidden"});
		}
		if (day>shownday){
			doanimation = true;
			shownday = shownday+1;
		} else {
			$(".calendar-flip .calendar-day").css({visibility:"hidden"});			
		}
		if (!doanimation) {
			// We've arrived at the right date, so...
			
			// Set the time, and set the clock running
			$("#clock").addClass("running");
			clearInterval(t);
			if ($.browser.msie) {
				t = setInterval("setTime()",1000);
			} 
			return false;
		}
		$(".calendar-top .calendar-month").text(months[shownmonth]);
		$(".calendar-top .calendar-day").text(shownday);
		$(".calendar-flip").addClass("fliptop");
		$(".calendar-flip .calendar-month").animate({opacity:1},100,function(){
			$(".calendar-flip").css({top:8});
			$(".calendar-flip .calendar-month").text(months[shownmonth]);	
			$(".calendar-flip .calendar-day").text(shownday);
			$(".calendar-flip").addClass("flipbottom");
			$(".calendar-flip").animate({opacity:1},200,function(){
				$(".calendar-bottom .calendar-month").text(months[shownmonth]);
				$(".calendar-bottom .calendar-day").text(shownday);
				$(this).hide().css({top:6}).removeClass("fliptop").removeClass("flipbottom").animate({top:6},200,function(){$(this).show();});
			})
		});
	}