var side_bar_html = "";
var gmarkers = [];
var htmls = [];
var i = 0;
///Icons opzetten
var IconBordBlauw24 = new GIcon();
IconBordBlauw24.image = "/Images/Icons/GoogleMaps/Wegwerkzaamh_blauw24.png";
IconBordBlauw24.iconSize = new GSize(24, 24);
IconBordBlauw24.iconAnchor = new GPoint(12, 24); 
IconBordBlauw24.infoWindowAnchor = new GPoint(5, 1);

var IconBordGroen24 = new GIcon();
IconBordGroen24.image = "/Images/Icons/GoogleMaps/Wegwerkzaamh_donkergroen24.png";
IconBordGroen24.iconSize = new GSize(24, 24);
IconBordGroen24.iconAnchor = new GPoint(12, 24); 
IconBordGroen24.infoWindowAnchor = new GPoint(5, 1);

var IconBordGeel24 = new GIcon();
IconBordGeel24.image = "/Images/Icons/GoogleMaps/Wegwerkzaamh_geel24.png";
IconBordGeel24.iconSize = new GSize(24, 24);
IconBordGeel24.iconAnchor = new GPoint(12, 24); 
IconBordGeel24.infoWindowAnchor = new GPoint(5, 1);

var IconBordOranje24 = new GIcon();
IconBordOranje24.image = "/Images/Icons/GoogleMaps/Wegwerkzaamh_oranje24.png";
IconBordOranje24.iconSize = new GSize(24, 24);
IconBordOranje24.iconAnchor = new GPoint(12, 24); 
IconBordOranje24.infoWindowAnchor = new GPoint(5, 1);

var IconBordRood24 = new GIcon();
IconBordRood24.image = "/Images/Icons/GoogleMaps/Wegwerkzaamh_rood24.png";
IconBordRood24.iconSize = new GSize(24, 24);
IconBordRood24.iconAnchor = new GPoint(12, 24); 
IconBordRood24.infoWindowAnchor = new GPoint(5, 1);

///Grote Icons opzetten
var IconBordBlauw32 = new GIcon();
IconBordBlauw32.image = "/Images/Icons/GoogleMaps/Wegwerkzaamh_blauw32.png";
IconBordBlauw32.iconSize = new GSize(32, 32);
IconBordBlauw32.iconAnchor = new GPoint(16, 32); 
IconBordBlauw32.infoWindowAnchor = new GPoint(5, 1);

var IconBordGroen32 = new GIcon();
IconBordGroen32.image = "/Images/Icons/GoogleMaps/Wegwerkzaamh_donkergroen32.png";
IconBordGroen32.iconSize = new GSize(32, 32);
IconBordGroen32.iconAnchor = new GPoint(16, 32); 
IconBordGroen32.infoWindowAnchor = new GPoint(0, 0);

var IconBordGeel32 = new GIcon();
IconBordGeel32.image = "/Images/Icons/GoogleMaps/Wegwerkzaamh_geel32.png";
IconBordGeel32.iconSize = new GSize(32, 32);
IconBordGeel32.iconAnchor = new GPoint(16, 32);  
IconBordGeel32.infoWindowAnchor = new GPoint(15, 5);

var IconBordOranje32 = new GIcon();
IconBordOranje32.image = "/Images/Icons/GoogleMaps/Wegwerkzaamh_oranje32.png";
IconBordOranje32.iconSize = new GSize(32, 32);
IconBordOranje32.iconAnchor = new GPoint(16, 32); 
IconBordOranje32.infoWindowAnchor = new GPoint(5, 1);

var IconBordRood32 = new GIcon();
IconBordRood32.image = "/Images/Icons/GoogleMaps/Wegwerkzaamh_rood32.png";
IconBordRood32.iconSize = new GSize(32, 32);
IconBordRood32.iconAnchor = new GPoint(16, 32);  
IconBordRood32.infoWindowAnchor = new GPoint(5, 1);



