var current_time = new Date();
         var hour_hand = null;var minute_hand = null;
         var second_hand = null;
         var hour_shadow = null;
         var minute_shadow = null;
         var second_shadow = null;
         var center = {x: 357 / 2, y: 357 / 2};
         var hour_shadow_shift = {dx: 2, dy: 2};
         var minute_shadow_shift = {dx: 3, dy: 3};
         var second_shadow_shift = {dx: 4, dy: 4};
         var selected_hand = null;
         var container = null;
         var container_position = null;
         var text_time = null;
         var diff_time = new Date();

         placeHand = function(shape, angle, shift){var move = {dx: center.x + (shift ? shift.dx : 0), dy: center.y + (shift ? shift.dy : 0)};
            return shape.setTransform([move, dojox.gfx.matrix.rotateg(angle)]);
         };
         placeHourHand = function(h, m, s){var angle = 30 * (h % 12 + m / 60 + s / 3600);
         placeHand(hour_hand, angle);
         placeHand(hour_shadow, angle, hour_shadow_shift);
         };
         placeMinuteHand = function(m, s){var angle = 6 * (m + s / 60);
         placeHand(minute_hand, angle);
         placeHand(minute_shadow, angle, minute_shadow_shift);
         };
         placeSecondHand = function(s){var angle = (((s % 60000)/1000)*6);
         placeHand(second_hand, angle);
         placeHand(second_shadow, angle, second_shadow_shift);
         };
         reflectTime = function(time, hold_second_hand, hold_minute_hand, hold_hour_hand){if(!time) time = current_time;
         var h = time.getHours();
         var m = time.getMinutes();
         var s = time.getSeconds();
         if(!hold_hour_hand) placeHourHand(h, m, s);
         if(!hold_minute_hand) placeMinuteHand(m, s);
         if(!hold_second_hand) placeSecondHand((time.getMilliseconds()%1000) + (time.getSeconds() * 1000));
         text_time.innerHTML = dojo.date.locale.format(time, {selector: "time", timePattern: "h:mm:ss a"});
         };
         resetTime = function(){current_time = new Date();
         reflectTime();
         };
         tick = function(){current_time.setMilliseconds(current_time.getMilliseconds() + 100);
         reflectTime();
         };
         advanceTime = function(){if(!selected_hand) {tick();
         }};
         normalizeAngle = function(angle){if(angle > Math.PI) {angle -= 2 * Math.PI;
         } else if(angle < -Math.PI) {angle += 2 * Math.PI;
         }return angle;
         };
         calculateAngle = function(x, y, handAngle){try {return normalizeAngle(Math.atan2(y - center.y, x - center.x) - handAngle);
         } catch(e) {}return 0;
         };
         getSecondAngle = function(time){if(!time) time = current_time;
         return (6 * time.getSeconds() - 90) / 180 * Math.PI;
         };
         getMinuteAngle = function(time){if(!time) time = current_time;
         return (6 * (time.getMinutes() + time.getSeconds() / 60) - 90) / 180 * Math.PI;
         };
         getHourAngle = function(time){if(!time) time = current_time;
         return (30 * (time.getHours() + (time.getMinutes() + time.getSeconds() / 60) / 60) - 90) / 180 * Math.PI;
         };
         onMouseDown = function(evt){selected_hand = evt.target;
         diff_time.setTime(current_time.getTime());
         dojo.stopEvent(evt);
         };
         onMouseMove = function(evt){if(!selected_hand) return;
         if(evt.target == second_hand.getEventSource() ||evt.target == minute_hand.getEventSource() ||evt.target == hour_hand.getEventSource()){dojo.stopEvent(evt);
         return;
         }if(dojox.gfx.equalSources(selected_hand, second_hand.getEventSource())){var angle = calculateAngle(evt.clientX - container_position.x,evt.clientY - container_position.y,normalizeAngle(getSecondAngle()));
         var diff = Math.round(angle / Math.PI * 180 / 6);
         current_time.setSeconds(current_time.getSeconds() + Math.round(diff));
         reflectTime();
         }else if(dojox.gfx.equalSources(selected_hand, minute_hand.getEventSource())){var angle = calculateAngle(evt.clientX - container_position.x,evt.clientY - container_position.y,normalizeAngle(getMinuteAngle(diff_time)));
         var diff = Math.round(angle / Math.PI * 180 / 6 * 60);
         diff_time.setTime(diff_time.getTime() + 1000 * diff);
         reflectTime(diff_time, true);
         }else if(dojox.gfx.equalSources(selected_hand, hour_hand.getEventSource())){var angle = calculateAngle(evt.clientX - container_position.x,evt.clientY - container_position.y,normalizeAngle(getHourAngle(diff_time)));
         var diff = Math.round(angle / Math.PI * 180 / 30 * 60 * 60);
         diff_time.setTime(diff_time.getTime() + 1000 * diff);
         reflectTime(diff_time, true, true);
         }else{return;
         }dojo.stopEvent(evt);
         };
         onMouseUp = function(evt){if(selected_hand && !dojox.gfx.equalSources(selected_hand, second_hand.getEventSource())){current_time.setTime(diff_time.getTime());
         reflectTime();
         }selected_hand = null;
         dojo.stopEvent(evt);
         };
         makeShapes = function(){container = dojo.byId("gfx_holder");
         container_position = dojo.coords(container, true);
         text_time = dojo.byId("time");
         var surface = dojox.gfx.createSurface(container, 357, 357);
         surface.createImage({width: 357, height: 357, src: "http://public.dev.whmi.biz/js/dijit/tests/images/dial.gif"});
         var hour_hand_points = [{x: -8, y: 15}, {x: 8, y: 15}, {x: 0, y: -75}, {x: -8, y: 15}];
         var minute_hand_points = [{x: -5 , y: 15}, {x: 5, y: 15}, {x: 0, y: -87}, {x: -5, y: 15}];
         var second_hand_points = [{x: 0, y: -92}, {x: 5, y: -103}, {x: -5, y: -103}];
         hour_shadow = surface.createPolyline(hour_hand_points).setFill([0, 0, 0, 0.1]);
         hour_hand = surface.createPolyline(hour_hand_points).setStroke({color: "#0000bb", width: .2}).setFill("#0000bb");
         minute_shadow = surface.createPolyline(minute_hand_points).setFill([0, 0, 0, 0.1]);
         minute_hand = surface.createPolyline(minute_hand_points).setStroke({color: "#00bb00", width: .2}).setFill("#00bb00");
         second_shadow = surface.createPolyline(second_hand_points).setFill([0, 0, 0, 0.1]);
         second_hand = surface.createPolyline(second_hand_points).setStroke({color: "#bb0000", width: 1}).setFill("#bb0000");
         surface.createCircle({r: 2}).setFill("black").setTransform({dx: 178.5, dy: 178.5});
         resetTime();
         window.setInterval(advanceTime, 100);
         };
         dojo.addOnLoad(makeShapes);