Imgorg.ImagePanel = Ext.extend(Ext.Panel,{
    closable
: true,
    border
: false,
    tagTpl
: new Ext.XTemplate(
       
'

Tags

',
       
'',
           
'
{text}
',
       
'
'
   
),
    albumTpl
: new Ext.XTemplate(
       
'

Album

',
       
'',
           
'
{text}
',
       
'
'
   
),
    infoTpl
: new Ext.XTemplate(
       
'

File Info

',
       
'
Filename: {FileName}
',
       
'
Size: {FileSize:fileSize}
',
       
'
Height: {[values["COMPUTED"].Height]}
',
       
'
Width: {[values["COMPUTED"].Width]}
'
   
),
    initComponent
: function() {
       
Ext.apply(this,{
            layout
: 'border',
            items
: [{
                border
: false,
                region
: 'center',
                html
: '
',
                autoScroll
: true
           
},{
                border
: false,
                region
: 'east',
                itemId
: 'image-properties',
                width
: 250,
                title
: 'Properties',
                collapsible
: true,
                style
: 'border-left: 1px solid #99BBE8'
           
}]
       
});
       
Imgorg.ImagePanel.superclass.initComponent.call(this);
   
},
   
    afterRender
: function() {
       
Imgorg.ImagePanel.superclass.afterRender.call(this);
       
Imgorg.ss.Images.getInfo({image: this.imageData.id}, this.onGetInfo, this);
       
Imgorg.ss.Albums.getAlbums({image: this.imageData.id}, this.onGetAlbums,this);
       
Imgorg.ss.Tags.getTags({image: this.imageData.id}, this.onGetTags, this);
   
},
   
    onGetInfo
: function(data, resp) {
       
var prop = this.getComponent('image-properties');
       
this.infoTpl.append(prop.body, data)
   
},
   
    onGetTags
: function(data, resp) {
       
var prop = this.getComponent('image-properties');
       
this.tagTpl.append(prop.body, data);
   
},
   
    onGetAlbums
: function(data, resp) {
       
var prop = this.getComponent('image-properties');
       
this.albumTpl.append(prop.body, data);
   
}
});
Ext.reg('img-panel',Imgorg.ImagePanel);