text: $(function () {
  
      /**
       * Get the current time
       */
      function getNow() {
          var now = new Date();
  
          return {
              hours: now.getHours() + now.getMinutes() / 60,
              minutes: now.getMinutes() * 12 / 60 + now.getSeconds() * 12 / 3600,
              seconds: now.getSeconds() * 12 / 60
          };
      }
  
      /**
       * Pad numbers
       */
      function pad(number, length) {
          // Create an array of the remaining length + 1 and join it with 0's
          return new Array((length || 2) + 1 - String(number).length).join(0) + number;
      }
  
      var now = getNow();
  
      // Create the chart
      $('#container').highcharts({
  
          chart: {
              type: 'gauge',
              plotBackgroundColor: null,
              plotBackgroundImage: null,
              plotBorderWidth: 0,
              plotShadow: false,
              height: 200
          },
  
          credits: {
              enabled: false
          },
  
          title: {
              text: 'The Highcharts clock'
          },
  
          pane: {
              background: [{
                  // default background
              }, {
                  // reflex for supported browsers
                  backgroundColor: Highcharts.svg ? {
                      radialGradient: {
                          cx: 0.5,
                          cy: -0.4,
                          r: 1.9
                      },
                      stops: [
                          [0.5, 'rgba(255, 255, 255, 0.2)'],
                          [0.5, 'rgba(200, 200, 200, 0.2)']
                      ]
                  } : null
              }]
          },
  
          yAxis: {
              labels: {
                  distance: -20
              },
              min: 0,
              max: 12,
              lineWidth: 0,
              showFirstLabel: false,
  
              minorTickInterval: 'auto',
              minorTickWidth: 1,
              minorTickLength: 5,
              minorTickPosition: 'inside',
              minorGridLineWidth: 0,
              minorTickColor: '#666',
  
              tickInterval: 1,
              tickWidth: 2,
              tickPosition: 'inside',
              tickLength: 10,
              tickColor: '#666',
              title: {
                  text: 'Powered by<br/>Highcharts',
                  style: {
                      color: '#BBB',
                      fontWeight: 'normal',
                      fontSize: '8px',
                      lineHeight: '10px'
                  },
                  y: 10
              }
          },
  
          tooltip: {
              formatter: function () {
                  return this.series.chart.tooltipText;
              }
          },
  
          series: [{
              data: [{
                  id: 'hour',
                  y: now.hours,
                  dial: {
                      radius: '60%',
                      baseWidth: 4,
                      baseLength: '95%',
                      rearLength: 0
                  }
              }, {
                  id: 'minute',
                  y: now.minutes,
                  dial: {
                      baseLength: '95%',
                      rearLength: 0
                  }
              }, {
                  id: 'second',
                  y: now.seconds,
                  dial: {
                      radius: '100%',
                      baseWidth: 1,
                      rearLength: '20%'
                  }
              }],
              animation: false,
              dataLabels: {
                  enabled: false
              }
          }]
      },
  
          // Move
          function (chart) {
              setInterval(function () {
  
                  now = getNow();
  
                  var hour = chart.get('hour'),
                      minute = chart.get('minute'),
                      second = chart.get('second'),
                      // run animation unless we're wrapping around from 59 to 0
                      animation = now.seconds === 0 ?
                              false :
                              {
                                  easing: 'easeOutElastic'
                              };
  
                  // Cache the tooltip text
                  chart.tooltipText =
                      pad(Math.floor(now.hours), 2) + ':' +
                      pad(Math.floor(now.minutes * 5), 2) + ':' +
                      pad(now.seconds * 5, 2);
  
                  hour.update(now.hours, true, animation);
                  minute.update(now.minutes, true, animation);
                  second.update(now.seconds, true, animation);
  
              }, 1000);
  
          });
  });
  
  // Extend jQuery with some easing (copied from jQuery UI)
  $.extend($.easing, {
      easeOutElastic: function (x, t, b, c, d) {
          var s=1.70158;var p=0;var a=c;
          if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
          if (a < Math.abs(c)) { a=c; var s=p/4; }
          else var s = p/(2*Math.PI) * Math.asin (c/a);
          return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
      }
  });