some fixes for map, range and videopreview

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

@@ -2118,6 +2118,14 @@ Video
 }
 .OxVideoPreview > .OxFrame {
     position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 16px;
+    overflow: hidden;
+}
+.OxVideoPreview > OxFrame > img {
+    position: absolute;
 }
 .OxVideoPreview > .OxTimeline {
     position: absolute;

source/Ox.UI/js/Form/Ox.Range.js

@@ -45,16 +45,16 @@ Ox.Range = function(options, self) {
                 value: 0,
                 valueNames: null,
             })
-            .options(Ox.extend(options, {
+            .options(options || {})
-                arrowStep: options.arrowStep ?
-                    options.arrowStep : options.step,
-                trackImages: $.makeArray(options.trackImages || [])
-            }))
             .addClass('OxRange')
             .css({
                 width: self.options.size + 'px'
             });
 
+    self.options.arrowStep = options.arrowStep || self.options.step;
+    self.options.trackImages = Ox.isArray(self.options.trackImages)
+        ? self.options.trackImages : [self.options.trackImages];
+
     Ox.extend(self, {
         trackColors: self.options.trackColors.length,
         trackImages: self.options.trackImages.length,
@@ -145,7 +145,11 @@ Ox.Range = function(options, self) {
 
     function clickArrow(data, i, animate) {
         // fixme: shift doesn't work, see menu scrolling
-        setValue(self.options.value + self.options.arrowStep * (i == 0 ? -1 : 1) * (data.shiftKey ? 2 : 1), animate);
+        setValue(
+            self.options.value
+            + self.options.arrowStep * (i == 0 ? -1 : 1) * (data.shiftKey ? 2 : 1),
+            animate
+        );
     }
 
     function clickTrack(data) {
@@ -209,12 +213,12 @@ Ox.Range = function(options, self) {
         self.$thumb.stop().animate({
             marginLeft: (getPx(self.options.value) - 1) + 'px',
             //width: self.thumbSize + 'px'
-        }, animate ? 200 : 0, function() {
+        }, animate ? 250 : 0, function() {
             if (self.options.thumbValue) {
                 self.$thumb.options({
-                    title: self.options.valueNames ?
+                    title: self.options.valueNames
-                            self.options.valueNames[self.options.value] :
+                        ? self.options.valueNames[self.options.value]
-                            self.options.value
+                        : self.options.value
                 });
             }
         });
@@ -240,9 +244,7 @@ Ox.Range = function(options, self) {
             //time = getTime(self.options.value, value);
             self.options.value = value;
             setThumb(animate);
-            that.triggerEvent('change', {
+            that.triggerEvent('change', {value: value});
-                value: value
-            });
         }
     }
 

source/Ox.UI/js/List/Ox.List.js

@@ -662,6 +662,7 @@ Ox.List = function(options, self) {
     }
 
     function getWidth() {
+        //Ox.print('LIST THAT.WIDTH()', that.width())
         return that.width() - (that.$content.height() > that.height() ? Ox.UI.SCROLLBAR_SIZE : 0);
     }
 
@@ -731,9 +732,9 @@ Ox.List = function(options, self) {
                     self.$items[pos].appendTo(self.$pages[page]);
                 });
                 page == 0 && fillFirstPage();
-                // fixme: why does emptyPage sometimes have no methods?
+                // FIXME: why does emptyPage sometimes have no methods?
                 //Ox.print('emptyPage', $emptyPage)
-                $emptyPage.removeElement && $emptyPage.removeElement();
+                $emptyPage && $emptyPage.removeElement && $emptyPage.removeElement();
                 self.$pages[page].appendTo(that.$content);
                 !Ox.isUndefined(callback) && callback(); // fixme: callback necessary? why not bind to event?
             }));

source/Ox.UI/js/Map/Ox.Map.js

@@ -36,6 +36,7 @@ Ox.Map <function> Basic map object
         showTypes       <b|false> If true, color markers according to place type
         statusbar       <b|false> If true, the map has a statusbar
         toolbar         <b|false> If true, the map has a toolbar
