// World Clocks
/////////////////////////////////////////////////
// START OF SCRIPT-CONFIGURATION
/////////////////////////////////////////////////

// Set below the locations and the difference (hours) to Greenich Mean Time
// Add as many locations as you like
// IMPORTANT: study carefully where commas are required

var worldtime = [ // do not change this line

{
location : "      Istanbul", // set any location
shift : 2 // set the difference to Greenich Mean Time (hours)
}, // comma is required!

{
location : "      Dubai", // set any location
shift : 4 // set he difference to Greenich Mean Time (hours)
}

] // do not change this line

// set the length for each hand (pixels)
var hand_sec_length=22
var hand_min_length=20
var hand_hour_length=15

// set the color for each hand (hexadecimal values required)
var hand_sec_color="#FF0000"
var hand_min_color="#000000"
var hand_hour_color="#000000"

// set the weight for each hand (pixels) 
var hand_sec_weight=1
var hand_min_weight=1
var hand_hour_weight=1

// set the weight of the face's outline (pixels)
var face_outlineweight=1

// set width and height of the face (pixels)
var face_width=65
var face_height=65

// set color of the face's outline
var face_outlinecolor="#000000"

// set the horizontal distance between the clocks (pixels)
var distance_between_clocks=40

// set the vertical distance to the text below the clocks(pixels)
var distance_to_text=10

// set the height of the two text lines below the clocks (pixels)
var text_height=30

/////////////////////////////////////////////////
// END OF SCRIPT-CONFIGURATION
/////////////////////////////////////////////////

// do not edit below this line
var pi= Math.PI
var x_sec=0
var y_sec=0
var x_min=0
var y_min=0
var x_hour=0
var y_hour=0
var angle=270
var x,y
var i_id=0
var ampm=""

function getxy(thistime,thisradius) {
	angle=6*parseInt(thistime)-90
	x=Math.round((thisradius*Math.cos(angle*(pi/180)))+face_width/2)
	y=Math.round((thisradius*Math.sin(angle*(pi/180)))+face_height/2)
}

function dorotate() {
		for (ii=0;ii<worldtime.length;ii++) {
			var now = new Date()
			var nowsec = now.getUTCSeconds()
			var nowmin = now.getUTCMinutes()
			var nowhour = now.getUTCHours()
			var nowhour=nowhour+worldtime[ii].shift
		/*	if (nowhour<=5) {
				ampm="night"
			}
			else if (nowhour<12) {
				ampm="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[sabah]"
			}
			else if (nowhour<=18) {
				ampm="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[gündüz]"
			}
			else if (nowhour<=20) {
				ampm="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[akşam]"
			}
			else if (nowhour<=24) {
				ampm="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[gece]"
			}
			
			if (nowhour>=12) {
				nowhour-=12
			}*/
			nowhour=(30*nowhour+(nowmin/2))/6
			for (i=1;i<=hand_sec_length;i++) {
				getxy(nowsec,i)
				document.getElementById('sec'+(i+(i_id*hand_sec_length))).style.left=(x+(ii*(distance_between_clocks+face_width)))+"px"
				document.getElementById('sec'+(i+(i_id*hand_sec_length))).style.top=y+"px"
			}
			for (i=1;i<=hand_min_length;i++) {
				getxy(nowmin,i)
				document.getElementById('min'+(i+(i_id*hand_min_length))).style.left=(x+(ii*(distance_between_clocks+face_width)))+"px"
				document.getElementById('min'+(i+(i_id*hand_min_length))).style.top=y+"px"
			}
			for (i=1;i<=hand_hour_length;i++) {
				getxy(nowhour,i)
				document.getElementById('hour'+(i+(i_id*hand_hour_length))).style.left=(x+(ii*(distance_between_clocks+face_width)))+"px"
				document.getElementById('hour'+(i+(i_id*hand_hour_length))).style.top=y+"px"
			}
			document.getElementById('clocktext'+ii).innerHTML=worldtime[ii].location+"<br>"+ampm
			i_id++
		}
	i_id=0	
	var timer=setTimeout("dorotate()",1000)
}

document.write('<div id="roof" style="position:relative;height:'+(face_width+text_height)+'px;">')
	for (ii=0;ii<worldtime.length;ii++) {
		for (i=1;i<=12;i++) {
			angle=30*parseInt(i)-90
			x=(face_width/2*Math.cos(angle*(pi/180)))+face_width/2+(ii*(distance_between_clocks+face_width))
			y=(face_height/2*Math.sin(angle*(pi/180)))+face_height/2
			if (angle==90) {
				document.write('<div style="position:absolute;left:'+(x)+'px;top:'+(y-2)+'px;background-color:'+face_outlinecolor+';width:'+face_outlineweight+'px;height:'+(face_outlineweight+2)+'px;overflow:hidden"></div>')
			}
			else if (angle==270) {
				document.write('<div style="position:absolute;left:'+(x)+'px;top:'+y+'px;background-color:'+face_outlinecolor+';width:'+(face_outlineweight)+'px;height:'+(face_outlineweight+2)+'px;overflow:hidden"></div>')
			}
		
			else if (angle==0) {
				document.write('<div style="position:absolute;left:'+(x-2)+'px;top:'+y+'px;background-color:'+face_outlinecolor+';width:'+(face_outlineweight+2)+'px;height:'+face_outlineweight+'px;overflow:hidden"></div>')
			}
		
			else if (angle==180) {
				document.write('<div style="position:absolute;left:'+(x)+'px;top:'+y+'px;background-color:'+face_outlinecolor+';width:'+(face_outlineweight+2)+'px;height:'+face_outlineweight+'px;overflow:hidden"></div>')
			}
			else {
				document.write('<div style="position:absolute;left:'+x+'px;top:'+y+'px;background-color:'+face_outlinecolor+';width:'+face_outlineweight+'px;height:'+face_outlineweight+'px;overflow:hidden"></div>')
			}
		}
		
		for (i=1;i<=hand_sec_length;i++) {
			document.write('<div id="sec'+(i+(i_id*hand_sec_length))+'" style="position:absolute;left:0px;top:0px;background-color:'+hand_sec_color+';width:'+hand_sec_weight+'px;height:'+hand_sec_weight+'px;overflow:hidden"></div>')
		}
		for (i=1;i<=hand_min_length;i++) {
			document.write('<div id="min'+(i+(i_id*hand_min_length))+'" style="position:absolute;left:0px;top:0px;background-color:'+hand_min_color+';width:'+hand_min_weight+'px;height:'+hand_min_weight+'px;overflow:hidden"></div>')
		}
		for (i=1;i<=hand_hour_length;i++) {
			document.write('<div id="hour'+(i+(i_id*hand_hour_length))+'" style="position:absolute;left:0px;top:0px;background-color:'+hand_hour_color+';width:'+hand_hour_weight+'px;height:'+hand_hour_weight+'px;overflow:hidden"></div>')
		}
		document.write('<span id="clocktext'+(ii)+'" class="clocktextstyle" style="position:absolute;left:'+(ii*(distance_between_clocks+face_width))+'px;top:'+(face_height+distance_to_text)+'px;width:'+face_width+(0.5*distance_between_clocks)+'px;">'+worldtime[ii].location+'</span>')
		i_id++
	}
document.write('</div')
i_id=0
window.onload=dorotate