var map;
var markersArray = [];
var geocoder;
var panorama;
var lbFirstLoad = false;
var toggle;

function submitenter(myfield,e)
{
  
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
else return true;

if (keycode == 13)
   {
    
   FindLocation()
   return false;
   }
else
   return true;
}



function HomeControl(controlDiv) {

  // Set CSS styles for the DIV containing the control
  // Setting padding to 5 px will offset the control
  // from the edge of the map
  controlDiv.style.padding = '5px';

  // Set CSS for the control border
  var controlUI = document.createElement('DIV');
  controlUI.className = 'mapSearchHolder';
  controlUI.innerHTML = "<h2>Latitude and Longitude Search</h2>" +
                         "<p><input  type='text' id='address' name='address' class='inputMap placeholder' onfocus='if(this.value==\"Enter an address or area code here\")this.value=\"\";else this.select()' onblur='if(this.value==\"\")this.value=\"Enter an address or area code here\"'  value='Enter an address or area code here' onKeyPress='return submitenter(this,event)'/>" +
                         "<input type='button' value='Find' class='submit' onclick='if(address.value==\"Enter an address or area code here\")address.value=\"\";FindLocation()'></p>" +
                         "<p>" +
                         "<label for='latitude'>Latitude</label>" +
                         "<div class='inputMapResult' id='Latitude' ></div>" +
                         "</p>" +
                         "<p>" +
                         "<label for='longitude'>Longitude</label>" +
                         "<div class='inputMapResult' id='Longitude' ></div>" +
                         "</p>" +
                         "<p>If you think this location would be of interest to our community please share it and tell us more about it.</p>" +
                         "<p><input type='button' value='Share' class='share' onclick='UpdateLink();$(\"#fancylink\").trigger(\"click\");'  ></p>";
  controlDiv.appendChild(controlUI);
}

function UpdateLink(){

  var myLatitude = document.getElementById('Latitude');
  var myLongitude = document.getElementById('Longitude');
  var lat = myLatitude.innerHTML;
  var long = myLongitude .innerHTML;
  var mylink = document.getElementById('fancylink');
  mylink.href= 'share-form.aspx?lat=' + lat + '&long=' + long + '&pan=' + toggle + '&head=' + panorama.getPov().heading + '&pitch=' + panorama.getPov().pitch + '&panzoom=' + panorama.getPov().zoom + '&mapzoom=' + map.getZoom();

}



function FindLocation(){

  google.maps.event.trigger(panorama,'closeclick');
  
  
  
   var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        deleteOverlays();
        map.setCenter(results[0].geometry.location);
        map.setZoom(13);
        var marker = new google.maps.Marker({
            map: map,
            draggable: true,
            position: results[0].geometry.location
        });
        
        google.maps.event.addListener(marker,'dragend',function(){
          var latlong = marker.position;
          var lat = latlong.lat();
          var long = latlong.lng();
          var myLatitude = document.getElementById('Latitude');
          var myLongitude = document.getElementById('Longitude');
          
          myLatitude.innerHTML = lat
          myLongitude.innerHTML = long;
        });
        
        markersArray.push(marker);
        
        var latlong = marker.position;
        var lat = latlong.lat();
        var long = latlong.lng();
        var myLatitude = document.getElementById('Latitude');
        var myLongitude = document.getElementById('Longitude');
        
        myLatitude.innerHTML = lat
        myLongitude.innerHTML = long;
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });

  
}


function initialize() {
    
    geocoder = new google.maps.Geocoder();

    
    var latlng = new google.maps.LatLng(34.30714385628804, 4.921875);
    var myOptions = {
      zoom: 2,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.HYBRID
    };
    map = new google.maps.Map(document.getElementById("googlemap"),
        myOptions);
  
  // Create the DIV to hold the control and call the HomeControl() constructor
  // passing in this DIV.
  var homeControlDiv = document.createElement('DIV');
  var homeControl = new HomeControl(homeControlDiv);

  homeControlDiv.index = 1;

  panorama = map.getStreetView();
  
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(homeControlDiv);
  panorama.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(homeControlDiv);
  
   google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng);
  });
  
  
  
  google.maps.event.addListener(panorama, 'visible_changed', function(){
      toggle = panorama.getVisible();
      
      if(lbFirstLoad){
        if(toggle){
           panorama.controls[google.maps.ControlPosition.RIGHT_BOTTOM].pop();
           panorama.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(homeControlDiv);
        }
        else{
          map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].pop();
          map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(homeControlDiv);
        }
      }
      lbFirstLoad = true;
      
  });
  
  google.maps.event.addListener(panorama, 'position_changed', function() {
    var latlong = panorama.getPosition();
    var lat = latlong.lat();
    var long = latlong.lng();
    var myLatitude = document.getElementById('Latitude');
    var myLongitude = document.getElementById('Longitude');
    
    myLatitude.innerHTML = lat
    myLongitude.innerHTML = long;
    
    addMarker(latlong);
    
    });


  }


    
  function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
  }

function addMarker(location) {
  
  deleteOverlays();
  
  marker = new google.maps.Marker({
    position: location,
    draggable: true,
    map: map
  });
  
  google.maps.event.addListener(marker,'dragend',function(){
    var latlong = marker.position;
    var lat = latlong.lat();
    var long = latlong.lng();
    var myLatitude = document.getElementById('Latitude');
    var myLongitude = document.getElementById('Longitude');
    
    myLatitude.innerHTML = lat
    myLongitude.innerHTML = long;
    
  });
  
  markersArray.push(marker);
  
  var latlong = marker.position;
  var lat = latlong.lat();
  var long = latlong.lng();
  var myLatitude = document.getElementById('Latitude');
  var myLongitude = document.getElementById('Longitude');
  
  myLatitude.innerHTML = lat
  myLongitude.innerHTML = long;
  
}

// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

// Shows any overlays currently in the array
function showOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(map);
    }
  }
}

// Deletes all markers in the array by removing references to them
function deleteOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
    markersArray.length = 0;
  }
}
  
  window.onload = loadScript;