+        zoombar         <b|false> If true, the map has a zoombar
     self <o|{}> Shared private variable
     # EVENTS -------------------------------------------------------------------
     addplace <!> Fires when a place has been added
@@ -73,6 +74,8 @@ Ox.Map <function> Basic map object
                         lat <n> Latitude
                         lng <n> Longitude
             types <[s]> Types (like "country" or "political")
+    selectplace <!> Fires when a place has been selected or deselected
+        place <o> Place object
     # EXAMPLES -----------------------------------------------------------------
     <script>
         // simple
@@ -104,6 +107,7 @@ Ox.Map = function(options, self) {
             statusbar: false,
             toolbar: false,
             zoombar: false
+            // fixme: width, height
         })
         .options(options || {})
         .addClass('OxMap')
@@ -355,7 +359,7 @@ Ox.Map = function(options, self) {
 
     self.$scaleLabel = Ox.Label({
             textAlign: 'center',
-            title: '...'
+            title: '...' // fixme ???
         })
         .addClass('OxMapLabel')
         .css({right: '4px', top: '4px'});
@@ -545,10 +549,10 @@ Ox.Map = function(options, self) {
     }
 
     function getMapHeight() {
-        return self.options.height -
+        return self.options.height
-            self.options.statusbar * 24 -
+            - self.options.statusbar * 24
-            self.options.toolbar * 24 -
+            - self.options.toolbar * 24
-            self.options.zoombar * 16;
+            - self.options.zoombar * 16;
     }
 
     function getMapType() {
@@ -560,27 +564,34 @@ Ox.Map = function(options, self) {
             callback = point;
             point = self.map.getCenter();
         }
-        //Ox.print('CALLING ZOOM SERVICE', point.lat(), point.lng())
         self.maxZoomService.getMaxZoomAtLatLng(point, function(data) {
-            //Ox.print('ZOOM SERVICE', data.status, data.zoom)
             callback(data.status == 'OK' ? data.zoom : null);
         });
     }
 
     function getMetersPerPixel() {
+        // fixme: this is wrong when resizing the map horizontally
         var mapWidth = self.$map.width(),
             span = self.map.getBounds().toSpan().lng();
+        /*
         if (span >= 360) {
             span = 360 * mapWidth / Ox.MAP_TILE_SIZE;
         }
-        return span * Ox.getMetersPerDegree(self.map.getCenter().lat()) / mapWidth;
+        */
+        return Ox.getMetersPerDegree(self.map.getCenter().lat()) * span / mapWidth;
     }
 
     function getMinZoom() {
-        return 0;
+        return self.mapHeight > 1024 ? 3
+            : self.mapHeight > 512 ? 2
+            : self.mapHeight > 256 ? 1
+            : 0;
+        // fixme: there must be a function for this...
+        /*
         return Math.ceil(
             Ox.log(self.mapHeight / Ox.MAP_TILE_SIZE, 2)
         );
+        */
     }
 
     function getPlaceById(id) {
@@ -714,7 +725,11 @@ Ox.Map = function(options, self) {
             google.maps.event.addListener(self.map, 'idle', mapChanged);
             google.maps.event.addListener(self.map, 'zoom_changed', zoomChanged);
             google.maps.event.addListenerOnce(self.map, 'tilesloaded', tilesLoaded);
+
             mapBounds && self.map.fitBounds(mapBounds);
+            if (self.map.getZoom() < self.minZoom) {
+                self.map.setZoom(self.minZoom);
+            }
 
             self.places = [];
             if (!self.isAsync) {
@@ -1040,6 +1055,7 @@ Ox.Map = function(options, self) {
             self.options.selected = id;
             setStatus();
             that.triggerEvent('selectplace', place);
+            // FIXME: all these events should rather pass {place: place}
         }
     };
 
@@ -1300,6 +1316,19 @@ Ox.Map = function(options, self) {
             size: self.options.width
         });
         */
+
+        self.options.height = that.$element.height();
+        self.options.width = that.$element.width();
+        self.mapHeight = getMapHeight();
+        self.minZoom = getMinZoom();
+        Ox.print('map w/h', self.options.width, self.options.height)
+        self.$map.css({
+            height: self.mapHeight + 'px',
+            width: self.options.width + 'px'
+        });
+        self.options.zoombar && self.$zoomInput.options({
+            size: self.options.width
+        });
         updateFormElements();
         google.maps.event.trigger(self.map, 'resize');
 		return that;

source/Ox.UI/js/Panel/Ox.SplitPanel.js

@@ -145,6 +145,7 @@ Ox.SplitPanel = function(options, self) {
                 css[self.edges[1]] = (
                     self.length == 3 ? getVisibleSize(self.options.elements[2]) : 0
                 ) + 'px';
+                Ox.print('i==1 CSS', css)
             } else {
                 if (element.size == 'auto') {
                     css[self.edges[0]] = getVisibleSize(self.options.elements[0])
@@ -169,6 +170,7 @@ Ox.SplitPanel = function(options, self) {
                 } else {
                     self.$resizebars[i == 0 ? 0 : 1].css(css);
                 }
+                self.$resizebars[i == 0 ? 0 : 1].options({size: element.size});
             }
             
         });
@@ -247,7 +249,7 @@ Ox.SplitPanel = function(options, self) {
     size <f> Get or set size of an element
         (id) -> <i> Returns size
         (id, size) -> <o> Sets size, returns SplitPanel
-        (id, size, animate) -> <o> Sets size with animation, returns SplitPanel
+        (id, size, callback) -> <o> Sets size with animation, returns SplitPanel
         id <i> The element's id or position
         size <i> New size, in px
         callback <b|f> Callback function (passing true animates w/o callback)

source/Ox.UI/js/Video/Ox.VideoPreview.js

@@ -25,11 +25,14 @@ Ox.VideoPreview = function(options, self) {
     self.loaded = [];
     self.queue = [];
 
-    self.$frame = $('<img>')
+    self.$frameElement = $('<div>')
         .addClass('OxFrame')
+        .appendTo(that.$element)
+
+    self.$frame = $('<img>')
         .attr({src: self.options.getFrame(self.options.position)})
         .css(getFrameCSS())
-        .appendTo(that.$element);
+        .appendTo(self.$frameElement);
 
     self.$timeline = $('<img>')
         .addClass('OxTimeline')
@@ -65,19 +68,25 @@ Ox.VideoPreview = function(options, self) {
     }
 
     function getFrameCSS() {
-        var css = {};
+        var css = {},
-        // fixme: these are still wrong
+            elementWidth = self.options.width,
-        if (!self.options.scaleToFill) {
+            elementHeight = self.options.height - 16,
-            css.width = self.options.width;
+            elementRatio = elementWidth / elementHeight,
-            css.height = Math.round(css.width / self.options.frameRatio);
+            frameRatio = self.options.frameRatio,
-            css.marginTop = Math.floor((self.options.height - 16 - css.height) / 2);
+            frameIsWider = frameRatio > elementRatio;
+        if (self.options.scaleToFill) {
+            css.width = frameIsWider ? elementHeight * frameRatio : elementWidth;
+            css.height = frameIsWider ? elementHeight : elementWidth / frameRatio;
+            css.marginLeft = frameIsWider ? (elementWidth - css.width) / 2 : 0;
+            css.marginTop = frameIsWider ? 0 : (elementHeight - css.height) / 2;
         } else {
-            css.height = self.options.height - 16;
+            css.width = frameIsWider ? elementWidth : elementHeight * frameRatio;
-            css.width = Math.round(css.height * self.options.frameRatio);
+            css.height = frameIsWider ? elementWidth / frameRatio : elementHeight;
-            css.marginLeft = Math.floor((self.options.width - css.width) / 2);
+            css.marginLeft = frameIsWider ? 0 : (css.width - elementWidth) / 2;
+            css.marginTop = frameIsWider ? (css.height - elementHeight) / 2 : 0;
         }
         return Ox.map(css, function(value) {
-            return value + 'px';
+            return Math.round(value) + 'px';
         });
     }