var seatingcharttools = {
  regionTitle: 'Seating Chart Tools',
  defaults: {autoHeight: true, cls: 'toolbox', frame: true},
  items: [
    {
      title: 'Autocomplete Seating Chart',
      tools: [{
        id:'help',
        handler: function(btn){
          helppopup.loadHelpFile("Autocomplete Seating Chart", 500, 455);
        }  
      }],
      items: [
        {
          xtype: 'link',
          text: 'Fill seats horizontally',
          iconCls: 'seat_horizontally',
          listeners: {
            click : function(btn){
              Ext.getCmp('classrm').fillH();
            }
          }
        },
        {
          xtype: 'link',
          text: 'Fill seats vertically',
          iconCls: 'seat_vertically',
          listeners: {
            click : function(btn){
              Ext.getCmp('classrm').fillV();
            }
          }
        },
        {
          xtype: 'link',
          text: 'Fill seats randomly',
          iconCls: 'seat_randomly',
          listeners: {
            click : function(btn){
              Ext.getCmp('classrm').fillR();
            }
          }
        }
      ]
    }
  ]
  

}


var seatingchart = {
    id: 'seatingchart-panel',
    title: 'Seating Chart',
    layout: 'fit',
    hideMode: 'offsets',
    tools: [{
        id:'help',
        handler: function(btn){
            helppopup.loadHelpFile("Seating Chart", 500, 455);
        }  
    }],
    tbar: {
        xtype: 'toolbar',
        defaults: { 
            style: 'margin-left: 5px;' 
        },
        items: [
            {
                xtype: 'label',
                text: 'Course:'
            },
            {
                xtype: 'combo',
                width: 150,
                name: 'gradebookcourseid',  
                allowBlank: false,
                displayField: 'course', 
                valueField: 'courseid', 
                valueNotFoundText:"", 
                typeAhead: true, 
                triggerAction: 'all', 
                store: coursebyteacheridstore,
                listeners: {
                    select : function(combo, record, index){
                        classRoom = Ext.getCmp('classrm');
                        classRoom.save();
                        classRoom.setCourseID(combo.getValue());
                
                        stuTree = Ext.getCmp('studentTree');
                        stuTree.loader.baseParams.courseID = combo.getValue();
                        stuTree.root.reload();
                    }
                }
            },
            {
                xtype: 'tbseparator',
                style: 'margin-left: 12px;'
            },
            {
                xtype: 'label',
                text: 'Vertical rows:'
            },
            {
                xtype: 'combo',
                width: 50,
                id : 'seatingColumnsCombo',
                mode: 'local',
                typeAhead: false,
                triggerAction: 'all',
                store: new Ext.data.ArrayStore({
                    fields: ['num'],
                    data: [[1],[2],[3],[4],[5],[6],[7]]
                }),
                displayField: 'num',
                listeners: {
                    select: function(combobox, record, index){
                        Ext.getCmp('classrm').setColumns(record.data.num);
                        Ext.getCmp('classcontainter').doLayout();
                    }
                }
            },
            {
                xtype: 'label',
                text: 'Horizontal rows:',
                style: 'padding-left: 12px;'
            },
            {
                xtype: 'combo',
                width: 50,
                id : 'seatingRowsCombo',    
                mode: 'local',
                typeAhead: false,
                triggerAction: 'all',
                store: new Ext.data.ArrayStore({
                    fields: ['num'],
                    data: [[1],[2],[3],[4],[5],[6],[7]]
                }),
                displayField: 'num',
                listeners: {
                    select: function(combobox, record, index){
                        Ext.getCmp('classrm').setRows(record.data.num);
                    }
                }
            },
            {
                xtype: 'label',
                text: 'Configuration:',
                style: 'margin-left: 12px;'
            },
            {
                xtype: 'combo',
                width: 100,
                minHeight: 300,
                minListWidth: 150,
                id : 'configurationCombo',
                mode: 'local',
                typeAhead: false,
                triggerAction: 'all',
                tpl: '<tpl for="."><div class="x-combo-list-item configCombo"><img src="images/{image}"/ height="40px">{type}</div></tpl>', 
                store: new Ext.data.ArrayStore({
                    fields: ['type','image'],
                    data: [['Single','desk_config_single.png'],['Paired','desk_config_paired.png']]
                }),
                displayField: 'type',
                listeners: {
                    select: function(combo,rec,index){
                        Ext.getCmp('classrm').setConfig(index * 2 + 1);
                    }
                }
            },
            {
                xtype: 'tbseparator',
                style: 'margin-left: 12px;'
            },
            {
                xtype: 'button',
                text: 'Clear chart',
                iconCls: 'broom',
                listeners: {
                    click : function(btn){
                        Ext.getCmp('classrm').clearDesks();
                    }
                }  
            } 
        ]
    },
      
  /*
tbar: [
    'Course: ',
    {
          xtype: 'combo',
          width: 250,
          name: 'gradebookcourseid',  
          allowBlank: false,    
          emptyText:'Select a course...', 
          displayField: 'course', 
          valueField: 'courseid', 
          valueNotFoundText:"", 
          typeAhead: true, 
          triggerAction: 'all', 
          store: coursebyteacheridstore,
          listeners: {
            select : function(combo, record, index){
                classRoom = Ext.getCmp('classrm');
                classRoom.save();
                classRoom.setCourseID(combo.getValue());
                
                stuTree = Ext.getCmp('studentTree');
                stuTree.loader.baseParams.courseID = combo.getValue();
                stuTree.root.reload();
            }
          }
    },
    {
      xtype: 'tbseparator',
      style:{
        marginLeft: '5px'
      }
    },
      'Vertical Rows: ',
    {
      id : 'seatingColumnsCombo',
      xtype: 'combo',
      width: 50,
      mode: 'local',
      typeAhead: false,
      triggerAction: 'all',
      store: new Ext.data.ArrayStore({
        fields: ['num'],
        data: [[1],[2],[3],[4],[5],[6],[7]]
      }),
      displayField: 'num',
      listeners: {
        select: function(combobox, record, index){
          Ext.getCmp('classrm').setColumns(record.data.num);
          Ext.getCmp('classcontainter').doLayout();
        }
      }
    },
    {
      xtype: 'tbspacer',
      width: 10
    },
    'Horizontal Rows: ',
    {
      id : 'seatingRowsCombo',    
      xtype: 'combo',
      width: 50,
      mode: 'local',
      typeAhead: false,
      triggerAction: 'all',
      store: new Ext.data.ArrayStore({
        fields: ['num'],
        data: [[1],[2],[3],[4],[5],[6],[7]]
      }),
      displayField: 'num',
      listeners: {
        select: function(combobox, record, index){
          Ext.getCmp('classrm').setRows(record.data.num);
        }
      }
    },
    'configuration:',
    {
      id : 'configurationCombo',    
      xtype: 'combo',
      mode: 'local',
      minHeight: 300,
      typeAhead: false,
      triggerAction: 'all',
      tpl: '<tpl for="."><div class="x-combo-list-item configCombo"><img src="images/{image}"/ height=50px>{type}</div></tpl>', 
      store: new Ext.data.ArrayStore({
        fields: ['type','image'],
        data: [['Single','desk_config_single.png'],['Paired','desk_config_paired.png']]
      }),
      displayField: 'type',
      listeners: {
        select: function(combo,rec,index){
          Ext.getCmp('classrm').setConfig(index * 2 + 1);
        }
      }
    },    
    {
      xtype: 'tbseparator',
      style:{
        marginLeft: '5px'
      }    
    },
    {
      text: 'Clear chart',
      iconCls: 'delete',
      listeners: {
        click : function(btn){
          Ext.getCmp('classrm').clearDesks();
        }
      }  
    }     
  ],
*/
  items: [
    {
      layout: 'uxcolumn',
      border: false,
      id: 'seatingColLayout',
      layoutConfig: {
        fitHeight: true
      },
      items: [
        {
          bodyStyle: 'margin: 20px 15px 20px 15px;',
          width: 230,
          border: false,
          items: [
            {
              width: 200,
              defaults: {height: 300, width: 200},
              items: [
                {
                    xtype: 'treepanel',
                    autoScroll: true,
                    border: false,
                    autoLoad: false,
                    id : 'studentTree',
                    ddGroup          : 'deskGroup',
                    enableDD   : true,
                    title: 'Students',
                    root: new Ext.tree.AsyncTreeNode({
                      expanded: true
                    }), 
                     loader: new Ext.tree.TreeLoader({
                        autoLoad: false,
                        url:'teacher_tools/seatingchart_data.json.php',
                        baseParams: {command: 'getStudentsByCourse'}                    
                     }),              
                    rootVisible: false,
                    addStudent: function(panel){
                      this.getRootNode().appendChild(
                        {
                            text: panel.items.items[1].text + ' ' + panel.items.items[2].text,
                            leaf: true,
                            iconCls: (panel.gender == 'male')?'user':'user_female',
                            fname: panel.items.items[1].text,
                            lname: panel.items.items[2].text,
                            gender: panel.gender,
                            stuID: panel.stuID                                        
                        }
                      );
                      this.doLayout();
                    },
                    getStudent: function(stuID){
                      root = this.getRootNode();
                      numChildren = root.childNodes.length;
                      for(i = 0; i < numChildren; i++){
                        if (root.childNodes[i].attributes.stuID == stuID){
                          return this.root.childNodes[i];
                        }
                      }
                      return null;
                    },
                    listeners: {
                      append : function(myTree){
                        //var myTreeSorter = new Ext.tree.TreeSorter(myTree, {property: 'lname'});
                        //myTreeSorter.doSort(myTree.getRootNode()); 
                      },
                    
                      render : function(target) {
                  
                        var sourcePanelDropTarget = new Ext.dd.DropTarget(target.body.dom,
                        
                        {            
                          notifyDrop : function(ddSource, e, data) {
                          
                            if(ddSource.tree == undefined){
                            if (data.panel.gender != '') {    
                              target.addStudent(data.panel);
                              var myTreeSorter = new Ext.tree.TreeSorter(target, {property: 'lname'});
                              myTreeSorter.doSort(target.getRootNode());   
                                //Transfer target Firstname, lastname, and Icon to source
                                data.panel.clear();
                              }
                            }  
                            return (true);
                          }
                        });
                      },
                      beforeLoad : function(){
                        if (this.autoLoad == false){
                          this.autoLoad = true;
                          return false;
                        }
                      },
                      load : function(){
                        tsSum = Ext.getCmp('treeSummarySum');
                        if (tsSum != 'undefined'){
                          tsSum.setText(this.getRootNode().childNodes.length);
                        }                         
                        classroom = Ext.getCmp('classrm');
                        classroom.load();
                        classroom.show();
                      }
                      
                    }
                  },
                  {
                    xtype: 'panel',
                    border: false,
                    height: 25,
                    bodyStyle: 'background-color: #F4F5F6',
                    items: [
                      {
                        xtype: 'label',
                        width: 155,
                        cls: 'treeSumLabel',
                        text: 'Total students'
                      },
                      {
                        id : 'treeSummarySum',
                        xtype: 'label',
                        width: 45,
                        cls: 'treeSummarySum',
                        text: '0'
                      }
                    ]
                    
                  }
              ]
            }
          ]
        },
        {
          columnWidth: 1,
          border: false,
          id: 'classcolumn',
          cls: 'seatingchart',
          autoScroll: true,
          bodyStyle: 'text-align: center;',
          border: false,
          items: [
            {
              border: false,
              
              id: 'classcontainter',
              bodyStyle: 'text-align: center',
              items: [
               {
                  id: 'classrm',
                  xtype: 'classroom',
                  studentData: 'studentTree',
                  url: 'teacher_tools/seatingchart_data.json.php',
                  baseParams: {command:'classroom'},
                  listeners: {
                    load : function(){
                      Ext.getCmp('seatingColumnsCombo').setValue(this.columns);
                      Ext.getCmp('seatingRowsCombo').setValue(this.rows);
                      Ext.getCmp('configurationCombo').setValue((this.config == 3 || this.config == 4) ? 'Paired' : 'Single');                      
                      
                    }
                  }

               }
              ]
            }
          ]
        }
      ] 
    }
  ]
}