var divBarMsg = document.getElementById('bar_msg');
var duration = 180;
var anim;
var imgClock = '<img src="img/icon_clock.gif" width="16" height="16" alt="時間">';
var remflg = '';

(function() {
	var attributes = {
		backgroundColor: { from: '#ffb0d9', to: '#ff0000'},
		//color: {from: '#000000', to: '#ffffff'},
		width: { from: 0, to: 450 }
	};
//	var anim = new YAHOO.util.ColorAnim('bar', attributes, duration);
	anim = new YAHOO.util.ColorAnim('bar', attributes, duration);

	// Start
	YAHOO.util.Event.on('demo-run', 'click', function() {
		anim.animate();
	});
	// Stop
	YAHOO.util.Event.on('demo-stop', 'click', function() {
		anim.stop();
	});

	// イベントの登録
	function setMessage(msg) {
		divBarMsg.innerHTML = msg;
	}
	function finishTimer() {
		//タイムアップ時オーバーレイ表示
		//Glayer.fadeIn(null,{duration: 200});
		Glayer.show();
	}
	function setNowTimer() {
		var rem = duration - Math.floor(anim.currentFrame / 1000);
		if(rem==99){ remflg = '&nbsp;';}
		if(rem==9){ remflg = '&nbsp;&nbsp;';}
		if(rem <= 30){
			rem = '<span style="color:red; font-weight:bold;">' + rem + '</span>';
		}
		rem = remflg + rem;
		divBarMsg.innerHTML = imgClock + '&nbsp;残り時間あと' + rem + '秒&nbsp;';
	}
//	anim.onStart.subscribe(setMessage, "start");
	anim.onTween.subscribe(setNowTimer);
	anim.onComplete.subscribe(finishTimer);
	
})();

// Start
function startTimerBar() {
	anim.animate();
}