var rotation = 0;
var mousestate = false;
var touchstate = false;
var fwrdstate = false;
var	backstate = false;


var originx = 0;
var originy = 0;

var currenttime = 0;

var cur_x = 0;
var cur_y = 0;
var old_x = 0;
var old_y = 0;

var curxpos = 0;
var curypos = 0;

var am_flag = true;

var arabicdial = true;

function padoutnumber(num, size) {
    var s = num.toString();
    while (s.length < size) s = "0" + s;
    return s;
}

function setdigitaldisplay(currenttime){

	var minute = currenttime % 60;
	var hour = Math.floor((currenttime % 1440)/60);

	if ($("#digital24hr").text() != "24"){
		if (hour > 12) {
		hour = (hour % 12);
		}
	}

	$( "#digitaldigits" ).text(padoutnumber(hour,2) + ":" + padoutnumber(minute,2));
}

function setanaloguehands(currenttime){

		//var minrotation = (minute*6)-90;
		var minrotation = ((currenttime % 60) * 6) - 90;
		var hourrotation = ((currenttime % 720) / 2) - 90;
				
		$("#minutehand").rotate(minrotation);
		$("#hourhand").rotate(hourrotation);

}

function makewords(currenttime){

	var minindex = currenttime % 60;
	var hourindex = Math.floor((currenttime % 720)/60);
	var tense = "past";
	var sentence = "";

	if (minindex > 30) {
		tense = "To";
	} else {
		tense = "Past";
	}
 
	switch(minindex) {
	case 0:
		sentence = "<p>" + numberstrings[hourindex] + "</p><p>O Clock</p>";
		break;
	case 15:
		sentence = "<p>Quarter</p><p>" + tense + "</p><p>" + numberstrings[hourindex] + "</p>";
		break;
	case 30:
		sentence = "<p>Half</p><p>"    + tense + "</p><p>" + numberstrings[hourindex] + "</p>";
		break;
	case 45:
		sentence = "<p>Quarter </p><p>"   + tense + "</p><p>" + numberstrings[hourindex + 1] + "</p>";
		break;
	default:
	if (minindex > 30) {
		if (minindex < 59) {
			sentence = "<p>" + numberstrings[60 - minindex]  + "</p><p>Minutes</p><p>" + tense + "</p><p>" + numberstrings[hourindex + 1] + "</p>";
		}else{
			sentence = "<p>" + numberstrings[60 - minindex]  + "</p><p>Minute</p><p>" + tense + "</p><p>" + numberstrings[hourindex + 1] + "</p>";
		}
	}else{
		if (minindex > 1) {
			sentence = "<p>" + numberstrings[minindex]  + "</p><p>Minutes</p><p>" + tense + "</p><p>" + numberstrings[hourindex] + "</p>";
		}else{
			sentence = "<p>" + numberstrings[minindex]  + "</p><p>Minute</p><p>" + tense + "</p><p>" + numberstrings[hourindex] + "</p>";
		}
	}
	}

return sentence;

}

function setwords(currenttime){

	words.html(makewords(currenttime));
}

