'use strict';

/*@
Ox.CustomList <f> Custom List Widget
    experimental
@*/

Ox.CustomList = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
        .defaults({
            draggable: false,
            item: null,
            itemHeight: 32,
            items: null,
            itemWidth: 256,
            keys: [],
            max: -1,
            min: 0,
            pageLength: 100,
            query: {conditions: [], operator: '&'},
            scrollbarVisible: false,
            selected: [],
            sort: [],
            sortable: false,
            sums: [],
            unique: ''
        })
        .options(options || {})
        .update({
            items: function() {
                self.$list.options({items: self.options.items});
            },
            selected: function() {
                self.$list.options({selected: self.options.selected});
                // FIXME: TableList doesn't trigger event here
                that.triggerEvent('select', {ids: self.options.selected});
            }
        })
        .addClass('OxCustomList');

    self.$list = Ox.List({
            construct: function(data) {
                return self.options.item(data, self.options.itemWidth - Ox.UI.SCROLLBAR_SIZE).addClass('OxTarget');
            },
            draggable: self.options.draggable,
            itemHeight: self.options.itemHeight,
            itemWidth: self.options.itemWidth
                - self.options.scrollbarVisible * Ox.UI.SCROLLBAR_SIZE,
            items: self.options.items,
            keys: self.options.keys.concat(self.options.unique),
            max: self.options.max,
            min: self.options.min,
            orientation: 'vertical',
            pageLength: self.options.pageLength,
            query: self.options.query,
            selected: self.options.selected,
            sort: self.options.sort,
            sortable: self.options.sortable,
            sums: self.options.sums,
            type: 'text',
            unique: self.options.unique
        })
        .css({
            top: 0,
            overflowY: (self.options.scrollbarVisible ? 'scroll' : 'hidden')
        })
        .bindEvent(function(data, event) {
            if (event == 'select') {
                self.options.selected = data.ids;
            }
            that.triggerEvent(event, data);
        })
        .appendTo(that);

    that.api = self.$list.options('items');

    /*@
    gainFocus <f> gain Focus
    @*/
    that.gainFocus = function() {
        self.$list.gainFocus();
        return that;
    };

    /*@
    hasFocus <f> has Focus
    @*/
    that.hasFocus = function() {
        return self.$list.hasFocus();
    };

    /*@
    loseFocus <f> lose Focus
    @*/
    that.loseFocus = function() {
        self.$list.loseFocus();
        return that;
    };

    return that;

};