/*
	Last published on : 13-Aug-09 08:59
	Location          : \commercial\destinationguide\cms\destinationguide\static\js
	Filename          : multimarkers.js
*/
/*
	Last published on : 1/20/2009 04:40
	Location          : \commercial\destinationguide\cms\destinationguide\static\js
	Filename          : multimarkers.js
*/
var my_window = new Array;
var map_point = new Array;
var gmarkers = new Array;
var mapitems = new Array;
var marker_array = new Array;
var active, activeMarker, activeHover, activeMarkerHover, lastActiveHover;
var checkerHover = 0;
var loadMarker = 0;
var markerHover;
var tmpLat, tmpLng, tmpLatLng;
var cb_window;
var multi = 1;
var cb_setting = 0;
var bounds = new google.maps.LatLngBounds();
var SHOWEVENT = false;
var previouslyClickedMarker, clickedMarker;  //variables only for marker color

function createEventMap(eventInfo, lattitude_city, longitude_city) {
	close_all_windows();
	beginZoom = map.getZoom();
	beginLatLng = new google.maps.LatLng(lattitude_city,longitude_city);
	
	var markerLatLng = activeMarker.getPoint();
	var markerLat = markerLatLng.lat();
	var markerLng = (markerLatLng.lng());
	tmpLatLng = new google.maps.LatLng(tmpLat,tmpLng);
	show_custom_info_window(activeMarker, active);
	var markerLatLng = activeMarker.getPoint();
	var markerLat = markerLatLng.lat();
	var markerLng = markerLatLng.lng();
		
	var tmpLatLng1 = map.fromContainerPixelToLatLng(new google.maps.Point(400,200));
	var tmpLat1 = tmpLatLng1.lat();
	var tmpLng1 = tmpLatLng1.lng();	
		
	var tmpLatLng2 = map.fromContainerPixelToLatLng(new google.maps.Point(255,138));
	var tmpLat2 = tmpLatLng2.lat();
	var tmpLng2 = tmpLatLng2.lng();
	
	var newLat1;
	var defLat1;
	
	if(tmpLat1 > markerLat){
		var newLat1 = (parseFloat(tmpLat1) - parseFloat(markerLat));
		var defLat1 = (parseFloat(tmpLat2) - parseFloat(newLat1));
	}else{
		var newLat1 = (parseFloat(markerLat) - parseFloat(tmpLat1));
		var defLat1 = (parseFloat(tmpLat2) + parseFloat(newLat1));
	}
	
	if(tmpLng1 > markerLng){
		var newLng1 = (parseFloat(tmpLng1) - parseFloat(markerLng));
		var defLng1 = (parseFloat(tmpLng2) - parseFloat(newLng1));
	}else{
		var newLng1 = (parseFloat(markerLng) - parseFloat(tmpLng1));
		var defLng1 = (parseFloat(tmpLng2) + parseFloat(newLng1));
	}
	map.panTo(new google.maps.LatLng(defLat1, defLng1));
}

function initializeMarkers() {
	if (google.maps.BrowserIsCompatible()) {
    SHOWEVENT = (typeof window.parameters['event_num'] == "string")
    map = new google.maps.Map2(document.getElementById("map_canvas"))
    map.enableContinuousZoom();
    map.setCenter(new google.maps.LatLng(0,0),0);
    map.addControl(new XSliderControl());
    map.addControl(new TextualZoomControl());
    mm = new google.maps.MarkerManager(map, {borderPadding:10});
    markers();
    	
	}
}

function setInfo(number, id, img, name, descr, address, ball, lat, lng){
	balloonInfo[number] = new Array();
	balloonInfo[number]['infoId'] = id;
	balloonInfo[number]['infoImg'] = img;
	balloonInfo[number]['infoName'] = name;
	balloonInfo[number]['infoDescr'] = descr;
	balloonInfo[number]['address'] = address;
	balloonInfo[number]['showBalloon'] = ball;
	balloonInfo[number]['latitude'] = lat;
	balloonInfo[number]['longitude'] = lng;
	
}

function make_custom_info_window(number) {
		var new_obj;
		new_obj = document.createElement("div");
		new_obj.style.display = 'none';
		new_obj.innerHTML = '';
		new_obj.id = 'bubble'+number;
		new_obj.className = 'bubble';
		document.body.appendChild(new_obj);
		my_window[number] = new_obj;
}

