// JavaScript Document

	//initial time
	var h_current = -1;
	var m1_current = -1;
	var m2_current = -1;

	
	function flip (upperId, lowerId, changeNumber, pathUpper, pathLower){
		var upperBackId = upperId+"Back";
		$(upperId).src = $(upperBackId).src;
		$(upperId).setStyle("height", "11px");
		$(upperId).setStyle("visibility", "visible");
		$(upperBackId).src = pathUpper+parseInt(changeNumber)+".png";
		
		$(lowerId).src = pathLower+parseInt(changeNumber)+".png";
		$(lowerId).setStyle("height", "0px");
		$(lowerId).setStyle("visibility", "visible");
		
		var flipUpper = new Fx.Tween(upperId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
		flipUpper.addEvents({
			'complete': function(){
				var flipLower = new Fx.Tween(lowerId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
					flipLower.addEvents({
						'complete': function(){	
							lowerBackId = lowerId+"Back";
							$(lowerBackId).src = $(lowerId).src;
							$(lowerId).setStyle("visibility", "hidden");
							$(upperId).setStyle("visibility", "hidden");
						}				});					
					flipLower.start('height', 11);
					
			}
							});
		flipUpper.start('height', 0);
		
		
	}//flip
				
	
	function retroClock(){
		
		// get new time
		 now = new Date();
		 h = now.getUTCHours() + 1;
		 		 
		 m1 = now.getUTCMinutes() / 10;
		 m2 = now.getUTCMinutes() % 10;

		 if( h == 24){
				h -= 24;
		}
				 
		 if( h > 24){
				h -= 24;
		}

		 if( h < 0){
				h += 24;
		}


		 
		 //change pads
		 
		 if( h != h_current){
			flip('hoursUp', 'hoursDown', h, 'clock/Single/Up/', 'clock/Single/Down/');
			h_current = h;
		}
		
		if( m2 != m2_current){
			flip('minutesUpRight', 'minutesDownRight', m2, 'clock/Double/Up/Right/', 'clock/Double/Down/Right/');
			m2_current = m2;
			
			flip('minutesUpLeft', 'minutesDownLeft', m1, 'clock/Double/Up/Left/', 'clock/Double/Down/Left/');
			m1_current = m1;
		}
		
		
		
			
		
	}
	
	setInterval('retroClock()', 1000);