function getObjectsRotationInDegrees(obj) {
    var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform")    ||
    obj.css("-ms-transform")     ||
    obj.css("-o-transform")      ||
    obj.css("transform");
    if(matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else {
    	var angle = 0;
    }
    return (angle < 0) ? angle +=360 : angle;
}

function incrementTime(increment){
		currenttime = (currenttime + increment) % 1440;
		
		if (currenttime < 0) {
			currenttime = 1440 + currenttime;
		}
		
//		var minute = currenttime % 60;
//		var hour = Math.floor((currenttime % 1440)/60);
		
		setdigitaldisplay(currenttime);
		
		setanaloguehands(currenttime);
		
		setwords(currenttime);
		

		if (currenttime > 720) {
			$('#digitalampm').text("pm");
		} else {
			$('#digitalampm').text("am");
		}


}


jQuery.fn.rotaterelative = function(degrees) {

	var a = getObjectsRotationInDegrees(this);
	var d = a + degrees;

    $(this).css({'-webkit-transform' : 'rotate('+ d +'deg)',
                 '-moz-transform' : 'rotate('+ d +'deg)',
                 '-ms-transform' : 'rotate('+ d +'deg)',
                 'transform' : 'rotate('+ d +'deg)'});
};

jQuery.fn.rotate = function(degrees) {

	var d = degrees;

    $(this).css({'-webkit-transform' : 'rotate('+ d +'deg)',
                 '-moz-transform' : 'rotate('+ d +'deg)',
                 '-ms-transform' : 'rotate('+ d +'deg)',
                 'transform' : 'rotate('+ d +'deg)'});
};



$.ajax({  
    url: "/php/e-clock/interactive-clock.php",  
    data: "",
    dataType: 'json',      
    success: function(data)
	{

		$( '#eclock' ).html( data[3] );
    	
    	words=$("#words");
    	
    	analogueclock=$("#clock");
    	digitalclock=$("#digitalclock");
		numberstrings = data[1];
        
   	 //build the clock

     	$( '#mainclock' ).attr("style", "width:600px;height:600px;position:absolute;left:0;top:0;");
 		$( '#mainclock' ).css( "background-image", "url(/images/M001bg.png)" );
		$( '#hourimage' ).css(   "background-image", "url(/images/HourHand.png)" );
		$( '#minuteimage' ).css( "background-image", "url(/images/MinHand.png)" );	

		$("#minutehand").rotate(-90);
		$("#hourhand").rotate(-90);	
	
		$( "#mainclock" ).mousedown(function() {
			mousestate = true;
		});

		$( "html" ).mouseup(function() {
			mousestate = false;
			fwrdstate = false;
			backstate = false;

		});

		$('#controlpanel').hide();




    function updateLog(t, x, y) {
        $("#backButton").text(t + ' X: '+x+'; Y: '+y);
    }

    mainclock.addEventListener('touchstart', function(e) {
    	touchstate = true;
		//updateLog(touchstate, e.changedTouches[0].pageX, e.changedTouches[0].pageY);
    }, false);

    document.addEventListener('touchend', function(e) {
    	touchstate = false;
       // updateLog(touchstate, e.changedTouches[0].pageX, e.changedTouches[0].pageY);
    }, false);

    mainclock.addEventListener('touchmove', function(e) {
        e.preventDefault();
       // updateLog(touchstate, e.targetTouches[0].pageX, e.targetTouches[0].pageY);

			os=$("#mainclock").offset();

			var centerofclock_x = os.left+300;
			var centerofclock_y = os.top+300;

			old_x = cur_x;
			old_y = cur_y;

			cur_x = e.targetTouches[0].pageX - os.left - 300;
			cur_y = (e.targetTouches[0].pageY - os.top - 300) * -1;
	
			var x0 = 0;
			var y0 = 0;
			var x1 = 0;
			var y1 = 0;
			var x2 = 0;
			var y2 = 0;

			var area = 0;

		if (touchstate){

			var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
			var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
		
			x0=0;
			y0=0;
			x1=cur_x*100;
			y1=cur_y*100;
			x2=old_x*100;
			y2=old_y*100;

			area = (((x0*y1)-(x1*y0)) + ((x1*y2)-(x2*y1)) + ((x2*y0)-(x0*y2)))/2;
		
			if (area < 0){
				//anticlockwise
				//currenttime = currenttime - 10; //increment by 1/100 hour
				incrementTime(-1);
			} else if (area > 0){
				//clockwise
				//currenttime = currenttime + 10; //increment by 1/100 hour
				incrementTime(1);
			}




		}

    }, false);


		$( "html" ).mousemove(function( event ) {

			os=$("#mainclock").offset();

			var centerofclock_x = os.left+300;
			var centerofclock_y = os.top+300;

			old_x = cur_x;
			old_y = cur_y;

			cur_x = event.pageX-os.left - 300;
			cur_y = (event.pageY-os.top - 300) * -1;
	
	var x0 = 0;
	var y0 = 0;
	var x1 = 0;
	var y1 = 0;
	var x2 = 0;
	var y2 = 0;

	var area = 0;

	if (mousestate) {
	
		var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
		var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
	
		x0=0;
		y0=0;
		x1=cur_x*100;
		y1=cur_y*100;
		x2=old_x*100;
		y2=old_y*100;

		area = (((x0*y1)-(x1*y0)) + ((x1*y2)-(x2*y1)) + ((x2*y0)-(x0*y2)))/2;
		
		if (area < 0){
			//anticlockwise
			//currenttime = currenttime - 1; //increment by 1/100 hour
			incrementTime(-1);
		} else if (area > 0){
			//clockwise
			//currenttime = currenttime + 1; //increment by 1/100 hour
			incrementTime(1);
		}
	}

});

		
		setdigitaldisplay(0,0);
		
		setanaloguehands(currenttime);

		setwords(currenttime);

		//hide buttons
		$('#ampmtoggle').hide();
		$('#twentyfourhourtoggle').hide();
		$('#controlpanel').show();
		
		$('#digitalonoff').click(function() {
		
				
			if ($("#digitalclock").is(':hidden')){
				$('#digitalclock').show();
				$('#digitalcontrols').show();
			} else {
				$('#digitalclock').hide();
				$('#digitalcontrols').hide();
			}


		
		
		});
		
		$('#ampmtoggle').click(function() {
			if ($("#digitalampm").is(':hidden')){
				$('#digitalampm').show();
			} else {
				$('#digitalampm').hide();
			}
		});

		$('#twentyfourhourtoggle').click(function() {
			if ($("#digital24hr").is(':hidden')){
				$('#digital24hr').show();
			} else {
				$('#digital24hr').hide();
			}
		});

		$('#wordstoggle').click(function() {
		// toggles teh am/pm indicator on off
			if ($("#words").is(':hidden')){
				$('#words').show();
			} else {
				$('#words').hide();
			}
		});

		$('#digitalmodetoggle').click(function() {
			if ($("#digital24hr").text() != "12"){
				$('#digital24hr').text("12");
			} else {
				$('#digital24hr').text("24");
			}
			setdigitaldisplay(currenttime);
		});
	
		$('#romanarabictoggle').click(function() {
		// toggles teh 12/24 indicator on off
		
			$.ajax({  
    			url: "/php/e-clock/get-clock-background.php",  
    			data: "",
    			dataType: 'json',      
    			success: function(data)
				{
		
			if (arabicdial) {
			arabicdial = false;
				//$( '#mainclock' ).css( "background-image", "url(/images/M001bgR.png)" );
				$( '#mainclock' ).css( "background-image", data[0] );
			} else {
			arabicdial = true;
				$( '#mainclock' ).css( "background-image", data[1] );
			}
				},
		    		error: function(xhr, textStatus, errorThrown){
      				// alert('request failed: ' + errorThrown + "    text status: " +textStatus);
    			}
			});

		});
  
	},
	    error: function(xhr, textStatus, errorThrown){
      	// alert('request failed: ' + errorThrown + "    text status: " +textStatus);
    } 
});