// A function to create the marker and set up the event window
function createMarker(map, point, tooltipText, html, small, counter, severity) {
    ///alert("createMarker" + counter);

    if (small == 'False') {
        switch (severity) {
            case '0': {var marker = new GMarker(point, IconBordBlauw32); break }
            case '1': {var marker = new GMarker(point, IconBordGroen32); break }
            case '2': {var marker = new GMarker(point, IconBordGeel32); break }
            case '3': {var marker = new GMarker(point, IconBordOranje32); break }
            case '4': {var marker = new GMarker(point, IconBordRood32); break }
            default: {var marker = new GMarker(point, IconBordGeel32); break }
        }
    } else {
        switch (severity) {
            case '0': {var marker = new GMarker(point, IconBordBlauw24); break }
            case '1': {var marker = new GMarker(point, IconBordGroen24); break }
            case '2': {var marker = new GMarker(point, IconBordGeel24); break }
            case '3': {var marker = new GMarker(point, IconBordOranje24); break }
            case '4': {var marker = new GMarker(point, IconBordRood24); break }
            default: {var marker = new GMarker(point, IconBordGeel24); break }
        }
    }

    
    //var marker = new GMarker(point);
    marker.tooltip = '<div class="divToolTip">' + tooltipText + '<\/div>';
    
    if (small == 'False') {
        GEvent.addListener(marker, "click", function() {
            marker.openExtInfoWindow(map, "infoWindow", html, {beakOffset: 8});        
        });
    } else { 
        
        GEvent.addListener(marker, "click", function() {showBigMapAfterClick(counter, point)});
        gmarkers[counter] = marker;
        htmls[counter] = html;
        i++;
    }

    map.addOverlay(marker);

    if (small == 'False') {
    
        GEvent.addListener(marker,"mouseover", function() {
            showTooltipBig(marker);
        });        
        GEvent.addListener(marker,"mouseout", function() {
            tooltipBig.style.visibility="hidden"
        }); 
    } else {
        //GEvent.addListener(marker,"mouseover", function() {
        //    showTooltipSmall(marker);
       // });        
        //GEvent.addListener(marker,"mouseout", function() {
         //   tooltip.style.visibility="hidden"
        //}); 
    } 
}

// A function to create the marker and set up the event window
function createMarkerOverlast(point, tooltipText, html) {
   //alert("createMarkerOverlast");
    var marker = new GMarker(point);
    marker.tooltip = '<div class="divToolTip">' + tooltipText + '<\/div>';
    //alert("createMarkerOverlast");
    GEvent.addListener(marker, "click", function() {
        marker.openExtInfoWindow(mapOverlast, "infoWindow", html, {beakOffset: 8});        
    });

    
    mapOverlast.addOverlay(marker);
}




function showBigMapAfterClick(number, point) {
    displayBigMap(point);
    //alert(point);
    gmarkers[number].openExtInfoWindow(mapBig, "infoWindow", htmls[number], {beakOffset: 8}); 
    //showTooltipBig(gmarkers[number]);
}

// ====== This function displays the tooltip ======
// it can be called from an icon mousover or a side_bar mouseover
function showTooltipBig(marker) {
    //alert("ShowTooltip");
    tooltipBig.innerHTML = marker.tooltip;
    var point = mapBig.getCurrentMapType().getProjection().fromLatLngToPixel(mapBig.getBounds().getSouthWest(),mapBig.getZoom());
    var offset = mapBig.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),mapBig.getZoom());
    var anchor = marker.getIcon().iconAnchor;
    var width = marker.getIcon().iconSize.width;
    var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(offset.x - point.x - anchor.x + width,- offset.y + point.y +anchor.y)); 
    pos.apply(tooltipBig);
    tooltipBig.style.visibility="visible";
}

// ====== This function displays the tooltip ======
// it can be called from an icon mousover or a side_bar mouseover
function showTooltipSmall(marker) {
    //alert("ShowTooltip");
    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 anchor = marker.getIcon().iconAnchor;
    var width = marker.getIcon().iconSize.width;
    var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(offset.x - point.x - anchor.x + width,- offset.y + point.y +anchor.y)); 
    pos.apply(tooltip);
    tooltip.style.visibility="visible";
}

// ===== This function is invoked when the mouse goes over an entry in the side_bar =====
// It launches the tooltip on the icon      
function mymouseover(i) {
    showTooltip(gmarkers[i])
}
// ===== This function is invoked when the mouse leaves an entry in the side_bar =====
// It hides the tooltip      
function mymouseout() {
    tooltip.style.visibility="hidden";
}

// This function picks up the side_bar click and opens the corresponding info window
function myclick(i) {
    gmarkers[i].openInfoWindowHtml(htmls[i]);
}



///Functies Homepage
function GoogleMenuLinkClick(p_strLat, p_strLong, p_strLinkId) {
    var AlleLinks = document.getElementById('divGoogleMenuLinks').getElementsByTagName('a');
    var i;
    for (i=0;i<AlleLinks.length;i++)
    {
        AlleLinks[i].className = "aLinkDarkBlue";
    }
    document.getElementById(p_strLinkId).className = "aLinkLightBlue";

    var point = new GLatLng(p_strLat, p_strLong);
    map.panTo(point);
    var marker = new GMarker(point, IconBordBlauw);
    map.addOverlay(marker);
}

function GoogleBigMenuLinkClick(p_strLat, p_strLong, p_strLinkId) {
    var AlleLinks = document.getElementById('divGoogleBigMenuLinks').getElementsByTagName('a');
    var i;
    for (i=0;i<AlleLinks.length;i++)
    {
        AlleLinks[i].className = "aLinkDarkBlue";
    }
    document.getElementById(p_strLinkId).className = "aLinkLightBlue";

    var point = new GLatLng(p_strLat, p_strLong);
    
    //var marker = new GMarker(point, IconBordBlauw);
    //mapBig.addOverlay(marker);
    
    var html = "<b>HTML</b>";
    var tooltipText = "Hallo";
    var marker = createMarker(mapBig, point, tooltipText, html);
    
    mapBig.panTo(point);
}   

