//--- a. opidi/_UTILS -> makeMarksHoods.php : vullen landmarks en nhoods coords etc (hiervoor aanmaken: DIR \opidi\$city\inc )
//--- b. Opidi/php/testwriteNhoods.php : wegschrijven nhoods + landmarks arrays
//--- c. vullen /eurostays/js/$cityname.js op basis van stap b.


//--- index.html updates
//--- 1. toevoegen $cityname.js & maps.js na base.js
//--- 2. verwijderen loadmap script in header (wordt voortaan hier gedaan)
//--- 3. toevoegen onload="loadMap();show_landmarks();show_nhoods();
//--- 4. replace <!-- start map html --> *.* <!-- end map html -->



//---------------- init global vars
var map;
var nhoodsHTML;
var landmarksHTML;
var gmarkers=[];
var gpolygon=[];
var bounds;


//----------------- Set the Nhoods

// * var nhoods_arr komt uit $cityname.js : maken via Opidi/php/testwriteNhoods.php 

var nhoods = new Array();

for (var i = 0; i < nhoods_arr.length; i++) {
            
   var nhood_arr = nhoods_arr[i].split("^^^");         
   
   nhoods[i]=new Array(); //Moet in Javascript!!

   nhoods[i][0] = nhood_arr[0]; //name
   nhoods[i][1] = nhood_arr[1]; //lat
   nhoods[i][2] = nhood_arr[2]; //lng
   nhoods[i][3] = nhood_arr[3]; //color
   nhoods[i][4] = nhood_arr[4]; //color - line?
   nhoods[i][5] = nhood_arr[5]; //color - filler?
   nhoods[i][7] = nhood_arr[6]; //desc
          
   // de vertices worden er rechstreeks als array ingesplit
   nhoods[i][6] = nhood_arr[7].split("*");  
}


//-------------- Set the landmarks

// * var landmarks_arr komt uit $cityname.js  : maken via Opidi/php/testwriteNhoods.php 


var landmarks = new Array();

for (var i = 0; i < landmarks_arr.length; i++) {
    landmarks[i] = landmarks_arr[i].split("^^^");
}



//-------------- Show/Hide toggles 

function show_nhoods() {
	document.getElementById('neigborhoodsTxt').innerHTML = 
      '<img src="/img/nextSmall.png" class="nextSmallArrow" width="14" height="12"><a href=javascript:hide_nhoods()>Hide district/area descriptions</a><br>&nbsp;<br>'+
      nhoodsHTML;
}

function hide_nhoods() {
   document.getElementById('neigborhoodsTxt').innerHTML = '<img src="/img/nextSmall.png" class="nextSmallArrow" width="14" height="12"><a href=javascript:show_nhoods()>Show district/area descriptions</a>';
}

function show_landmarks() {
	document.getElementById('landmarksTxt').innerHTML = 
      '<img src="/img/nextSmall.png" class="nextSmallArrow" width="14" height="12"><a href=javascript:hide_landmarks()>Hide landmark descriptions</a><br>&nbsp;<br>'+
      landmarksHTML;
}

function hide_landmarks() {
   document.getElementById('landmarksTxt').innerHTML = '<img src="/img/nextSmall.png" class="nextSmallArrow" width="14" height="12"><a href=javascript:show_landmarks()>Show landmark descriptions</a>';
}


//--------------- Load the map


