Imgorg.ImageDv = Ext.extend(Ext.DataView,{
    tpl
: new Ext.XTemplate(
       
'',
       
'
',
       
'
',
       
'{filename:ellipsis(15)}
',
       
'
'
   
),
   
    initComponent
: function() {
       
Ext.apply(this, {
            itemSelector
: 'div.thumb-wrap',
            style
: 'overflow:auto',
            multiSelect
: true,
            overClass
: 'x-view-over',
            emptyText
: 'No images to display',
            plugins
: [new Ext.DataView.DragSelector({
                dragSafe
: true
           
}), new Ext.DataView.LabelEditor({
                allowBlank
: false,
                alignment
: 'c-c',
                dataIndex
: 'filename'
           
})],
            store
: new Ext.data.DirectStore({
                directFn
: Imgorg.ss.Images.load,
                root
: '',
                fields
: ['filename', 'url', 'id', 'size']
           
})
       
});
       
       
this.addEvents('viewitem');
       
Imgorg.ImageDv.superclass.initComponent.call(this);
       
this.on({// hacks to force the labeleditor to stop editing when we get a click elsewhere
            click
: function() {
               
this.plugins[1].completeEdit();
           
},
            containerclick
: function(dv, e) {
               
this.plugins[1].completeEdit();
           
},
            contextmenu
: this.onContextMenu,
            containercontextmenu
: this.onContextMenu,
            scope
: this
       
});
       
this.store.on('update', this.syncRename, this);
   
},
   
    afterRender
: function() {
       
Imgorg.ImageDv.superclass.afterRender.call(this);
       
this.el.unselectable(); // messy if they can select the text of the file names
   
},
   
    onContextMenu
: function(e, node) {
        e
.stopEvent();
       
if(!this.contMenu) {
           
this.contMenu = new Ext.menu.Menu({
                items
: [{
                    text
: 'View in Tab(s)',
                    handler
: function() {
                       
this.fireEvent('viewitem', this, node);
                   
},
                    scope
: this
               
},{
                    text
: 'Add to Album',
                    handler
: this.selectAlbum,
                    scope
: this
               
},{
                    text
: 'Tag',
                    handler
: this.tag,
                    scope
: this
               
},{
                    text
: 'Remove',
                    handler
: this.removeImages,
                    scope
: this
               
}]
           
});
       
}
       
this.currentNode = node;
       
this.contMenu.showAt(e.getXY());
   
},
   
    selectAlbum
: function() {
       
if (!this.albumWin) {
           
this.albumWin = new Imgorg.AlbumWin();
       
}
       
this.albumWin.selectedRecords = this.getSelectedRecords();
       
this.albumWin.show(this.currentNode);
   
},
   
    tag
: function() {
       
Imgorg.TagWin.selectedRecords = this.getSelectedRecords();
       
Imgorg.TagWin.show(this.currentNode);
   
},
   
    syncRename
: function(store, rec, op) {
       
if (op == 'edit') {
           
Imgorg.ss.Images.rename({image: rec.data.id, name: rec.data.filename, url: rec.data.url});
       
}
   
},
   
    removeImages
: function() {
       
var recs = this.getSelectedRecords();
       
var imageIds = [];
       
for (var i = 0;i < recs.length;i++) {
            imageIds
.push(recs[i].data.id);
           
this.store.remove(recs[i]);
       
}
       
Imgorg.ss.Images.remove({images: imageIds});
   
}
});
Ext.reg('img-dv', Imgorg.ImageDv);