var pagingBar =  document.getElementById("pagingBar");
var btnVolgende = document.getElementById("btnVolgende");
var btnVorige = document.getElementById("btnVorige");

if (GBrowserIsCompatible()) 
      {
          var gmarkers = []; // arrays to hold copies of the markers and html used by the side_bar
          var i = 0;
          var numberBlocks = 11;
          
          
          var baseIcon = new GIcon();
          baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
          baseIcon.iconSize = new GSize(18, 20);
          baseIcon.shadowSize = new GSize(37, 34);
          baseIcon.iconAnchor = new GPoint(9, 34);
          baseIcon.infoWindowAnchor = new GPoint(9, 2);
          baseIcon.infoShadowAnchor = new GPoint(18, 25);
          var tooltip = document.createElement("div");
         
          var map = new GMap2(document.getElementById("map"));
          
          map.addControl(new GLargeMapControl());
          map.addControl(new GMapTypeControl());
          map.addControl(new GScaleControl());
          map.addControl(new GOverviewMapControl());
          map.setCenter(new GLatLng(52.154579, 5.386754), 8);
      }
      else 
      {
        alert("Sorry, the Google Maps API is not compatible with this browser");
      }

      // A function to create the marker and set up the event window
      function createMarker(top, id, point,name, iconType, xoffset, yoffset) {
                 
        var marker = new GMarker(point, {icon:iconType});
        
         
        GEvent.addListener(marker,"mouseover", function() {
        showTooltip(marker, xoffset, yoffset);
        }
        ); 
        GEvent.addListener(marker,"mouseout", function() {
        tooltip.style.visibility="hidden"
        }
        ); 
        
        if(top == 1)
        {
            GEvent.addListener(marker,"click", function() {
            location.href = topVenuePageUrl + id;
            }
            ); 
        }
        else
        {
            GEvent.addListener(marker,"click", function() {
            location.href = venuePageUrl + id;
            }
            ); 
        }
        //var p = 0;
//        if (i < SideBar.rows.length)
//        {
//        gmarkers[i] = marker;   
//        i++;
//        }
        return marker;
      }
      
      function deleteMarkers() {
       for (var i=0;i<gmarkers.length;i++)
       {
        if (gmarkers[i])
            map.removeOverlay(gmarkers[i]);
        
       }
      }

 
      function showTooltip(marker, xoffset, yoffset) {
      
        document.getElementById("map").appendChild(tooltip);
        tooltip.style.visibility="hidden";
        tooltip.innerHTML = marker.tooltip;
        
        var point = map.getCurrentMapType().getProjection().fromLatLngToPixel(map.getBounds().getSouthWest(),map.getZoom());
        var offset = map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
        
        var icon = marker.getIcon();
        var iconSize = icon.iconSize

        var cliHeight = 0
        if (tooltip.childNodes && tooltip.childNodes[0])
        {
            var cliHeight = tooltip.childNodes[0].clientHeight;
        }

        var iconXCor, iconYCor;
        if (iconSize.width == 18)
        {
            iconXCor = 42; iconYCor = 26;
        }
        else
        {
            iconXCor = 40; iconYCor = 22;
        }
        
        var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(offset.x - point.x - iconXCor, point.y - offset.y + cliHeight + iconYCor));

        if(map.getBounds().containsLatLng(marker.getPoint()))
        {
            pos.apply(tooltip);
            tooltip.style.visibility="visible";
        }
        else
        {
            tooltip.innerHTML = "";
        }
        }
             
     function selectPage (page)
     {
        var el = document.getElementById ("pgnum" + page);
        if (!el) return;
        el.className = "selected";
     }
             
     function doPaging(numberItems)
     {
       
       var paging_html = "Pagina ";
       var vorige_html = "";
       var volgende_html = "";
       var numberPages;
       var flagPaging = 0;
       
       
       if(numberBlocks == 1)
       {
         numberPages = (numberItems/numberBlocks);
       }
       else
       {
        if(numberItems % numberBlocks != 0) 
          numberPages = (numberItems/numberBlocks|0) + 1;
        else
          numberPages = (numberItems/numberBlocks);
       }
       
        for(var i = 1; i<=numberPages; i++)
        {
            paging_html = paging_html + '<a id="pgnum' + i + '" title="' + i + '" href="javascript:showPage(' + i + ')">' + i + '</a>';
            if(i != numberPages) paging_html += "|";
        }
        if(numberPages != 1)
            {
              
            }
        else
            {
                paging_html = "";
            }
        paging_html = paging_html + '</div>';
        pagingBar.innerHTML = paging_html;

        return numberPages;
     }

