/**
	@file This file contains custom map controls.  The controls implement
	the Google GControl interface.  For more information on creating custom
	map controls, see the Google Maps API documentation at:

	http://www.goolge.com/apis/maps/documentation/reference.html
	http://www.google.com/apis/maps/documentation/reference.html#GControl

	USES:
		/scripts/maps/globals.js
		/scripts/maps/overlays.js

	USED BY:
		/scripts/maps/init.js

	INCLUDED BY:
		/maps.php
 */

/*--------------------------------------------------------------------------*/

/****************************************************************************
 * CLASS:	AreaControl
 *
 * INTERFACE:	GControl
 *
 * This class represents an area control on the map.  An area control
 * toggles the visibility of area overlays on the map.
****************************************************************************/

/****************************************************************************
 * FUNCTION:	AreaControl::AreaControl
 *		RETURN:	none
 *	This function creates an AreaControl object.
****************************************************************************/
function AreaControl(container_id, button_id, offset_x, offset_y, enabled_text, disabled_text, click_callback, tag) {
	this.container_id = container_id;
	this.button_id = button_id;
	this.offset_x = offset_x;
	this.offset_y = offset_y;
	this.enabled_text = enabled_text;
	this.disabled_text = disabled_text;
	this.click_callback = click_callback;
	this.regions_enabled = false;
	this.tag = tag;
}

// Implement the GControl interface.
AreaControl.prototype = new GControl();

/****************************************************************************
 * FUNCTION:	AreaControl::initialize
 *		PARAM map:	the map the AreaControl is to be added to
 *		RETURN:	the AreaControl DOM element
 *	This function initializes the AreaControl and adds it to the map object.
****************************************************************************/
AreaControl.prototype.initialize = function(map) {

	// create the AreaControl container
	var area_container = document.createElement("div");		// the container div

	// set ID
	area_container.id = this.container_id;

	// set container styles
	this.addButtonContainerStyle_(area_container);

	var control = this;
	// set event handlers
	area_container.onclick = function() {
		control.toggleAreas();
	};

	// add container to map
	map.getContainer().appendChild(area_container);

	// create AreaControl button
	var area_text = document.createElement("div");		// the button div

	// set ID
	area_text.id = this.button_id;

	// set button style
	this.addDefaultButtonStyle_(area_text);
	area_text.innerHTML = this.enabled_text;

	// add button to container
	area_container.appendChild(area_text);

	// return the AreaControl DOM element
	return area_container;
}

/****************************************************************************
 * FUNCTION:	AreaControl::toggleAreas
 *		RETURN:	none
 *	This function toggles the area overlays on and off.
 *
 *	If on, the function removes area overlays from the map.  If off, the
 *	function adds area overlays to the map.  If performing a pan/zoom,
 *	the function does nothing.
****************************************************************************/
AreaControl.prototype.toggleAreas = function() {

	// check if in a pan/zoom...
	if (true == g_state.is_pan_zoom) {
		//... if so, do nothing
		return;
	}

	// get reference to AreaControl button
	var element = document.getElementById(this.button_id);

	// if areas are displayed...
	if (true == this.regions_enabled) {
		//... change button to "Show Areas"

		// set button styles
		this.addDefaultButtonStyle_(element);

		// set button text
		element.innerHTML = this.disabled_text;

		// button is no longer selected
		this.regions_enabled = false;

		// hide overlays
		this.click_callback(this.regions_enabled, this.tag);

	} else {
		// ... change button to "Hide Areas"

		// set button styles
		this.addSelectedButtonStyle_(element);

		// set button text
		element.innerHTML = this.enabled_text;

		// button is selected
		this.regions_enabled = true;

		// show overlays
		this.click_callback(this.regions_enabled, this.tag);
	}
}

/****************************************************************************
 * FUNCTION:	AreaControl::getDefaultPosition
 *		RETURN:	GControlPosition object; the default position of the area
 *				control
 *	This function returns the default position of the area control
****************************************************************************/
AreaControl.prototype.getDefaultPosition = function() {
	return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(this.offset_x, this.offset_y));
}

