/**
  * Ext 2.0 Linked Combos Tutorial
  * by Jozef Sakalos, aka Saki
  * http://extjs.com/learn/Tutorial:Linked_Combos_Tutorial_for_Ext_2
  */

// reference local blank image
Ext.BLANK_IMAGE_URL = '/js/ext/resources/images/default/s.gif';

Ext.namespace('LCombo', 'LCombo.countries', 'LCombo.cities');

LCombo.countries = [
	[-1,map_select_district_options[-1]]
	,[1,map_select_district_options[1]]
	,[2,map_select_district_options[2]]
	,[3,map_select_district_options[3]]
	,[4,map_select_district_options[4]]
	,[5,map_select_district_options[5]]
	,[6,map_select_district_options[6]]
	,[7,map_select_district_options[7]]
	,[8,map_select_district_options[8]]
	,[9,map_select_district_options[9]]
	,[10,map_select_district_options[10]]
	,[11,map_select_district_options[11]]
	,[12,map_select_district_options[12]]
	,[13,map_select_district_options[13]]
	,[14,map_select_district_options[14]]
	,[15,map_select_district_options[15]]
	,[16,map_select_district_options[16]]
	,[17,map_select_district_options[17]]
	,[18,map_select_district_options[18]]
];


// create application
LCombo.app = function() {
    // do NOT access DOM from here; elements don't exist yet

    // private variables

    // private functions
	function retrieveSchoolData()	{
		var fieldDistrict = Ext.getCmp('district_id');
		var fieldSchoolName = Ext.getCmp('school_name');

		//if (fieldSchoolName.getValue() == '' && fieldDistrict.getValue() == '')
		//	return;

		if (fieldSchoolName.getValue() == '' && fieldDistrict.getValue() == '-1')	{
			alert(map_select_alert['all_district']);
			return;
		}

		var fieldSameDistrict = Ext.getCmp('showSameDistrict');
		var fieldOtherDistrict = Ext.getCmp('showOtherDistrict');
		var showDistrict = '';
		if (fieldSameDistrict.getValue())	{
			showDistrict = fieldSameDistrict.inputValue;
		}
		if (fieldOtherDistrict.getValue())	{
			showDistrict = ((showDistrict=='')?'':showDistrict+',') + fieldOtherDistrict.inputValue;
		}
		getSchoolData(fieldSchoolName.getValue(), fieldDistrict.getValue(), showDistrict, 1);
	}

    // public space
    return {

        // public methods
        init: function() {


			var viewport = new Ext.Viewport({
				layout:'border'
				,items:[

				 new Ext.BoxComponent({ // raw
                     region:'north',
                     el: 'north',
                     height:60
                 }),
                 {
                    region:'west',
                    id:'west-panel',
                    title:map_name,
                    split:true,
                    width: 250,
                    minSize: 250,
                    maxSize: 400,
                    collapsible: true,
                    margins:'5 0 5 5',
                    layout:'fit',
                    items: [{
                        title:'',
                        html:'<table border=0 cellspacing=0 cellpadding=0 width="100%"><tr><td><div id="pp" valign="top"></div></td></tr><tr><td><div id="side_bar" valign="top"></div></td></tr></table>',
                        border:false,
                        iconCls:'settings',
                        autoScroll:true
                    }]
                 },new Ext.BoxComponent({ // raw
                     region:'east',
                     el: 'east',
                     height:0
                 }),new Ext.BoxComponent({ // raw
                     region:'south',
                     el: 'south',
                     height:0
                 }),new Ext.BoxComponent({ // raw
                     region:'center',
                     el: 'center',
                     height:500,
                     margins:'0 0 0 0'
                 })]
			});


            var form = new Ext.FormPanel({
                 renderTo:document.body
                ,width:'100%'
                ,height: 215
                ,style:'margin:0px'
                ,bodyStyle:'padding:5px'
				,bodyBorder:false
				,border:'false'
				,collapsible:true
                ,title:''
                ,defaults: {xtype:'combo'}
				,applyTo:'pp'
                ,items:[{
        			xtype:'label'
        			,html:map_top_banner
        		},
                {

                	// Text box, searching for school name
	                fieldLabel:'<a name="TOP"></a>School Name',
	                hideLabel:true,
	                name:'school_name',
	                id:'school_name',
	                xtype:'textfield',
	                anchor:'90%',
	                emptyText:map_fill_sch_name,
	                listeners:{
	                	'specialkey': function(thisField, thisEvent)	{
	                		// if <Enter> pressed
	                		if (thisEvent.getKey() == 13)	{
	                			thisField.blur();
	                		}
	                	},
	                	'change': function(thisField, newValue, oldValue)	{

							// reset the searching criteria
	                		var fieldDistrict = Ext.getCmp('district_id');
	                		//fieldDistrict.reset();
	                		fieldDistrict.setValue(-1);
							var fieldSameDistrict = Ext.getCmp('showSameDistrict');
							fieldSameDistrict.setValue(true);
							var fieldOtherDistrict = Ext.getCmp('showOtherDistrict');
							fieldOtherDistrict.setValue(true);

	                		retrieveSchoolData();
	                	}
	                }
                },
                {

                	// Combo box, searching for district
		    		id:'district_id'
		    		,name:'district_id'
		    		,fieldLabel:'District'
                    ,displayField:'country'
                    ,valueField:'cid'
				    ,hideLabel:'true'
				    ,editable:false
				    ,anchor:'90%'
				    ,emptyText:map_select_district
                    ,store: new Ext.data.SimpleStore({
                         fields:['cid', 'country']
                        ,data:LCombo.countries
                    })
                    ,triggerAction:'all'
                    ,mode:'local'
                    ,listeners:{select:{fn:function(combo, value) {
	                		retrieveSchoolData();
                        }}
                    }
                },
                {

                	// Checkbox, searching for school level
                	xtype:'fieldset'
                	,title:map_select_level
                	,anchor:'90%'
                	,height:85
                	,items:[{
                		border:false
                		,items:[{
                			xtype:'checkbox'
                			,boxLabel:'<span style="font-size:11px">' + map_select_level_pri + '</span>'
                			,id:'showSameDistrict'
                			,name:'showSameDistrict'
                			,checked:true
                			,inputValue:'1'
                			,listeners:{
                				'check': function(thisField, isChecked)	{
			                		thisField.blur();
                				},
                				'change': function(thisField, newValue, oldValue)	{
		                    		retrieveSchoolData();
                				}
                			}
                		},
                		{
                			xtype:'checkbox'
                			,cls:'checkbox'
                			,boxLabel:'<span style="font-size:11px">' + map_select_level_sec + '</span>'
                			,id:'showOtherDistrict'
                			,name:'showOtherDistrict'
                			,checked:true
                			,inputValue:'2'
                			,listeners:{
                				'check': function(thisField, isChecked)	{
                					thisField.blur();
                				},
                				'change': function(thisField, newValue, oldValue)	{
		                    		retrieveSchoolData();
                				}
                			}
                		}]
                	}]
                },
        		{
        			xtype:'label'
        			,html:map_select_remark
        		}]
            });
        }
    };
}(); // end of app

// end of file