function CTime( X, Y ) {
	this.canvas ;
	this.o_sec ;
	this.o_min ;
	this.o_hour ;
	this.contur ;
	this.cx ;
	this.cy ;
	this.container ;
	this.time_interval = 1000 ;

	this.constructor = function() {
		this.canvas = new canvas() ;
		var date = new Date() ;
		this.o_sec = new sec( 60, date.getSeconds()*6 ) ;
		this.o_min = new min( 45, date.getMinutes()*6 ) ;
		this.o_hour = new hour( 37, date.getHours()*30 + Math.round( 5*this.o_min.time/72 - 1 ) ) ;
		this.contur = new circle( 70 ) ;
		this.container = [ this.contur, this.o_sec, this.o_min, this.o_hour ] ;
		this.cx = X ;
		this.cy = Y ;
		this.setTimeInterval() ;
	}

	this.setTimeInterval = function() {
		this.canvas.drow( this.container, this.cx, this.cy  ) ;
		this.updateTime() ;
		var _self = this ;
		setTimeout( function(){ _self.setTimeInterval() }, _self.time_interval ) ;
	}

	this.updateTime = function() {
		this.o_sec.time += 6 ;
		if( this.o_sec.time == 360) {
			this.o_sec.time = 0 ;
			this.o_min.time += 6 ;
			if( this.o_min.time%72 == 0 && this.o_min.time > 0) {
				this.o_hour.time += 6 ;
				if( this.o_min.time == 360 ) {
					this.o_min.time = 0 ;
				}
			}
		}
	}
	this.constructor() ;
}
// canvas object
function canvas() {
	this._canvas ;
	this.ctx ;
	this.constructor = function() {
		this._canvas = document.getElementById( 'canvas' ) ;
		if( this._canvas.getContext ) {
			this.ctx = this._canvas.getContext( '2d' ) ;
		}
	}
	this.drow = function( arr_elem_drow, cx, cy ) {
		this.ctx.clearRect(0 , 0, 150, 150 ) ;
		this.ctx.beginPath();
		for( var i = 0 ; i < arr_elem_drow.length ; ++i ) {
			var item = arr_elem_drow[ i ] ;
			item.drow( this.ctx, cx, cy ) ;
		}
		this.ctx.closePath() ;
		this.ctx.stroke() ;
	}
	this.constructor( ) ;
}
// Base time element object
function BaseTimeElement( ) {
	this.time = 0 ;
	this.x = 0 ;
	this.y = 0 ;
	this.color ; //"rgba(255,128,128,0.3)"
	this.length ;
	this.className ;

	this.setXY = function() {
		this.y =  this.length * Math.cos( this.time * Math.PI / 180 ) ;
		this.x =  this.length * Math.sin( this.time * Math.PI / 180 ) ;
	}

	this.setColor = function( color ) {
		this.color = color ;
	}

	this.getColor = function() {
		return this.color ;
	}

	this.drow = function( _ctx, cx, cy ) {
		this.setXY( ) ;
		_ctx.moveTo( cx, cy ) ;
		_ctx.lineTo( cx + this.x , cy - this.y ) ;
	}

	this.getTime = function(){
		return this.time ;
	}
}
// sec object
function sec( length, time ) {
	BaseTimeElement.call( this ) ;
	this.constructor = function() {
		this.length = length ;
		this.className = 'sec' ;
		this.time = time ;
	}
	this.constructor( ) ;
}
// min object
function min( length, time ) {
	BaseTimeElement.call( this ) ;
	this.constructor = function() {
		this.length = length ;
		this.className = 'min' ;
		this.time = time ;
	}
	this.constructor( ) ;
}
// hour object
function hour( length, time ) {
	BaseTimeElement.call( this ) ;
	this.constructor = function() {
		this.length = length ;
		this.className = 'hour' ;
		this.time = time ;
	}
	this.constructor( ) ;
}
//
function circle( r ) {
	BaseTimeElement.call( this ) ;
	this.r ;

	this.constructor = function() {
		this.r = r ;
		this.className = 'circle' ;
		this.color  = "rgba( 255, 128, 128, 0.0 )" ;
	}
	this.drow = function( _ctx, cx, cy ) {
		_ctx.fillStyle = this.color ;
		_ctx.arc( cx, cy, this.r, 0, Math.PI*2, true ) ;
		_ctx.fill();
	}
	this.constructor( ) ;
}

window.onload = function() {
	new CTime( 16, 16 ) ;
}