Ox.IconList = function(options, self) {

    var self = self || {},
        that = new Ox.Element({}, self)
            .defaults({
                centerSelection: false,
                draggable: true,
                id: '',
                item: null,
                items: null,
                keys: [],
                max: -1,
                min: 0,
                orientation: 'both',
                selected: [],
                size: 128,
                sort: [],
            })
            .options(options || {});

    $.extend(self, {
        itemHeight: self.options.size * 1.5,
        itemWidth: self.options.size
    });

    that.$element = new Ox.List({
            centered: self.options.centered,
            construct: constructItem,
            draggable: self.options.draggable,
            id: self.options.id,
            itemHeight: self.itemHeight,
            items: self.options.items,
            itemWidth: self.itemWidth,
            keys: self.options.keys,
            orientation: self.options.orientation,
            keys: self.options.keys,
            max: self.options.max,
            min: self.options.min,
            selected: self.options.selected,
            size: self.options.size,
            sort: self.options.sort,
            type: 'icon',
            unique: self.options.unique
        }, $.extend({}, self)) // pass event handler
        .addClass('OxIconList Ox' + Ox.toTitleCase(self.options.orientation))
        .click(click)
        .dblclick(dblclick)
        .scroll(scroll);

    updateKeys();

    function click() {
        
    }

    function constructItem(data) {
        var data = !$.isEmptyObject(data) ? 
                self.options.item(data, self.options.sort, self.options.size) :
                {height: 8, width: 5},
            ratio = data.width / data.height;
        return new Ox.IconItem($.extend(data, {
            height: Math.round(self.options.size / (ratio <= 1 ? 1 : ratio)),
            size: self.options.size,
            width: Math.round(self.options.size * (ratio >= 1 ? 1 : ratio))
        }));
    }

    function dblclick() {
        
    }

    function scroll() {
        
    }

    function updateKeys() {
        self.options.keys = Ox.unique($.merge(self.options.keys, [self.options.sort[0].key]));
        that.$element.options({
            keys: self.options.keys
        });
    }

    self.onChange = function(key, value) {
        if (key == 'items') {
            that.$element.options(key, value);
        } else if (key == 'paste') {
            that.$element.options(key, value);
        } else if (key == 'selected') {
            that.$element.options(key, value);
        }
    }

    that.closePreview = function() {
        that.$element.closePreview();
    };

    that.paste = function(data) {
        that.$element.paste(data);
        return that;
    };

    that.reloadList = function() {
        that.$element.reloadList();
        return that;
    };

    that.scrollToSelection = function() {
        that.$element.scrollToSelection();
    };

    that.size = function() {
        that.$element.size();
    };

    that.sortList = function(key, operator) {
        self.options.sort = [{
            key: key,
            operator: operator
        }];
        updateKeys();
        that.$element.sortList(key, operator);
    };

    that.value = function(id, key, value) {
        // fixme: make this accept id, {k: v, ...}
        if (arguments.length == 1) {
            return that.$element.value(id);
        } else if (arguments.length == 2) {
            return that.$element.value(id, key);
        } else {
            that.$element.value(id, key, value);
            return that;
        }
    }

    return that;

};