/*******************************************************************************
 * CONFIG & SETUP
 ******************************************************************************/

// elements
var LOADING_IMAGE	= '<p class="loading-image"><img src="/images/layout/ajax-loader.gif" alt="loading..."/></p>';
var SELECTED_CLASS	= 'selected';
var TABS            = '#tabs';

// ajax config
var URL_RESULTS_TEXT = '/suche/results/';
var URL_RESULTS_MAP  = '/suche/map/';
var TIMEOUT          = 5000;

// breadcrumb
var BREADCRUMB				= '#map-breadcrumb';
var BREAD_INITIAL			= '#bread-initial';
var TOGGLE_CANTON			= '#bread-canton';
var TOGGLE_DISTRICT			= '#bread-district';
var TOGGLE_DISTRICT_LABEL	= '#bread-district-label';
var TOGGLE_CIRCLE			= '#bread-circle';

// forms
var FORM_PLACES 	= $('#search-form');
var FORM_NAMES 		= $('#search-form-name');

// results
var RESULTS_MAP		= '#results-map';
var RESULTS_DOM 	= RESULTS_MAP + ' p';
var RESULTS_TEXT	= '#search-results';

/* state variables & constants */
var STATE_CANTON	= 'canton';
var STATE_DISTRICT	= 'district';
var STATE_CIRCLE	= 'circle';

// canton by default
var state = STATE_CANTON;

// selected elements
var selected_canton;
var selected_district;
var selected_circle;

/*******************************************************************************
 * DOCUMENT READY
 ******************************************************************************/
$(document).ready(function() {
	
	// search form submit
	$(FORM_PLACES).submit(function() {
	
		/**
		 * Show loading message for text results.
		 * This is needed so that the results are 
		 * removed every time we press the 'submit' button.
		 * COSMETIC HACK, NOT NEEDED ACTUALLY.
		 *
		 * $(RESULTS_TEXT).html(LOADING_IMAGE);
		 */
		
		// show canton link in breadcrumb 
 		$(BREAD_INITIAL).hide();
		$(TOGGLE_CANTON).show();
		
		// map search
		search_map();
		
		// do not submit
		return false;
	});
	
	$(FORM_NAMES).submit(function() {
		search_text();
		return false;
	});
	
	// update breadcrumb
	initialize_breadcrumb();
});

/*******************************************************************************
 * SEARCH FUNCTIONS
 ******************************************************************************/

/**
 * Function that triggers the list search.
 */
function search_text() {

	// loading message
	$(RESULTS_TEXT).html(LOADING_IMAGE);
	
	// inputs
	var inputs = get_search_inputs();

	// Text results AJAX
	jQuery.ajax({
	
		// join params
		data:		inputs.join('&'),
		url:		URL_RESULTS_TEXT,
		type:		'POST',
		cache:		false,
		timeout:	TIMEOUT,
		
		// error?
		error: function(XMLHttpRequest, textStatus, errorThrown) {
			$(RESULTS_TEXT).html('There was an error processing your request: ' + textStatus);
		},
		
		// show results
		success: function(response) {
			$(RESULTS_TEXT).html(response);
		}
	});
}

/**
 * Function that triggers the map search.
 */
function search_map() {

	// loading image
	$(RESULTS_TEXT).html(LOADING_IMAGE);
	$(RESULTS_MAP).html(LOADING_IMAGE);
	
	// inputs
	var inputs = get_search_inputs();
		
	// Map results AJAX.
	jQuery.ajax({
	
		// join params
		data:		inputs.join('&'),
		url:		URL_RESULTS_MAP,
		type:		'POST',
		cache:		false,
		timeout:	TIMEOUT,
		
		// error?
		error: function() {
			$(RESULTS_MAP).html('There was an error processing your request: ' + textStatus);
		},
		
		// show results
		success: function(response) {
			$(RESULTS_MAP).html(response);

			// attach initial qtip			
			$(RESULTS_DOM).each(function() {
				$(this).qtip({
			   		show:		'mouseover',
			   		hide: 		'mouseout',
			   		position: {
						corner: {
		 				tooltip: 'topLeft'
						}
					},
					style: { 
						name: 'dark'
					}
				});
			});
			
			attach_map_listeners();
			
			mark_selected_map_element();
						
			// search text here
			search_text();
		}
	});
}

/*******************************************************************************
 * HELPERS
 ******************************************************************************/

/**
 * Attaches map listeners so that places can be clicked
 * and the textual search refined further.
 */
