var map;

function worldwide() {

  continents = [];

  var latlng = new google.maps.LatLng(18.97902595,20.0390625);
  var myOptions = {
    zoom: 2,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map"), myOptions);

  $.each(agents, function( index, objValue ) {
  if(typeof objValue[0] != "undefined"){
    var place = {};
    place.continent = objValue[0];
    place.country = objValue[1];
    place.lat = objValue[2];
    place.lng = objValue[3];
    place.organization = objValue[4];
    place.street = objValue[5];
    place.locality = objValue[6];
    place.telephone = objValue[7];
    place.email = objValue[8];
    place.url = objValue[9];

    var country = {};
    country.key = objValue[1];
    country.name = objValue[1];
    country.places = [];
    
    var continent = {};
    continent.key = objValue[0];
    continent.name = objValue[0];
    continent.countries = [];

    if(typeof window.continents[continent.key] == "undefined") {
      window.continents[continent.key] = continent;
    }
    
    if(typeof window.continents[continent.key].countries[country.key] == "undefined") {
      window.continents[continent.key].countries[country.key] = country;
    }
    window.continents[continent.key].countries[country.key].places.push(place);
    placeMarker(map, objValue);
  }
  });
  drawContinentsMenu();
  drawCountries();
};

drawContinentsMenu = function() {
  var continent;
  for(continent in this.continents){
      $("nav.worldwide ul").append(
        $("<li id='" + this.continents[continent].key +"' class='entry level0 "+ this.continents[continent].key+"'><a href='#'>" + this.continents[continent].name + "</a></li>").click(continentClick));  
  }
};

drawCountries = function() {
  var continent;
  var country;
  for(continent in this.continents){
    $("nav.countries").append($("<div class='" + this.continents[continent].key + "'></div>"));
    $("nav.countries div." + this.continents[continent].key).append($("<h2 class='" + this.continents[continent].key +"' >"+ this.continents[continent].name + "</h2>").click(continentByClassClick));
    $("div." + this.continents[continent].key).append($("<ul class='agents clearfix "+ this.continents[continent].key +"'></ul>"));
    for(country in this.continents[continent].countries) {
      $("ul." + this.continents[continent].key).append(
         $("<li class='" + this.continents[continent].countries[country].key +"'><a href='#'>" + this.continents[continent].countries[country].name + "</a></li>" ).click(countryClick));
    }
  }
};

continentClick = function(event) {
  var continent = $(this).attr("id");
  hideAllCountries();
  viewCountries(continent);
  panToNewCenter(continent);
};

continentByClassClick = function(event) {
  var continent = $(this).attr("class");
  hideAllCountries();
  viewCountries(continent);
  panToNewCenter(continent);
};

countryClick = function(event) {
  var country = $(this).attr("class");
  panToNewCenter(country);
};

hideAllCountries = function() {
  $("nav.countries div").each(function(){
    $(this).css('display', 'none');
  });
};

viewAllCountries = function() {
  $("nav.countries div").each(function(){
    $(this).css('display', 'block');
  });
  panToNewCenter('Worldwide');
};

viewCountries = function(continent) {
    $("nav.countries div." + continent).css('display', 'block');
};

panToNewCenter = function(name) {
  var pos = maps[name];
  if(typeof pos == "undefined"){
    return;
  }
  var location = new google.maps.LatLng(pos[0], pos[1]);
  map.panTo(location);
  map.setZoom(pos[2]);
}

placeMarker = function(map, agent) {
  var myLatLng = new google.maps.LatLng(agent[2], agent[3]);

  var contentString = '<h1>' + agent[4] + '</h1>'
                    + '<div id="bodyContent"><p>'
                    + agent[5] + '<br />'
                    + agent[6] + '<br />'
                    + agent[1] + '<br /><br />'
                    + ' Telefon: ' + agent[7] + '<br />'
                    + '<a href="mailto:' + agent[8] + '">'+ agent[8] + '</a><br />'
                    + '<a href="' + agent[9] + '">' + agent[9] + '</a><br />'
                    + '</p>'
                    + '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
      position: myLatLng,
      title: agent[4],
      map: map
  });

  google.maps.event.addListener(marker, 'click', function() {
    google.maps.event.trigger(map, 'click');
    infowindow.open(map, marker);
    google.maps.event.addListenerOnce(map, 'click', function(){
      infowindow.close();
    });
  });

  return marker;
};