function show_custom_info_window(marker, number){

if (!balloonInfo[number]['infoImg']) { 
	my_window[number].innerHTML = ("<div class='bubble-top'></div><div class='bubble-inside'><div style='width:60px;height:60px;border:1px solid black;float:left;'></div><h2>"+balloonInfo[number]['infoName']+"</h2><h3>"+balloonInfo[number]['infoDescr']+"</h3><p>"+balloonInfo[number]['address']+"</p></div><div class='bubble-bottom'></div>");

}else {
	my_window[number].innerHTML = ("<div class='bubble-top'></div><div class='bubble-inside'><img src='"+balloonInfo[number]['infoImg']+"' /><h2>"+balloonInfo[number]['infoName']+"</h2><h3>"+balloonInfo[number]['infoDescr']+"</h3><p>"+balloonInfo[number]['address']+"</p></div><div class='bubble-bottom'></div>");
}
	my_window.marker = marker;

	map.getPane(G_MAP_MARKER_PANE).appendChild(my_window[number]);
	my_window[number].style.display = 'block';

	position_window(my_window[number], marker, number);

}

function position_window(my_window, marker, number){

      var container = map.getContainer();

      var _height = container.offsetHeight;

      var _width = container.offsetWidth;

                  

      // determine bubbles'  x and y considering markers' row and column 

      var marker_position_container = map.fromLatLngToContainerPixel(marker.getPoint());

      var marker_x = marker_position_container.x;

      var marker_y = marker_position_container.y;

      var bubble_x, bubble_y;

      var bubble_x_right=bubble_x+my_window.offsetWidth;

      var bubble_y_bottom=bubble_y+my_window.offsetHeight;

      

      //generate initial position of bubble

      if (marker_position_container.y < _height/2) {

            //row 0 top half

            bubble_y = marker_y + 10;           

      } else {

            //row 1

            bubble_y = marker_y - 6 - my_window.offsetHeight ;          

      }

      if (marker_position_container.x < _width/2) {

            if (marker_position_container.x < _width/4 & (marker_x - my_window.offsetWidth/4)>0){

                        bubble_x = marker_x - my_window.offsetWidth/4;

            } else {

                  bubble_x=10;

            }

      } else if (marker_position_container.x < _width * 3/4) {

                  //column 2

                  bubble_x = marker_x - my_window.offsetWidth * 3/4;

      } else if ((marker_x - my_window.offsetWidth/4)>0){

                  bubble_x = marker_x - 10 - my_window.offsetWidth;

      } else {

                  bubble_x= _width -10 - my_window.offsetWidth;

      }

      

      var viewarea_x_left=340;

      var viewarea_y_bottom=40;

      

      var zoomarea_x_left=270;

      var zoomarea_y_top=230;

      

      var movearea_x_left=450;

      var movearea_y_top=210;

      

      //check if controlareas are not in front of bubble.

      //viewarea

      if(bubble_x+my_window.offsetWidth > viewarea_x_left && bubble_y < viewarea_y_bottom){

            //case one: marker inside area: down

                  if(viewarea_y_bottom > marker_y && viewarea_x_left > marker_x){

                        bubble_y=viewarea_y_bottom;

                  //case two: marker below controls, so can be moved left and down.

                  } else {

                        bubble_x= marker_x-(my_window.offsetWidth+10);

                        bubble_y= viewarea_y_bottom;

                  }

      }

 

      //zoomarea

      bubble_x_right = bubble_x+my_window.offsetWidth;

      bubble_y_bottom = bubble_y+my_window.offsetHeight;

      if ( bubble_x_right > zoomarea_x_left && bubble_y_bottom > zoomarea_y_top){

            //case one: marker inside area: up

                  if(zoomarea_y_top < marker_y && zoomarea_x_left > marker_x){

                        bubble_y=zoomarea_y_top-my_window.offsetHeight;

                  //case two: marker on left side of page: right and up. 

                  } else if(marker_x < _width/2) {

                        bubble_x= marker_x+12;

                        bubble_y= zoomarea_y_top-my_window.offsetHeight;

                  //case three: marker below controls, so can be moved left and up. 

                  } else {

                        bubble_x= marker_x-(my_window.offsetWidth+12);

                        bubble_y= zoomarea_y_top-my_window.offsetHeight;

                  }

      

      }

      //movearea

      if (bubble_x+my_window.offsetWidth > movearea_x_left && bubble_y+my_window.offsetHeight > movearea_y_top){

            //case one: marker inside area: up

                  if(movearea_y_top < marker_y && movearea_x_left > marker_x){

                        bubble_y=movearea_y_top-my_window.offsetHeight;

                  //case two: marker on left side of page: right and up. 

                  } else if(marker_x < _width/2) {

                        bubble_x= marker_x+12;

                        bubble_y= movearea_y_top-my_window.offsetHeight;

                  //case three: marker below controls, so can be moved left and up. 

                  } else {

                        bubble_x= marker_x-(my_window.offsetWidth+12);

                        bubble_y= movearea_y_top-my_window.offsetHeight;

                  }

      }

      //to determine if the window is behind the controls we compared coordinates in the container view

      //the bubble is draggable and so it's in the div view, so we need to translate the bubble to the container view.

      var point = new GPoint(bubble_x, bubble_y);

      my_window.style.top = map.fromLatLngToDivPixel(map.fromContainerPixelToLatLng(point)).y+ "px";

      my_window.style.left = map.fromLatLngToDivPixel(map.fromContainerPixelToLatLng(point)).x+ "px";

}

