function getAreaMarkerList(minLat, maxLat, minLng, maxLng, zoomLevel) {
    PageMethods.GetAreaMakerList(minLat, maxLat, minLng, maxLng, zoomLevel, getAreaMarkerListReceiver)
}

function getAreaMarkerListReceiver(response) {

    for (i=0;i<response.length;i++) {
        if (response[i].AreaMarkerCategory == 5) {
            // Waypoint
            addWaypointMarker(response[i].Waypoint);
        } else if (response[i].AreaMarkerCategory == 4) {
            // City
            addCityMarker(response[i].City);
        } else if (response[i].AreaMarkerCategory == 3) {
            // Region
            addRegionMarker(response[i].Region);
        } else if (response[i].AreaMarkerCategory == 2) {
            // Country
            addCountryMarker(response[i].Country);   
        } else if (response[i].AreaMarkerCategory == 1) {
            // Continent
            addContinentMarker(response[i].Continent);
        }                
    }
 
    if (doOpenWaypointId.length > 0) {
        //alert('doOpenWaypointId:' + doOpenWaypointId);
        openWaypointDialog(doOpenWaypointId);
        doOpenWaypointId = '';
    }
    
    renderMarkerList(response);
}

function renderMarkerList(markerList) {
    var sb = '';
    var listObj = document.getElementById('oMarkerListActive');
    
    if (listObj != null) {
        
        listObj.innerHTML = '';
    
        sb += '<table border="0" cellpadding="0" cellspacing="0">';
       
        if (markerList.length > 0) {
            if (markerList[0].AreaMarkerCategory == 5) {
                
                var waypointList=new Array();
                var prevCategory = -1;
                var prevColor = '';
                var arrayIndex = '';
                
                for (j=0;j<markerList.length;j++) {
                    if (prevCategory != markerList[j].Waypoint.Category.Name) {
                        if (waypointList.length > 0) {
                            sb += '<tr><td colspan="4"><h2 class="categoryHeadline" style="background-image:url(/resources/images/mapicons/' + prevColor + '.png);">' + prevCategory + '</h2></td></tr>';
                            sb += renderListOfMarkers(waypointList);
                        }
                        waypointList = new Array();
                        arrayIndex = 0;
                        prevCategory = markerList[j].Waypoint.Category.Name;
                        prevColor = markerList[j].Waypoint.Category.Color; 
                    }
                    waypointList[arrayIndex] = markerList[j];
                    arrayIndex += 1;
                }
                if (waypointList.length > 0) {
                    sb += '<tr><td colspan="4"><h2 class="categoryHeadline" style="background-image:url(/resources/images/mapicons/' + prevColor + '.png);">' + prevCategory + '</h2></td></tr>';
                    sb += renderListOfMarkers(waypointList);
                }
            } else if (markerList[0].AreaMarkerCategory == 4) {
                sb += '<tr><td colspan="4"><h2 class="categoryHeadline" style="background-image:url(/resources/images/mapicons/area.png);">Städer</h2></td></tr>';
                sb += renderListOfMarkers(markerList);
            } else if (markerList[0].AreaMarkerCategory == 3) {
                sb += '<tr><td colspan="4"><h2 class="categoryHeadline" style="background-image:url(/resources/images/mapicons/area.png);">Regioner</h2></td></tr>';
                sb += renderListOfMarkers(markerList);
            } else if (markerList[0].AreaMarkerCategory == 2) {
                sb += '<tr><td colspan="4"><h2 class="categoryHeadline" style="background-image:url(/resources/images/mapicons/area.png);">Länder</h2></td></tr>';
                sb += renderListOfMarkers(markerList);
            } else if (markerList[0].AreaMarkerCategory == 1) {
                sb += '<tr><td colspan="4"><h2 class="categoryHeadline" style="background-image:url(/resources/images/mapicons/area.png);">Kontinenter</h2></td></tr>';
                sb += renderListOfMarkers(markerList);
            }
        }
        
        sb += '</table>';
        
        listObj.innerHTML = sb;
    }    
}

function renderListOfMarkers(markerList) {
    var sb = '';
    
    var index = Math.ceil(markerList.length/4);
    for (i=0;i<index;i++) {
        sb += '<tr>';
        
        if (markerList.length >= i)
            sb += renderSingleMarker(markerList[i]);
        if (markerList.length >= (i+index))
            sb += renderSingleMarker(markerList[i+index]);
        if (markerList.length >= (i+(index*2)))
            sb += renderSingleMarker(markerList[i+(index*2)]);
        if (markerList.length >= (i+(index*3)))
            sb += renderSingleMarker(markerList[i+(index*3)]);
        
        sb += '</tr>';
    }   
    
    return sb;
}

function renderSingleMarker(marker) {

    var sb = '';
    
    if (marker != null) {
    
        var name = '';
        var url = '';
        var icon = '';
        var css = 'list';
        var id='';
        var onClick = '';
        var icon = '';//'/resources/images/design/linkarrowgrey.gif';
        var style = '';
        
        if (marker.AreaMarkerCategory == 5) {
            // Waypoint
            name = marker.Waypoint.Name;
            url = marker.Waypoint.Url; 
            onClick = 'navigateToCityOnMapOpenWindow(\'' + marker.Waypoint.ID + '\',\'' + marker.Waypoint.Lat + '\',\'' + marker.Waypoint.Lng + '\');';
            if (marker.Waypoint.Popular) {
                icon = '/resources/images/misc/star.png';
                style='background-position:0px 0px;';
            } else if (marker.Waypoint.New) {
                icon = '/resources/images/misc/greenflag.png';
                style='background-position:5px 0px;';
            }            
            
        } else if (marker.AreaMarkerCategory == 4) {
            // City
            name = marker.City.Name + ' (' + marker.City.WaypointCount + ')';
            url = marker.City.Url; 
            onClick = 'navigateToCityOnMap(\'' + marker.City.ID + '\');';
        } else if (marker.AreaMarkerCategory == 3) {
            // Region
            name = marker.Region.Name + ' (' + marker.Region.WaypointCount + ')';
            url = marker.Region.Url; 
            onClick = 'navigateToRegionOnMap(\'' + marker.Region.ID + '\');';
        } else if (marker.AreaMarkerCategory == 2) {
            // Country
            name = marker.Country.Name + ' (' + marker.Country.WaypointCount + ')';
            url = marker.Country.Url;   
            onClick = 'navigateToCountryOnMap(\'' + marker.Country.ID + '\');';
        } else if (marker.AreaMarkerCategory == 1) {
            // Continent
            name = marker.Continent.Name + ' (' + marker.Continent.WaypointCount + ')';
            url = marker.Continent.Url; 
            onClick = 'navigateToContinentOnMap(\'' + marker.Continent.ID + '\');';
        }        
    
        sb += '<td style="width:220px;">';
        sb += '<a id="link_' + id + '" href="' + url + '" class="' + css + '" title="' + name + '" onClick="location.href=\'#map\';' + onClick + ';return false;" style="background-image:url(' + icon + ');' + style + '">' + name +'</a>';
        sb += '</div></td>';
    
    }
    
    return sb;    
}