var SneakyClockFactory = Class.create({
	clockArr: null,
	clockDataArr: null,
	clocksContainer: null,
	initialize: function(clocksContainerId){
		this.clocksContainer = $(clocksContainerId);
		if(!Object.isElement(this.clocksContainer)){
			alert("There is no element with id : " + clocksContainerId + ". We need an elementId to draw the clocks.");
		}	
		this.clockArr = new Array();
		this.clockDataArr = new Array();
	},
	
	addClock: function(startTime,countryName){
		var clockData = {startTime: startTime,countryName: countryName};
		this.clockDataArr.push(clockData);
	},
	
	run: function(){
		if(this.clockDataArr.length == 0){
			alert("There is no defined clock, please add one.");
			return;
		}
		
		var clockContainerHtml = "<table><tr>";
		for(var i = 0, len = this.clockDataArr.length; i < len; i++){
			var clockContainerId = "clockContainer" + i;
			clockContainerHtml += 
				"<td><div class='clockContainer' id='" + clockContainerId + "'></div></td>";
			if(i < (len -1)){
				clockContainerHtml += "<td class='separator'><div class='separator'></div></td>";
			}
			
			this.clockDataArr[i].clockContainerId = clockContainerId;	
		}
		clockContainerHtml += "</tr></table>";
		this.clocksContainer.insert(clockContainerHtml);
		
		for(var i = 0, len = this.clockDataArr.length; i < len; i++){
			var clockData = this.clockDataArr[i];
			var clock = new SneakyClock(clockData.clockContainerId,clockData.startTime,clockData.countryName);
			new PeriodicalExecuter(clock.showTime.bind(clock), 1);
		}
	}
});


var SneakyClock = Class.create({
	hour:null,
	minute:null,
	second:null,
	clockContainer:null,
	countryName: null,
	startTime: null,
	initialize: function(clockContainerId,startTime,countryName){
		this.startTime = Object.extend(
			{hour:0,minute:0,second:0},
			startTime
		);
		
		this.hour = this.startTime.hour;
		this._nh = this.startTime.hour;
		this.minute = this.startTime.minute;
		this.second = this.startTime.second;

		this.clockContainer = $(clockContainerId);
		if(!Object.isElement(this.clockContainer)){
			alert("There is no element with id : " + clockContainerId + ". We need an elementId to draw the clock.");
		}

		var clockHtml = "";
		var timeString = this.formatTime(this.hour,this.minute,this.second);
		if(Object.isUndefined(countryName) || countryName == ""){
			clockHtml = "<div class='time'>" + timeString + "</div>";
		} else{
			clockHtml = 
				"<div class='time'>" + timeString + "</div>" +
				"<span class='country'>" + countryName + "</span>";
		}
		this.clockContainer.update(clockHtml);
		this.clockContainer = $$("#" + clockContainerId + " .time").first();
	},
	
	formatTime: function(hour,minute,second){
		var timeString = this.toTwoNumberFormat(hour)+":"+  
		this.toTwoNumberFormat(minute)+":"+
		this.toTwoNumberFormat(second);
		
		return timeString;
	},
	
	toTwoNumberFormat: function(n){
		n = n.toString();
		if(n.length==1){ 
			return "0" + n;
		}else if(n.length==0){ 
			return "00";
		}else{
			return n;
		}
	},
	
	showTime: function(){ 
		this.second++;
		if(this.second>=60){
			this.minute++;
			this.second=0;
			if(this.minute>=60){
				this.hour++;
				this.minute=0;
				if(this.hour == 24){
					this.hour = 0;
					this.minute = 0;
					this.second = 0;
				}
			}
		}
		
		var timeString = this.formatTime(this.hour,this.minute,this.second);
		this.clockContainer.update(timeString);
	}
});