function first_show_custom_info_window(marker, number){
  if (SHOWEVENT) {
    my_window[number].innerHTML = ("<div class='bubble-top'></div><div class='bubble-inside'><img src='"+balloonInfo[number]['infoImg']+"' /><h2>"+balloonInfo[number]['infoName']+"</h2><h3>"+balloonInfo[number]['infoDescr']+"</h3><p>"+balloonInfo[number]['address']+"</p></div><div class='bubble-bottom'></div>");
	
    my_window.marker = marker;
    map.getPane(G_MAP_MARKER_PANE).appendChild(my_window[number]);
    my_window[number].style.display = 'block';
    
    first_position_window(my_window[number], marker, number);
  }
}

function first_position_window(my_window, marker, number){
	var coord = map.fromLatLngToDivPixel(marker.getPoint());
	var tempmap_point = coord;
	
	var vert_loc = parseInt(coord.y) - my_window.offsetHeight - 15;
	var horiz_loc = parseInt(coord.x) - 192; 
	my_window.style.top = vert_loc  + "px";
	my_window.style.left = horiz_loc + "px";
	
}

function close_all_windows(){
	var verwijder = document.getElementById("bubble"+activeHover);
	verwijder.innerHTML='';
	var verwijder2 = document.getElementById("bubble"+active);
	verwijder2.innerHTML='';
	if(lastActiveHover != undefined){
		var verwijder3 = document.getElementById("bubble"+lastActiveHover);
		verwijder3.innerHTML='';
	}
}

function markers(){
  for (var i = 0; i < Events.length; i++) {
      if (Events[i] != undefined) {
          var lat = Events[i]['latitude'];
          var lng = Events[i]['longitude'];
          var point = new google.maps.LatLng(lat, lng);
          
          
          setInfo(i, Events[i]['id'], Events[i]['img'], Events[i]['name'], Events[i]['desc'], Events[i]['address'], Events[i]['showBalloon'], Events[i]['latitude'], Events[i]['longitude']);
          
          // QC360: Map display shows wrong zoomlevel due to unavailable coordinates
          if ((lat != 0 || lng != 0) || Events[i]['showBalloon'] == 'yes') {
              bounds.extend(point);
          }
          var marker = createMarkers(point, balloonInfo[i]['showBalloon'], i);
          marker_array[i] = marker;
          marker.mycategory = getCategorie(Events[i]['category']);
          var markerevent = Events[i].tag;
          var windowparam = "item"+window.parameters['event_num'];
          if (SHOWEVENT && windowparam==markerevent) { //highlight marker selected in the list view
            clickedMarker=marker;
            loadMarker = i;
            activeMarker = marker;
            marker.getIcon().image = marker.getIcon().image.replace("_hover.png","");
            marker.getIcon().image = marker.getIcon().image.replace(".png", "_hover.png");
          }

          if (Events[i]['showBalloon'] == 'yes') {
              var coord = map.fromLatLngToDivPixel(point);
              map_point[i] = coord;
              activeHover = i;
              active = i;
              activeMarker = marker;
          }
          marker.hide();
          
          gmarkers.push(marker);
      }
  }
  if (SHOWEVENT) switcher();
  else hideAllMapItems();
  mm.addMarkers(gmarkers, 0, 17);
  mm.refresh();
  if (cb_setting == 1) {
    //checkbox();
  }
  map.setZoom(map.getBoundsZoomLevel(bounds));
  beginZoom = map.getBoundsZoomLevel(bounds);
  beginLatLng = bounds.getCenter();
  map.setCenter(bounds.getCenter());
  //first_show_custom_info_window(activeMarker, activeHover); //marker, number
  //if (SHOWEVENT) createEventMap(Events[active], Events[active]['latitude'], Events[active]['longitude']);
}

