'use strict';

/*@
Ox.ColumnList <f> Column List Widget
    experimental
@*/

Ox.ColumnList = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
        .defaults({
            columns: [],
            custom: {},
            items: [],
            list: 'table',
            selected: [],
            width: 768
        })
        .options(options || {})
        .update({
            width: function() {
                self.columnWidths = getColumnWidths();
                self.$panel.size(0, self.columnWidths[0]),
                self.$panel.size(2, self.columnWidths[2])
            }
        })
        .addClass('OxColumnList');

    self.columnWidths = getColumnWidths();
    self.numberOfColumns = self.options.columns.length;

    self.$lists = self.options.columns.map(function(column, i) {
        var isLastColumn = i == self.numberOfColumns - 1;
        return Ox.CustomList({
                item: self.options.columns[i].item,
                itemHeight: self.options.columns[i].itemHeight,
                items: i == 0 ? self.options.items : [],
                itemWidth: self.columnWidths[i],
                keys: self.options.columns[i].keys,
                max: 1,
                scrollbarVisible: true,
                unique: 'id'
            })
            .bindEvent({
                key_left: function() {
                    i && self.$lists[i - 1].gainFocus();
                },
                key_right: function() {
                    var object, selected = self.$lists[i].options('selected');
                    if (selected.length) {
                        if (i < self.numberOfColumns - 1) {
                            object = Ox.getObjectById(self.options.items, self.options.selected[0][0]);
                            if (i == 1) {
                                object = Ox.getObjectById(object.items, self.options.selected[1][0]);
                            }
                            self.$lists[i + 1]
                                .options({selected: [object.items[0].id]})
                                .gainFocus();
                        }

                    }
                },
                select: function(data) {
                    var id = data.ids[0], index;
                    self.options.selected[i] = data.ids;
                    if (i == 0) {
                        index = Ox.getIndexById(self.options.items, id);
                        self.$lists[1].options({
                            items: id ? self.options.items[index].items : []
                        });
                    } else if (i == 1) {
                        index = [];
                        index[0] = Ox.getIndexById(self.options.items, self.options.selected[0][0]);
                        index[1] = Ox.getIndexById(self.options.items[index[0]].items, id);
                        self.$lists[2].options({
                            items: id ? self.options.items[index[0]].items[index[1]].items : []
                        });
                    }
                    that.triggerEvent('select', {
                        id: column.id,
                        ids: data.ids
                    });
                }
            });
    });

    self.$panel = Ox.SplitPanel({
        elements: self.$lists.map(function($list, index) {
            return Ox.extend(
                {element: $list},
                index == 1 ? {} : {size: self.columnWidths[index]}
            );
        }),
        orientation: 'horizontal'
    });

    that.setElement(self.$panel);

    function getColumnWidths() {
        return Ox.splitInt(self.options.width, 3);
    }

    return that;

};