merging changes

demos/doc2/js/doc.js

@@ -4,7 +4,7 @@ Ox.load('UI', {
 }, function() {
     Ox.Theme('classic');
     $.getJSON(Ox.UI.PATH + 'json/Ox.UI.json', function(files) {
-        Ox.DocPanel({
+        doc = Ox.DocPanel({
                 files: Ox.merge([
                     'Ox.js',
                     'Ox.Geo/Ox.Geo.js',
@@ -20,7 +20,18 @@ Ox.load('UI', {
                     return item.section || file.split('/')[2];
                 },
                 path: Ox.PATH
-            })
+            }).bindEvent({
-            .appendTo(Ox.UI.$body);
+                load: function() {
+                    doc.selectItem(document.location.hash.substring(1));
+                },
+                select: function(data) {
+                    if(data.ids)
+                        document.location.hash = data.ids[0];
+                }
+            });
+        doc.appendTo(Ox.UI.$body);
+        window.onhashchange = function() {
+            doc.selectItem(document.location.hash.substring(1))
+        };
     });
 });

source/Ox.UI/js/Bar/Ox.Bar.js

@@ -1,6 +1,14 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
-/**
+/*@
-*/
+Ox.Bar <f:Ox.Element> Bar
+    () ->              <o> Bar object
+    (options) ->       <o> Bar object
+    (options, self) -> <o> Bar object
+    options <o> Options object
+        orientation <s|horizontal>
+        size        <s|medium> can be small, medium, large or number
+    self    <o> Shared private variable
+@*/
 Ox.Bar = function(options, self) {
     var self = self || {},
         that = new Ox.Element({}, self)

source/Ox.UI/js/Bar/Ox.Resizebar.js

@@ -1,4 +1,21 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+/*@
+Ox.Resizebar <f:Ox.Element> Resizebar
+    () ->              <f> Resizebar object
+    (options) ->       <f> Resizebar object
+    (options, self) -> <f> Resizebar object
+    options <o> Options object
+        collapsed   <b|false> inital collapse state
+        collapsible <b|true> collapse state can be changed
+        edge        <s|left> edge
+        elements    <a|[]> elements of the bar
+        orientation <s|horizontal> orientation, can be horizontal or vertical
+        panel       <o|null> panel object
+        resizeable  <b|true> can bar be resized
+        resize      <a|[]> array with possible sizes
+        size        <n|0> default size
+    self    <o> Shared private variable
+@*/
 /**
 */
 Ox.Resizebar = function(options, self) {

source/Ox.UI/js/Bar/Ox.Tabbar.js

@@ -1,4 +1,14 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+/*@
+Ox.Tabbar <f:Ox.Bar> Tabbar
+    () ->              <o> Tabbar object
+    (options) ->       <o> Tabbar object
+    (options, self) -> <o> Tabbar object
+    options <o> Options object
+        selected <n|0>  selected item
+        tabs     <a|[]> tabs
+    self    <o> Shared private variable
+@*/
 /**
 */
 Ox.Tabbar = function(options, self) {

source/Ox.UI/js/Calendar/Ox.Calendar.js

@@ -1,7 +1,7 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
 
 /*@
-Ox.Calendar <f> Basic calendar object
+Ox.Calendar <f:Ox.Element> Basic calendar object
     () ->              <f> Calendar object
     (options) ->       <f> Calendar object
     (options, self) -> <f> Calendar object

source/Ox.UI/js/Calendar/Ox.CalendarDate.js

@@ -1,4 +1,12 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+/*@
+Ox.CalendarDate <f> CalendarDate
+    () ->              <o> CalendarData object
+    (options) ->       <o> CalendarData object
+    options <o> Options object
+        start <d>   start date
+        stop  <d>   stop date
+@*/
 Ox.CalendarDate = function(options) {
 
     var self = {},

source/Ox.UI/js/Core/Ox.App.js

@@ -1,32 +1,21 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
-/*
-============================================================================
-Application
-============================================================================
-*/
 
-// fixme: get rid of launch, fire load event
+/*@
+Ox.App <f> Basic application instance that communicates with a JSON API
+    () ->              <f> App object
+    (options) ->       <f> App object
+    (options, self) -> <f> App object
+    options <o> Options object
+        timeout <n> request timeout
+        type    <s> HTTP Request type, i.e. 'GET' or 'POST'
+        url     <s> JSON API url
+    self <o>    Shared private variable
+    load <!>    app loaded
+
+@*/
 
 Ox.App = (function() {
 
-    /***
-    Ox.App
-        Basic application instance that communicates with a JSON API.
-        The JSON API must support at least the following actions:
-        api             returns all api methods
-        init            returns data (site, user, ...)
-    Options
-        timeout         API timeout in msec
-        type            'GET' or 'POST'
-        url             URL of the API
-    Methods
-        api[action]     make a request
-        api.cancel      cancel a request
-        options         get or set options
-    Events
-        load            app loaded
-    ***/
-
     return function(options) {
 
         options = options || {};
@@ -61,6 +50,12 @@ Ox.App = (function() {
             url: self.options.url
         });
 
+        /*@
+        api <o> bakcend API
+            [action] <f> all api requests available on backend
+            cancel   <f> cancel a request
+            options  <f> get or set options
+        @*/
         that.api.api(function(result) {
             Ox.forEach(result.data.actions, function(val, key) {
                 that.api[key] = function(data, callback) {
@@ -114,10 +109,19 @@ Ox.App = (function() {
             };
         }
 
+        /*@
+        change <f> change key/value
+            (key, value) -> <u> currently not implemented
+        @*/
         self.change = function(key, value) {
             
         };
 
+        /*@
+        options <f> get/set options, see Ox.getset
+            () -> <o> get options
+            (options) -> <o> update/set options
+        @*/
         that.options = function() {
             return Ox.getset(self.options, Array.prototype.slice.call(arguments), self.change, that);
         };

source/Ox.UI/js/Core/Ox.Clipboard.js

@@ -1,12 +1,15 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+/*@
+Ox.Clipboard <o> Basic clipboard handler
+    copy <f> copy to clipbloard
+        (data) -> <u> set clipboard to data
+    paste <f> paste from clipbload
+        () -> <o> get clipboard data
+    _print <f> debug function
+        () -> <u> print clipboard contents to console
+    data <o> clipboard object
+@*/
 Ox.Clipboard = function() {
-    /***
-    Ox.Clipboard
-        Basic clipboard handler
-    Methods
-        copy(data)      copy data to clipboard
-        paste           paste data from clipboard
-    ***/
     var clipboard = {};
     return {
         _print: function() {

source/Ox.UI/js/Core/Ox.Container.js

@@ -4,6 +4,14 @@
 // 0, 1, 2, etc, so that append would append 0, and appendTo
 // would append (length - 1)?
 
+/*@
+Ox.Container <f> Container (depricated)
+    () ->              <o> Container object
+    (options) ->       <o> Container object
+    (options, self) -> <o> Container object
+    options <o> Options object
+    self    <o> Shared private variable
+@*/
 Ox.Container = function(options, self) {
     // fixme: to be deprecated
     var that = new Ox.Element({}, self)

source/Ox.UI/js/Core/Ox.DocPage.js

@@ -1,3 +1,12 @@
+/*@
+Ox.DocPage <f> DocPage
+    () ->              <o> DocPage object
+    (options) ->       <o> DocPage object
+    (options, self) -> <o> DocPage object
+    options <o> Options object
+        item <o> doc item
+    self    <o> Shared private variable
+@*/
 Ox.DocPage = function(options, self) {
 
     self = self || {};
@@ -162,4 +171,4 @@ Ox.DocPage = function(options, self) {
 
     return that;
 
-};
+};

source/Ox.UI/js/Core/Ox.DocPanel.js

@@ -1,5 +1,19 @@
 /*@
 Ox.DocPanel <f> Documentation Panel
+    () ->              <f> Documentation Panel
+    (options) ->       <f> Documentation Panel
+    (options, self) -> <f> Documentation Panel
+    options <o> Options object
+            collapsible <b|true> can be collabsed
+            files <a|[]> files to parse for docs
+            getModule <f> returns module for given item
+            getSection <f> returns section for given item
+            path <s|''> path prefix
+            resizable <b|true> is resizable
+            resize <a|[128, 256, 384]> resize positions
+            size <s|256> default size
+    self <o> shared private variable
+    load <!> fired once all docs are loaded
 @*/
 
 Ox.DocPanel = function(options, self) {
@@ -43,6 +57,7 @@ Ox.DocPanel = function(options, self) {
 
     loadList(function(docItems) {
         self.items = docItems;
+        that.triggerEvent('load', {});
     });
 
     function loadList(callback) {
@@ -58,6 +73,7 @@ Ox.DocPanel = function(options, self) {
                 }
             });
         });
+
         function makeTree(docItems) {
             var treeItems = [];
             docItems.forEach(function(docItem) {
@@ -145,6 +161,7 @@ Ox.DocPanel = function(options, self) {
                 });
             }
         }
+        that.triggerEvent('select', data);
     }
 
     function sortByTitle(a, b) {
@@ -156,7 +173,14 @@ Ox.DocPanel = function(options, self) {
         }
         return ret;
     }
-
+    /*@
+    selectItem <f> select item
+        (id) -> <u>  select an item
+        id  <s> if of item to select
+    @*/
+    that.selectItem = function(id) {
+        self.$list.triggerEvent('select', {'ids': [id]});
+    }
     return that;
 
-};
+};

source/Ox.UI/js/Core/Ox.Focus.js

@@ -1,13 +1,9 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+/*@
+Ox.Focus <o> Basic focus handler
+@*/
+
 Ox.Focus = function() {
-    /***
-    Ox.Focus
-        Basic focus handler
-    Methods
-        blur(id)        blur element
-        focus(id)       focus element
-        focused()       return id of focused element, or null
-    ***/
     var stack = [];
     return {
         _print: function() {
@@ -17,6 +13,10 @@ Ox.Focus = function() {
             $('.OxFocus').removeClass('OxFocus');
             stack = [];
         },
+        /*@
+        blur <f> blur element
+            (id) -> <u> blur element by id
+        @*/
         blur: function(id) {
             var index = stack.indexOf(id);
             if (index > -1 && index == stack.length - 1) {
@@ -28,6 +28,10 @@ Ox.Focus = function() {
                 Ox.print('blur', id, stack);
             }
         },
+        /*@
+        focus <f> focus element
+            (id) -> <u> focus element by id
+        @*/
         focus: function(id) {
             var index = stack.indexOf(id);
             if (index == -1 || index < stack.length - 1) {
@@ -38,6 +42,10 @@ Ox.Focus = function() {
                 Ox.print('focus', id, stack);
             }
         },
+        /*@
+        focused <f> return id of focused element, or null
+            () -> <s> get id of currently focused element
+        @*/
         focused: function() {
             return stack.length ? stack[stack.length - 1] : null;
         }

source/Ox.UI/js/Core/Ox.LoadingIcon.js

@@ -1,4 +1,14 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+/*@
+Ox.LoadingIcon <f:Ox.Element> Loading Icon Element
+    () ->              <f> Loading Icon Element
+    (options) ->       <f> Loading Icon Element
+    (options, self) -> <f> Loading Icon Element
+    options <o> Options object
+        size     <s|medium> size of icon
+    self <o>    Shared private variable
+@*/
+
 Ox.LoadingIcon = function(options, self) {
     var self = self || {},
         that = new Ox.Element('<img>', self)
@@ -12,12 +22,21 @@ Ox.LoadingIcon = function(options, self) {
             .addClass(
                 'OxLoadingIcon Ox' + Ox.toTitleCase(self.options.size)
             );
+    /*@
+    start <f> Start loading animation
+        ()  -> <f> Loading Icon Element
+    @*/
     that.start = function() {
         that.animate({
             opacity: 1
         }, 250);
         return that;
     };
+
+    /*@
+    stop <f> Stop loading animation
+        ()  -> <f> Loading Icon Element
+    @*/
     that.stop = function() {
         that.animate({
             opacity: 0

source/Ox.UI/js/Core/Ox.Request.js

@@ -1,18 +1,14 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
-Ox.Request = function(options) {
+/*@
+Ox.Request <o> Basic request handler object
+FIXME: options is not a property, just documenting defaults
+options <o> Options object
+    timeout <n|60000> request timeout
+    type    <s|POST>  request type, possible values POST, GET, PUT, DELETE
+    url     <s>       request url
+@*/
 
-    /***
+Ox.Request = function(options) {
-    Ox.Request
-        Basic request handler
-    Options
-        timeout
-    Methods
-        cancel()        cancel request
-        clearCache()    clear cache
-        options()       get or set options
-        requests()      return number of active requests
-        send()          send request
-    ***/
 
     var cache = {},
         //dfd = $.Deferred(),
@@ -27,7 +23,12 @@ Ox.Request = function(options) {
         };
 
     return {
-
+        /*@
+        cancel <f> cancel pending requests
+            ()  -> <u>  cancel all requests
+            (f)  -> <u>  cancel all requests where function returns true
+            (n)  -> <u>  cancel request by id
+        @*/
         cancel: function() {
             if (arguments.length == 0) {
                 // cancel all requests
@@ -44,19 +45,42 @@ Ox.Request = function(options) {
                 delete requests[arguments[0]];
             }
         },
-
+        /*@
+        clearCache <f> clear cached results
+            () -> <u>
+        @*/
         clearCache: function() {
             cache = {};
         },
 
+        /*@
+        options <f> get/set options
+            ()        -> <o> get options
+            (options) -> <o> set options
+            options <o> Options Object
+        @*/
         options: function(options) {
             return Ox.getset(self.options, options, $.noop(), this);
         },
 
+        /*@
+        requests <f> pending requests
+            () -> <n> returns number of requests
+        @*/
         requests: function() {
             return Ox.len(requests);
         },
 
+        /*@
+        send <f> send request
+            (options) -> <n> returns request id
+            options <o> Options Object
+                age <n|-1> cache age
+                id <n|Ox.uid()> request id
+                timeout <n|self.options.timeout> overwrite default timeout
+                type <n|self.options.timeout> overwrite default type
+                url <n|self.options.timeout> overwrite default url
+        @*/
         send: function(options) {
 
             var options = $.extend({

source/Ox.UI/js/Core/Ox.Theme.js

@@ -1,14 +1,15 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
-// fixme: this should be Ox.Theme, and provide Ox.Theme.set(), Ox.Theme.load, etc.
-/**
-    if name is given as argument, switch to this theme.
-    return current theme otherwise.
 
-    Ox.theme()
+/*@
-        get theme
+Ox.Theme <f> get/set theme
-    Ox.theme('foo')
+    ()      -> <s>  Get current theme
-        set theme to 'foo'
+    (theme) -> <s>  Set current theme
-*/
+    theme <s>   name of theme
+    > Ox.Theme()
+    'classic'
+    > Ox.Theme('modern')
+    'modern'
+@*/
 
 Ox.Theme = function(theme) {
 

source/Ox.UI/js/Form/Ox.Button.js

@@ -1,18 +1,29 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+/*@
+Ox.Button <f:Ox.Element> Button Object
+    () ->              <f> Button Object
+    (options) ->       <f> Button Object
+    (options, self) -> <f> Button Object
+    options <o> Options object
+        disabled   <b|false> disabled
+        group      <b|false> is part of group
+        id:        <s|''> button id
+        overlap    <s|none> overlap
+        selectable <b|false> is selecatable
+        selected   <b|false> is selected
+        size       <s|medium> button size
+        style      <s|default> // can be default, checkbox, symbol, or tab
+        title      <s|a|''> title, can be array of titles
+        tooltip    <s|a|''> tooltip if multiple must be same number as titles
+        type <s|text>   button type, text or image, (for image, title must be symbolTitle.svg must be availabe)
+        width <s|auto>  button width
+    self <o>    Shared private variable
+    click    <!> non-selectable button was clicked
+    deselect <!> selectable button was deselected
+    select   <!> selectable button was selected
+@*/
+
 Ox.Button = function(options, self) {
-
-    /**
-        methods:
-            toggleDisabled              enable/disable button
-            toggleSelected              select/unselect button
-            toggleTitle                 if more than one title was provided,
-                                        toggle to next title.
-        events:
-            click           non-selectable button was clicked
-            deselect        selectable button was deselected
-            select          selectable button was selected
-    */
-
     var self = self || {},
         that = new Ox.Element('<input>', self)
             .defaults({
@@ -137,6 +148,10 @@ Ox.Button = function(options, self) {
         }
     }
 
+    /*@
+    toggleDisabled <f>
+        () -> <u> toggle disabled state
+    @*/
     that.toggleDisabled = function() {
         that.options({
             enabled: !self.options.disabled
@@ -144,6 +159,10 @@ Ox.Button = function(options, self) {
         //self.options.disabled = !self.options.disabled;
     }
 
+    /*@
+    toggleSelected <f>
+        () -> <u> toggle selected state
+    @*/
     that.toggleSelected = function() {
         that.options({
             selected: !self.options.selected
@@ -151,6 +170,10 @@ Ox.Button = function(options, self) {
         //self.options.selected = !self.options.selected;
     }
 
+    /*@
+    toggleTitle <f>
+        () -> <u> toggle through titles
+    @*/
     that.toggleTitle = function() {
         self.selectedTitle = 1 - self.selectedTitle;
         setTitle(self.titles[self.selectedTitle].title);

source/Ox.UI/js/Form/Ox.ButtonGroup.js

@@ -1,17 +1,20 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
-Ox.ButtonGroup = function(options, self) {
+/*@
+Ox.ButtonGroup <f:Ox.Element> ButtonGroup Object
+    () ->              <f> ButtonGroup Object
+    (options) ->       <f> ButtonGroup Object
+    (options, self) -> <f> ButtonGroup Object
+    options <o> Options object
+        buttons     <a> array of buttons
+        max         <n> integer, maximum number of selected buttons, 0 for all
+        min         <n> integer, minimum number of selected buttons, 0 for none
+        selectable  <b> if true, buttons are selectable
+        type        <s> string, 'image' or 'text'
+    self <o>    Shared private variable
+    change <!>    {id, value}     selection within a group changed
+@*/
 
-    /**
+Ox.ButtonGroup = function(options, self) {
-        options
-            buttons     array of buttons
-            max         integer, maximum number of selected buttons, 0 for all
-            min         integer, minimum number of selected buttons, 0 for none
-            selectable  if true, buttons are selectable
-            type        string, 'image' or 'text'
-        methods:
-        events:
-            change  {id, value}     selection within a group changed
-    */
 
     var self = self || {},
         that = new Ox.Element({}, self)

source/Ox.UI/js/Form/Ox.Checkbox.js

@@ -1,22 +1,21 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
-Ox.Checkbox = function(options, self) {
+/*@
+Ox.Checkbox <f:Ox.Element> Checkbox Element
+    () ->              <f> Checkbox Element
+    (options) ->       <f> Checkbox Element
+    (options, self) -> <f> Checkbox Element
+    options <o> Options object
+        disabled <b> if true, checkbox is disabled
+        id <s> element id
+        group <b> if true, checkbox is part of a group
+        checked <b> if true, checkbox is checked
+        title <s> text on label
+        width <n> width in px
+    self <o>    Shared private variable
+    change <!> triggered when checked property changes, passes {checked, id, title}
+@*/
 
-    /**
+Ox.Checkbox = function(options, self) {
-        options
-            disabled        boolean, if true, checkbox is disabled
-            id              element id
-            group           boolean, if true, checkbox is part of a group
-            checked         boolean, if true, checkbox is checked
-            title           string, text on label
-            width           integer, width in px
-        methods:
-            toggleChecked   function()
-                            toggles checked property
-                            returns that
-        events:
-            change          triggered when checked property changes
-                            passes {checked, id, title}
-    */
 
     var self = self || {},
         that = new Ox.Element({}, self)
@@ -91,10 +90,18 @@ Ox.Checkbox = function(options, self) {
         }
     };
 
+    /*@
+    checked <f> get current checked state
+        () -> <b> returns self.options.checked
+    @*/
     that.checked = function() {
         return self.options.checked;
     }
 
+    /*@
+    toggleChecked <f> toggle current checked state
+        () -> <f> toggle state, returns Checkbox Element
+    @*/
     that.toggleChecked = function() {
         self.$button.toggleTitle();
         return that;

source/Ox.UI/js/Form/Ox.CheckboxGroup.js

@@ -1,16 +1,21 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
-Ox.CheckboxGroup = function(options, self) {
+/*@
+Ox.CheckboxGroup <f:Ox.Element> CheckboxGroup Object
+    () ->              <f> CheckboxGroup Object
+    (options) ->       <f> CheckboxGroup Object
+    (options, self) -> <f> CheckboxGroup Object
+    options <o> Options object
+        checkboxes      <a|[]> array of checkboxes
+        max             <n|1>  integer
+        min             <n|1>  integer
+        width           <n>    integer, width in px
+    self    <o> shared private variable
+    
+    change <!> triggered when checked property changes
+               passes {checked, id, title}
+@*/
 
-    /**
+Ox.CheckboxGroup = function(options, self) {
-        options
-            checkboxes      []  array of checkboxes
-            max             1   integer
-            min             1   integer
-            width           integer, width in px
-        events:
-            change          triggered when checked property changes
-                            passes {checked, id, title}
-    */
 
     var self = self || {},
         that = new Ox.Element({}, self)

source/Ox.UI/js/Form/Ox.ColorInput.js

@@ -1,4 +1,14 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+/*@
+Ox.ColorInput <f:Ox.InputGroup> ColorInput Element
+    () ->              <f> ColorInput Element
+    (options) ->       <f> ColorInput Element
+    (options, self) -> <f> ColorInput Element
+    options <o> Options object
+        id <s> element id
+        value <s|0, 0, 0> rgb value
+    self <o>    Shared private variable
+@*/
 Ox.ColorInput = function(options, self) {
 
     var self = $.extend(self || {}, {

source/Ox.UI/js/Form/Ox.ColorPicker.js

@@ -1,4 +1,17 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.ColorPicker <f:Ox.Element> ColorPicker Element
+    () ->              <f> ColorPicker Element
+    (options) ->       <f> ColorPicker Element
+    (options, self) -> <f> ColorPicker Element
+    options <o> Options object
+        id <s> element id
+        value <s|0, 0, 0> rgb value
+    self <o>    Shared private variable
+    change <!> triggered on change of value   
+@*/
+
 Ox.ColorPicker = function(options, self) {
 
     var self = self || {},

source/Ox.UI/js/Form/Ox.DateInput.js

@@ -1,18 +1,19 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
-Ox.DateInput = function(options, self) {
 
-    /**
+/*@
-        options:
+Ox.DateInput <f:Ox.Element> DateInput Element
-            format: 'short'
+    () ->              <f> DateInput Element
-            value:  date value
+    (options) ->       <f> DateInput Element
-            weekday: false
+    (options, self) -> <f> DateInput Element
-            width: {
+    options <o> Options object
-                day: 32,
+        format <s|short> format can be short, medium, long
-                month: options.format == 'long' ? 80 : (options.format == 'medium' ? 40 : 32),
+        value <d> date value, defaults to now
-                weekday: options.format == 'long' ? 80 : 40,
+        weekday <b|false> weekday
-                year: 48
+        width: <o> width object with day, month, weekday, year width
-            }
+    self <o>    Shared private variable
-    */
+    change <!> triggered on change of value   
+@*/
+Ox.DateInput = function(options, self) {
 
     var self = $.extend(self || {}, {
             options: $.extend({

source/Ox.UI/js/Form/Ox.DateTimeInput.js

@@ -1,4 +1,20 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.DateTimeInput <f:Ox.Element> DateTimeInput Element
+    () ->              <f> DateTimeInput Element
+    (options) ->       <f> DateTimeInput Element
+    (options, self) -> <f> DateTimeInput Element
+    options <o> Options object
+        ampm <b|false> false is 24h true is am/pm
+        format <s|short> options are short, medium, long
+        seconds <b|false> show seconds
+        value <d> defautls to now
+        weekday <b|false> weekday
+    self <o>    Shared private variable
+    change <!> triggered on change of value   
+@*/
+
 Ox.DateTimeInput = function(options, self) {
 
     var self = self || {},

source/Ox.UI/js/Form/Ox.Filter.js

@@ -1,11 +1,19 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
-Ox.Filter = function(options, self) {
 
-    /***
+/*@
-    Options:
+Ox.Filter <f:Ox.Element> Filter Element
-    Methods:
+    () ->              <f> Filter Element
-    Events:
+    (options) ->       <f> Filter Element
-    ***/
+    (options, self) -> <f> Filter Element
+    options <o> Options object
+        findKeys <a|[]> keys
+        query <o> query object with conditions, operator
+        sortKeys <a|[]> keys to sort by
+        viewKeys <a|[]> visible keys
+    self <o>    Shared private variable
+@*/
+
+Ox.Filter = function(options, self) {
 
     var self = self || {},
         that = new Ox.Element({}, self)

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

@@ -1,8 +1,19 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
-Ox.Form = function(options, self) {
 
-    /**
+/*@
-    */
+Ox.Form <f:Ox.Element> Form Object
+    () ->              <f> Form Object
+    (options) ->       <f> Form Object
+    (options, self) -> <f> Form Object
+    options <o> Options object
+        error  <s> error
+        id     <s> id
+        items  <a|[]> []
+        submit <f|null> on submit function
+    self    <o> shared private variable
+@*/
+
+Ox.Form = function(options, self) {
 
     var self = self || {},
         that = new Ox.Element({}, self)

source/Ox.UI/js/Form/Ox.FormElementGroup.js

@@ -1,4 +1,19 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.FormElementGroup <f:Ox.Element> FormElementGroup Element
+    () ->              <f> FormElementGroup Element
+    (options) ->       <f> FormElementGroup Element
+    (options, self) -> <f> FormElementGroup Element
+    options <o> Options object
+        id <s> element id
+        elements <a|[]> elements in group
+        float <s|left> alignment
+        separators <a|[]> separators (not implemented)
+        width <n|0> group width
+    self <o>    Shared private variable
+@*/
+
 Ox.FormElementGroup = function(options, self) {
 
     var self = self || {},

source/Ox.UI/js/Form/Ox.FormItem.js

@@ -1,4 +1,16 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.FormItem <f:Ox.Element> FormItem Element, wrap form element with an error message
+    () ->              <f> FormItem Element
+    (options) ->       <f> FormItem Element
+    (options, self) -> <f> FormItem Element
+    options <o> Options object
+        element <o|null> element
+        error <s> error message
+    self <o>    Shared private variable
+@*/
+
 Ox.FormItem = function(options, self) {
 
     var self = self || {},
@@ -15,10 +27,18 @@ Ox.FormItem = function(options, self) {
         .addClass('OxFormMessage')
         .appendTo(that);
 
+    /*@
+    setMessage <f> set message
+        (message) -> <u> set message
+    @*/
     that.setMessage = function(message) {
         self.$message.html(message)[message !== '' ? 'show' : 'hide']();
     }
 
+    /*@
+    value <f> get value
+        () -> <s> get value of wrapped element
+    @*/
     that.value = function() {
         return self.options.element.value();
     };

source/Ox.UI/js/Form/Ox.Input.js

@@ -1,59 +1,62 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
-Ox.Input = function(options, self) {
+/*@
+Ox.Input <f:Ox.Element> Input Element
+    () ->              <f> Input Element
+    (options) ->       <f> Input Element
+    (options, self) -> <f> Input Element
+    options <o> Options object
+        arrows                      <b> if true, and type is 'float' or 'integer', display arrows
+        arrowStep                   <n> step when clicking arrows
+        autocomplete                <a> array of possible values, or
+                                    <f> function(key, value, callback), returns one or more values
+        autocompleteReplace         <b> if true, value is replaced
+        autocompleteReplaceCorrect  <b> if true, only valid values can be entered
+        autocompleteSelect          <b> if true, menu is displayed
+        autocompleteSelectHighlight <b> if true, value in menu is highlighted
+        autocompleteSelectSubmit    <b> if true, submit input on menu selection
+        autocorrect                 <s|r|f|null> ('email', 'float', 'integer', 'phone', 'url'), or
+                                    <r> regexp(value), or
+                                    <f> function(key, value, blur, callback), returns value
+        autovalidate                <f> --remote validation--
+        clear                       <b> if true, has clear button
+        disabled                    <b> if true, is disabled
+        height                      <n> px (for type='textarea' and type='range' with orientation='horizontal')
+        id                          <s> element id
+        key                         <s> to be passed to autocomplete and autovalidate functions
+        max                         <n> max value if type is 'integer' or 'float'
+        min                         <n> min value if type is 'integer' or 'float'
+        name                        <s> will be displayed by autovalidate function ('invalid ' + name)
+        overlap                     <s> '', 'left' or 'right', will cause padding and negative margin
+        picker                  <o> picker object
+        rangeOptions          <o> range options
+            arrows              <b>boolean, if true, display arrows
+            //arrowStep         <n>  number, step when clicking arrows
+            //arrowSymbols      <a> array of two strings
+            max                 <n> number, maximum value
+            min                 <n> number, minimum value
+            orientation         <s> 'horizontal' or 'vertical'
+            step                <n> number, step
+            thumbValue          <b> boolean, if true, value is displayed on thumb, or
+                                <a> array of strings per value, or
+                                <f> function(value), returns string
+            thumbSize           <n> integer, px
+            trackGradient       <s> string, css gradient for track
+            trackImage          <s> string, image url, or
+                                <a> array of image urls
+            //trackStep         <n>   number, 0 for 'scroll here', positive for step
+            trackValues         <b> boolean
+        serialize                   <f> function used to serialize value in submit
+        textAlign                   <s> 'left', 'center' or 'right'
+        type                        <s> 'float', 'integer', 'password', 'text', 'textarea'
+        value                       <s> string
+        validate                    <f> remote validation
+        width                       <n> px
 
-    /**
+    change <!> input changed event
-        options
+    submit <!> input submit event
-            arrows                      boolearn, if true, and type is 'float' or 'integer', display arrows
+@*/
-            arrowStep                   number, step when clicking arrows
+
-            autocomplete                array of possible values, or
+Ox.Input = function(options, self) {
-                                        function(key, value, callback), returns one or more values
-            autocompleteReplace         boolean, if true, value is replaced
-            autocompleteReplaceCorrect  boolean, if true, only valid values can be entered
-            autocompleteSelect          boolean, if true, menu is displayed
-            autocompleteSelectHighlight boolean, if true, value in menu is highlighted
-            autocompleteSelectSubmit    boolean, if true, submit input on menu selection
-            autocorrect                 string ('email', 'float', 'integer', 'phone', 'url'), or
-                                        regexp(value), or
-                                        function(key, value, blur, callback), returns value
-            autovalidate                --remote validation--
-            clear                       boolean, if true, has clear button
-            disabled                    boolean, if true, is disabled
-            height                      integer, px (for type='textarea' and type='range' with orientation='horizontal')
-            id                          string, element id
-            key                         string, to be passed to autocomplete and autovalidate functions
-            max                         number, max value if type is 'integer' or 'float'
-            min                         number, min value if type is 'integer' or 'float'
-            name                        string, will be displayed by autovalidate function ('invalid ' + name)
-            overlap                     string, '', 'left' or 'right', will cause padding and negative margin
-            picker
-            //rangeOptions
-                arrows              boolean, if true, display arrows
-                //arrowStep           number, step when clicking arrows
-                //arrowSymbols        array of two strings
-                max                 number, maximum value
-                min                 number, minimum value
-                orientation         'horizontal' or 'vertical'
-                step                number, step
-                thumbValue          boolean, if true, value is displayed on thumb, or
-                                    array of strings per value, or
-                                    function(value), returns string
-                thumbSize           integer, px
-                trackGradient       string, css gradient for track
-                trackImage          string, image url, or
-                                    array of image urls
-                //trackStep           number, 0 for 'scroll here', positive for step
-                trackValues         boolean
-            serialize
-            textAlign                   'left', 'center' or 'right'
-            type                        'float', 'integer', 'password', 'text', 'textarea'
-            value                       string
-            validate                    function, remote validation
-            width                       integer, px
-        methods:
-        events:
-            change
-            submit
-    */
 
     var self = self || {},
         that = new Ox.Element({}, self)

source/Ox.UI/js/Form/Ox.InputGroup.js

@@ -1,13 +1,19 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.InputGroup <f:Ox.Element> InputGroup Object
+    () ->              <f> InputGroup Object
+    (options) ->       <f> InputGroup Object
+    (options, self) -> <f> InputGroup Object
+    options <o> Options object
+        id     <s|''> id
+        inputs <a|[]> inputs
+        separators <a|[]> seperators
+        width <n|0> width
+    self    <o> shared private variable
+@*/
+
 Ox.InputGroup = function(options, self) {
-
-    /***
-    Ox.InputGroup
-    Options:
-    Methods:
-    Events:
-    ***/
-
     var self = self || {},
         that = new Ox.Element({}, self)
             .defaults({

source/Ox.UI/js/Form/Ox.Label.js

@@ -1,4 +1,12 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+/*@
+Ox.Label <f:Ox.Element> Label Object
+    () ->              <f> Label Object
+    (options) ->       <f> Label Object
+    (options, self) -> <f> Label Object
+    options <o> Options object
+        
+@*/
 Ox.Label = function(options, self) {
 
     var self = self || {},

source/Ox.UI/js/Form/Ox.OptionGroup.js

@@ -1,4 +1,14 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.OptionGroup <f> OptionGroup
+    (items, min, max, property) -> <f> OptionGroup
+    items <a> array of items
+    min <n> minimum number of selected items
+    max <n> maximum number of selected items
+    property <s|checked> property to check
+@*/
+
 Ox.OptionGroup = function(items, min, max, property) {
 
     /*
@@ -41,6 +51,10 @@ Ox.OptionGroup = function(items, min, max, property) {
         return num;
     }
 
+    /*@
+    [property] <f> returns an array with the positions of all checked item
+        () -> <a> returns checked items
+    @*/
     this[property] = function() {
         // returns an array with the positions of all checked item
         var checked = [];
@@ -52,6 +66,10 @@ Ox.OptionGroup = function(items, min, max, property) {
         return checked;
     };
 
+    /*@
+    init <f> init group
+        () -> <a> returns items
+    @*/
     this.init = function() {
         var num = getNumber(),
             count = 0;
@@ -76,6 +94,10 @@ Ox.OptionGroup = function(items, min, max, property) {
         return items;
     };
 
+    /*@
+    toggle <f> toggle options
+        (pos) -> <a> returns toggled state
+    @*/
     this.toggle = function(pos) {
         var last,
             num = getNumber(),

source/Ox.UI/js/Form/Ox.Picker.js

@@ -1,4 +1,19 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+/*@
+Ox.Picker <f:Ox.Element> Picker Object
+    () ->              <f> Picker Object
+    (options) ->       <f> Picker Object
+    (options, self) -> <f> Picker Object
+    options <o> Options object
+        element <o|null> picker element
+        elementHeight <n|128> height
+        elemementWidth <n|256> width
+        id <s> picker id
+        overlap <s|none> select button overlap value
+    show <!> picker is shown
+    hide <!> picker is hidden
+@*/
+
 Ox.Picker = function(options, self) {
 
     var self = self || {},

source/Ox.UI/js/Form/Ox.PlaceInput.js

@@ -1,4 +1,16 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.PlaceInput <f:Ox.FormElementGroup> PlaceInput Object
+    () ->              <f> PlaceInput Object
+    (options) ->       <f> PlaceInput Object
+    (options, self) -> <f> PlaceInput Object
+    options <o> Options object
+        id <s> element id
+        value <s|United States> default value of place input
+    self    <o> shared private variable
+@*/
+
 Ox.PlaceInput = function(options, self) {
 
     var self = $.extend(self || {}, {

source/Ox.UI/js/Form/Ox.PlacePicker.js

@@ -1,4 +1,16 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.PlacePicker <f:Ox.Element> PlacePicker Object
+    () ->              <f> PlacePicker Object
+    (options) ->       <f> PlacePicker Object
+    (options, self) -> <f> PlacePicker Object
+    options <o> Options object
+        id <s> element id
+        value <s|United States> default value of place input
+    self    <o> shared private variable
+@*/
+
 Ox.PlacePicker = function(options, self) {
 
     var self = $.extend(self || {}, {

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

@@ -1,26 +1,31 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+/*@
+Ox.Range <f:Ox.Element> Range Object
+    () ->              <f> Range Object
+    (options) ->       <f> Range Object
+    (options, self) -> <f> Range Object
+    options <o> Options object
+        arrows          <b>         if true, show arrows
+        arrowStep       <n>          step when clicking arrows
+        arrowSymbols    <a>           arrow symbols, like ['minus', 'plus']
+        max             <n>          maximum value
+        min             <n>          minimum value
+        orientation     <s>          'horizontal' or 'vertical'
+        step            <n>          step between values
+        size            <n>          width or height, in px
+        thumbSize       <n>          minimum width or height of thumb, in px
+        thumbValue      <b>         if true, display value on thumb
+        trackGradient   <a>           colors
+        trackImages     <s> or <a> one or multiple track background image URLs
+        trackStep       <n>          0 (scroll here) or step when clicking track
+        value           <n>          initial value
+        valueNames      <a>           value names to display on thumb        
+    self    <o> shared private variable
+    change <!> triggered on change of the range
+@*/
 
 Ox.Range = function(options, self) {
 
-    /**
-        options
-            arrows          boolean         if true, show arrows
-            arrowStep       number          step when clicking arrows
-            arrowSymbols    array           arrow symbols, like ['minus', 'plus']
-            max             number          maximum value
-            min             number          minimum value
-            orientation     string          'horizontal' or 'vertical'
-            step            number          step between values
-            size             number          width or height, in px
-            thumbSize       number          minimum width or height of thumb, in px
-            thumbValue      boolean         if true, display value on thumb
-            trackGradient   array           colors
-            trackImages     string or array one or multiple track background image URLs
-            trackStep       number          0 (scroll here) or step when clicking track
-            value           number          initial value
-            valueNames      array           value names to display on thumb
-    */
-
     var self = self || {},
         that = new Ox.Element({}, self)
             .defaults({

source/Ox.UI/js/Form/Ox.Select.js

@@ -1,4 +1,26 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.Select <f:Ox.Element> Select Object
+    () ->              <f> Select Object
+    (options) ->       <f> Select Object
+    (options, self) -> <f> Select Object
+    options <o> Options object
+        id <s> element id
+        items <a|[]> items
+        max <n|1> minimum number of selected items
+        min <n|1> maximum number of selected items
+        overlap <s|'none'> can be none, left or right
+        selectable <b|true> is selectable
+        size <s|'medium'> size, can be small, medium, large
+        title <s|''> select title
+        type <s|'text'> can be 'text' or 'image'
+        width <s|n|'auto'> can be auto or width in pixels
+    self    <o> shared private variable
+    click <!> on click event
+    change <!> on change event
+@*/
+
 Ox.Select = function(options, self) {
 
     // fixme: selected item needs attribute "checked", not "selected" ... that's strange
@@ -130,6 +152,10 @@ Ox.Select = function(options, self) {
         
     };
 
+    /*@
+    selectItem <f> select item in group
+        () -> <o> returns object of selected items with id, title
+    @*/
     that.selected = function() {
         return $.map(/*self.checked*/self.optionGroup.checked(), function(v) {
             return {
@@ -139,6 +165,11 @@ Ox.Select = function(options, self) {
         });
     };
 
+    /*@
+    selectItem <f> select item in group
+        (id) -> <u> select item by id
+        id <s> item id
+    @*/
     that.selectItem = function(id) {
         //Ox.print('selectItem', id, Ox.getObjectById(self.options.items, id).title)
         self.options.type == 'text' && self.$title.html(

source/Ox.UI/js/Form/Ox.TimeInput.js

@@ -1,4 +1,18 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.TimeInput <f:Ox.Element> TimeInput Object
+    () ->              <f> TimeInput Object
+    (options) ->       <f> TimeInput Object
+    (options, self) -> <f> TimeInput Object
+    options <o> Options object
+        ampm <b|false> 24h/ampm
+        seconds <b|false> show seconds
+        milliseconds <b|false> show milliseconds
+        value <d> value, defaults to now
+    self    <o> shared private variable
+@*/
+
 Ox.TimeInput = function(options, self) {
 
     // fixme: seconds get set even if options.seconds is false

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

@@ -1,4 +1,21 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.IconItem <f:Ox.Element> IconItem Object
+    () ->              <f> IconItem Object
+    (options) ->       <f> IconItem Object
+    (options, self) -> <f> IconItem Object
+    options <o> Options object
+        height <n|128> icon height
+        id <s> element id
+        info <s> icon info
+        size <n|128> icon size
+        title <s> title
+        width <n|128> icon width
+        url <s> icon url
+    self    <o> shared private variable
+@*/
+
 Ox.IconItem = function(options, self) {
 
     //Ox.print('IconItem', options, self)

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

@@ -1,4 +1,26 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+/*@
+Ox.IconList <f:Ox.Element> IconList Object
+    () ->              <f> IconList Object
+    (options) ->       <f> IconList Object
+    (options, self) -> <f> IconList Object
+    options <o> Options object
+        centerSelection <b|false> scroll list so selection is always centered
+        draggable <b|true> can be dragged
+        id <s|''> element id
+        item <f|null> called with data, sort, size,
+                      extends data with information needed for Ox.IconItem
+        items <f|null> items array or callback function
+        keys <a|[]> available item keys
+        max <n|-1> maximum selected selected items
+        min <n|0> minimum of selcted items
+        orientation <s|both> list orientation
+        selected <a|[]> array of selected items
+        size <n|128> list size
+        sort <a|[]> sort keys
+    self    <o> shared private variable
+@*/
+
 Ox.IconList = function(options, self) {
 
     var self = self || {},
@@ -81,6 +103,10 @@ Ox.IconList = function(options, self) {
         });
     }
 
+    /*@
+    setOption <f> set key/value
+        (key, value) -> <u> set eky in options to value
+    @*/
     self.setOption = function(key, value) {
         if (key == 'items') {
             that.$element.options(key, value);
@@ -91,28 +117,53 @@ Ox.IconList = function(options, self) {
         }
     }
 
+    /*@
+    closePreview <f> close preview
+        () -> <u> close
+    @*/
     that.closePreview = function() {
         that.$element.closePreview();
     };
 
+    /*@
+    paste <f> paste to list
+        (data) -> <f> paste data, returns IconList
+    @*/
     that.paste = function(data) {
         that.$element.paste(data);
         return that;
     };
 
+    /*@
+    reloadList <f> reload list
+        () -> <u> reload iconlist
+    @*/
     that.reloadList = function() {
         that.$element.reloadList();
         return that;
     };
 
+    /*@
+    scrollToSelection <f> set key/value
+        () -> <u> scroll list ot selection
+    @*/
     that.scrollToSelection = function() {
         that.$element.scrollToSelection();
     };
 
+    /*@
+    size <f> set key/value
+        () -> <n> get size of list
+    @*/
     that.size = function() {
         that.$element.size();
     };
 
+    /*@
+    sortList <f> sort list
+        (key, operator) -> <u> sort list by key with operator
+        operator <s> can be + / -
+    @*/
     that.sortList = function(key, operator) {
         self.options.sort = [{
             key: key,
@@ -122,6 +173,12 @@ Ox.IconList = function(options, self) {
         that.$element.sortList(key, operator);
     };
 
+    /*@
+    value <f> get/set value of item in list
+        (id) -> <o> get all data for item
+        (id, key) -> <s> get value of key of item with id
+        (id, key, value) -> <f> set value, returns IconList
+    @*/
     that.value = function(id, key, value) {
         // fixme: make this accept id, {k: v, ...}
         if (arguments.length == 1) {

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

@@ -1,4 +1,20 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.ItemInput <f:Ox.Element> ItemInput Object
+    () ->              <f> ItemInput Object
+    (options) ->       <f> ItemInput Object
+    (options, self) -> <f> ItemInput Object
+    options <o> Options object
+        type <s|textarea> can be textare
+        value <s> default value
+        height <n|300> height
+        width <n|100> width
+    self    <o> shared private variable
+    cancel <!> triggered if cancel button is pressed
+    save <!> triggered if save button is pressed
+@*/
+
 Ox.ItemInput = function(options, self) {
 
     var self = self || {},

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

@@ -1,52 +1,69 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
 
 /*@
-Basic list object
+Ox.List <f:Ox.Element> List Element
-(options)       -> that
+    () ->              <f> List Object
-(options, self) -> that
+    (options) ->       <f> List Object
-options <obj> the list's options
+    (options, self) -> <f> List Object
-self    <obj> shared private variable
+    options <o> Options object
+        centered <b|false> if true, and orientation is 'horizontal',
+                                    then keep the selected item centered
+        construct   <f|null> (data) returns the list item HTML
+        draggable <b|false> true if the items can be reordered
+        format <[]> ???
+        itemHeight <n|16> item height
+        items <a|f|null> <a> list of items,
+                         <f> (data) returns {items, size, ...}
+                             (data, callback) returns [items]
+        itemWidth <n|16> item width
+        keys <a|[]> keys of the list items
+        max <n|-1> max number of items that can be selected
+        min <n|0> min number of items that must be selected
+        orientation <s|vertical> 'horizontal' or 'vertical'
+        pageLength <n|100> number of items per page
+        selected <a|[]> ids of the selected elements
+        sort <a|[]> sort order
+        sortable <b|false>
+        type <s|text>
+        unique <s|''> name of the key that acts as unique id
+    self <o> shared private variable
+    add <!> item added
+    delete <!> item removed
+    copy <!> copy
+    paste <!> paste
+    movie <!> move item
+    load <!> list loaded
+    openpreview <!> preview of selected item opened
+    closepreview <!> preview closed
+    select <!> select item
 @*/
 
 
 Ox.List = function(options, self) {
 
-    /***
-    basic list object
-    Options
-    centered        boolean     if true, and orientation is 'horizontal',
-                                then keep the selected item centered
-    construct       function    function(data), returns the list item HTML
-    items           function    function(callback) returns {items, size, ...}
-                                function(data, callback) returns [items]
-                                or array of items
-    Methods
-    Events
-    ***/
-
     var self = self || {},
         that = new Ox.Container({}, self)
             .defaults({
-                centered: false,            //@ <boo> if true, and orientation is 'horizontal',
+                centered: false,
-                                            //@       then keep the selected item centered
+
-                construct: null,            //@ <fun> (data) returns the list item HTML
+                construct: null,
-                draggable: false,           //@ <boo> true if the items can be reordered
+                draggable: false,
-                format: [],                 //@ <arr> ???
+                format: [],
-                itemHeight: 16,             //@ <num> item height
+                itemHeight: 16,
-                items: null,                //@ <arr> list items
+                items: null,
-                                            //@ <fun> (data) returns {items, size, ...}
+
-                                            //@       (data, callback) returns [items]
+
-                itemWidth: 16,              //@ <num> item width
+                itemWidth: 16,
-                keys: [],                   //@ <arr> keys of the list items
+                keys: [],
-                max: -1,                    //@ <num> max number of items that can be selected
+                max: -1,
-                min: 0,                     //@ <num> min number of items that must be selected
+                min: 0,
-                orientation: 'vertical',    //@ <str> 'horizontal' or 'vertical'
+                orientation: 'vertical',
-                pageLength: 100,            //@ <num> number of items per page
+                pageLength: 100,
-                selected: [],               //@ <arr> ids of the selected elements
+                selected: [],
-                sort: [],                   //@ <arr>
+                sort: [],
-                sortable: false,            //@ <boo>
+                sortable: false,
-                type: 'text',               //@ <str>
+                type: 'text',
-                unique: ''                  //@ <str> name of the key that acts as unique id
+                unique: ''
             })
             .options(options || {})
             .scroll(scroll);
@@ -265,7 +282,7 @@ Ox.List = function(options, self) {
             // fixme: why does chainging fail here?
             new Ox.ListItem({
                 construct: self.options.construct
-            }).appendTo($page);    
+            }).appendTo($page);
         }
         //Ox.print('cEP done')
         return $page;
@@ -1070,7 +1087,7 @@ Ox.List = function(options, self) {
                 self.selected.splice(self.selected.indexOf(pos), 1);
                 !Ox.isUndefined(self.$items[pos]) &&
                     self.$items[pos].removeClass('OxSelected');
-            }                    
+            }
         });
         ids.forEach(function(id, i) {
             var pos = getPositionById(id);
@@ -1232,6 +1249,12 @@ Ox.List = function(options, self) {
         }
     };
 
+    /*@
+    addItems <f> add item to list
+        (pos, items) -> <u> add items to list at position
+        pos <n> position to add items
+        items <a> array of items ot add
+    @*/
     that.addItems = function(pos, items) {
         var $items = [],
             length = items.length
@@ -1268,6 +1291,11 @@ Ox.List = function(options, self) {
         updatePositions();
     }
 
+    /*@
+    editItem <f> turn item into edit form
+        (pos) -> <u> edit item at position
+        pos <n> position of item to edit
+    @*/
     that.editItem = function(pos) {
         var $input,
             item = self.options.items[pos],
@@ -1307,26 +1335,47 @@ Ox.List = function(options, self) {
         }
     }
 
+    /*@
+    clearCache <f> empy list cache
+        () -> <f>  empy cache, returns List Element
+    @*/
     that.clearCache = function() { // fixme: was used by TextList resizeColumn, now probably no longer necessary
         self.$pages = [];
         return that;
     };
 
+    /*@
+    closePreview <f> close preview
+        () -> <f>  close preview, returns List Element
+    @*/
     that.closePreview = function() {
         self.preview = false;
         return that;
     };
 
+    /*@
+    paste <f> paste data
+        (data) -> <f>  paste data into list
+        data <o> paste object
+    @*/
     that.paste = function(data) {
         pasteItems(data);
         return that;
     };
 
+    /*@
+    reloadList <f> reload list contents
+        () -> <f>  returns List Element
+    @*/
     that.reloadList = function() {
         updateQuery();
         return that;
     };
 
+    /*@
+    reloadPages <f> reload list pages
+        () -> <f>  returns List Element
+    @*/
     that.reloadPages = function() {
         //Ox.print('---------------- list reload, page', self.page)
         var page = self.page;
@@ -1337,12 +1386,15 @@ Ox.List = function(options, self) {
         return that;
     };
 
+    /*@
+    removeItems <f> remove items from list
+        (ids) -> <u> remove items
+        (pos, length) -> <u> remove items
+        ids <a> array of item ids
+        pos <n> delete items starting at this position
+        length <n> number of items to remove
+    @*/
     that.removeItems = function(pos, length) {
-        /*
-           removeItems(ids)
-           or
-           removeItems(pos, length)
-         */
         if(!length) { //pos is list of ids
             pos.forEach(function(id) {
                 var p = getPositionById(id);
@@ -1363,12 +1415,19 @@ Ox.List = function(options, self) {
             updatePositions();
         }
    }
-
+    /*@
+    scrollToSelection <f> scroll list to current selection
+        () -> <f>  returns List Element
+    @*/
     that.scrollToSelection = function() {
         self.selected.length && scrollToPosition(self.selected[0]);
         return that;
     };
 
+    /*@
+    size <f> fixme: not a good function name
+        () -> <f>  returns List Element
+    @*/
     that.size = function() { // fixme: not a good function name
         if (self.options.orientation == 'both') {
             var rowLength = getRowLength(),
@@ -1404,6 +1463,12 @@ Ox.List = function(options, self) {
         return that;
     }
 
+    /*@
+    sortList <f> sort list
+        (key, operator) -> <f>  returns List Element
+        key <s> key to sort list by
+        operator <s> +/- sort ascending or descending
+    @*/
     that.sortList = function(key, operator) {
         Ox.print('sortList', key, operator)
         if (key != self.options.sort[0].key || operator != self.options.sort[0].operator) {
@@ -1414,6 +1479,15 @@ Ox.List = function(options, self) {
         return that;
     }
 
+    /*@
+    value <f> get/set list value
+        (id, key, value) -> <f> sets value, returns List Element
+        (id, key) -> <a> returns value
+        (id) -> <o> returns all values of id
+        id <s> id of item
+        key <s> key if item property
+        value <s> value, can be whatever that property is
+    @*/
     that.value = function(id, key, value) {
         var pos = getPositionById(id),
             $item = self.$items[pos],

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

@@ -1,4 +1,21 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.ListItem <f:Ox.Element> ListItem Object
+    () ->              <f> ListItem Object
+    (options) ->       <f> ListItem Object
+    (options, self) -> <f> ListItem Object
+    options <o> Options object
+        construct <f> construct function
+        data <o|{}> item data
+        draggable <b|false> can be dragged
+        position <n|0> item position
+        unique <s|''> unique key
+    self    <o> shared private variable
+    cancel <!> triggered if cancel button is pressed
+    save <!> triggered if save button is pressed
+@*/
+
 Ox.ListItem = function(options, self) {
 
     var self = self || {},

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

@@ -1,4 +1,12 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+/*@
+Ox.ListPage <f:Ox.Element> ListPage Object
+    () ->              <f> ListPage Object
+    (options) ->       <f> ListPage Object
+    (options, self) -> <f> ListPage Object
+    options <o> Options object
+    self    <o> shared private variable
+@*/
 Ox.ListPage = function(options, self) {
     var self = self || {},
         that = new Ox.Element({}, self)

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

@@ -1,4 +1,28 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.TextList <f:Ox.Element> TextList Object
+    () ->              <f> TextList Object
+    (options) ->       <f> TextList Object
+    (options, self) -> <f> TextList Object
+    options <o> Options object
+        columns <a|[]>
+        columnsMovable <b|false>
+        columnsRemovable <b|false>
+        columnsResizable <b|false>
+        columnsVisible <b|false>
+        columnWidth <a|[40, 800]>
+        id <s|''>
+        items <f|null> function() {} {sort, range, keys, callback} or array
+        max <n|-1>
+        min <n|0>
+        pageLength <n|100>
+        scrollbarVisible <b|false>
+        selected <a|[]>
+        sort <a|[]>
+    self    <o> shared private variable
+@*/
+
 Ox.TextList = function(options, self) {
 
     // fixme: rename to TableList

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

@@ -1,4 +1,20 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.TreeList <f:Ox.Element> TreeList Object
+    () ->              <f> TreeList Object
+    (options) ->       <f> TreeList Object
+    (options, self) -> <f> TreeList Object
+    options <o> Options object
+        data <f|null> data to be parsed to items, needs documentation
+        items <a|[]> array of items
+        max <n|-1> maximum number of items that can be selected, -1 unlimited
+        min <n|0> minimum number of items that have to be selected
+        selected <a|[]> selected ids
+        width <n|256> list width
+    self    <o> shared private variable
+@*/
+
 Ox.TreeList = function(options, self) {
 
     // fixme: expanding the last item should cause some scroll

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

@@ -1,4 +1,20 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.ListMap <f:Ox.Element> ListMap Object
+    () ->              <f> ListMap Object
+    (options) ->       <f> ListMap Object
+    (options, self) -> <f> ListMap Object
+    options <o> Options object
+        addPlace <f|null>
+        height <n|256>
+        labels <b|false>
+        places <f|null>
+        selected <a|[]>
+        width <n|256>
+    self    <o> shared private variable
+@*/
+
 Ox.ListMap = function(options, self) {
 
     var self = self || {},
@@ -339,6 +355,9 @@ Ox.ListMap = function(options, self) {
         return val.toFixed(8);
     }
 
+    /*@
+    setOption <f> setOption
+    @*/
     self.setOption = function(key, value) {
         Ox.print('ONCHANGE')
         if (key == 'height' || key == 'width') {
@@ -352,16 +371,25 @@ Ox.ListMap = function(options, self) {
         }
     }
 
+    /*@
+    focusList <f> focusList
+    @*/
     that.focusList = function() {
         self.$list.gainFocus();
         return that;
     }
 
+    /*@
+    reloadList <f> reloadList
+    @*/
     that.reloadList = function() {
         self.$list.reloadList();
         return that;
     }
 
+    /*@
+    resizeMap <f> resizeMap
+    @*/
     that.resizeMap = function() {
         Ox.print('Ox.ListMap.resizeMap()')
         self.$map.resizeMap();

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

@@ -1,14 +1,20 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
-Ox.MapImage = function(options, self) {
 
-    /**
+/*@
-        options
+Ox.MapImage <f:Ox.Element> MapImage Object
-            height      image height (px)
+    () ->              <f> MapImage Object
-            places      array of either names (''), points ([0, 0]),
+    (options) ->       <f> MapImage Object
-                        or objects ({name, point, highlight})
+    (options, self) -> <f> MapImage Object
-            type        map type ('hybrid', 'roadmap', 'satellite', 'terrain')
+    options <o> Options object
-            width       image width (px)
+        height <n|360> image height (px)
-    */
+        places <a|o|[]> array of either names (''), points ([0, 0]),
+                    or objects ({name, point, highlight})
+        type <s|satellite> map type ('hybrid', 'roadmap', 'satellite', 'terrain')
+        width <n|640> image width (px)
+    self <o> shared private variable
+@*/
+
+Ox.MapImage = function(options, self) {
 
     var self = self || {},
         that = new Ox.Element('<img>', self)

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

@@ -1,5 +1,15 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
 
+/*@
+Ox.MapMarker <f> MapMarker Object
+    (options) ->       <f> MapMarker Object
+    options <o> Options object
+        color <a|[255, 0, 0]> marker color
+        map <o|null> map
+        place <o|null> place
+        size <n|16> size
+@*/
+
 Ox.MapMarker = function(options) {
 
     options = Ox.extend({
@@ -150,33 +160,56 @@ Ox.MapMarker = function(options) {
         }
     }
 
+    /*@
+    add <f> add to map
+        () -> <f> add to map, returns MapMarker
+    @*/
     that.add = function() {
         that.marker.setMap(that.map.map);
         google.maps.event.addListener(that.marker, 'click', click);
         return that;
     };
 
+    /*@
+    edit <f> edit marker
+        () -> <f> edit marker, returns MapMarker
+    @*/
     that.edit = function() {
         setOptions();
         google.maps.event.addListener(that.marker, 'dragstart', dragstart);
         google.maps.event.addListener(that.marker, 'drag', drag);
         google.maps.event.addListener(that.marker, 'dragend', dragend);
+        return that;
     };
-
+    
+    /*@
+    remove <f> remove marker
+        () -> <f> remove marker from map, returns MapMarker
+    @*/
     that.remove = function() {
         that.marker.setMap(null);
         google.maps.event.clearListeners(that.marker);
         return that;
     };
 
+    /*@
+    submit <f> submit marker
+        () -> <f> clear edit listeners, returns MapMarker
+    @*/
     that.submit = function() {
         google.maps.event.clearListeners(that.marker, 'dragstart');
         google.maps.event.clearListeners(that.marker, 'drag');
         google.maps.event.clearListeners(that.marker, 'dragend');
+        return that;
     }
 
+    /*@
+    update <f> update marker
+        () -> <f> update marker, returns MapMarker
+    @*/
     that.update = function() {
         setOptions();
+        return that;
     }
 
     return that;

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

@@ -1,5 +1,15 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
 
+/*@
+Ox.MapMarkerImage <f:google.maps.MarkerImage> MapMarkerImage Object
+    (options) ->       <f> google.maps.MarkerImage
+    options <o> Options object
+        color <a|[255, 0, 0]> marker color
+        mode <s|normal> can be: normal, selected, editing
+        size <n|16> size
+        type <s|place> can be: place, result, rectangle
+@*/
+
 Ox.MapMarkerImage = (function() {
 
     var cache = {};
@@ -46,4 +56,4 @@ Ox.MapMarkerImage = (function() {
 
     }
 
-}());
+}());

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

@@ -1,5 +1,24 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
 
+/*@
+Ox.MapPlace <f> MapPlace Object
+    (options) ->       <f> MapPlace Object
+    options <o> Options object
+        east <n|0> 
+        editing <b|false> 
+        geoname <s|''> 
+        map <o|null> 
+        markerColor <a|[255>  0>  0]> 
+        markerSize <n|16> 
+        name <s|''> 
+        north <n|0> 
+        selected <b|false> 
+        south <n|0> 
+        type <a|[]> 
+        visible <b|false> 
+        west <n|0>        
+@*/
+
 Ox.MapPlace = function(options) {
 
     options = Ox.extend({
@@ -70,12 +89,18 @@ Ox.MapPlace = function(options) {
         return that.map.options('editable') && that.editable;
     }
 
+    /*@
+    add <f> add
+    @*/
     that.add = function() {
         that.visible = true;
         that.marker.add();
         return that;
     };
 
+    /*@
+    cancel <f> cancel
+    @*/
     that.cancel = function() {
         if (editable()) {
             that.undo();
@@ -86,10 +111,16 @@ Ox.MapPlace = function(options) {
         return that;
     };
 
+    /*@
+    crossesDateline <f> crossesDateline
+    @*/
     that.crossesDateline = function() {
         return that.west > that.east;
     }
 
+    /*@
+    deselect <f> dselect
+    @*/
     that.deselect = function() {
         that.editing && that.submit();
         that.selected = false;
@@ -98,6 +129,9 @@ Ox.MapPlace = function(options) {
         return that;
     };
 
+    /*@
+    edit <f> edit
+    @*/
     that.edit = function() {
         if (editable()) {
             that.editing = true;
@@ -113,6 +147,9 @@ Ox.MapPlace = function(options) {
         return that;
     }
 
+    /*@
+    remove <f> remove
+    @*/
     that.remove = function() {
         that.editing && that.submit();
         that.selected && that.deselect();
@@ -121,6 +158,9 @@ Ox.MapPlace = function(options) {
         return that;
     };
 
+    /*@
+    select <f> select
+    @*/
     that.select = function() {
         that.selected = true;
         !that.visible && that.add();
@@ -129,6 +169,9 @@ Ox.MapPlace = function(options) {
         return that;
     };
 
+    /*@
+    submit <f> submit
+    @*/
     that.submit = function() {
         if (editable()) {
             that.editing = false;
@@ -138,11 +181,17 @@ Ox.MapPlace = function(options) {
         return that;
     };
 
+    /*@
+    update <f> update
+    @*/
     that.update = function() {
         update();
         return that;
     };
-
+    
+    /*@
+    undo <f> undo
+    @*/
     that.undo = function() {
         if (editable()) {
             Ox.forEach(that.original, function(v, k) {
@@ -157,4 +206,4 @@ Ox.MapPlace = function(options) {
 
     return that;
 
-};
+};

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

@@ -1,4 +1,16 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.MapRectangle <f> MapRectangle Object
+    () ->              <f> MapRectangle Object
+    (options) ->       <f> MapRectangle Object
+    (options, self) -> <f> MapRectangle Object
+    options <o> Options object
+        map <o|null> map
+        place <o|null> place
+    self    <o> shared private variable
+@*/
+
 Ox.MapRectangle = function(options, self) {
 
     var options = Ox.extend({
@@ -11,10 +23,16 @@ Ox.MapRectangle = function(options, self) {
         that[key] = val;
     });
 
+    /*@
+    rectangle <f> google.maps.Rectangle
+    @*/
     that.rectangle = new google.maps.Rectangle({
         clickable: true,
         bounds: that.place.bounds,
     });
+    /*@
+    markers <a> array of markers
+    @*/
     that.markers = Ox.map(that.place.points, function(point, position) {
         return new Ox.MapRectangleMarker({
             map: that.map,
@@ -48,12 +66,18 @@ Ox.MapRectangle = function(options, self) {
         })
     }
 
+    /*@
+    add <f> add
+    @*/
     that.add = function() {
         that.rectangle.setMap(that.map.map);
         google.maps.event.addListener(that.rectangle, 'click', click);
         return that;
     };
 
+    /*@
+    deselect <f> deselect
+    @*/
     that.deselect = function() {
         setOptions();
         Ox.print('MARKERS', that.markers)
@@ -62,12 +86,18 @@ Ox.MapRectangle = function(options, self) {
         });
     };
 
+    /*@
+    remove <f> remove
+    @*/
     that.remove = function() {
         that.rectangle.setMap(null);
         google.maps.event.clearListeners(that.rectangle);
         return that
     }
 
+    /*@
+    select <f> select
+    @*/
     that.select = function() {
         setOptions();
         Ox.forEach(that.markers, function(marker) {
@@ -75,6 +105,9 @@ Ox.MapRectangle = function(options, self) {
         });
     };
 
+    /*@
+    update <f> udpate
+    @*/
     that.update = function() {
         that.rectangle.setOptions({
             bounds: that.place.bounds

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

@@ -1,5 +1,17 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
 
+/*@
+Ox.MapRectangleMarker <f> MapRectangleMarker Object
+    () ->              <f> MapRectangleMarker Object
+    (options) ->       <f> MapRectangleMarker Object
+    (options, self) -> <f> MapRectangleMarker Object
+    options <o> Options object
+        map <o|null> map
+        place <o|null> place
+        position <s|''>
+    self    <o> shared private variable
+@*/
+
 Ox.MapRectangleMarker = function(options, self) {
 
     options = Ox.extend({
@@ -73,6 +85,9 @@ Ox.MapRectangleMarker = function(options, self) {
         }
     }
 
+    /*@
+    add <f> add
+    @*/
     that.add = function() {
         that.marker.setMap(that.map.map);
         google.maps.event.addListener(that.marker, 'dragstart', dragstart);
@@ -80,11 +95,17 @@ Ox.MapRectangleMarker = function(options, self) {
         google.maps.event.addListener(that.marker, 'dragend', dragend);
     };
 
+    /*@
+    remove <f> remove
+    @*/
     that.remove = function() {
         that.marker.setMap(null);
         google.maps.event.clearListeners(that.marker);
     };
 
+    /*@
+    update <f> update
+    @*/
     that.update = function() {
         that.marker.setOptions({
             position: that.place.points[that.position]

source/Ox.UI/js/Menu/Ox.MainMenu.js

@@ -1,6 +1,17 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
-/**
+
-*/
+/*@
+Ox.MainMenu <f:Ox.Bar> MainMenu Object
+    () ->              <f> MainMenu Object
+    (options) ->       <f> MainMenu Object
+    (options, self) -> <f> MainMenu Object
+    options <o> Options object
+        extras <a|[]> extra menus
+        menus <a|[]> submenus
+        size <s|medium> can be small, medium, large
+    self    <o> shared private variable
+@*/
+
 Ox.MainMenu = function(options, self) {
 
     var self = self || {},
@@ -106,6 +117,9 @@ Ox.MainMenu = function(options, self) {
         
     };
 
+    /*@
+    checkItem <f> checkItem
+    @*/
     that.checkItem = function(id) {
         var ids = id.split('_'),
             itemId = ids.pop(),
@@ -113,12 +127,18 @@ Ox.MainMenu = function(options, self) {
         that.getMenu(menuId).checkItem(itemId);
     };
 
+    /*@
+    disableItem <f> disableItem
+    @*/
     that.disableItem = function(id) {
         that.getItem(id).options({
             disabled: true
         });
     };
 
+    /*@
+    enableItem <f> enableItem
+    @*/
     that.enableItem = function(id) {
         Ox.print('ENABLE ITEM', id)
         that.getItem(id).options({
@@ -126,6 +146,9 @@ Ox.MainMenu = function(options, self) {
         });
     };
 
+    /*@
+    getItem <f> getItem
+    @*/
     that.getItem = function(id) {
         var ids = id.split('_'),
             item;
@@ -141,6 +164,9 @@ Ox.MainMenu = function(options, self) {
         return item;
     };
 
+    /*@
+    getMenu <f> getMenu
+    @*/
     that.getMenu = function(id) {
         var ids = id.split('_'),
             menu;
@@ -162,18 +188,27 @@ Ox.MainMenu = function(options, self) {
         
     };
 
+    /*@
+    selectNextMenu <f> selectNextMenu
+    @*/
     that.selectNextMenu = function() {
         if (self.selected < self.options.menus.length - 1) {
             clickTitle(self.selected + 1);
         }
     };
 
+    /*@
+    selectPreviousMenu <f> selectPreviousMenu
+    @*/
     that.selectPreviousMenu = function() {
         if (self.selected) {
             clickTitle(self.selected - 1);
         }
     };
 
+    /*@
+    uncheckItem <f> uncheckItem
+    @*/
     that.uncheckItem = function(id) {
         that.getItem(id).options({
             checked: false

source/Ox.UI/js/Menu/Ox.Menu.js

@@ -1,24 +1,31 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
-/**
+/*@
-    options
+Ox.Menu <f:Ox.Element> Menu Object
-        element         the element the menu is attached to
+    () ->              <f> Menu Object
-        id              the menu id
+    (options) ->       <f> Menu Object
-        items           array of menu items
+    (options, self) -> <f> Menu Object
-        mainmenu        the main menu this menu is part of, if any
+    options <o> Options object
-        offset          offset of the menu, in px
+        element  <o>         the element the menu is attached to
-        parent          the supermenu, if any
+        id       <s>        the menu id
-        selected        the position of the selected item
+        items    <a>        array of menu items
-        side            open to 'bottom' or 'right'
+        mainmenu <o>       the main menu this menu is part of, if any
-        size            'large', 'medium' or 'small'
+        offset   <o>       offset of the menu, in px
+            left <n>   left
+            top  <n>   top
+        parent   <o>          the supermenu, if any
+        selected <b>       the position of the selected item
+        side     <s>       open to 'bottom' or 'right'
+        size     <s>       'large', 'medium' or 'small'
+    self    <o> shared private variable
+
+    change_groupId  <!>  {id, value}     checked item of a group has changed
+    click_itemId    <!>                    item not belonging to a group was clicked
+    click_menuId    <!>    {id, value}     item not belonging to a group was clicked
+    deselect_menuId <!> {id, value}     item was deselected                             not needed, not implemented
+    hide_menuId     <!>                     menu was hidden
+    select_menuId   <!>   {id, value}     item was selected
+@*/
 
-    events:
-        change_groupId  {id, value}     checked item of a group has changed
-        click_itemId                    item not belonging to a group was clicked
-        click_menuId    {id, value}     item not belonging to a group was clicked
-        deselect_menuId {id, value}     item was deselected                             not needed, not implemented
-        hide_menuId                     menu was hidden
-        select_menuId   {id, value}     item was selected
-*/
 Ox.Menu = function(options, self) {
 Ox.print(options)
     var self = self || {},
@@ -524,18 +531,30 @@ Ox.print(options)
         }
     }
 
+    /*@
+    addItem <f>
+    @*/
     that.addItem = function(item, position) {
         
     };
 
+    /*@
+    addItemAfter <f>
+    @*/
     that.addItemAfter = function(item, id) {
 
     };
 
+    /*@
+    addItemBefore <f>
+    @*/
     that.addItemBefore = function(item, id) {
 
     };
 
+    /*@
+    checkItem <f>
+    @*/
     that.checkItem = function(id) {
         var item = that.getItem(id);
         if (item.options('group')) {
@@ -553,6 +572,9 @@ Ox.print(options)
         }
     };
 
+    /*@
+    getItem <f>
+    @*/
     that.getItem = function(id) {
         //Ox.print('id', id)
         var ids = id.split('_'),
@@ -576,6 +598,9 @@ Ox.print(options)
         return item;
     };
 
+    /*@
+    getSubmenu <f>
+    @*/
     that.getSubmenu = function(id) {
         var ids = id.split('_'),
             submenu;
@@ -588,6 +613,9 @@ Ox.print(options)
         return submenu;
     }
 
+    /*@
+    hasEnabledItems <f>
+    @*/
     that.hasEnabledItems = function() {
         var ret = false;
         Ox.forEach(that.items, function(item) {
@@ -598,6 +626,10 @@ Ox.print(options)
         return ret;
     };
 
+    /*@
+    hideMenu <f>
+        () -> <f> Menu Object
+    @*/
     that.hideMenu = function() {
         if (that.is(':hidden')) {
             return;
@@ -625,14 +657,24 @@ Ox.print(options)
         return that;
     };
 
+    /*@
+    removeItem <f> removeItem
+    @*/
     that.removeItem = function() {
 
     };
 
+    /*@
+    selectFirstItem <f> selectFirstItem
+    @*/
     that.selectFirstItem = function() {
         selectNextItem();
     };
 
+    /*@
+    showMenu <f> showMenu
+        () -> <f> Menu Object
+    @*/
     that.showMenu = function() {
         if (!that.is(':hidden')) {
             return;
@@ -679,6 +721,9 @@ Ox.print(options)
         //that.triggerEvent('show');
     };
 
+    /*@
+    toggelMenu <f> toggleMenu
+    @*/
     that.toggleMenu = function() {
         that.is(':hidden') ? that.showMenu() : that.hideMenu();
     };

source/Ox.UI/js/Menu/Ox.MenuItem.js

@@ -1,4 +1,24 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+/*@
+Ox.MenuItem <f:Ox.Element> MenuItem Object
+    () ->              <f> MenuItem Object
+    (options) ->       <f> MenuItem Object
+    (options, self) -> <f> MenuItem Object
+    options <o> Options object
+        bind <a|[]> fixme: what's this?
+        checked <f|null> 
+        disabled <b|false>
+        group <s|''>
+        icon <s|''> icon
+        id <s|''> id
+        items <a|[]> items
+        keyboard <s|''> keyboard
+        menu <o|null> menu
+        position <n|0> position
+        title <a|[]> title
+    self    <o> shared private variable
+@*/
+
 Ox.MenuItem = function(options, self) {
 
     var self = self || {},
@@ -81,6 +101,9 @@ Ox.MenuItem = function(options, self) {
         };
     }
 
+    /*@
+    setOption <f> setOption
+    @*/
     self.setOption = function(key, value) {
         if (key == 'checked') {
             that.$status.html(value ? Ox.UI.symbols.check : '')
@@ -96,6 +119,9 @@ Ox.MenuItem = function(options, self) {
         // toggle id and title
     };
 
+    /*@
+    toggelChecked <f> toggleChecked
+    @*/
     that.toggleChecked = function() {
         that.options({
             checked: !self.options.checked
@@ -105,7 +131,10 @@ Ox.MenuItem = function(options, self) {
     that.toggleDisabled = function() {
 
     };
-
+    
+    /*@
+    toggelTitle <f> toggleTitle
+    @*/
     that.toggleTitle = function() {
         //Ox.print('s.o.t', self.options.title)
         that.options({

source/Ox.UI/js/Panel/Ox.CollapsePanel.js

@@ -1,6 +1,18 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
-/**
+
-*/
+/*@
+Ox.CollapsePanel <f:Ox.Panel> CollapsePanel Object
+    () ->              <f> CollapsePanel Object
+    (options) ->       <f> CollapsePanel Object
+    (options, self) -> <f> CollapsePanel Object
+    options <o> Options object
+        collapsed <b|false> collapsed state
+        extras <a|[]> panel extras
+        size <n|16> size
+        title <s> title
+    self    <o> shared private variable
+@*/
+
 Ox.CollapsePanel = function(options, self) {
     var self = self || {},
         that = new Ox.Panel({}, self)
@@ -68,6 +80,10 @@ Ox.CollapsePanel = function(options, self) {
             collapsed: self.options.collapsed
         });
     }
+    /*@
+    setOption <f> setOption
+        (key, value) -> <u> set key to value
+    @*/
     self.setOption = function(key, value) {
         if (key == 'collapsed') {
 
@@ -75,7 +91,11 @@ Ox.CollapsePanel = function(options, self) {
             $title.html(self.options.title);
         }
     };
-    that.update = function() { // fixme: used anywhere?
+
+    /*@
+    update <f> update // fixme: used anywhere?
+    @*/
+    that.update = function() {
         self.options.collapsed && that.$content.css({
             marginTop: -that.$content.height()
         });

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

@@ -1,6 +1,14 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
-/**
+
-*/
+/*@
+Ox.Panel <f:Ox.Element> Panel Object
+    () ->              <f> Panel Object
+    (options) ->       <f> Panel Object
+    (options, self) -> <f> Panel Object
+    options <o> Options object
+    self    <o> shared private variable
+@*/
+
 Ox.Panel = function(options, self) {
     var self = self || {},
         that = new Ox.Element({}, self)

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

@@ -1,4 +1,15 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+/*@
+Ox.SplitPanel <f:Ox.Element> SpliPanel Object
+    () ->              <f> SpliPanel Object
+    (options) ->       <f> SpliPanel Object
+    (options, self) -> <f> SpliPanel Object
+    options <o> Options object
+    self    <o> shared private variable
+    resize <!> resize
+    toggle <!> toggle
+@*/
+
 /**
     options:
         elements: [{            array of one, two or three elements

source/Ox.UI/js/Video/Ox.AnnotationPanel.js

@@ -1,4 +1,19 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.AnnotationPanel <f:Ox.Element> AnnotationPanel Object
+    () ->              <f> AnnotationPanel Object
+    (options) ->       <f> AnnotationPanel Object
+    (options, self) -> <f> AnnotationPanel Object
+    options <o> Options object
+        id <s> id
+        items <a|[]> items
+        titles <s> title
+        type <s|text> panel type
+        width <n|0>
+    self    <o> shared private variable
+@*/
+
 Ox.AnnotationPanel = function(options, self) {
 
     var self = self || {},
@@ -99,6 +114,9 @@ Ox.AnnotationPanel = function(options, self) {
         
     }
 
+    /*@
+    addItem <f> addItem
+    @*/
     that.addItem = function(item) {
         var pos = 0;
         self.options.items.splice(pos, 0, item);
@@ -106,9 +124,16 @@ Ox.AnnotationPanel = function(options, self) {
         self.$annotations.editItem(pos);
     }
 
+    /*@
+    removeItems <f> removeItems
+    @*/
     that.removeItems = function(ids) {
         self.$annotations.removeItems(ids);
     }
+
+    /*@
+    deselectItems <f> deselectItems
+    @*/
     that.deselectItems = function() {
         if(self.$annotations.options('selected'))
             self.$annotations.options('selected',[]);

source/Ox.UI/js/Video/Ox.BlockTimeline.js

@@ -1,4 +1,14 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.BlockTimeline <f:Ox.Element> BlockTimeline Object
+    () ->              <f> BlockTimeline Object
+    (options) ->       <f> BlockTimeline Object
+    (options, self) -> <f> BlockTimeline Object
+    options <o> Options object
+    self    <o> shared private variable
+@*/
+
 Ox.BlockTimeline = function(options, self) {
 
     var self = self || {},

source/Ox.UI/js/Video/Ox.LargeTimeline.js

@@ -1,4 +1,14 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.LargeTimeline <f:Ox.Element> LargeTimeline Object
+    () ->              <f> LargeTimeline Object
+    (options) ->       <f> LargeTimeline Object
+    (options, self) -> <f> LargeTimeline Object
+    options <o> Options object
+    self    <o> shared private variable
+@*/
+
 Ox.LargeTimeline = function(options, self) {
 
     var self = self || {},

source/Ox.UI/js/Video/Ox.SmallTimeline.js

@@ -1,4 +1,14 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.SmallTimeline <f:Ox.Element> SmallTimeline Object
+    () ->              <f> SmallTimeline Object
+    (options) ->       <f> SmallTimeline Object
+    (options, self) -> <f> SmallTimeline Object
+    options <o> Options object
+    self    <o> shared private variable
+@*/
+
 Ox.SmallTimeline = function(options, self) {
 
     var self = self || {},

source/Ox.UI/js/Video/Ox.VideoEditor.js

@@ -1,4 +1,14 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.VideoEditor <f:Ox.Element> VideoEditor Object
+    () ->              <f> VideoEditor Object
+    (options) ->       <f> VideoEditor Object
+    (options, self) -> <f> VideoEditor Object
+    options <o> Options object
+    self    <o> shared private variable
+@*/
+
 Ox.VideoEditor = function(options, self) {
 
     var self = self || {},

source/Ox.UI/js/Video/Ox.VideoEditorPlayer.js

@@ -1,5 +1,14 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
 
+/*@
+Ox.VideoEditorPlayer <f:Ox.Element> VideoEditorPlayer Object
+    () ->              <f> VideoEditorPlayer Object
+    (options) ->       <f> VideoEditorPlayer Object
+    (options, self) -> <f> VideoEditorPlayer Object
+    options <o> Options object
+    self    <o> shared private variable
+@*/
+
 Ox.VideoEditorPlayer = function(options, self) {
 
     var self = self || {},

source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js

@@ -1,4 +1,14 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.VideoPanelPlayer <f:Ox.Element> VideoPanelPlayer Object
+    () ->              <f> VideoPanelPlayer Object
+    (options) ->       <f> VideoPanelPlayer Object
+    (options, self) -> <f> VideoPanelPlayer Object
+    options <o> Options object
+    self    <o> shared private variable
+@*/
+
 Ox.VideoPanelPlayer = function(options, self) {
 
     var self = self || {},

source/Ox.UI/js/Video/Ox.VideoPlayer.js

@@ -1,3 +1,5 @@
+// vim: et:ts=4:sw=4:sts=4:ft=js
+
 /*@
 Ox.VideoPlayer <f> Generic Video Player
     (options, self) -> <o> Video Player
@@ -1417,4 +1419,4 @@ Ox.VideoPlayer = function(options, self) {
 
     return that;
 
-};
+};

source/Ox.UI/js/Window/Ox.Dialog.js

@@ -1,4 +1,14 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.Dialog <f:Ox.Element> Dialog Object
+    () ->              <f> Dialog Object
+    (options) ->       <f> Dialog Object
+    (options, self) -> <f> Dialog Object
+    options <o> Options object
+    self    <o> shared private variable
+@*/
+
 Ox.Dialog = function(options, self) {
 
     // fixme: dialog should be derived from a generic draggable

source/Ox.UI/js/Window/Ox.Tooltip.js

@@ -1,4 +1,14 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+Ox.Tooltip <f:Ox.Element> Tooltip Object
+    () ->              <f> Tooltip Object
+    (options) ->       <f> Tooltip Object
+    (options, self) -> <f> Tooltip Object
+    options <o> Options object
+    self    <o> shared private variable
+@*/
+
 Ox.Tooltip = function(options, self) {
 
     var self = self || {},

source/Ox.UI/js/Window/Ox.Window.js

@@ -1,4 +1,18 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+/*@
+Ox.Window <f:Ox.Element> Window object
+    () ->              <f> Window object
+    (options) ->       <f> Window object
+    (options, self) -> <f> Window object
+    options <o> Options object
+        draggable       <b|true> is window draggable
+        fullscreenable  <b|true> fixme: silly name
+        height          <n|225>  height
+        resizeable      <b|true> resizeable
+        scaleable       <b|true> sccaleable
+        width           <n|400>  width
+    self <o>    Shared private variable
+@*/
 Ox.Window = function(options, self) {
 
     self = self || {},