var mapPoints = new Object();
 
var map = '';
var gd = '';
var gc = '';
 
var selectedPoint = 0;
 
$(document).ready( function () {
 
    $("img, div, input").each( function () {
        $("body").prepend( $(this).css("behavior") );
    });

  if(document.getElementById("map")) {
  map = new GMap2( document.getElementById("map") );
 
/*
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());  
  map.addControl(new GOverviewMapControl());
*/
 map.setUIToDefault();
  
 // Create our "tiny" marker icon
var tinyIcon = new GIcon();
tinyIcon.image = "http://www.nuorisuomi.fi/files/ns2/images/vauhtivarvas_gmap.png";
tinyIcon.iconSize = new GSize(32, 37);
tinyIcon.iconAnchor = new GPoint(16, 32);
tinyIcon.infoWindowAnchor = new GPoint(16, 20);
 
 //new Object({title: mapPoint.address}) 
 //        {icon:tinyIcon}
 
  gd = new GDirections(map, document.getElementById("directions"));
  gc = new GClientGeocoder();
  
  //var markerData = {};
  //markerData.icon = tinyIcon;  
  
  $.each(mapPoints, function (id, mapPoint) {
    if (mapPoint.selected) selectedPoint = id;
 
    gc.getLatLng(mapPoint.address, function (gLatLng) {

      mapPoints[id].marker = new GMarker(
        gLatLng,
        {'title':mapPoint.address, icon: tinyIcon}

      );

      //mapPoints[id].marker.title = 'Jep';


      map.addOverlay( mapPoints[id].marker );
      mapPoints[id].marker.bindInfoWindowHtml( createInfoHtml(id) );
    });
 
    // ' '+
    $("#links").append(
      '<div class="mapPoint">'+
      '  <a class="showOnMap" id="showOnMap_'+ id +'">'+ mapPoint.name+'</a>'+
      '  <a class="showInfo" id="showInfo_'+ id +'">'+
      '  </a>'+
      '  <div class="clearer"></div>'+
      '</div>'
    );
    $("#routeTo").append('<option value="'+ id +'">'+ mapPoint.name +'</option>');
  });
 
 
  // Default center
  //map.setCenter(new GLatLng(60.163141, 24.941040), );
  map.setCenter(new GLatLng(65.440002,25.532227), 5);
 
  // Focus on given point
  if (selectedPoint) {
    map.setCenter(new GLatLng(60.163141, 24.941040), 7);
    gc.getLatLng(mapPoints[ selectedPoint ].address, function (gLatLng) {
      map.setCenter(gLatLng, 13);
    });
    setTimeout(showInfoWindow, 1000);
  }
 
  // Show selected points infowindow
  function showInfoWindow () {
    mapPoints[ selectedPoint ].marker.openInfoWindowHtml( createInfoHtml(selectedPoint) );
  }
 
  // Reset routeTo field
  $("#routeTo").val("");
 
 
  $(".mapPoint").hover(
    function () { $(this).addClass("mapPoint_hover") },
    function () { $(this).removeClass("mapPoint_hover") }
  );
 
 
  $(".showOnMap").each( function () {
    var id = (this.id.split("_"))[1];
    var address = mapPoints[ id ].address;
    $(this).click( function () {
      gc.getLatLng(address, function (gLatLng) {
        map.panTo(gLatLng);
        map.setZoom(15);
        mapPoints[id].marker.openInfoWindowHtml( createInfoHtml(id) );
      });
      $("#routeTo").val( id );
    });
  });
 
 
  $(".showInfo").each( function () {
    $(this).click( function () {
      var id = (this.id.split("_"))[1];
      document.location = translation.map_location+ id;
/*
      var pos = $(this).offset();
      $("#infoPopup").html(
        "<h3>"+ mapPoints[ id ].name +"</h3>"+
        mapPoints[ id ].description
      );
      $("#infoPopup").css({top: (pos.top - 50), left: (pos.left - 50)});
      $("#infoPopup").show(250);
*/
    });
  });
 
/*
  $("#infoPopup").hover(
    function () {},
    function () { $(this).hide().html("") }
  );
*/
 
  // Show directions and hide links
  $("#route").submit( function () {
    var from = $("#routeFrom").val()
    var to = mapPoints[ $("#routeTo").val() ].address;
 
    var gdQuery = from +" to "+ to;
    gd.load(gdQuery, new Object({"locale": "fi_FI"}));
 
    $("#links").hide();
    $("#directions").show();
 
    return false;
  });
 
 
  // Hide directions and show links
  $("#hideDirections").click( function () {
    $("#directions").hide();
    gd.clear();
    $("#links").show();
  });
 }
 
});
 
 
function createInfoHtml (id) {
  var mapPoint = mapPoints[id];
  var html =
    '<h3><a href="'+mapPoint.url+'">'+mapPoint.name +'</a></h3><p style="font-size: 11px; font-style: italic; color: #555;">'+mapPoint.description+'</p><p style="margin: 7px 0 0 0; font-size: 11px;"><b><a href="'+mapPoint.url+'">» Lue lisää</a></b></p>';
  return html;
}
 
 
$(window).unload( function () {
  GUnload();
});