add auto variant of loading screen and image element

source/Ox.UI/css/Ox.UI.css

@@ -2701,6 +2701,19 @@ Miscellaneous
 .OxLoadingScreen > div > div {
     margin-top: 4px;
 }
+.OxLoadingScreen.OxAuto {
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+}
+.OxLoadingScreen.OxAuto > div {
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+}
 
 .OxSpecialLink {
     padding: 0 2px 0 2px;

source/Ox.UI/js/Core/ImageElement.js

@@ -1,5 +1,9 @@
 'use strict';
 
+/*@
+Ox.ImageElement <f> Simple image element with loading indication
+@*/
+
 Ox.ImageElement = function(options, self) {
 
     self = self || {};
@@ -11,16 +15,29 @@ Ox.ImageElement = function(options, self) {
         })
         .options(options || {})
         .update({
-            height: setSizes,
+            height: function() {
+                !self.isAuto && setSizes();
+            },
             src: loadImage,
-            width: setSizes
+            width: function() {
+                !self.isAuto && setSizes();
+            }
         })
         .addClass('OxImageElement');
 
-    self.$screen = Ox.LoadingScreen({size: 16}).appendTo(that);
+    self.isAuto = !self.options.width && !self.options.height;
+
+    Ox.print('IMAGE OPTS', self.options, self.isAuto)
+
+    self.$screen = Ox.LoadingScreen({
+            size: 16,
+            width: self.options.width,
+            height: self.options.height
+        })
+        .appendTo(that);
 
     loadImage();
-    setSizes();
+    !self.isAuto && setSizes();
 
     function loadImage() {
         if (self.$image) {

source/Ox.UI/js/Core/LoadingScreen.js

@@ -1,25 +1,36 @@
 'use strict';
 
+/*@
+Ox.LoadingScreen <f> Simple loading screen
+@*/
+
 Ox.LoadingScreen = function(options, self) {
 
     self = self || {};
     var that = Ox.Element({}, self)
         .defaults({
-            height: 256,
+            height: 0,
             size: 32,
             text: '',
-            width: 256
+            width: 0
         })
         .options(options || {})
         .update({
-            height: setSizes,
+            height: function() {
+                !self.isAuto && setSizes();
+            },
             text: function() {
                 self.$text && self.$text.html(self.options.text);
             },
-            width: setSizes
+            width: function() {
+                !self.isAuto && setSizes();
+            }
         })
         .addClass('OxLoadingScreen');
 
+    self.isAuto = !self.options.width && !self.options.height;
+    self.isAuto && that.addClass('OxAuto')
+
     self.$box = $('<div>').appendTo(that);
 
     setSizes();
@@ -43,15 +54,17 @@ Ox.LoadingScreen = function(options, self) {
             width: (self.options.text ? 256 : self.options.size),
             height: self.options.size + (self.options.text ? 24 : 0)
         };
-        css.left = Math.floor((self.options.width - css.width) / 2);
-        css.top = Math.floor((self.options.height - css.height) / 2);
+        if (!self.isAuto) {
+            css.left = Math.floor((self.options.width - css.width) / 2);
+            css.top = Math.floor((self.options.height - css.height) / 2);
+            that.css({
+                width: self.options.width + 'px',
+                height: self.options.height + 'px'
+            });
+        }
         css = Ox.map(css, function(value) {
             return value + 'px';
         });
-        that.css({
-            width: self.options.width + 'px',
-            height: self.options.height + 'px'
-        });
         self.$box.css(css);
     }