Imgorg.ImageThumbPanel = Ext.extend(Ext.Panel, {
    minWidth
: 80,
    title
: 'All Photos',
   
    initComponent
: function() {
       
this.tfId = 'tag-filter-'+Ext.id();
       
       
var sliderValue = 0;
       
var p = Ext.state.Manager.getProvider();
       
if (p) {
            sliderValue
= Ext.num(p.get('sliderValue'), 0);
       
}
       
       
Ext.apply(this,{
            layout
:'fit',
            cls
: 'images-view',
            items
:Ext.apply({
                xtype
: 'img-dv',
                itemId
: 'imgorg-dv'
           
},this.dvConfig||{}),
            bbar
:['Tags:',{
                xtype
: 'img-tagmulticombo',
                id
: this.tfId,
                listeners
: {
                    select
: function(combo, record, idx) {
                       
var vals = combo.getValue();
                       
this.tagFilter(vals);
                       
return true;
                   
},
                    clearall
: function(combo) {
                       
this.clearFilter();
                   
},
                    scope
: this
               
}
           
},'->',{
                xtype
: 'slider',
                itemId
: 'size-slider',
                width
: 200,
                style
: 'margin-right:20px;',
                value
: sliderValue,
                plugins
: new Ext.ux.SliderTip({
                    getText
: function(slider){
                       
return String.format('{0}%', 100+slider.getValue()*3);
                   
}
               
}),
                listeners
: {
                    change
: this.onChange,
                    scope
: this
               
}
           
}]
       
});
       
Imgorg.ImageThumbPanel.superclass.initComponent.call(this);
       
this.on('activate', this.onActivate, this);
   
},
   
    afterRender
: function() {
       
Imgorg.ImageThumbPanel.superclass.afterRender.call(this);
       
this.view = this.getComponent('imgorg-dv');
       
(function() {
           
this.dragZone = new ImageDragZone(this.view, {
                containerScroll
:true,
                ddGroup
: 'organizerDD'
           
});
       
}).defer(100, this);
   
},
   
    onActivate
: function() {
       
this.reload();
       
var p = Ext.state.Manager.getProvider();
       
if (p) {
            sliderValue
= Ext.num(p.get('sliderValue'), 0);
           
var slider = this.getBottomToolbar().getComponent('size-slider');
            slider
.setValue(sliderValue);
           
this.onChange(slider);
       
}
   
},
   
    onChange
: function(slider, e) {
       
var p = Ext.state.Manager.getProvider();
       
if (p) {
            p
.set('sliderValue', slider.getValue());
       
}
       
Ext.util.CSS.updateRule('.images-view .thumb img','height',this.minWidth+slider.getValue()*3);
   
},
   
    tagFilter
: function(vals) {
       
if (this.view.store.lastOptions.params) {
           
var album = this.view.store.lastOptions.params.album;
       
}
       
       
this.view.store.load({
            params
: {
                tags
: vals,
                album
: album
           
}
       
});
   
},
   
    clearFilter
: function() {
       
var album = this.view.store.lastOptions.params.album;
       
this.view.store.load({
            params
: {
                album
: album
           
}
       
});
       
Ext.getCmp(this.tfId).reset();
   
},
   
    albumFilter
: function(album) {
       
this.getComponent('imgorg-dv').store.load({
            params
: {
                album
: album.id
           
}
       
});
   
},
   
    reload
: function() {
       
this.view.store.reload();
   
}
});
Ext.reg('img-thumbpanel', Imgorg.ImageThumbPanel);


ImageDragZone = function(view, config){
   
this.view = view;
   
ImageDragZone.superclass.constructor.call(this, view.getEl(), config);
};
Ext.extend(ImageDragZone, Ext.dd.DragZone, {
   
// We don't want to register our image elements, so let's
   
// override the default registry lookup to fetch the image
   
// from the event instead
    getDragData
: function(e){
       
var target = e.getTarget('.thumb-wrap');
       
if(target){
           
var view = this.view;
           
if(!view.isSelected(target)){
                view
.onClick(e);
           
}
           
var selNodes = view.getSelectedNodes();
           
var dragData = {
                nodes
: selNodes
           
};
           
if(selNodes.length == 1){
                dragData
.ddel = target;
                dragData
.single = true;
           
}else{
               
var div = document.createElement('div'); // create the multi element drag "ghost"
                div
.className = 'multi-proxy';
               
for(var i = 0, len = selNodes.length; i < len; i++){
                    div
.appendChild(selNodes[i].firstChild.firstChild.cloneNode(true)); // image nodes only
                   
if((i+1) % 3 == 0){
                        div
.appendChild(document.createElement('br'));
                   
}
               
}
               
var count = document.createElement('div'); // selected image count
                count
.innerHTML = i + ' images selected';
                div
.appendChild(count);
               
                dragData
.ddel = div;
                dragData
.multi = true;
           
}
           
return dragData;
       
}
       
return false;
   
},

   
// this method is called by the TreeDropZone after a node drop
   
// to get the new tree node (there are also other way, but this is easiest)
    getTreeNode
: function(){
       
var treeNodes = [];
       
var nodeData = this.view.getRecords(this.dragData.nodes);
       
for(var i = 0, len = nodeData.length; i < len; i++){
           
var data = nodeData[i].data;
            treeNodes
.push(new Ext.tree.TreeNode({
                text
: data.name,
                icon
: '../view/'+data.url,
                data
: data,
                leaf
:true,
                cls
: 'image-node'
           
}));
       
}
       
return treeNodes;
   
},
   
   
// the default action is to "highlight" after a bad drop
   
// but since an image can't be highlighted, let's frame it
    afterRepair
:function(){
       
for(var i = 0, len = this.dragData.nodes.length; i < len; i++){
           
Ext.fly(this.dragData.nodes[i]).frame('#8db2e3', 1);
       
}
       
this.dragging = false;    
   
},
   
   
// override the default repairXY with one offset for the margins and padding
    getRepairXY
: function(e){
       
if(!this.dragData.multi){
           
var xy = Ext.Element.fly(this.dragData.ddel).getXY();
            xy
[0]+=3;xy[1]+=3;
           
return xy;
       
}
       
return false;
   
}
});