window.myClock = function(id,offset) {
	this.init(id,offset);
}
myClock.prototype = {
	id:null,
	offset:null,
        config:{
          width:60,
          fillColor:'#FFF',
          strokeColor:'#000',
          pinColor:'#000',
          hourHandColor:'#000',
          minuteHandColor:'#000',
          secondHandColor:'#FE2E2E'          
        },
	init: function(id,offset) {		
		this.id = id;
		this.offset = offset;
		var self = this;
                this.drawClock();
		loadingTimer = setInterval(function(){self.render();}, 1000);
	},
	render: function() {
            var width = this.config.width;
            var now = offsetNow = new Date();
            if(this.offset != undefined) {
                 offsetNow = new Date(now.valueOf() + (this.offset * 1000 * 60 * 60));
            }  
            var hours = offsetNow.getUTCHours();
            var minutes = offsetNow.getUTCMinutes();
            var seconds = offsetNow.getUTCSeconds();
            this.hour_hand.rotate(30*hours+(minutes/2.5), width*.5, width*.5);
            this.minute_hand.rotate(6*minutes, width*.5, width*.5);
            this.second_hand.rotate(6*seconds, width*.5, width*.5);
	},
        drawClock: function() {
            var width = this.config.width;
            this.canvas = Raphael(this.id,width, width);
            var clock = this.canvas.circle(width*.5,width*.5, width * .475);
            clock.attr({"fill":this.config.fillColor,"stroke":this.config.strokeColor,"stroke-width":(width*.025)})
            var hour_sign;
            for(i=0;i<12;i++){
                var start_x = width*.5+Math.round((width*.4)*Math.cos(30*i*Math.PI/180));
                var start_y = width*.5+Math.round((width*.4)*Math.sin(30*i*Math.PI/180));
                var end_x = width*.5+Math.round((width*.45)*Math.cos(30*i*Math.PI/180));
                var end_y = width*.5+Math.round((width*.45)*Math.sin(30*i*Math.PI/180));
                hour_sign = this.canvas.path("M"+start_x+" "+start_y+"L"+end_x+" "+end_y);
            }    
            this.hour_hand = this.canvas.path("M" + width*.5 + " " + width*.5 + "L" + width*.5 + " " + (width*.25) + "");
            this.hour_hand.attr({stroke: this.config.hourHandColor, "stroke-width": width*.03});
            this.minute_hand = this.canvas.path("M" + width*.5 + " " + width*.5 + "L" + width*.5 + " " + (width*.2) + "");
            this.minute_hand.attr({stroke: this.config.minuteHandColor, "stroke-width": width*.02});
            this.second_hand = this.canvas.path("M" + width*.5 + " " + (width*.55) + "L" + width*.5 + " " + (width*.125) + "");
            this.second_hand.attr({stroke: this.config.secondHandColor, "stroke-width": width*.01});
            var pin = this.canvas.circle(width*.5, width*.5, width*.025);
            pin.attr("fill", this.config.pinColor);
        }
}