///////////////////////////////////////////////////////////////////////////////////////
// JavaScript methods to create Area of Interest control on Google maps for
// map drawing tool

// Depedency on other modules: 
//  Google maps.


var border;

var groundOverlay;


// Control Properties
  icon_NE = new GIcon(); 
  icon_NE.image = '/images/GM/marker_NE_icon.png';
  icon_NE.shadow = '';
  icon_NE.iconSize = new GSize(32, 32);
  icon_NE.shadowSize = new GSize(22, 20);
  icon_NE.iconAnchor = new GPoint(22, 10);
  icon_NE.dragCrossImage = '';
  icon_SW = new GIcon(); 
  icon_SW.image = '/images/GM/marker_SW_icon.png';
  icon_SW.shadow = '';
  icon_SW.iconSize = new GSize(32, 32);
  icon_SW.shadowSize = new GSize(22, 20);
  icon_SW.iconAnchor = new GPoint(12, 20);
  icon_SW.dragCrossImage = '';
  icon_move = new GIcon();
  icon_move.image = '/images/GM/marker_move_icon.png';
  icon_move.shadow = '';
  icon_move.iconSize = new GSize(32, 32);
  icon_move.shadowSize = new GSize(6, 20);
  icon_move.iconAnchor = new GPoint(6, 20);
  icon_move.dragCrossImage = '';


	
//--------------------------------------------------------------------
//Define Area of Interest	





function AOIControl() {}
  AOIControl.prototype = new GControl();
  
  //Control in drawing mode
  AOIControl.prototype.initialize = function(map) {
  var container = document.createElement("div");
  var AOIDiv = document.createElement("div");
  this.setButtonStyle_(AOIDiv);
           AOIDiv.id = "AOIDiv";
           AOIDiv.title ="Define Area of Interest";
  container.appendChild(AOIDiv);
  AOIDiv.appendChild(document.createElement("div"));
  GEvent.addDomListener(AOIDiv, "click", function() { ToggleButtons(map) ; }) ;
  
  
  
  map.getContainer().appendChild(container);
  return container;
}






