var component = module


    component.exports = {
        data: {
            minor: new Array( 60 ),
            major: new Array( 12 )
        },

        init: function () {
            var self = this, interval;

            this.set( 'date', new Date() );

            interval = setInterval( function () {
                self.set( 'date', new Date() );
            });

            this.on( 'teardown', function () {
                clearInterval( interval );
            });
        }
    };


component.exports.template = { v:3,
  t:[ { p:[ 1,
        1,
        0 ],
      t:7,
      e:"div",
      a:{ "class":"rvc-clock-demo" },
      f:[ " ",
        { p:[ 2,
            5,
            76 ],
          t:7,
          e:"svg",
          a:{ viewBox:"0 0 100 100" },
          f:[ " ",
            { p:[ 6,
                9,
                227 ],
              t:7,
              e:"g",
              a:{ transform:"translate(50,50)" },
              f:[ { p:[ 7,
                    13,
                    272 ],
                  t:7,
                  e:"circle",
                  a:{ "class":"clock-face",
                    r:"48" } },
                " ",
                { t:4,
                  f:[ { p:[ 11,
                        17,
                        424 ],
                      t:7,
                      e:"line",
                      a:{ "class":"minor",
                        y1:"42",
                        y2:"45",
                        transform:[ "rotate( ",
                          { t:2,
                            x:{ r:[ "i",
                                "minor.length" ],
                              s:"360*_0/_1" },
                            p:[ 11,
                              72,
                              479 ] },
                          " )" ] } } ],
                  i:"i",
                  r:"minor",
                  p:[ 10,
                    13,
                    395 ] },
                " ",
                { t:4,
                  f:[ { p:[ 17,
                        17,
                        610 ],
                      t:7,
                      e:"line",
                      a:{ "class":"major",
                        y1:"35",
                        y2:"45",
                        transform:[ "rotate( ",
                          { t:2,
                            x:{ r:[ "i",
                                "major.length" ],
                              s:"360*_0/_1" },
                            p:[ 17,
                              72,
                              665 ] },
                          " )" ] } } ],
                  i:"i",
                  r:"major",
                  p:[ 16,
                    13,
                    581 ] },
                " ",
                { p:[ 23,
                    13,
                    798 ],
                  t:7,
                  e:"line",
                  a:{ "class":"hour",
                    y1:"2",
                    y2:"-20",
                    transform:[ "rotate( ",
                      { t:2,
                        x:{ r:[ "date" ],
                          s:"30*_0.getHours()+_0.getMinutes()/2" },
                        p:[ 23,
                          67,
                          852 ] },
                      " )" ] } },
                " ",
                { p:[ 29,
                    13,
                    990 ],
                  t:7,
                  e:"line",
                  a:{ "class":"minute",
                    y1:"4",
                    y2:"-30",
                    transform:[ "rotate( ",
                      { t:2,
                        x:{ r:[ "date" ],
                          s:"6*_0.getMinutes()+_0.getSeconds()/10" },
                        p:[ 29,
                          69,
                          1046 ] },
                      " )" ] } },
                " ",
                { p:[ 35,
                    13,
                    1186 ],
                  t:7,
                  e:"g",
                  a:{ transform:[ "rotate( ",
                      { t:2,
                        x:{ r:[ "date" ],
                          s:"6*_0.getSeconds()" },
                        p:[ 35,
                          35,
                          1208 ] },
                      " )" ] },
                  f:[ { p:[ 38,
                        17,
                        1280 ],
                      t:7,
                      e:"line",
                      a:{ "class":"second",
                        y1:"10",
                        y2:"-38" } },
                    " ",
                    { p:[ 39,
                        17,
                        1336 ],
                      t:7,
                      e:"line",
                      a:{ "class":"second-counterweight",
                        y1:"10",
                        y2:"2" } } ] } ] } ] } ] } ] }

component.exports.css = "\n    .rvc-clock-demo {\n        position: relative;\n        width: 100%;\n        height: 0;\n        padding-bottom: 100%;\n    }\n\n    .rvc-clock-demo svg {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n    }\n\n    .rvc-clock-demo .clock-face {\n        stroke: #333;\n        fill: white;\n    }\n\n    .rvc-clock-demo .minor {\n        stroke: #999;\n        stroke-width: 0.5;\n    }\n\n    .rvc-clock-demo .major {\n        stroke: #333;\n        stroke-width: 1;\n    }\n\n    .rvc-clock-demo .hour {\n        stroke: #333;\n    }\n\n    .rvc-clock-demo .minute {\n        stroke: #666;\n    }\n\n    .rvc-clock-demo .second, .second-counterweight {\n        stroke: rgb(180,0,0);\n    }\n\n    .rvc-clock-demo .second-counterweight {\n        stroke-width: 3;\n    }\n"