function createMarkers(point, balloon, i){
    var marker;
    var number = i;
    var icon = new google.maps.Icon();
    var tmpicon = '' + (i + 1);
    if (tmpicon > 15) {
        tmpicon = 15;
    }
    icon.image = gMapImagePath + "marker" + tmpicon + ".png";
    //if (balloon == "yes" && SHOWEVENT) icon.image = icon.image.replace(".png", "_hover.png");

    icon.iconSize = new google.maps.Size(26, 26);
    icon.iconAnchor = new google.maps.Point(13, 16);
    icon.infoWindowAnchor = new google.maps.Point(13, 2);
    icon.transparent=gMapImagePath+"markertransparant.png"; //ie-browser
    marker = new google.maps.Marker(point, icon);
    make_custom_info_window(i);

    google.maps.Event.addListener(marker, 'click', function(){
        var coord = map.fromLatLngToDivPixel(marker.getPoint());
        map_point[number] = coord;
        active = number;
        activeHover = number;
        if ( marker != clickedMarker  ){
            previouslyClickedMarker=activeMarker;}//marker shouldn't be both clicked and previously clicked.
        activeMarker = marker;
        clickedMarker = marker;
        for (var i = 0; i < Events.length; i++) {
            var j = i + 1;
            if (j <= Events.length) {
                var tmp = document.getElementById("map-item" + j);
                tmp.style.display = 'none';
            }
        }
        var tmp3 = number + 1;
        var tmp2 = document.getElementById("map-item" + tmp3);
        tmp2.style.display = 'block';
        //createEventMap(Events[number], Events[number]['latitude'], Events[number]['longitude']);
        checkerHover = 0;
        change_previouslyClickedMarker_icon();
    });
    google.maps.Event.addListener(marker, 'mouseover', function(){
        close_all_windows();
        var coord = map.fromLatLngToDivPixel(marker.getPoint());
        map_point[number] = coord;
        show_custom_info_window(marker, i);
        activeHover = number;
        activeMarkerHover = marker;
        checkerHover = 1;
        change_marker_icon(marker, true);
    });
    google.maps.Event.addListener(marker, 'mouseout', function(){
        change_marker_icon(marker, false);
        close_all_windows();
    });
    return marker;
}

function change_marker_icon(marker, hover) {
  var gIcon = marker.getIcon();
  var image = gIcon.image;
   if (hover) {
    change_marker_icon(activeMarker, false);
    image = image.replace("_hover", "");
    marker.setImage(image.replace(".png", "_hover.png"));
  } else if (marker != clickedMarker) {
    marker.setImage(image.replace("_hover.png", ".png"));
  }  
}

// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(category) {
	for (var i=0; i<gmarkers.length; i++) {
	  if (gmarkers[i].mycategory == category.category) {
      if (gmarkers[i].isHidden()) {gmarkers[i].show()};
	  }
	}
}

// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(category) {
	for (var i=0; i<gmarkers.length; i++) {
	  if (gmarkers[i].mycategory == category.category) {
      gmarkers[i].hide();
		  if (checkerHover == 1 && gmarkers[i] == activeMarkerHover){
        change_marker_icon(gmarkers[i], false);
        close_all_windows();
      }
      else if (gmarkers[i] == activeMarker){
        change_marker_icon(gmarkers[i], false);
        close_all_windows();
      }
	  }
	}
	// == close the info window, in case its open on a marker that we just hid
}


function centerMap(activeMarker){
	map.setCenter(activeMarker.getPoint());
}
 
function cb_setter() {
	cb_setting = 1;	
}

function switcher(){
	for(var i = 0; i < Events.length; i++){
		var j = i+1;
		if (j<=Events.length){
			var tmp = document.getElementById("map-item"+j);
			mapitems[i] = tmp;
			mapitems[i].style.display = 'none';
		}
	}
	activeHover = loadMarker;
  mapitems[activeHover].style.display = 'block';
}

function hideAllMapItems() {
	for(var i = 0; i < Events.length; i++){
		var j = i+1;
		if (j<=Events.length){
			var tmp = document.getElementById("map-item"+j);
			mapitems[i] = tmp;
			mapitems[i].style.display = 'none';
		}
	}
} 

//==previousmarker is turned off if other marker is clicked.==
function change_previouslyClickedMarker_icon(){
             if(previouslyClickedMarker!=clickedMarker) { //fix:previouslyClickedMarker unfortunately is initialized to first marker in array.
                        previouslyClickedMarker.setImage(previouslyClickedMarker.getIcon().image.replace("_hover.png", ".png"));
            }
}