function displayBigMap(point) {
    //alert("point: " + point);
    document.getElementById('divBigMap').style.display = 'block';
    var bigmap = document.getElementById('bigmap');
    //AnimGoBig
    ///Beginwaarden=  width: 280, height: 200, top:249
    //animationToBig(bigmap, 280, 170, 249, point);
    animationToBig(bigmap, 280, 170, 564, point);
}

function displayBigMapNone() {
    //AnimGoSmall
    var divBigMap = document.getElementById('bigmap');
    //animationToSmall(divBigMap, 540, 430, -10);
    animationToSmall(divBigMap, 540, 430, 306);
}

function animationToBig(p_strBigMapId, p_intWidth, p_intHeight, p_intTop, p_intPoint) {
    //var MaxWidth = 
    var point = p_intPoint;
    //alert("p_intPoint: " + p_intPoint);
    var divBigMap = document.getElementById('divBigMap');
    var l_intMarge = 192;
    var l_intMargeHeight = 20;
    if(p_intTop > 336) {
     //if(p_intTop > 21) {
        if (p_strBigMapId.currentStyle){ 
            divBigMap.style.top = p_intTop;
            divBigMap.style.width = p_intWidth + l_intMarge;
            p_strBigMapId.style.width = p_intWidth;
            p_strBigMapId.style.height = p_intHeight;
            mapBig.checkResize();
        } else {    
            divBigMap.style.top = p_intTop + "px";
            divBigMap.style.width = p_intWidth + l_intMarge + "px";
            p_strBigMapId.style.width = p_intWidth + "px";
            p_strBigMapId.style.height = p_intHeight+ "px";
        }    
        setTimeout( function(){animationToBig(p_strBigMapId, p_intWidth + 23, p_intHeight + 22, p_intTop - 22, point)},8);
    } else if (p_intTop > 316) {
        if (p_strBigMapId.currentStyle){ 
            divBigMap.style.top = p_intTop;
            divBigMap.style.width = p_intWidth + l_intMarge;
            p_strBigMapId.style.width = p_intWidth;
            p_strBigMapId.style.height = p_intHeight;
            mapBig.checkResize();
        } else {    
            divBigMap.style.top = p_intTop + "px";
            divBigMap.style.width = p_intWidth + l_intMarge + "px";
            p_strBigMapId.style.width = p_intWidth + "px";
            p_strBigMapId.style.height = p_intHeight+ "px";
        }  
        setTimeout( function(){animationToBig(p_strBigMapId, p_intWidth + 1, p_intHeight + 1, p_intTop - 1, point)},50);
    } else {
        //alert("width: " + p_strBigMapId.style.width + " , height: " + p_strBigMapId.style.height);
        mapBig.checkResize();
        if (point == 0) {
            var lat = map.getCenter().lat();
            var lng = map.getCenter().lng(); 
            //alert("lat: " + lat);
            point = new GLatLng(lat, lng);
        }
        mapBig.panTo(point);
        //mapBig.setCenter(point, 14);
    }
} 

function animationToSmall (p_strBigMapId, p_intWidth, p_intHeight, p_intTop) {
    //var MaxWidth = 
    var divBigMap = document.getElementById('divBigMap');
    var l_intMarge = 192;
     //if(p_intTop < 250) {
     if(p_intTop < 565) {
        if (p_strBigMapId.currentStyle){ 
            divBigMap.style.top = p_intTop;
            divBigMap.style.width = p_intWidth + l_intMarge;
            p_strBigMapId.style.width = p_intWidth;
            p_strBigMapId.style.height = p_intHeight;
            mapBig.checkResize();
        } else {    
            divBigMap.style.top = p_intTop + "px";
            divBigMap.style.width = p_intWidth + l_intMarge + "px";
            p_strBigMapId.style.width = p_intWidth + "px";
            p_strBigMapId.style.height = p_intHeight+ "px";
        }    
        setTimeout( function(){animationToSmall(p_strBigMapId, p_intWidth - 23, p_intHeight - 22, p_intTop + 22)},8);
    } else if(p_intWidth > 300) { 
        if (p_strBigMapId.currentStyle){ 
            divBigMap.style.top = p_intTop;
            divBigMap.style.width = p_intWidth + l_intMarge;
            p_strBigMapId.style.width = p_intWidth;
            p_strBigMapId.style.height = p_intHeight;
            mapBig.checkResize();
        } else {    
            divBigMap.style.top = p_intTop + "px";
            divBigMap.style.width = p_intWidth + l_intMarge + "px";
            p_strBigMapId.style.width = p_intWidth + "px";
            p_strBigMapId.style.height = p_intHeight+ "px";
        }   

        setTimeout( function(){animationToSmall(p_strBigMapId, p_intWidth - 1, p_intHeight - 1, p_intTop + 1)},50);
    } else {
        mapBig.checkResize();
        document.getElementById('divBigMap').style.display = 'none';
    }
}