/****************************************************************************
 * FUNCTION:	AreaControl::addButtonContainerStyle_
 *		PARAM element:	object; DOM element to apply styles to
 *		RETURN:	none
 *	This function adds styles for a button container to the given element
****************************************************************************/
AreaControl.prototype.addButtonContainerStyle_ = function(element) {

	// set border attributes
	element.style.borderWidth = "1px";
	element.style.borderStyle = "solid";
	element.style.borderColor = "black";

	// set background attributes
	element.style.backgroundColor = "white";

	// set text attributes
	element.style.textAlign = "center";

	// set font styles
	element.style.fontSize = '16px';

	// set dimensions
	element.style.width = "5.5em";

	// set cursor properties
	element.style.cursor = "pointer";
}

/****************************************************************************
 * FUNCTION:	AreaControl::addSelectedButtonStyle_
 *		PARAM element:	object; DOM element to apply styles to
 *		RETURN:	none
 *	This function adds styles for an selected button to the given element
****************************************************************************/
AreaControl.prototype.addSelectedButtonStyle_ = function(element) {

	// set border styles
	element.style.borderWidth = "1px";
	element.style.borderStyle = "solid";
	element.style.borderColor = "#B0B0B0 #FFFFFF #FFFFFF #B0B0B0";

	// set font styles
	element.style.fontFamily	= "Arial,sans-serif"
	element.style.fontSize		= "12px";
	element.style.fontWeight	= "bold";
}

/****************************************************************************
 * FUNCTION:	AreaControl::addDefaultButtonStyle_
 *		PARAM element:	object; DOM element to apply styles to
 *		RETURN:	none
 *	This function adds styles for an unselected button to the given element
****************************************************************************/
AreaControl.prototype.addDefaultButtonStyle_ = function(element) {

	// set border styles
	element.style.borderWidth = "1px";
	element.style.borderStyle = "solid";
	element.style.borderColor = "#FFFFFF #B0B0B0 #B0B0B0 #FFFFFF";

	// set font styles
	element.style.fontFamily	= "Arial,sans-serif"
	element.style.fontSize		= "12px";
	element.style.fontWeight	= "normal";
}


/****************************************************************************
 * CLASS:	TextualZoomControl
 *
 * INTERFACE:	GControl
 *
 * This class represents a zoom control on the map.  This zoom control
 * allows the user to zoom in and out one level from the current level.
****************************************************************************/

/****************************************************************************
 * FUNCTION:	TextualZoomControl::TextualZoomControl
 *		RETURN:	none
 *	This function creates a TextualZoomControl object.
****************************************************************************/
function TextualZoomControl() {
}

// Implement the GControl interface
TextualZoomControl.prototype = new GControl();

