/***********************************************************************************************/
/* MyLocationControl                                                                         */
/***********************************************************************************************/

// We define the function first
function MyLocationControl() {
}

// To "subclass" the GControl, we set the prototype object to
// an instance of the GControl object
MyLocationControl.prototype = new GControl();

// Creates a container DIV which is returned as our control element. We add the control
// to the map container and return the element for the map class to
// position properly.
MyLocationControl.prototype.initialize = function(map) {

  var container = document.createElement("div");
  var icon = document.createElement("div");
  container.appendChild(icon);

  this.setContainerStyle(container);
  this.setIconStyle(icon);

  GEvent.addDomListener(container, "click", function() {
    handleLocateMeClick();
  });

  map.getContainer().appendChild(container);
  return container;
}

// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
MyLocationControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(0, 0));
}

// Sets the proper CSS for the given container div element.
MyLocationControl.prototype.setContainerStyle = function(containerDiv) {
	// The div that responds to the user's clicks. a bit bigger than the icon for easier use
	containerDiv.style.margin = '0px';
	containerDiv.style.padding = '5px 10px 10px 5px'; //distance from the inner icon
	containerDiv.style.cursor = 'pointer';
//	containerDiv.index = -1; //to be put before the map type control
}


// Sets the proper CSS for the given icon div element.
MyLocationControl.prototype.setIconStyle = function(iconDiv) {
	// The div that contains the icon
	iconDiv.style.margin = '0px';
	iconDiv.style.padding = '0px';
	iconDiv.style.borderStyle = 'solid';
        iconDiv.style.borderWidth = '0px';
        iconDiv.style.background =  'url(../common_images/home.png)';
        //iconDiv.style.background =  'url(images/mylocation/map_target_btn.png)';		
        iconDiv.style.width = '38px';
        iconDiv.style.height = '38px';
	iconDiv.title = 'Click to center the map according to your location';
}

/***********************************************************************************************/
/* ClearSearchResultsControl                                                                         */
/***********************************************************************************************/

// We define the function first
function ClearSearchResultsControl() {
}

// To "subclass" the GControl, we set the prototype object to
// an instance of the GControl object
ClearSearchResultsControl.prototype = new GControl();

// Creates a container DIV which is returned as our control element. We add the control
// to the map container and return the element for the map class to
// position properly.
ClearSearchResultsControl.prototype.initialize = function(map) {

  var container = document.createElement("div");
  var icon = document.createElement("div");
  container.appendChild(icon);

  this.setContainerStyle(container);
  this.setIconStyle(icon);

  GEvent.addDomListener(container, "click", function() {
    handleClearSearchResults();
  });

  map.getContainer().appendChild(container);

  return container;
}

// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
ClearSearchResultsControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(0, 20));
}

// Sets the proper CSS for the given container div element.
ClearSearchResultsControl.prototype.setContainerStyle = function(containerDiv) {
	// The div that responds to the user's clicks. a bit bigger than the icon for easier use
	containerDiv.style.margin = '0px';
	containerDiv.style.padding = '5px 10px 10px 5px'; //distance from the inner icon
	containerDiv.style.cursor = 'pointer';
//	containerDiv.index = -1; //to be put before the map type control
}


// Sets the proper CSS for the given icon div element.
ClearSearchResultsControl.prototype.setIconStyle = function(iconDiv) {
	// The div that contains the icon
	iconDiv.style.margin = '0px';
	iconDiv.style.padding = '0px';
	iconDiv.style.borderStyle = 'solid';
        iconDiv.style.borderWidth = '0px';
        iconDiv.style.background =  'url(images/clear_search_btn.png)';
        iconDiv.style.width = '48px';
        iconDiv.style.height = '20px';
        iconDiv.title = 'Click to clear search results';
}





/***********************************************************************************************/
/* NavigationControl                                                                         */
/***********************************************************************************************/


// We define the function first
function NavigationControl(image, func, ancor, offset) {
	this.image = image;
	this.func = func;
	this.ancor = ancor;
	this.offset = offset;
}

// To "subclass" the GControl, we set the prototype object to
// an instance of the GControl object
NavigationControl.prototype = new GControl();

// Creates a container DIV which is returned as our control element. We add the control
// to the map container and return the element for the map class to
// position properly.
NavigationControl.prototype.initialize = function(map) {
  var container = document.createElement("div");
  var icon = document.createElement("div");
  container.appendChild(icon);

  this.setContainerStyle(container);
  this.setIconStyle(icon);

  GEvent.addDomListener(container, "click", this.func);

  map.getContainer().appendChild(container);
  return container;
}

  NavigationControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(this.ancor, this.offset);
}


// Sets the proper CSS for the given container div element.
NavigationControl.prototype.setContainerStyle = function(containerDiv) {
	// The div that responds to the user's clicks. a bit bigger than the icon for easier use
	containerDiv.style.margin = '0px';
	containerDiv.style.padding = '5px 5px 5px 5px'; //distance from the inner icon
	containerDiv.style.cursor = 'pointer';
//	containerDiv.index = -1; //to be put before the map type control
}


// Sets the proper CSS for the given icon div element.
NavigationControl.prototype.setIconStyle = function(iconDiv) {
	// The div that contains the icon
	iconDiv.style.margin = '0px';
	iconDiv.style.padding = '0px';
//	iconDiv.style.borderStyle = 'solid';
//	iconDiv.style.borderWidth = '2px';
	iconDiv.style.background =  'url(' + this.image + ')';
	iconDiv.style.width = '38px';
	iconDiv.style.height = '38px';
}