var epiGoogleAjax = null;
var epiGoogle = null;

var mapInfo = {
    "MapWidth": 397,
    "MapHeight": 281,
    "CenterOnLat": 56.1592,
    "CenterOnLong": 13.7701,
    "InitialZoomLevel": 7,
    "Keyboard": false,
    "Controls_LargeMapControl3d": false,
    "Controls_MapTypeControl": false,
    "Controls_MenuMapTypeControl": false,
    "Controls_ScaleControl": false,
    "Controls_SmallZoomControl3d": false,
    "MapTypes_Hybrid": false,
    "MapTypes_Normal": true,
    "MapTypes_Physical": false,
    "MapTypes_Satellite": false,
    "Zoom_DoubleClick": true,
    "Zoom_ScrollWheel": true
    };


function toggleCluster(that) {
    // Reset all values
    $("ol li").removeClass("active");
    $("ol li .title").show();
    $("ol li .foldoutStatus").html("+");
    
    // Set specifik values
    $(that).addClass("active");
    $(that).children(".foldoutStatus").html("");
    $(that).children(".clusterDescription").slideDown('slow', function () {
        $(this).css('display', 'block');
    });
    $(that).children(".clusterDescription").css("display", "block");

    // Hide this last to remove flickr
    $("ol li .clusterDescription").hide();

    epiGoogle.ClearClusters();
    epiGoogleAjax.LoadCluster($(that).attr("id"));
}


google.load('maps', '2.X');
google.load('search', '1');
google.setOnLoadCallback(onApisLoaded);

function onApisLoaded() {

    $(document).ready(function() {

        // IE problem --> var epiLanguage = $("head > meta[http-equiv='Content-Language']").attr('content');
        var epiLanguage = $("#languageBranch").html();
        if (epiLanguage == "en") {
            mapInfo.MapWidth = 598;
        }

        epiGoogle = new EPiGoogleMap(document.getElementById("mapDiv"), mapInfo, false, { "left": "50px", "top": null });
        epiGoogleAjax = new EPiGoogleAjax(epiGoogle, null);

        epiGoogleAjax.GetClusters(epiLanguage, function(data) {

            var clustersHtml = [];
            var idx = 0;
            for (var i = 0; i < data.length; i++) {
                clustersHtml[idx++] = '<li id="' + data[i].Id + '">';
                clustersHtml[idx++] = '<span class="foldoutStatus"></span>';
                clustersHtml[idx++] = '<span class="title">' + data[i].ClusterName + '</span>';
                clustersHtml[idx++] = '<span class="clusterDescription">' + data[i].ClusterDescription + '</span>';
                clustersHtml[idx++] = '</li>';
            }
            $("div#clusters ol").append(clustersHtml.join(""));

            $("ol li").click(function() {
                if (!$(this).hasClass("active")) toggleCluster(this);
            });

        });

    });

}