From c0742a6f11241951a27da3b56f2ad63c4b4df606 Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Mon, 11 Aug 2014 19:19:11 +0200
Subject: [PATCH] make the clock adjust its size on window resizing

---
 index.html | 13 ++++++++++++-
 js/uhr.js  | 15 ++++++++++-----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index a7393f5..08049c1 100644
--- a/index.html
+++ b/index.html
@@ -49,13 +49,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 		(function($) {
 			var width = $(window).width();
 			var height = $(window).height();
-			var size = (width < height ? width : height) + 'px';
+			var size = Math.min(width, height) + 'px';
 			$('#uhr').uhr({
 				width: size,
 				color: 'black',
 				language: 'de_CH',
 				controls: true
 			});
+            $(window).on('resize', function (event) {
+                var $uhr = $('#uhr');
+                var $parent = $uhr.parent();
+                var $window = $(window);
+                var parentWidth = $parent.width();
+                var parentHeight = $parent.height();
+                var windowWidth = $window.width();
+                var windowHeight = $window.height();
+                var size = Math.min(parentWidth, parentHeight, windowWidth, windowHeight) + 'px';
+                $uhr.uhr("width", size);
+            });
 		})(jQuery);
 	</script>
 </body>
diff --git a/js/uhr.js b/js/uhr.js
index 6152d05..4e59b06 100644
--- a/js/uhr.js
+++ b/js/uhr.js
@@ -108,6 +108,14 @@
         }
         update.bind(this)();
     };
+    var setWidth = function setWidth(width) {
+        var e = this.element;
+        e.css('width', width);
+        var realWidth = e.width();
+        e.width(realWidth);
+        e.height(realWidth);
+        e.css('font-size', (realWidth / 40) + 'px');
+    };
 
     // private interface methods
     var create = function create() {
@@ -140,11 +148,7 @@
         e.append('<span class="item dot dot4"></span>');
         e.append('<div class="letterarea"></div>');
         e.append('<div class="reflection"></div>');
-        e.css('width', this.options.width);
-        var realWidth = e.width();
-        e.width(realWidth);
-        e.height(realWidth);
-        e.css('font-size', (realWidth / 40) + 'px');
+        setWidth.bind(this)(this.options.width);
 
         if (this.options.controls) {
             var configlink = $('<a class="uhr-configlink" id="uhr-configlink' + this.id + '"></a>');
@@ -352,6 +356,7 @@
         "language": setLanguage,
         "theme": setTheme,
         "time": setTime,
+        "width": setWidth,
         // constructor method
         "_create": create
     });