better icon loading for firefox

build/css/ox.ui.classic.css

@@ -165,7 +165,7 @@ Lists
 ================================================================================
 */
 
-.OxThemeClassic .OxIconList .OxItem > .OxIcon img.OxLoading {
+.OxThemeClassic .OxIconList .OxItem img.OxLoading {
     border-color: rgb(208, 208, 208);
     background: -moz-linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224));
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(255, 255, 255)), color-stop(1, rgb(224, 224, 224)));

build/css/ox.ui.css

@@ -692,7 +692,7 @@ Lists
 
 .OxIconList .OxItem > .OxIcon,
 .OxIconList .OxItem > .OxText {
-    left: -2px;
+    //left: -2px;
 }
 
 .OxIconList .OxItem > .OxIcon img {

build/css/ox.ui.modern.css

@@ -146,7 +146,7 @@ Lists
 ================================================================================
 */
 
-.OxThemeModern .OxIconList .OxItem > .OxIcon img.OxLoading {
+.OxThemeModern .OxIconList .OxItem img.OxLoading {
     border-color: rgb(48, 48, 48);
     background: -moz-linear-gradient(top, rgb(32, 32, 32), rgb(0, 0, 0));
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(32, 32, 32)), color-stop(1, rgb(0, 0, 0)));

build/js/ox.js

@@ -1731,7 +1731,7 @@ Ox.wordwrap = function(str, len, sep, bal, spa) {
     >>> Ox.wordwrap("These are short words", 16, "<br/>", true)
     These are <br/>short words
     */
-    var str = str.toString(),
+    var str = str === null ? '' : str.toString(),
         len = len || 80,
         sep = sep || "<br/>",
         bal = bal || false,

build/js/ox.ui.js

@@ -5719,7 +5719,7 @@ requires
             height: self.options.size * 1.5,
             lineLength: self.options.size == 64 ? 17 : 23,
             lines: self.options.size == 64 ? 4 : 5,
-            url: oxui.path + '/png/ox.ui.' + Ox.theme() + '/icon.png',
+            url: oxui.path + '/png/ox.ui/transparent.png',
             width: self.options.size
         });
         self.title = formatText(self.options.title, self.lines - 1, self.lineLength);
@@ -5732,14 +5732,14 @@ requires
         that.$icon = $('<div>')
             .addClass('OxIcon')
             .css({
-                top: self.options.size == 64 ? -68 : -120,
+                top: self.options.size == 64 ? -72 : -124,
                 width: (self.options.size + 4) + 'px',
-                height: self.options.size + 'px'
+                height: (self.options.size + 4) + 'px'
             });
         that.$iconImage = $('<img>')
             .addClass('OxLoading OxTarget')
             .attr({
-                src: self.options.url
+                src: self.url
             })
             .css({
                 width: self.options.width + 'px',
@@ -5748,7 +5748,7 @@ requires
             .mousedown(mousedown)
             .mouseenter(mouseenter)
             .mouseleave(mouseleave)
-            .load(load);
+            .one('load', load);
         that.$textBox = $('<div>')
             .addClass('OxText')
             .css({
@@ -5770,17 +5770,19 @@ requires
             .addClass('OxReflection')
             .css({
                 top: self.options.size + 'px',
-                width: self.options.size + 'px',
+                width: (self.options.size + 4) + 'px',
                 height: (self.options.size / 2) + 'px'
             });
         that.$reflectionImage = $('<img>')
             .addClass('OxLoading')
             .attr({
-                src: self.options.url
+                src: self.url
             })
             .css({
                 width: self.options.width + 'px',
-                height: self.options.height + 'px'
+                height: self.options.height + 'px',
+                // firefox is 1px off when centering images with odd width and scaleY(-1)
+                paddingLeft: ($.browser.mozilla && self.options.width % 2 ? 1 : 0) + 'px'
             });
         that.$gradient = $('<div>')
             .css({
@@ -5821,8 +5823,16 @@ requires
         }
 
         function load() {
-            that.$iconImage.removeClass('OxLoading');
-            that.$reflectionImage.removeClass('OxLoading');
+            that.$iconImage.attr({
+                    src: self.options.url
+                })
+                .one('load', function() {
+                    that.$iconImage.removeClass('OxLoading');
+                    that.$reflectionImage.removeClass('OxLoading');
+                });
+            that.$reflectionImage.attr({
+                src: self.options.url
+            });
         }
 
         function mousedown(e) {
@@ -6071,9 +6081,11 @@ requires
         }
 
         function getPage() {
-            return self.options.orientation == 'horizontal'
-                ? Math.floor((that.scrollLeft() - self.listMargin / 2) / self.pageWidth)
-                : Math.floor((that.scrollTop() - self.listMargin / 2) / self.pageHeight);
+            return Math.max(
+                Math.floor(self.options.orientation == 'horizontal' ?
+                (that.scrollLeft() - self.listMargin / 2) / self.pageWidth :
+                (that.scrollTop() - self.listMargin / 2) / self.pageHeight
+            ), 0);
         }
 
         function getPositions() {