SD.teacherTools.addPage('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:'
		},
		new SchoolDynamics.coursesCombo({
			id: 'seatingchartCourseID',
			listeners: {
				select: function(combo, record, index) {
					if (combo.getValue() != '') {
						classRoom = Ext.getCmp('classrm');
						classRoom.save();
						classRoom.setCourseID(combo.getValue());
						stuTree = Ext.getCmp('studentTree');
						stuTree.loader.baseParams.courseID = combo.getValue();
						stuTree.root.reload();
						stuTreeHolder = Ext.getCmp('stuTreeHolder');
						if (stuTreeHolder.hidden) {
							stuTreeHolder.show();
						}
					}
				}
			}
		}),
		{
			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;',
			id: 'stuTreeHolder',
			hidden: false,
			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;
							}
							if (this.loader.baseParams.courseID == '') {
								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');
						}
					}
				}]
			}]
		}]
	}],
	listeners: {
		show: function() {}
	}
},
{
	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();
				}
			}
		}]
	},
	{
		title: 'Extended Access',
		tools: [{
			id: 'help',
			handler: function(btn) {
				helppopup.loadHelpFile("Supervise", 500, 455);
			}
		}],
		items: [{
			xtype: 'toolboxtext',
			iconCls: 'magnifier',
			text: 'View the following teacher:'
		},
		new SchoolDynamics.extendedAccessCombo({
			reshowPage: 'seatingchart-panel',
			listeners: {
				setvalue: function() {
					Ext.getCmp('seatingchartCourseID').clearValue();
					Ext.getCmp('classrm').hide();
					Ext.getCmp('stuTreeHolder').hide();
				}
			}
		})]
	}]
});