script.js

this.loaded = function(panel, config) {
  this.clock = {
    hour: panel.find("[data-clock-hand=hour]"),
    minute: panel.find("[data-clock-hand=minute]"),
    second: panel.find("[data-clock-hand=second]"),
    digitalContainer : panel.find("[data-clock=digital]"),
    digital : panel.find("[data-clock=digital] span"),
    datum: panel.find("[data-clock=datum]"),
    "config": config,
    lasttext: "",
    lastdate: ""
  };

  var self = { 'me': this };


    var r = function() {
      var svg = panel.find('[data-clock=analog]');
      var imgs = panel.find('[data-clock=analog] img');
      var w = panel.width();
      var h = panel.height();
      var q = (w<h?w:h);
      svg.css({"height":q + "px","width":q + "px"});
      imgs.css({"height":q + "px","width":q + "px"});
      var fsh = h/53;
      var fsw = (w-q)/(220);

      var fs = (fsh<fsw?fsh:fsw);
      var lh = q;

      this.clock.digitalContainer.textfill(
      {
      maxFontPixels:-1
      });
    };


  self.c = function() {updateTime.call(self.me)};
  self.r = function() {r.call(self.me)};


  self.c();
  setTimeout ( self.r , 100);
  setInterval( self.c , 500);
  $(window).resize(  self.r );
}

var rotateElement = function (id, angle) {
  id.css('transform', 'rotate('+angle+'deg)');
}
var updateTime = function() {  // rotate clock element
  var months = ["Januar","Februar","März","April","Mai","Juni","Juli",
        "August","September","Oktober","November","Dezember"];
  var days = ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"];
  var date = new Date();
  // date
  var t = date.getDay();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();
  // time
  var h = date.getHours();
  if (h.toString().length < 2)
    h = "0" + h;
  var i = date.getMinutes();
  if (i.toString().length < 2)
    i = "0" + i;
  var s = date.getSeconds();
  if (s.toString().length < 2)
    s = "0" + s;

  var newtext=h+":"+i+":"+s;
  if (newtext != this.clock.lasttext) {
    this.clock.lasttext = newtext;
    this.clock.digital.text(newtext);

    rotateElement(this.clock.hour, 30 * h + 0.5 * i);
    rotateElement(this.clock.minute, 6 * i);
    rotateElement(this.clock.second, 6 * s);
    var newdate = days[t] + ", " + d + "." + months[m] + ", " + y;
    if (newdate != this.clock.lastdate) {
      this.clock.lastdate = newdate;
      this.clock.datum.text(newdate);
    }
  }
/*  	$("[panel=time] [clock] [number=h0]").html(h.toString()[0]);
  $("[panel=time] [clock] [number=h1]").html(h.toString()[1]);
  $("[panel=time] [clock] [number=m0]").html(i.toString()[0]);
  $("[panel=time] [clock] [number=m1]").html(i.toString()[1]);
  $("[panel=time] [clock] [number=s0]").html(s.toString()[0]);
  $("[panel=time] [clock] [number=s1]").html(s.toString()[1]);
  $("[panel=time] [date]").html(days[t] + ", " + d + "." + months[m] + ", " + y);*/

}