Ext.ns('Hdv.lot.detail');

Hdv.lot.detail.Gallery = Ext.extend(Ext.Panel, {

    tplThumb: new Ext.XTemplate(
        '<table>',
            '<tr>',
                '<tpl for=".">',
                    '<td>',
                        '<div class="thumb-wrap" id="{name}">',
                        '<div class="thumb"><img src="{url}" title="{name}"></div>',
                        '</div>',
                    '</td>',
                '</tpl>',
            '</tr>',
        '</table>'
    ),

    getDataView: function() {
        return this.getComponent(0);
    },

    showDetails: function() {
        var node = this.getDataView().getSelectedNodes();
        if(node && node.length > 0){
            node = node[0];
        }
        var record = this.getDataView().getSelectedRecords();
        if(record && record.length > 0){
            record = record[0];
        }
        this.fireEvent('viewselectionchange', this, record, node);
    },

    onLoadException : function(v,o){
        this.getDataView().getEl().update('<div style="padding:10px;">Error loading images.</div>');
    },

    setStoreParams: function(params) {
        this.storeParams = params;
    },

    getStoreParams: function() {
        return this.storeParams;
    },

    getDataViewStore: function() {
        return this._dataViewStore;
    },

    previousThumb: function() {
        var index = this.getDataView().getSelectedIndexes();
        if(index && index.length > 0){
            index = index[0];
        }
        index = index - 1;
        if (index >= 0)  {
            this.getDataView().select(index);
            return true;
        }
        return false;
    },

    nextThumb: function() {
        var index = this.getDataView().getSelectedIndexes();
        if(index && index.length > 0){
            index = index[0];
        }
        var max = this.getDataViewStore().getCount();
        index = index + 1;
        if (index < max)  {
            this.getDataView().select(index);
            return true;
        }
        return false;
    },

    initStore: function() {
        var store = new Ext.data.JsonStore({
            url       : this.config.gallery_url,
            baseParams: this.getStoreParams(),
            root      : 'images',
            fields    : [
                'name', 'url', 'image_web', 'lot_id', 'tva_full', 'silent', 'reserve',
                'sale_id', 'description', 'category', 'lot', 'vacation', 'estimation',
                'result'
            ],
            listeners: {
                'load': {scope: this, fn: function(){
                    this.getDataView().select(0);
                    this.fireEvent('storeload', this);
                }}
            }
        });
        store.load();
        return store;
    },

    initDataView: function() {
        var view = new Ext.DataView({
            tpl          : this.tplThumb,
            title        : this.config.wording.lot_detail_gallery_title,
            singleSelect : true,
            border       : true,
            cls          : 'img-chooser-view',
            overClass    : 'x-view-over',
            itemSelector : 'div.thumb-wrap',
            emptyText    : '<div style="padding:10px;">' + this.config.wording.lot_detail_gallery_empty + '</div>',
            store        : this.getDataViewStore(),
            listeners    : {
                selectionchange: {fn:this.showDetails, scope:this, buffer:100},
                loadexception  : {fn:this.onLoadException, scope:this},
                beforeselect   : {fn:function(view){
                    return view.store.getRange().length > 0;
                }}
            }
        });
        return view;
    },

    initComponent: function() {
        this.addEvents(
            'viewselectionchange',
            'storeload'
        );
        this.tplThumb.compile();

        this._dataViewStore = this.initStore();
        Ext.applyIf(this, {
            title : this.config.wording.lot_detail_gallery_title,
            items : [this.initDataView()],
            autoScroll: true
        });

        Hdv.lot.detail.Gallery.superclass.initComponent.call(this);
    }
    
});

Ext.reg('hdvlotdetailgallery', Hdv.lot.detail.Gallery);