//--------------------------------------------------------------------
//Define Clear Area of Interest	
function AOIClearControl() {}
  AOIClearControl.prototype = new GControl();
  AOIClearControl.prototype.initialize = function(map) {
  var container = document.createElement("div");
  var AOIClearDiv = document.createElement("div");
  this.setButtonStyle_(AOIClearDiv);
           AOIClearDiv.id = "AOIClearDiv";
           AOIClearDiv.title ="Clear Area of Interest";
  container.appendChild(AOIClearDiv);
  AOIClearDiv.appendChild(document.createElement("div"));
  GEvent.addDomListener(AOIClearDiv, "click", function() {
  if (aoiToggle== 1){   //Check if an AOI has been selected!
  	alert("Please Define an Area of Interest first!");
    }
   else
    {
    	aoiToggle= 2;	
    	ToggleButtons(map);
    }
    
 });

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


//--------------------------------------------------------------------
// function that toggles the button images

function ToggleButtons(map){
  if (aoiToggle > 1){
    document.getElementById("AOIDiv").style.backgroundImage = "url(/images/GM/gm_btn_define_area_enabled.png)";
    document.getElementById("AOIClearDiv").style.backgroundImage = "url(/images/GM/gm_btn_clear_area_disabled.png)";
  	document.getElementById("formDiv").style.backgroundImage = "url(/images/GM/gm_btn_submit_area_disabled.png)";
	map.clearOverlays();
    aoiToggle = 1;  
      	
  }else{	
    document.getElementById("AOIDiv").style.backgroundImage = "url(/images/GM/gm_btn_define_area_current.png)";
    document.getElementById("AOIClearDiv").style.backgroundImage = "url(/images/GM/gm_btn_clear_area_enabled.png)";
    document.getElementById("formDiv").style.backgroundImage = "url(/images/GM/gm_btn_submit_area_enabled.png)";
    map.clearOverlays();
    
     var bounds = map.getBounds();
  var span = bounds.toSpan();
  var newSW = new GLatLng(bounds.getSouthWest().lat() + span.lat()/5, 
                          bounds.getSouthWest().lng() + span.lng()/5);
  var newNE = new GLatLng(bounds.getNorthEast().lat() - span.lat()/5, 
                          bounds.getNorthEast().lng() - span.lng()/5);
  var newBounds = new GLatLngBounds(newSW, newNE);
  aoiToggle = 2;
  
  marker_NE = new GMarker(newBounds.getNorthEast(), {draggable: true, icon: icon_NE});
  GEvent.addListener(marker_NE, 'dragend', function() {
    updatePolyline(map);
  });

  marker_SW = new GMarker(newBounds.getSouthWest(), {draggable: true, icon: icon_SW});
  GEvent.addListener(marker_SW, 'dragend', function() {
    updatePolyline(map);
  });
  
  marker_move = new GMarker( new GLatLng(((marker_SW.getPoint().lat() + marker_NE.getPoint().lat()) / 2), (marker_NE.getPoint().lng() + marker_SW.getPoint().lng()) / 2), {draggable: true, icon: icon_move}) ;
  GEvent.addListener(marker_move, 'dragend', function() { updatePolyline(map) ; }) ;
  marker_move.savePoint = marker_move.getPoint() ;			// Save for later
  map.addOverlay(marker_NE);
  map.addOverlay(marker_SW);
  map.addOverlay(marker_move);
  updatePolyline(map);		

}

 
//--------------------------------------------------------------------
// function that draws aoi polygon
function updatePolyline(map) {
  if (border) {
    map.removeOverlay(border);
  }
  // Check for moved center...
  if ( marker_move.getPoint() != marker_move.savePoint )
  {
    var x = marker_move.getPoint().lat() - marker_move.savePoint.lat() ;
    var y = marker_move.getPoint().lng() - marker_move.savePoint.lng() ;
    marker_SW.setPoint( new GLatLng( marker_SW.getPoint().lat() + x, marker_SW.getPoint().lng() + y) ) ;
    marker_NE.setPoint( new GLatLng( marker_NE.getPoint().lat() + x, marker_NE.getPoint().lng() + y) ) ;
  } else						// Center not moved so move center
  {
    var x = (marker_SW.getPoint().lat() + marker_NE.getPoint().lat()) / 2 ;
    var y = (marker_NE.getPoint().lng() + marker_SW.getPoint().lng()) / 2 ;
    marker_move.setPoint( new GLatLng(x,y) ) ;
  }

  marker_move.savePoint = marker_move.getPoint() ;			// Save for later
  var points = [
      marker_NE.getPoint(),
      new GLatLng(marker_SW.getPoint().lat(), marker_NE.getPoint().lng()),
      marker_SW.getPoint(),
      new GLatLng(marker_NE.getPoint().lat(), marker_SW.getPoint().lng()),
      marker_NE.getPoint()];
  border = new GPolyline(points, "#fff600");
  
  map.addOverlay(border);  
  updateGroundOverlay(map);
  updateCode();  
}}

//--------------------------------------------------------------------
function updateGroundOverlay(map) {

  if (groundOverlay) {
    map.removeOverlay(groundOverlay);
  }
    groundOverlay = new GGroundOverlay (
    "/images/GM/overlay_aoi.png",
    new GLatLngBounds(marker_SW.getPoint(), marker_NE.getPoint()));
    
	
  map.addOverlay(groundOverlay);
}


//// Sets the proper CSS for the given button element.
AOIControl.prototype.setButtonStyle_ = function(button) {
  //button.style.backgroundColor = "transparent";
  button.style.textAlign = "center";
  button.style.cursor = "pointer";
  button.style.backgroundImage = "url(/images/GM/gm_btn_define_area_enabled.png)";
  button.style.backgroundRepeat ="no-repeat";
  button.style.backgroundPosition ="0px 0px";
  button.style.paddingLeft = "160px";
  button.style.paddingTop = "33px";
  button.style.fontWeight = "Bold";
}

//// Sets the proper CSS for the given button element.
AOIClearControl.prototype.setButtonStyle_ = function(button) {
  button.style.textAlign = "center";
  button.style.cursor = "pointer";
  button.style.backgroundImage = "url(/images/GM/gm_btn_clear_area_disabled.png)";
  button.style.backgroundRepeat ="no-repeat";
  button.style.backgroundPosition ="0px 0px";
  button.style.paddingLeft = "160px";
  button.style.paddingTop = "33px";
  button.style.fontWeight = "Bold";
}