Ext.desk = Ext.extend(Ext.form.FormPanel, {
  cls: 'desk config1',  //Config1 and 2
  //cls: 'desk',  //config 3 and 4
  height: 96,
  //width: 76,        //config 3 and 4
  layout: 'absolute',
  border: false,
  bodyStyle: 'text-align: left; height: 96px;',
  constructor: function(config){
        Ext.desk.superclass.constructor.apply(this, arguments);
  this.add(
    {
      enableDragDrop: true,
      ddGroup     : 'deskGroup',
      draggable: {
            afterRepair : function(){
                this.dragging = false;
            }
      },
      bodyStyle: 'background: none; text-align: left;',
      border: false,
      height: 55,
      width: 74,
      gender: '',
      stuID: '',
      items: [
        {
          cls: '',
          bodyStyle: 'background: none',
          height: 16,
          width: 16,
          style: {
           marginLeft: 30,
           marginTop: 5
          },
          border: false
        },
        {
          xtype: 'label',
          text: '',
          anchor: '100%',
          style: {
            display: 'block',
            textAlign: 'center'
          },      
          border: false
        },
        {
          xtype: 'label',
          text: '',
          achor: '100%',
          style: {
            display: 'block',
            textAlign: 'center'
          },
          border: false
        }
      ],
      addToDesk : function(source){
        this.ownerCt.ownerCt.changed = true;
        this.items.items[0].removeClass("user");
    		this.items.items[0].removeClass("user_female");
        if (source.attributes == undefined){
    			if (source.gender != "") { this.items.items[0].addClass((source.gender == 'male')?'user':'user_female'); }
    			this.gender = source.gender;
    			this.stuID = source.stuID;
          this.items.items[1].setText(source.items.items[1].text);
          this.items.items[2].setText(source.items.items[2].text);
        } else {
    			this.items.items[0].addClass(source.attributes.iconCls);
          this.gender = source.attributes.gender;
          this.stuID = source.attributes.stuID;
          this.items.items[1].setText(source.attributes.fname);
          this.items.items[2].setText(source.attributes.lname);
        }
      },
      clone : function() {
        tempDesk = this.cloneConfig();
        tempDesk.items.items[0].removeClass("user");
        tempDesk.items.items[0].removeClass("user_female");
        if (this.gender != "") tempDesk.items.items[0].addClass((this.gender == 'male')?'user':'user_female');
        tempDesk.gender = this.gender;
        tempDesk.stuID=this.stuID;
        tempDesk.items.items[1].setText(this.items.items[1].text);
        tempDesk.items.items[2].setText(this.items.items[2].text);
        return tempDesk;   
      },
      clear : function() {
        this.ownerCt.ownerCt.changed = true;
        this.items.items[0].removeClass("user");
        this.items.items[0].removeClass("user_female");
        this.gender = '';
        this.stuID = '';
        this.items.items[1].setText('');
        this.items.items[2].setText('');
      },
      style: {
        zIndex: 1
      },
      listeners: {

        render : function(target) {
          
          //The sourcePanelDropTarget is only used when dropping between panels 
          var sourcePanelDropTarget = new Ext.dd.DropTarget(target.body.dom,
          {            
            notifyDrop : function(ddSource, e, data) {
              tempPanel = target.clone();
              target.addToDesk(data.panel);           //Transfer source Firstname, lastname, and Icon to target
              data.panel.addToDesk(tempPanel);        //Transfer target Firstname, lastname, and Icon to source
              target.ownerCt.ownerCt.changed = true;
              return (true);
            }
          
          });
        
        }
      }
    }
   );
   this.add(
    {
      xtype: 'link',
      iconCls: 'delete',
      bodyStyle: 'background-color: none !important;',
      x: 53,
      y: -3,
      style: {
        zIndex: 2
      },
      handler: function(){
        if (this.iconCls == "delete"){
          if (this.ownerCt.items.items[0].gender != '') {
            myTree = Ext.getCmp(this.ownerCt.ownerCt.studentData);
            myTree.addStudent(this.ownerCt.items.items[0]);
            var myTreeSorter = new Ext.tree.TreeSorter(myTree, {property: 'lname'});
            myTreeSorter.doSort(myTree.getRootNode());    
          }
          this.ownerCt.items.items[0].clear();
          this.ownerCt.items.items[2].el.setOpacity(.1, true);
          this.ownerCt.items.items[0].hide();
          this.setIconClass('add');
        } else {
          this.ownerCt.items.items[2].el.setOpacity(1, true);
          this.setIconClass('delete');
          this.ownerCt.items.items[0].show();
        }
        this.ownerCt.ownerCt.changed = true;
        this.ownerCt.doLayout();
      }
    }
   );
   this.add ({
      cls: 'deskImage',
      border: false,
      x:-10,
      y:0,
      style: {
        zIndex: 0
      }
   });
  },
  listeners: {
    render : function(pnl){     
    
    	// This will make sure we only drop to the view container
      var formPanelDropTargetEl =  pnl.body.dom;
    	
     var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
    		ddGroup     : 'deskGroup',
    		
        notifyEnter : function(dd, e, data){
            if(this.overClass && pnl.items.items[1].iconCls == 'delete'){
                this.el.addClass(this.overClass);
            }
            return (pnl.items.items[1].iconCls == 'add')?this.dropNotAllowed :this.dropAllowed;
        },
        notifyOver : function(dd, e, data){
            return (pnl.items.items[1].iconCls == 'add')?this.dropNotAllowed :this.dropAllowed;
        },   		
    		notifyDrop  : function(ddSource, e, data){
    			if (pnl.items.items[1].iconCls == 'delete'){
    			var selectedRecord = ddSource.dragData.node;
    			
          if(pnl.items.items[0].gender != ''){
            ddSource.tree.getRootNode().appendChild(
              {
                  text: pnl.items.items[0].items.items[1].text + ' ' + pnl.items.items[0].items.items[2].text,
                  leaf: true,
                  iconCls: (pnl.items.items[0].gender == 'male')?'user':'user_female',
                  fname: pnl.items.items[0].items.items[1].text,
                  lname: pnl.items.items[0].items.items[2].text,
                  gender: pnl.items.items[0].gender,
                  stuID: pnl.items.items[0].stuID                                        
              }
            );
            ddSource.tree.doLayout();
          }       

          pnl.items.items[0].addToDesk(selectedRecord);
          selectedRecord.remove();
          pnl.ownerCt.change = true;         
         }
    			return(true);
    		}
    	}); 
    
    }
  }
});
Ext.ComponentMgr.registerType('desk', Ext.desk);