/*
 * Note that this control will most likely remain as an example, and not as a core Ext form
 * control.  However, the API will be changing in a future release and so should not yet be
 * treated as a final, stable API at this time.
 */


/**
 * @class Ext.ux.form.ItemSelector
 * @extends Ext.form.Field
 * A control that allows selection of between two Ext.ux.form.MultiSelect controls.
 *
 *  @history
 *    2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
 *
 * @constructor
 * Create a new ItemSelector
 * @param {Object} config Configuration options
 * @xtype itemselector
 */

Ext.ux.form.ItemSelector = Ext.extend(Ext.form.Field,  {
    hideNavIcons
:false,
    imagePath
:"",
    iconUp
:"up2.gif",
    iconDown
:"down2.gif",
    iconLeft
:"left2.gif",
    iconRight
:"right2.gif",
    iconTop
:"top2.gif",
    iconBottom
:"bottom2.gif",
    drawUpIcon
:true,
    drawDownIcon
:true,
    drawLeftIcon
:true,
    drawRightIcon
:true,
    drawTopIcon
:true,
    drawBotIcon
:true,
    delimiter
:',',
    bodyStyle
:null,
    border
:false,
    defaultAutoCreate
:{tag: "div"},
   
/**
     * @cfg {Array} multiselects An array of {@link Ext.ux.form.MultiSelect} config objects, with at least all required parameters (e.g., store)
     */

    multiselects
:null,

    initComponent
: function(){
       
Ext.ux.form.ItemSelector.superclass.initComponent.call(this);
       
this.addEvents({
           
'rowdblclick' : true,
           
'change' : true
       
});
   
},

    onRender
: function(ct, position){
       
Ext.ux.form.ItemSelector.superclass.onRender.call(this, ct, position);

       
// Internal default configuration for both multiselects
       
var msConfig = [{
            legend
: 'Available',
            draggable
: true,
            droppable
: true,
            width
: 100,
            height
: 100
       
},{
            legend
: 'Selected',
            droppable
: true,
            draggable
: true,
            width
: 100,
            height
: 100
       
}];

       
this.fromMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[0], msConfig[0]));
       
this.fromMultiselect.on('dblclick', this.onRowDblClick, this);

       
this.toMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[1], msConfig[1]));
       
this.toMultiselect.on('dblclick', this.onRowDblClick, this);

       
var p = new Ext.Panel({
            bodyStyle
:this.bodyStyle,
            border
:this.border,
            layout
:"table",
            layoutConfig
:{columns:3}
       
});

        p
.add(this.fromMultiselect);
       
var icons = new Ext.Panel({header:false});
        p
.add(icons);
        p
.add(this.toMultiselect);
        p
.render(this.el);
        icons
.el.down('.'+icons.bwrapCls).remove();

       
// ICON HELL!!!
       
if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")
           
this.imagePath+="/";
       
this.iconUp = this.imagePath + (this.iconUp || 'up2.gif');
       
this.iconDown = this.imagePath + (this.iconDown || 'down2.gif');
       
this.iconLeft = this.imagePath + (this.iconLeft || 'left2.gif');
       
this.iconRight = this.imagePath + (this.iconRight || 'right2.gif');
       
this.iconTop = this.imagePath + (this.iconTop || 'top2.gif');
       
this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');
       
var el=icons.getEl();
       
this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});
        el
.createChild({tag: 'br'});
       
this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});
        el
.createChild({tag: 'br'});
       
this.addIcon = el.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});
        el
.createChild({tag: 'br'});
       
this.removeIcon = el.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});
        el
.createChild({tag: 'br'});
       
this.downIcon = el.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});
        el
.createChild({tag: 'br'});
       
this.toBottomIcon = el.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});
       
this.toTopIcon.on('click', this.toTop, this);
       
this.upIcon.on('click', this.up, this);
       
this.downIcon.on('click', this.down, this);
       
this.toBottomIcon.on('click', this.toBottom, this);
       
this.addIcon.on('click', this.fromTo, this);
       
this.removeIcon.on('click', this.toFrom, this);
       
if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }
       
if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }
       
if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }
       
if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }
       
if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }
       
if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }

       
var tb = p.body.first();
       
this.el.setWidth(p.body.first().getWidth());
        p
.body.removeClass();

       
this.hiddenName = this.name;
       
var hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};
       
this.hiddenField = this.el.createChild(hiddenTag);
   
},
   
    doLayout
: function(){
       
if(this.rendered){
           
this.fromMultiselect.fs.doLayout();
           
this.toMultiselect.fs.doLayout();
       
}
   
},

    afterRender
: function(){
       
Ext.ux.form.ItemSelector.superclass.afterRender.call(this);

       
this.toStore = this.toMultiselect.store;
       
this.toStore.on('add', this.valueChanged, this);
       
this.toStore.on('remove', this.valueChanged, this);
       
this.toStore.on('load', this.valueChanged, this);
       
this.valueChanged(this.toStore);
   
},

    toTop
: function() {
       
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
       
var records = [];
       
if (selectionsArray.length > 0) {
            selectionsArray
.sort();
           
for (var i=0; i-1; i--) {
                record
= records[i];
               
this.toMultiselect.view.store.remove(record);
               
this.toMultiselect.view.store.insert(0, record);
                selectionsArray
.push(((records.length - 1) - i));
           
}
       
}
       
this.toMultiselect.view.refresh();
       
this.toMultiselect.view.select(selectionsArray);
   
},

    toBottom
: function() {
       
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
       
var records = [];
       
if (selectionsArray.length > 0) {
            selectionsArray
.sort();
           
for (var i=0; i 0) {
           
for (var i=0; i= 0) {
                   
this.toMultiselect.view.store.remove(record);
                   
this.toMultiselect.view.store.insert(selectionsArray[i] - 1, record);
                    newSelectionsArray
.push(selectionsArray[i] - 1);
               
}
           
}
           
this.toMultiselect.view.refresh();
           
this.toMultiselect.view.select(newSelectionsArray);
       
}
   
},

    down
: function() {
       
var record = null;
       
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
        selectionsArray
.sort();
        selectionsArray
.reverse();
       
var newSelectionsArray = [];
       
if (selectionsArray.length > 0) {
           
for (var i=0; i 0) {
           
for (var i=0; i 0) {
           
for (var i=0; i