function attach_map_listeners() {

	var elements = $(RESULTS_DOM);
	
	elements.click(function() {

		// get element name
		var name = $(this).attr('rel');
		var elem = $(this);
		
		// destroy qtip
		$(this).qtip('destroy');
		
		// remove all selected classes
		elements.each(function() {
			this.removeAttribute('class');
		});
		
		// decide what to set based on state

		if (state == STATE_CANTON)
		{
			selected_canton = this.id;
			state = STATE_DISTRICT;
			
			search_map();
		}
		else if (state == STATE_DISTRICT)
		{	
			// go futher when district is ZH
			if (this.id == 'district_zuerich')
			{
				selected_district = this.id;
				state = STATE_CIRCLE;
				
				search_map();
			}
			else if (selected_district == this.id)
			{
				selected_district = 'undefined';
			}
			else
			{
				selected_district = this.id;
			}
		}
		else if (state == STATE_CIRCLE)
		{
			if (selected_circle == this.id)
			{
				selected_circle = 'undefined';
			}
			else
			{
				selected_circle = this.id;
			}
		}

		// start search
		search_text();
		
		// update breadcrumb
		update_breadcrumb();
		
		// re-attach qtip
		$(this).qtip({
			content: 	name,
	   		show:		'mouseover',
	   		hide: 		'mouseout',
	   		position: {
				corner: {
 				tooltip: 'topLeft'
				}
			},
			style: { 
				name: 'dark'
			}
		});
		
		mark_selected_map_element();

		return false;
	});
}

/**
 * Marks the element in the map as selected based on the
 * selected variable and state.
 */
function mark_selected_map_element()
{
    $(RESULTS_DOM).each(function() {
        // set selected class
		if (this.id == selected_district || this.id == selected_circle)
		{
			this.setAttribute('class', SELECTED_CLASS);
		}
    });
}

/**
 * Initializes the breadcrumb along with its toggles.
 * The breadcrumb is initially hidden. The update_breadcrumb()
 * function as well as the toggles here determine which toggle 
 * is shown and thus usable.
 */
function initialize_breadcrumb()
{
	// canton toggle
	$(TOGGLE_CANTON + ' a').click(function() {
	
		// reset state
		state = STATE_CANTON;

		// invalidate selected fields
		selected_canton		= 'undefined';
		selected_district	= 'undefined';
		selected_circle		= 'undefined';
		
		// update breadcrumb
		update_breadcrumb();
				
		// update map
		search_map();
	});
	
	// district toggle
	$(TOGGLE_DISTRICT + ' a').click(function() {
	
		// reset state
		state = STATE_DISTRICT;
	
		// invalidate selected fields
		selected_district	= 'undefined';
		selected_circle		= 'undefined';
		
		// update breadcrumb
		update_breadcrumb();
		
		// update map
		search_map();
	});			
}

/**
 * Update function for map breadcrumb. Based on the state we're in,
 * we need to add/remove links for map navigation for moving 
 * between states.
 */
function update_breadcrumb() {
	if (state == STATE_CANTON)
	{
		$(TOGGLE_DISTRICT_LABEL).hide();
		$(TOGGLE_DISTRICT).hide();
		
		$(TOGGLE_CIRCLE).hide();
	}
	else if (state == STATE_DISTRICT)
	{
		$(TOGGLE_CIRCLE).hide();
		
		$(TOGGLE_DISTRICT).hide();
		$(TOGGLE_DISTRICT_LABEL).show();
	}
	else if (state == STATE_CIRCLE)
	{
		$(TOGGLE_DISTRICT_LABEL).hide();
		$(TOGGLE_DISTRICT).show();
		
		$(TOGGLE_CIRCLE).show();
	}
}

/**
 * Composes the filter array from the form input elements.
 * The function also takes care of passing the global state
 * values to the search functions.
 */
function get_search_inputs() {
	var inputs = [];
	
	// get form inputs
	$(':input').each(function() {
		var value = this.value;
		if(this.type == 'checkbox') {
			value = this.checked ? 'ja' : '';
		}
    	inputs.push(this.name + '=' + escape(value));
    	
    	//debug
    	//inputs.push('debug=true');
	})
	
	// push states
	inputs.push('state=' + state);
	inputs.push('selected_canton=' + selected_canton);
	inputs.push('selected_district=' + selected_district);
	inputs.push('selected_circle=' + selected_circle);
	
	return inputs;
}