var SearchForm = new Class(
    {
        initialize: function() {
            // setup uiComponents
            this.uiComponent.searchTerms = $('searchTerms');
            //this.uiComponent.state = $('state');
            this.uiComponent.schoolFinderSearchForm = $('schoolFinderSearchForm');
            this.uiComponent.searchBtn = $('searchBtn');
            this.uiComponent.moreSearch = $('moreSearch');
            this.uiComponent.filter = $('filter');
            this.uiComponent.showErrors = $('showErrors');
            this.uiComponent.simpleSearch=$('simplesearch');
            this.uiComponent.nearAddressSearch=$('nearaddresssearch');
            
            this.uiComponent.elementary = $('elementary');
            this.uiComponent.middleschool = $('middleschool');
            this.uiComponent.highschool = $('highschool');
            
            this.uiComponent.public = $('public');
            this.uiComponent.private = $('private');
            this.uiComponent.charter = $('charter');
            this.uiComponent.suggestions=$('suggestions');
            
            // attach ui component events to functions
            this.setupEventHandlers();

            this.xhr = new Request({
                    
                    method: 'post',
                    url: '/schoolfinder/?__ajax=SF_StateSearch',
                    onSuccess: function(obj) { 
                        this.handleValidationResults(obj); 
                    }.bind(this),
                    
                    onRequest: function() { 
                    }.bind(this),
                    
                    onStateChange: function(obj) { 
                        ;
                    }.bind(this),
                    
                    onFailure: function(obj) { 
                        this.handleSearchFailure(obj); 
                    }.bind(this)
            });
        },
        
        xhr: null,
        searchCriteria: {
            "searchTerms":null,
            "schoolid":null,
            "street":null,
            "city":null,
            "districtname":null,
            "state":null,
            "zip":null,
            "stateid":null,
            "districtid":null,
            "schoollevel":null,
            "schoolname":null,
            "radius":null,
            "searchType":"simple",
            "GradeLevelFilter":{
                "elementary":false,
                "highschool":false,
                "middleschool":false
            },
            "SchoolTypeFilter":{
                "public":false,
                "charter":false,
                "private":false 
            },
            "StudentTeacherRatioFilter":{
                "under15":null,
                "under20":null,
                "under25":null,
                "under30":null
            },
            "SchoolSizeFilter":{
                "under200":null,
                "under500":null,
                "under1000":null
            },
            "AYPFilter":false,
            "limit":null,
            "offset":null,
            "getcount":false,
            "page":null
        },
        uiComponent: {
            state: null,
            searchTerms: null,
            schoolFinderSearchForm: null,
            searchBtn: null,
            moreSearch: null,
            filter: null,
            elementary: null,
            middleschool: null,
            highschool: null,
            public: null,
            private: null,
            charter: null,
            suggestions: null
        },
        
        executeValidation: function (searchCriteria){
            this.xhr.send(JSON.encode(searchCriteria));
        },
        
        setupEventHandlers: function(){
            this.uiComponent.searchBtn.addEvent('click',function() {
                if(this.uiComponent.searchTerms.value == this.uiComponent.searchTerms.defaultValue){
                    this.searchCriteria.searchTerms='';
                }else{
                    this.searchCriteria.searchTerms = this.uiComponent.searchTerms.value;
                }
                 //this.searchCriteria.state=this.uiComponent.state.value;
                 this.executeValidation(this.searchCriteria);
            }.bind(this));
            
            if(this.uiComponent.elementary!=null){
            	this.uiComponent.elementary.addEvent('click',function() {
	                this.searchCriteria.GradeLevelFilter.elementary = true;
	                this.searchCriteria.GradeLevelFilter.middleschool = false;
	                this.searchCriteria.GradeLevelFilter.highschool = false;
	            }.bind(this));
            }
            
        
            if(this.uiComponent.middleschool!=null){
            	this.uiComponent.middleschool.addEvent('click',function() {
	                this.searchCriteria.GradeLevelFilter.elementary = false;
	                this.searchCriteria.GradeLevelFilter.middleschool = true;
	                this.searchCriteria.GradeLevelFilter.highschool = false;
	            }.bind(this));
            }
                        
            if(this.uiComponent.highschool!=null){
            	this.uiComponent.highschool.addEvent('click',function() {
	                this.searchCriteria.GradeLevelFilter.elementary = false;
	                this.searchCriteria.GradeLevelFilter.middleschool = false;
	                this.searchCriteria.GradeLevelFilter.highschool = true;
            	}.bind(this));
            }
            
            
           /// more options events ends here
           if(this.uiComponent.public!=null){
	           	this.uiComponent.public.addEvent('click',function() {
	                   this.searchCriteria.SchoolTypeFilter.public = this.uiComponent.public.checked;
	           }.bind(this));
           }
           
           
           if(this.uiComponent.private!=null){
	           	this.uiComponent.private.addEvent('click',function() {
	                   this.searchCriteria.SchoolTypeFilter.private = this.uiComponent.private.checked;
	           }.bind(this));
           }
           
        	if(this.uiComponent.charter!=null){
           	this.uiComponent.charter.addEvent('click',function() {
                 this.searchCriteria.SchoolTypeFilter.charter = this.uiComponent.charter.checked;
             }.bind(this));
           }
           
           this.uiComponent.searchTerms.addEvent('click',function() {
                 this.clearText(this.uiComponent.searchTerms,this.uiComponent.searchTerms.defaultValue);
            }.bind(this));
               
            this.uiComponent.searchTerms.addEvent('blur',function() {
                if(this.uiComponent.searchTerms.value.length < 1){
                    this.uiComponent.searchTerms.value = this.uiComponent.searchTerms.defaultValue;
                }
            }.bind(this));
        
             this.uiComponent.searchTerms.addEvent('keydown',function(event) {
                 this.checkSubmit(event);
            }.bind(this));
       
       		this.uiComponent.schoolFinderSearchForm.addEvent('keydown',function(event) {
       			if(this.uiComponent.searchTerms.value.length > 0 && this.uiComponent.searchTerms.value != this.uiComponent.searchTerms.defaultValue)
       			{
                 this.checkSubmit(event);
                }
            }.bind(this));
            
	          	if(this.uiComponent.moreSearch!=null){
	          		this.uiComponent.moreSearch.addEvent('click',function() {
	                   this.toggleFilter();
	               }.bind(this));
	          	}
               
           
               this.uiComponent.schoolFinderSearchForm.addEvent('submit',function(e){
               ev.stop();
               this.searchCriteria.searchTerms=this.uiComponent.searchTerms.value;
               //this.searchCriteria.state=this.uiComponent.state.value;
               this.executeValidation(this.searchCriteria);
               //ev.stop();
           }.bind(this));
      },
         checkSubmit: function(event){
            var charCode = (event.which) ? event.which : ((event.keyCode)? event.keyCode : event.code);
            if (charCode == 13) {
                this.searchCriteria.searchTerms=this.uiComponent.searchTerms.value;
                this.executeValidation(this.searchCriteria);
            }
        },    
        handleValidationResults: function(response){
            try{
                var obj = JSON.decode(response);
                if (obj.faultCode) {
                    alert(obj.faultCode);
                    return;
                }
            }catch(e){
                this.uiComponent.showErrors.innerHTML='A system error occurred';
                return;
            }
            this.processResult(obj);
        },
    
        processResult: function(response){
            if(response.validation=='success'){
                this.uiComponent.schoolFinderSearchForm.submit();
            }else{
                this.uiComponent.showErrors.innerHTML=response.validation;
                this.showSuggestions(response.suggestions);
                return false;
            }
        },
    
        showSuggestions: function(suggestions){
        	if(suggestions !=null && suggestions.length>0){
	        	html='Did you mean: ';
	        	comma='';
	        	for(var i =0 ; i < suggestions.length;i++){
	        		html+=comma+'<a href="'+suggestions[i].url+'">'+suggestions[i].searchTerms+'</a>';
	        		comma=', ';
	        	}
	        	this.uiComponent.suggestions.innerHTML=html+' ?';
        	}
        	
        },
        handleSearchFailure: function(obj){
        	this.uiComponent.showErrors.innerHTML='A system error occurred';
        },    
    
        setSearchTypeSimple: function(element){
            if(element.checked){ 
                this.uiComponent.simpleSearch.show();
                this.uiComponent.nearAddressSearch.hide();
            }
        },
        
        setSearchTypeNearAddress: function(element){
            if(element.checked){ 
                this.uiComponent.simpleSearch.hide();
                this.uiComponent.nearAddressSearch.show();
            }
        },
        
        clearText: function (element,text){
            element.value=element.value.replace(text,"");
        },
        
        toggleFilter: function(){
            this.uiComponent.filter.style.display = (this.uiComponent.filter.style.display=='block')?'none':'block';
            if(this.uiComponent.moreSearch.className=='minus more-padding-left'){
                 this.uiComponent.moreSearch.className='plus more-padding-left';
            }else{
                this.uiComponent.moreSearch.className='minus more-padding-left';
            }
        }
    }
);