function loadMap() {
               
 if (GBrowserIsCompatible()) {

   var map = new GMap2(document.getElementById("largemap"));
   map.setCenter(new GLatLng( mapLat,mapLng ), mapZoom);   //mapLat,mapLng,mapZoom komen uit $cityname.js
   map.addControl(new GSmallMapControl());
   //GEvent.addListener(map, "click", function() {  
   //  window.location="http://www.booking.com/searchresults.en.html?aid=301148&city=-2140479";
   //});

   
   //------------- process the nhoods

   nhoodsHTML = '<table class="nhoodsTable" cellpadding="0" cellspacing="0">';

   var odd=false;

   for (var i = 0; i < nhoods.length; i++) {


     // create hoods marker icon
     var nhoodsIcon = new GIcon(G_DEFAULT_ICON);

     // create waypoint array
     var waypoints = new Array();

     for (var z = 0; z < nhoods[i][6].length; z++) {
       
       var waypoint = nhoods[i][6][z].split(",");
          
       waypoints[z] = new GLatLng( waypoint[0], waypoint[1]);

     }

     // add polygon
     var polygon = new GPolygon(waypoints, nhoods[i][4], 3, 1, nhoods[i][5], 0.2);
     gpolygon.push(polygon);

     map.addOverlay(polygon);
     
     // add marker
     var name = nhoods[i][0];
     var txt = nhoods[i][7];
     var point = new GLatLng ( nhoods[i][1] , nhoods[i][2] );
     var lat = nhoods[i][1];
     var lng = nhoods[i][2];

     var marker = createNhoodMarker(point, nhoods[i][3], name, txt, lat, lng);
     map.addOverlay(marker);

     gmarkers.push(marker);

     //is misschien dubbelop?
     var bookurl="http://www.booking.com/searchresults.en.html?aid=301148&latitude=" + lat + "&longitude=" + lng + "&radius=" + hotelRadius +"&order=distance";

     // add html
     if (odd) {
       nhoodsHTML += '<tr><td class="nhoodsTxt_td" align="right">';
       nhoodsHTML += '<b>' + nhoods[i][0] + '</b> <img src="/img/markers/' + nhoods[i][3] + '_SmallCircle.png" align="absmiddle" class="nhoodSmallCircle"><br>';
       nhoodsHTML += nhoods[i][7] + '<br>' + '<a href="' + bookurl + '">Find hotels in this area...</a>';
     } else {
       nhoodsHTML += '<tr><td class="nhoodsTxt_td" align="left">';
       nhoodsHTML += '<img src="/img/markers/' + nhoods[i][3] + '_SmallCircle.png" align="absmiddle" class="nhoodSmallCircle"> <b>' + nhoods[i][0] + '</b><br>';
       nhoodsHTML += nhoods[i][7] + '&nbsp;' + '<a href="' + bookurl + '">Find hotels in this area...</a>';
     }

     nhoodsHTML += '<br><br>';
     nhoodsHTML += '</td></tr>';
 
     odd=!odd;

   } // end for (var i = 0

   nhoodsHTML +='</table>&nbsp;<br>';


   //------------- process the landmarks


   landmarksHTML = '';

   var rtel=0;

   landmarksHTML='<table class="landmarksTable" cellpadding="0" cellspacing="0"><tr>';

   for (var i = 0; i < landmarks.length; i++) {

       rtel++;

       var name = landmarks[i][0];
       var point = new GLatLng(landmarks[i][1],landmarks[i][2]);
       var lat = landmarks[i][1];
       var lng = landmarks[i][2];

       //bounds.extend(point); // zorgt ervoor dat alles op da kaart komt??

       var marker = createLandmarkMarker(point, i, name, lat, lng);
       map.addOverlay(marker);

       gmarkers.push(marker);

       // add html
       // landmarksHTML += (i+1) + ' ' +name + '<br>';
       
       landmarksHTML += '<td><img src="/img/markers/white_SmallCircle' + (i+1) + '.png" align="absmiddle" width="15" height="15"> ' + name + '&nbsp;&nbsp;</td>';

       if (rtel==2) {
          landmarksHTML += '</tr><tr>';
          rtel=0;
       }

    }

    if (rtel==0) {
       landmarksHTML += '<td></td><td></td>';
    } else if (rtel==1) {
       landmarksHTML += '<td></td>';
    }  

    landmarksHTML += '</tr></table>&nbsp;<br>';


               
 } // end if Gbrowsercompatible

} // end loadmap




// deze markers moeten gemaakt met een event closure
// zie google api doc op http://www.google.com/apis/maps/documentation/events.html#Event_Closures
function createNhoodMarker(point, color, name, txt, lat, lng) {

     var nhoodsIcon = new GIcon(G_DEFAULT_ICON);

     nhoodsIcon.image = "/img/markers/" + color +"_Marker.png";
     var markerOptions = { icon:nhoodsIcon };

     var marker = new GMarker(point, markerOptions);

     marker.type = 'nhood';  

     var bookurl="http://www.booking.com/searchresults.en.html?aid=301148&latitude=" + lat + "&longitude=" + lng + "&radius=" + hotelRadius +"&order=distance";

     GEvent.addListener(marker, "click", function () {
     //   marker.openInfoWindowHtml( '<b>' + name + '</b><br>' + txt, {maxWidth:200} );
     //   window.location="http://www.booking.com/searchresults.en.html?aid=301148&city=-2140479";
     //   window.location="http://www.booking.com/searchresults.en.html?aid=301148&latitude=" + lat + "&longitude=" + lng + "&radius=1"; 
          marker.openInfoWindowHtml( '<b>' + name + '</b><br><a href="' + bookurl + '">Click for hotels in this area...</a>' , {maxWidth:200} );        
     });

     return marker;

}


// deze markers moeten gemaakt met een event closure
// zie google api doc op http://www.google.com/apis/maps/documentation/events.html#Event_Closures
function createLandmarkMarker(point, i, name, lat, lng) {

       var landmarksIcon = new GIcon(G_DEFAULT_ICON);
       landmarksIcon.image = "/img/markers/white_Marker" + (i+1) + ".png";
       var markerOptions = { icon:landmarksIcon };

       var marker = new GMarker(point, markerOptions);

       marker.type = 'landmark';  

       var bookurl="http://www.booking.com/searchresults.en.html?aid=301148&latitude=" + lat + "&longitude=" + lng + "&radius=" + hotelRadius +"&order=distance";

       GEvent.addListener(marker, "click", function () {
          //var text = name;
          //marker.openInfoWindowHtml('<b>'+name + '</b');
         //window.location="http://www.booking.com/searchresults.en.html?aid=301148&latitude=" + lat + "&longitude=" + lng + "&radius=1";
         marker.openInfoWindowHtml( '<b>' + (i+1) +'. '+ name + '</b><br><a href="' + bookurl + '">Click for hotels nearby...</a>' , {maxWidth:200} );        
    
       });

       return marker;

}