// vim: et:ts=4:sw=4:sts=4:ft=js Ox.Picker = function(options, self) { var self = self || {}, that = new Ox.Element('div', self) .defaults({ element: null, elementHeight: 128, elementWidth: 256, id: '', overlap: 'none' }) .options(options || {}); self.$selectButton = new Ox.Button({ overlap: self.options.overlap, title: 'select', type: 'image' }) .click(showMenu) .appendTo(that); self.$menu = new Ox.Element('div') .addClass('OxPicker') .css({ width: self.options.elementWidth + 'px', height: (self.options.elementHeight + 24) + 'px' }); self.options.element .css({ width: self.options.elementWidth + 'px', height: self.options.elementHeight + 'px' }) .appendTo(self.$menu); self.$bar = new Ox.Bar({ orientation: 'horizontal', size: 24 }) .appendTo(self.$menu); that.$label = new Ox.Label({ width: self.options.elementWidth - 60 }) .appendTo(self.$bar); self.$doneButton = new Ox.Button({ title: 'Done', width: 48 }) .click(hideMenu) .appendTo(self.$bar); self.$layer = $('
') .addClass('OxLayer') .click(hideMenu); function hideMenu() { self.$menu.detach(); self.$layer.detach(); self.$selectButton .removeClass('OxSelected') .css({ MozBorderRadius: '8px', WebkitBorderRadius: '8px' }); that.triggerEvent('hide'); }; function showMenu() { var offset = that.offset(), left = offset.left, top = offset.top + 15; self.$selectButton .addClass('OxSelected') .css({ MozBorderRadius: '8px 8px 0 0', WebkitBorderRadius: '8px 8px 0 0' }); self.$layer.appendTo(Ox.UI.$body); self.$menu .css({ left: left + 'px', top: top + 'px' }) .appendTo(Ox.UI.$body); that.triggerEvent('show'); }; return that; };