var AjaxForm = {
    
    loadFormData: function($task) {
        //var loading = $('loading').empty().toggleClass('ajax-loading');
        var url = "index.php?option=com_ifportfolio&controller=ajax&task="+$task;
        
        var form = $('ifportfolio_search');
        
        form.setProperty('action', url);

        form.send({
            method: 'get',
            onComplete: function() {
                //loading.toggleClass('ajax-loading');
            },
            onSuccess: function(request) {
                // mootools 1.1 style Json evaluation ...
                var json = Json.evaluate(request);
                if (json.error) {
                    Messages.reportError(json.error);
                    Messages.displayDebug(json.debug);
                } else {
                    //Messages.displayMessage(json.message);
                    //Messages.displayDebug(json.debug);

                    // ACTION HERE!!!
                    //alert(json.data.areas);
                    $('wrapAreas').innerHTML = json.data.areas;
                    $('wrapTypes').innerHTML = json.data.types;
                    $('wrapLocations').innerHTML = json.data.locations;
                    
                    AjaxForm.addFormEvents();
                    
                    //$('staffdetails').innerHTML = json.data;
                    //AjaxForm.setActions();
                    //new Tips($$('#staffdetails .hasTip'), { maxTitleChars: 50, fixed: false});
                }
            }
        });
    },
    
    addFormEvents: function(e) {
	    var areas = $('selAreas');
	    var types = $('selTypes');
	    var locations = $('selLocations');
	    
	    areas.addEvent('change', AjaxForm.formChangeEvent);
	    types.addEvent('change', AjaxForm.formChangeEvent);
	    locations.addEvent('change', AjaxForm.formChangeEvent);
	    
	    var form = $('ifportfolio_search');
    	form.addEvent('submit', AjaxForm.formSubmitEvent);
    },
    
    formSubmitEvent: function(e) {
		if ($('tfKeyword')) {
			if ($('tfKeyword').value == 'Keyword') {
				$('tfKeyword').value = '';
			}
		}
		var form = $('ifportfolio_search');
        //form.setProperty('action', '');
        form.submit();
    },
    
    formChangeEvent: function(e) {
    	e = new Event(e);
    	//var val = e.target.getValue();
    	//var field_name = e.target.name;
//    	AjaxForm.areaVal = $('selAreas').getValue();
//    	AjaxForm.typeVal = $('selTypes').getValue();
//    	AjaxForm.locationVal = $('selLocations').getValue();
    	
    	AjaxForm.loadFormData("getSearchFields");
    },
    
    areaVal: "",
    typeVal: "",
    locationVal: ""
    
}

window.addEvent('domready', function() {
	
    // A simple spinner div, display-toggled during request
//    var indicator = new Element('div', {
        //'class': 'autocompleter-loading',
        //'styles': {'display': 'none'}
    //}).injectAfter(searchInput); // appended after the input
    
    //MySqueezeBox.extend(SqueezeBox);
    //MySqueezeBox.initialize({});
    
    var butSubmit = $('butSubmit');
    butSubmit.addEvent('click', AjaxForm.formSubmitEvent);
    
    var form = $('ifportfolio_search');
    form.addEvent('submit', AjaxForm.formSubmitEvent);
    var areas = $('selAreas');
    var types = $('selTypes');
    var locations = $('selLocations');
    
    areas.addEvent('change', AjaxForm.formChangeEvent);
    types.addEvent('change', AjaxForm.formChangeEvent);
    locations.addEvent('change', AjaxForm.formChangeEvent);
    
});

var MySqueezeBox = {
    
    loadModal: function(modalUrl,handler,x,y) {
       var options = $merge(options || {}, Json.evaluate("{handler: '" + handler + "', size: {x: " + x +", y: " + y + "}}"));
       this.setOptions(this.presets, options);
       this.assignOptions();
       this.setContent(handler,modalUrl);
   },
	
	extend: $extend
	
}
// USAGE :: MySqueezeBox.loadModal('http://www.google.com','iframe',650,400);