(function () {
/* ------------------------------------------------------------------
* 本スクリプト内でグローバルな値を格納するオブジェクトを定義
* ---------------------------------------------------------------- */
var g = new Object();

/* ------------------------------------------------------------------
* windowにloadイベントリスナーをセット
* ページが読み込まれたらinit関数が実行される。
* ---------------------------------------------------------------- */
if(window.addEventListener) { /* W3C準拠ブラウザ用 */
	window.addEventListener("load", init, false);
} else if(window.attachEvent) { /* Internet Explorer用 */
	window.attachEvent("onload", init);
}

/* ------------------------------------------------------------------
* ページがロードされた時の初期化処理
* ---------------------------------------------------------------- */
function init() {
	/* canvas要素のノードオブジェクト */
	var canvas = document.getElementById('kakedokei');
	/* 2Dコンテキスト */
	g.ctx = canvas.getContext('2d');
	/* Canvasのサイズを特定 */
	g.w = parseInt(canvas.width);
	g.h = parseInt(canvas.height);
	/* Canvasの中心座標を特定 */
	g.x = g.w / 2;
	g.y = g.h / 2;
	/* 時計の半径を特定 */
	g.r = Math.min(g.x, g.y) * 0.9;
	/* 画像をロード */
	g.img = new Image();
	g.img.src = kakedokei_img + "?" + new Date().getTime();
	g.img.onload = function() {
		/* 1秒おきに時計の描画を繰り返す */
		setInterval(display, 1000);
	};
}

/* ------------------------------------------------------------------
* 時計を描画する
* ---------------------------------------------------------------- */
function display() {
	/* Canvasをクリア */
	g.ctx.clearRect(0, 0, g.w, g.h);
	/* 文字盤を描画 */
	g.ctx.drawImage(g.img, 0, 0);
	/* 現在の時間 */
	var d = new Date();
	var h = d.getHours();
	var m = d.getMinutes();
	var s = d.getSeconds();
	if(h > 12) { h = h - 12; }
	/* 短針を描画 */
	var angle1 = Math.PI * 2 * ( 3 - ( h + m / 60 ) ) / 12;
	var length1 = g.r * 0.5;
	var width1 = 5;
	drawhand(angle1, length1, width1, color1);
	/* 長針を描画 */
	var angle2 = Math.PI * 2 * ( 15 - ( m + s / 60 ) ) / 60;
	var length2 = g.r * 0.9;
	var width2 = 3;
	drawhand(angle2, length2, width2, color2);
	/* 秒針を描画 */
	var angle3 = Math.PI * 2 * ( 15 - s ) / 60;
	var length3 = g.r * 0.7;
	var width3 = 1;
	drawhand(angle3, length3, width3, color3);
}


/* ------------------------------------------------------------------
* 針を描画する
* ---------------------------------------------------------------- */
function drawhand(angle, len, width, color) {
	/* 針の先端の座標を計算 */
	var x = g.x + len * Math.cos(angle);
	var y = g.y - len * Math.sin(angle);
	/* 針を描画 */
	g.ctx.strokeStyle = color; /* 色をセット */
	g.ctx.lineWidth = width; /* 線の太さをセット */
/*	g.ctx.lineCap = "round"; /* 先端を丸くする */
	g.ctx.beginPath(); /* 直線の描画を開始 */
	g.ctx.moveTo(g.x, g.y); /* 時計の中心に移動 */
	g.ctx.lineTo(x, y);
	g.ctx.stroke();
}

/* ---------------------------------------------------------------- */
})();