/****************************************************************************
 * FUNCTION:	TextualZoomControl::initialize
 * 		PARAM map:	the map object to add the control to
 *		RETURN:	TextualZoomControl DOM element
 *	This function creates one div for each of the buttons and places
 *	them in a container div which is returned as the control element.  We
 *	add the control to the map container and return the control element
 *	for the map to position properly.
****************************************************************************/
TextualZoomControl.prototype.initialize = function(map) {

	// container div
	var container = document.createElement("div");

	// the zoom in button container div
	var zoomInDiv = document.createElement("div");
	this.setButtonStyle_(zoomInDiv);		// add the button style to the zoom in container div

	// add the zoom in button to the container
	container.appendChild(zoomInDiv);

	// the zoom in button text div
	var zoomInTextDiv = document.createElement("div");
	this.setTextStyle_(zoomInTextDiv);		// add the text style to the zoom in button div

	// add the zoom in text div to the zoom in container div
	zoomInDiv.appendChild(zoomInTextDiv);

	// add the zoom in text to the zoom in text div
	zoomInTextDiv.appendChild(document.createTextNode("Zoom In"));

	// add mousedown event handler to the zoom in container div
	GEvent.addDomListener(zoomInDiv, "mousedown", function() {

		// if performing a pan/zoom do nothing
		if (true == g_state.is_pan_zoom) {
			return;
		}

		// set font style
		zoomInTextDiv.style.fontWeight = "bold";

		// set border style
		zoomInTextDiv.style.borderColor = "#B0B0B0 #FFFFFF #FFFFFF #B0B0B0";
	});

	// add mouseup event handler to the zoom in container div
	GEvent.addDomListener(zoomInDiv, "mouseup", function() {

		// if performing a pan/zoom do nothing
		if (true == g_state.is_pan_zoom) {
			return;
		}

		// set font style
		zoomInTextDiv.style.fontWeight = "normal";

		// set border style
		zoomInTextDiv.style.borderColor = "#FFFFFF #B0B0B0 #B0B0B0 #FFFFFF";
	});

	// add click event handler to the zoom in container div
	GEvent.addDomListener(zoomInDiv, "click", function() {

		// if performing a pan/zoom do nothing
		if (true == g_state.is_pan_zoom) {
			return;
		}

		// zoom in and recenter map
		map.zoomIn(map.getCenter(), true, true);
		HideRegions();
		ShowRegions();
	});

	// the zoom out button container div
	var zoomOutDiv = document.createElement("div");
	this.setButtonStyle_(zoomOutDiv);		// add the button style to the zoom out container div

	// add the zoom out button to the container
	container.appendChild(zoomOutDiv);

	// the zoom out button text div
	var zoomOutTextDiv = document.createElement("div");
	this.setTextStyle_(zoomOutTextDiv);		// add the text style to the zoom out button div

	// add the zoom out text div to the zoom out container div
	zoomOutDiv.appendChild(zoomOutTextDiv);

	// add the zoom out text to the zoom out text div
	zoomOutTextDiv.appendChild(document.createTextNode("Zoom Out"));

	// add mousedown event handler to the zoom out container div
	GEvent.addDomListener(zoomOutDiv, "mousedown", function() {
		
		// if performing a pan/zoom do nothing
		if (true == g_state.is_pan_zoom) {
			return;
		}

		// set the font style
		zoomOutTextDiv.style.fontWeight = "bold";

		// set the border style
		zoomOutTextDiv.style.borderColor = "#B0B0B0 #FFFFFF #FFFFFF #B0B0B0";
	});

	// add mouseup event handler to the zoom out container div
	GEvent.addDomListener(zoomOutDiv, "mouseup", function() {

		// if performing a pan/zoom do nothing
		if (true == g_state.is_pan_zoom) {
			return;
		}

		// set the font style
		zoomOutTextDiv.style.fontWeight = "normal";

		// set the border style
		zoomOutTextDiv.style.borderColor = "#FFFFFF #B0B0B0 #B0B0B0 #FFFFFF";
	});

	// add click event handler to the zoom out container div
	GEvent.addDomListener(zoomOutDiv, "click", function() {

		// if performing a pan/zoom do nothing
		if (true == g_state.is_pan_zoom) {
			return;
		}

		// zoom out and recenter map
		map.zoomOut(map.getCenter(), true);
		HideRegions();
		ShowRegions();
	});

	// add zoom control to map
	map.getContainer().appendChild(container);

	// return zoom control
	return container;
}

/****************************************************************************
 * FUNCTION:	TextualZoomControl::getDefaultPosition
 *		RETURN:	GControlPosition object; the default position of the zoom
 *				control
 *	This function returns the default position of the zoom control
****************************************************************************/
TextualZoomControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 30));
}

/****************************************************************************
 * FUNCTION:	TextualZoomControl::setButtonStyle_
 *		PARAM button:	object; DOM node to apply style to
 *		RETURN:	none
 *	This function sets the proper CSS for the given button element
****************************************************************************/
TextualZoomControl.prototype.setButtonStyle_ = function(button) {

	// set border style
	button.style.borderWidth = "1px";
	button.style.borderStyle = "solid";
	button.style.borderColor = "black";

	// set background style
	button.style.backgroundColor = "white";

	// set text style
	button.style.textAlign = "center";

	// set dimensions
	button.style.width = "5.5em";

	// set font styles
	button.style.fontSize = '16px';

	// set margins
	button.style.marginBottom = "5px";

	// set cursor styles
	button.style.cursor = "pointer";
}

/****************************************************************************
 * FUNCTION:	TextualZoomControl::setTextStyle_
 *		PARAM button:	object; DOM node to apply style to
 *		RETURN:	none
 *	This function sets the proper CSS for the given button element
****************************************************************************/
TextualZoomControl.prototype.setTextStyle_ = function(button) {

	// set border styles
	button.style.borderWidth = "1px";
	button.style.borderStyle = "solid";
	button.style.borderColor = "#FFFFFF #B0B0B0 #B0B0B0 #FFFFFF";

	// set font styles
	button.style.fontFamily = "Arial,sans-serif"
	button.style.fontSize = "12px";
}

