var ships = [['63.41666667','10.25000000','2573325','No info','Unknown','No Info','No info','No info','0.00','0.00','0.00','0','No info','No info','No info'],['63.47633333','10.17703333','258330500','9534860','KORSFJORD','LDTG','Passenger Vessel','FLAKK-ROERVIK','0.00','11.50','155.00','156','5.00','122 m x 16 m','12-8 15:30'],['63.54988167','10.22948833','257114400','9432189','TRONDHEIMSFJORD II','LAPB','High Speed Craft','TRD<>VANVIKAN','0.00','24.00','149.40','148','2.00','24 m x 8 m','21-3 12:34'],['63.74900000','11.29923333','257361400','6924246','ROPEID','LHGZ','No info','LEVANGER','0.00','0.00','0.00','331','3.50','44 m x 10 m','12-7 12:0'],['63.71337833','11.16485167','236112000','9113604','MV TISTEDAL','ZDED6','Cargo Vessel','CATHAM / SPIT PILOT','0.00','0.00','0.00','0','5.30','116 m x 16 m','2-10 14:0'],['63.71717667','11.15462333','257115000','8811297','LYSTIND','LCGF3','Cargo Vessel','GREENOCK','0.00','0.00','276.10','121','6.10','102 m x 17 m','8-10 18:0'],['63.44246667','10.40705000','259371000','9107784','NORDNORGE','3YGW','Passenger Vessel','NO KIRKENES','0.00','0.00','16.00','16','5.00','123 m x 20 m','4-10 13:30'],['63.43936667','10.40043333','257308800','9018805','AGDENES','LEBL','Passenger Vessel','NO TRD<>NO KSU','0.00','0.00','0.00','46','2.30','28 m x 8 m','No info'],['63.48441667','10.18418333','259638000','9208461','GLUTRA','LJZB','Passenger Vessel','FLAKK RORVIK','0.00','13.10','336.40','335','3.80','122 m x 20 m','No info'],['63.76582833','11.28881167','258323000','9371531','YTTEROYNINGEN','LNXL','No info','HOME','0.00','10.00','144.30','146','0.00','64 m x 14 m','No info'],];

var map;
var icon = 'http://www.larsdebruin.net/images/blue.png';
var infowindow = new google.maps.InfoWindow();

var marker;

//make the map
function initialize() {
    var myLatlng = new google.maps.LatLng(63.65, 10.65);
    var myOptions = {
        zoom: 9,
		disableDefaultUI: true,
		center: myLatlng,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
}

//function to bind the marker to the infowindow
function bindInfoW(marker, contentString, infowindow) {
      google.maps.event.addListener(marker, 'click', function() {
		infowindow.setContent(contentString);
        infowindow.open(map, marker);
        });
}

//function to create the marker
function createMarker(lat,lon,html) {
      marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lon),
      map: map,
      icon: icon,
	  });

      bindInfoW(marker,html,infowindow);
}

//function to create polylines
function makepolyline(lat,lon,course) {
   var startLL = new google.maps.LatLng(lat,lon);
   var endLL = google.maps.geometry.spherical.computeOffset(startLL, 1500, course);
   var coords = [startLL, endLL];
   path = new google.maps.Polyline({
       path: coords,
       map: map,
       strokeColor: "#FFFFFF",
       strokeOpacity: 1.0,
       strokeWeight: 2
   });

}

//loop through ships array
function processShips(ships) {
      for (var i = 0; i < ships.length; i++) {
      var html = '<div id=\"infowindow\"><b>MMSI:</b> ' + ships[i][2] + 
      '<br> <b>Name: </b>' + ships[i][4] + 
      '<br> <b>IMO: </b>' + ships[i][3] + 
      '<br> <b>Callsign: </b>' + ships[i][5] + 
      '<br> <b>Shiptype: </b>' + ships[i][6] + 
      '<br> <b>Destination: </b>' + ships[i][7] + 
      '<br> <b>Rate of turn: </b>' + ships[i][8] + ' Deg/Min' +  
      '<br> <b>Speed: </b>' + ships[i][9] + ' Knots' +
      '<br> <b>Course: </b>' + ships[i][10] + ' &deg;' +
      '<br> <b>True Heading: </b>' + ships[i][11] + ' &deg;' +
      '<br> <b>Draft: </b>' + ships[i][12] + ' Meters' +
      '<br> <b>Dimensions: </b>' + ships[i][13] + 
      '<br> <b>ETA: </b>' + ships[i][14] + 
      '</div>';
      createMarker(ships[i][0],ships[i][1],html); 
      makepolyline(ships[i][0],ships[i][1],ships[i][10]);
      }
}

//main function to start the map
function load(ships) {
    initialize();
    processShips(ships);
}