function showPage(pageClicked) {
	var startItemIndex;
	var endItemIndex;
	var itemsTodisplay;
	var marker;
	
	if (SideBar != null) {
		var side_bar_html = ""; 
		
		doPaging(SideBar.rows.length);
		deleteMarkers();
		
		if (pageClicked == 1) {
			startItemIndex = pageClicked;
			endItemIndex = startItemIndex + (numberBlocks - 1);
			btnVorige.innerHTML = "";
			
			if (SideBar.rows.length == 1) {
				btnVolgende.innerHTML = "";
			}
			else {
				if (SideBar.rows.length > endItemIndex) {
					btnVolgende.innerHTML = '<a title="volgende" class="next" href="javascript:showPage(' + 2 + ')"> </a>';
				}
				else {
					btnVolgende.innerHTML = "";
				}
			}
		}
		else {
			startItemIndex = (pageClicked-1)*(numberBlocks) + 1;
			
			if ((startItemIndex + (numberBlocks - 1)) > SideBar.rows.length) {
				endItemIndex = SideBar.rows.length;
			}
			else {
				endItemIndex = startItemIndex + (numberBlocks - 1);
			}
			
			btnVolgende.innerHTML = '<a title="volgende" class="next" href="javascript:showPage(' + (pageClicked + 1) + ')"> </a>';
			btnVorige.innerHTML = '<a title="vorige" class="prev" href="javascript:showPage(' + (pageClicked - 1) + ')"> </a>';
			
			if (pageClicked == doPaging(SideBar.rows.length)) {
				var previousPage = doPaging(SideBar.rows.length) - 1;
				
				btnVolgende.innerHTML = "";
				btnVorige.innerHTML = '<a title="vorige" class="prev" href="javascript:showPage(' + previousPage + ')"> </a>';
			}
		}
		
		if (endItemIndex == SideBar.rows.length) {
			btnVolgende.innerHTML = "";
		}
		
		for (var i = 0; i< SideBar.rows.length; i++) {
			SideBar.rows[i].style.display='none';
		}
		
		for (var j = startItemIndex-1; j < endItemIndex; j++) {
			if (SideBar.rows[j] != null) {
				side_bar_html = "";
				SideBar.rows[j].style.display='';
				
				var standardIcon = new GIcon(baseIcon);
				var topvenueIcon = new GIcon(baseIcon);
				
				if (hgappRoot) {
					standardIcon.image = hgappRoot + "Resources/images/pointer.png";
					topvenueIcon.image = hgappRoot + "Resources/images/a_pointer.png";
				}
				else {
					standardIcon.image = "/Resources/images/pointer.png";
					topvenueIcon.image = "/Resources/images/a_pointer.png";
				}
				
				topvenueIcon.iconSize =  new GSize(34, 42);
				
				var venuename = SideBar.rows[j].cells[1].innerHTML;
				var latitude = SideBar.rows[j].cells[2].innerHTML;
				var longitude = SideBar.rows[j].cells[3].innerHTML;
				var streetName = SideBar.rows[j].cells[4].innerHTML;
				var streetNumber = SideBar.rows[j].cells[5].innerHTML;
				var venueZipCode = SideBar.rows[j].cells[6].innerHTML;
				var venueCity = SideBar.rows[j].cells[7].innerHTML;
				var phone = SideBar.rows[j].cells[8].innerHTML;
				var website = SideBar.rows[j].cells[9].innerHTML;
				var photo = SideBar.rows[j].cells[10].innerHTML;
				var venuetype = SideBar.rows[j].cells[11].innerHTML;
				var topvenue = SideBar.rows[j].cells[12].innerHTML;
				var alt = SideBar.rows[j].cells[13].innerHTML;
				var id = SideBar.rows[j].cells[14].innerHTML;
				var musicAgendaLink = SideBar.rows[j].cells[16].innerHTML;
				
				if (musicAgendaLink != '') musicAgendaLink = '<br />'+musicAgendaLink;
				
				var browserName=navigator.appName; 
				
				if (longitude != 0 && latitude != 0) {
					latitude = latitude.replace(",", ".");
					longitude = longitude.replace(",", ".");
					
					var point = new GLatLng(longitude, latitude);
					
					if (j == startItemIndex - 1) {
						map.setCenter(new GLatLng(longitude, latitude), 11);
					}
					
					var venunameTooltip = venuename;
					var rating = "";
					var pos = venuename.indexOf ('<');
					
					if (pos > 0) { venunameTooltip = venuename.substr (0, pos); rating = venuename.substr(pos); }
					
					if (topvenue == true) {
						var marker = createMarker(1, id, point, venunameTooltip, topvenueIcon, 1 , 4);
						
						if (photo != "") {
							marker.tooltip = '<div class="imgTip"><div class="txtTip"> <img src="' + photo + '" alt="' + alt + '" /><div class="hBar">' + venunameTooltip + '</div><div class="nowrap">' + streetName + ' ' + streetNumber + '</div><div class="nowrap">' + venueZipCode + ' ' + venueCity + '</div></div><div class="arrTip">&nbsp;</div></div>';
						}
						else {
							marker.tooltip = '<div class="imgTip"><div class="txtTip"><div class="hBar">' + venunameTooltip + '</div><div class="nowrap">' + streetName + ' ' + streetNumber + '</div><div class="nowrap">' + venueZipCode + ' ' + venueCity + '</div></div><div class="arrTip">&nbsp;</div></div>';
						}
					}
					else {
						var marker = createMarker(0, id, point, venunameTooltip, standardIcon, 2, 3);
						
						marker.tooltip = '<div class="mapTip"><div class="txtTip"><div class="hBar">' + venunameTooltip + '</div>' + streetName + ' ' + streetNumber + '<br/>' + venueZipCode + ' ' + venueCity + '</div><div class="arrTip">&nbsp;</div></div>';
					}
					
					gmarkers[j] = marker;
					map.addOverlay(gmarkers[j]);
					
					SideBar.rows[j].cells[15].myvar = j; 
					SideBar.rows[j].cells[15].myid = id;
					SideBar.rows[j].cells[15].className = "bar top" + (j % 2 == 0 ? " alt" : "");
					SideBar.rows[j].cells[15].onmouseover = function() {
						this.className = this.className + " barH";
						var currMarker = gmarkers[this.myvar];
						currMarker.isInMouseOver = true;
						DoAfterPanTo (currMarker, function () { GEvent.trigger(currMarker, 'mouseover'); });
					}
					SideBar.rows[j].cells[15].onmouseout = function() {
						this.className = this.className.replace(" barH", "");
						gmarkers[this.myvar].isInMouseOver = false;
						GEvent.trigger(gmarkers[this.myvar], 'mouseout');
					}
					
					if (topvenue == true) {
						side_bar_html += rating;
						side_bar_html += '<div class="hBar links">' + venunameTooltip + '<br /><span class="barType">'+venuetype+'</span>'+musicAgendaLink+'</div>';
						
						SideBar.rows[j].cells[15].onclick = function() {
							location.href = topVenuePageUrl + this.myid;
						}
					}
					else {
						side_bar_html += '<div class="pBar">' + venunameTooltip + '<br /><span class="barType">' + venuetype + '</span></div>';
						SideBar.rows[j].cells[15].onclick = function() {
							location.href = venuePageUrl + this.myid;
						}
					}
					
					SideBar.rows[j].cells[15].innerHTML = side_bar_html;
					
					for (var index = 2; index < 15; index = index + 1) {
						if (SideBar.rows[j].cells[index] != null) {
							SideBar.rows[j].cells[index].style.display='none';
						}
					}
				}
			}
		}
	}
	
	selectPage (pageClicked);
}
     
var lastMarkerToShow = null;
var lastMarkerFunctToDo = null;

function GlobalMapMoveEnd () {
  if (!lastMarkerToShow || !lastMarkerFunctToDo) return;
  if (!lastMarkerToShow.isInMouseOver) return;
  
  var pt = lastMarkerToShow.getPoint()
  var center = map.getCenter();
  
  if (Math.abs(center.x - pt.x) < 0.01 && Math.abs(center.y - pt.y) < 0.01) {
    lastMarkerFunctToDo();
  }
}
     
GEvent.addListener(map, "moveend", GlobalMapMoveEnd );

function DoAfterPanTo (marker, funcToDo) {
  var pt = marker.getPoint();
  var center = map.getCenter();
  
  if (center.x == pt.x && center.y == pt.y) {
    funcToDo();
    return;
  }
  
  lastMarkerToShow = marker;
  lastMarkerFunctToDo = funcToDo;
  
  map.panTo(pt);
}