/// <reference path="GMAPJSHelper_Release.js" />
/// <reference path="markermanager.js" />
/// <reference path="labeledmarker.js" />

var mgr;
var map;
var markerGroups = { "0": [], "1": [], "2": [], "3": [], "4": [], "5": [], "6": [], "7": [], "8": [], "9": [] };
var routes = [];
var labels = [];
var citylabels = [];
var activeMarkerGroup = 0;
var activeMainMenu = 0;
var activeResmal;
var activeReseller;
var activeMarker;

function initialize() {
    function TextualZoomControl() {
    }

    TextualZoomControl.prototype = new GControl();

    // Creates a one DIV for each of the buttons and places them in a container
    // DIV which is returned as our control element. We add the control to
    // to the map container and return the element for the map class to
    // position properly.
    TextualZoomControl.prototype.initialize = function(map) {
        var showhide = null;

        var container = document.createElement("div");
        container.id = "showmapcontrol";
        var left = document.createElement("div");
        var content = document.createElement("div");
        var showmap = document.createElement("div");
        var divider = document.createElement("div");
        var showdetailedmap = document.createElement("div");
        var right = document.createElement("div");
        var zoominfo = document.createElement("div");

        showmap.innerHTML = "<div id='showmap'>Karta</div>"
        showmap.style.color = "#000";
        showdetailedmap.innerHTML = "<div id='showdetailedmap'>Detaljerad karta</div>"
        showdetailedmap.style.color = "#b3b3b3";
        divider.innerHTML = "<div id='divider'>&nbsp;</div>";
        left.innerHTML = "&nbsp;";
        right.innerHTML = "&nbsp;";
        left.id = "left";
        right.id = "right";
        content.id = "content";
        container.appendChild(left);
        container.appendChild(content);
        content.appendChild(showmap);
        content.appendChild(divider);
        content.appendChild(showdetailedmap);
        container.appendChild(right);
        container.appendChild(zoominfo);

        GEvent.addDomListener(showmap, "click", function() {
            insert1.show();
            insert2.show();
            //add city labels
            for (var i = 0; i < citylabels.length; i++) {
                var citylabel = citylabels[i];
                mgr.addMarker(citylabel, 1, 17);
            }
            document.getElementById("showdetailedmap").style.color = "#b3b3b3";
            document.getElementById("showmap").style.color = "#000";


        });
        GEvent.addDomListener(showdetailedmap, "click", function() {
            insert1.hide();
            insert2.hide();
            //remove citylabels
            for (var i = 0; i < citylabels.length; i++) {
                var citylabel = citylabels[i];
                mgr.removeMarker(citylabel);
            }
            document.getElementById("showdetailedmap").style.color = "#000";
            document.getElementById("showmap").style.color = "#b3b3b3";
        });

        map.getContainer().appendChild(container);
        return container;
    }

    // By default, the control will appear in the top left corner of the
    // map with 7 pixels of padding.
    TextualZoomControl.prototype.getDefaultPosition = function() {
        return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(75, 26));
    }

    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"), { size: new GSize(555, 540) });
        map.setCenter(new GLatLng(58.75, 13), 5);
        //map.addMapType(G_PHYSICAL_MAP);
        //map.enableScrollWheelZoom();
        //map.addControl(new GMapTypeControl()); 
        //map.addControl(new GLargeMapControl()); 
        //map.addControl(new GScaleControl()); 
        //map.addControl(new GOverviewMapControl());
        //geocoder = new GClientGeocoder();

        //Ta bort "//" teckenen ifrån raden redan för att visa en flytbar markör på kartan
        //addDragablemarker();

        // Add markers
        addMarkersandroutes();

        //map.addControl(new TextualZoomControl());

        // Insert the greyoverlay
        // Add grey background
        // var insert2 = new GTileLayerOverlay(
        // new GTileLayer(null, null, null,
        // {
        //    tileUrlTemplate: 'overlayimages/grey.gif',
        //    isPng: false,
        //    opacity: 1.0
        // })
        // );
        //map.addOverlay(insert2);



        // Insert the mapoverlay
        //var insert1 = new EInsert(new GLatLng(60.26, 13.705), "overlayimages/swebusexpress_low.png", new GSize(2231, 3761), 7);
        //map.addOverlay(insert1);

        // Restrict zoom
        restrictZoom();

        //Add controler
        var extLargeMapControl = new ExtLargeMapControl();
        map.addControl(extLargeMapControl);

        //addMainCities();


    };

    function addMainCities() {
        var maincities = [];

        maincities.push([new GLatLng(59.332788, 18.064488), "Stockholm", "right"]);
        maincities.push([new GLatLng(48.856667, 2.350987), "Paris", "right"]);
        maincities.push([new GLatLng(52.373801, 4.890935), "Amsterdam", "right"]);
        maincities.push([new GLatLng(52.523405, 13.411400), "Berlin", "right"]);
        maincities.push([new GLatLng(50.111512, 8.680506), "Frankfurt", "right"]);
        maincities.push([new GLatLng(53.553407, 9.992196), "Hamburg", "right"]);
        maincities.push([new GLatLng(52.372068, 9.735686), "Hannover", "right"]);
        maincities.push([new GLatLng(59.913820, 10.738741), "Oslo", "left"]);
        maincities.push([new GLatLng(50.087811, 14.420460), "Prag", "right"]);
        maincities.push([new GLatLng(55.603331, 13.001303), "Malm&ouml;", "left"]);
        maincities.push([new GLatLng(59.273755, 15.207539), "&Ouml;rebro", "right"]);
        maincities.push([new GLatLng(57.696981, 11.986383), "G&ouml;teborg", "left"]);
        maincities.push([new GLatLng(63.828704, 20.258101), "Ume&aring;", "right"]);
        maincities.push([new GLatLng(57.759450, 16.637431), "V&auml;stervik", "right"]);
        maincities.push([new GLatLng(60.485605, 15.436302), "Borl&auml;nge", "right"]);
        maincities.push([new GLatLng(60.674616, 17.141831), "G&auml;vle", "right"]);
        maincities.push([new GLatLng(58.594702, 16.183607), "Norrk&ouml;ping", "right"]);
        maincities.push([new GLatLng(56.661445, 16.362723), "Kalmar", "right"]);
        maincities.push([new GLatLng(57.781798, 14.158510), "J&ouml;nk&ouml;ping", "right"]);
        maincities.push([new GLatLng(63.290713, 18.715604), "&Ouml;rnsk&ouml;ldsvik", "right"]);
        maincities.push([new GLatLng(62.390836, 17.306916), "Sundsvall", "right"]);


        var minZoom = 1;
        var maxZoom = 17;

        for (i = 0; i < maincities.length; i++) {
            var direction;
            if (maincities[i][2] == "left") {
                direction = "maincity_2";
            }
            else if (maincities[i][2] == "right") {
                direction = "maincity_1";
            }
            else {
                direction = "maincity_1";
            }

            var eLabel = new ELabel(maincities[i][0], maincities[i][1], direction);

            mgr.addMarker(eLabel, minZoom, maxZoom);

            //add label to array, used for show/hide function
            citylabels.push(eLabel);
        }
    }

    function addMarkersandroutes() {
        var markerArray = [];
        var mgrOptions = { borderPadding: 0 };
        mgr = new MarkerManager(map, mgrOptions);

        // XML Parser
        var request = GXmlHttp.create();
        // Open XML document
        request.open("GET", "hallplatser.xml", true);
        request.onreadystatechange = function() {
            // Check if xml dokument is loaded
            if (request.readyState == 4) {
                var xmlDoc = GXml.parse(request.responseText);

                // obtain the array of markers and loop through it
                var markers = xmlDoc.documentElement.getElementsByTagName("marker");

                for (var i = 0; i < markers.length; i++) {
                    // obtain the attribues of each marker
                    var id = parseFloat(markers[i].getElementsByTagName("ID")[0].firstChild.nodeValue);
                    var showInMap = parseFloat(markers[i].getElementsByTagName("Show_In_Map")[0].firstChild.nodeValue);
                    var showInfoxbox = parseFloat(markers[i].getElementsByTagName("Show_Infobox_In_Map")[0].firstChild.nodeValue);
                    var category = parseFloat(markers[i].getElementsByTagName("Category")[0].firstChild.nodeValue);
                    var markerType = parseFloat(markers[i].getElementsByTagName("Marker_Type")[0].firstChild.nodeValue);
                    var lat = parseFloat(markers[i].getElementsByTagName("Lat")[0].firstChild.nodeValue);
                    var lng = parseFloat(markers[i].getElementsByTagName("Lng")[0].firstChild.nodeValue);
                    var zoomMin = parseFloat(markers[i].getElementsByTagName("Min_Zoom")[0].firstChild.nodeValue);
                    var zoomMax = parseFloat(markers[i].getElementsByTagName("Max_Zoom")[0].firstChild.nodeValue);
                    //var point = new GLatLng(lat,lng);
                    var point = { lat: lat, lng: lng };
                    var label = markers[i].getElementsByTagName("Label")[0].firstChild.nodeValue;

                    var image = "";
                    var descr1 = "";
                    var descr2 = "";
                    var descr3 = "";
                    var secondCategory = "";

                    if (markers[i].getElementsByTagName("Image_Url")[0] != null) {
                        image = GXml.value(markers[i].getElementsByTagName("Image_Url")[0]);
                    }
                    if (markers[i].getElementsByTagName("Description_1")[0] != null) {
                        descr1 = GXml.value(markers[i].getElementsByTagName("Description_1")[0]);
                    }
                    if (markers[i].getElementsByTagName("Description_2")[0] != null) {
                        descr2 = GXml.value(markers[i].getElementsByTagName("Description_2")[0]);
                    }
                    if (markers[i].getElementsByTagName("Description_3")[0] != null) {
                        descr3 = GXml.value(markers[i].getElementsByTagName("Description_3")[0]);
                    }
                    if (markers[i].getElementsByTagName("Second_Category")[0] != null) {
                        //secondCategory = parseFloat(markers[i].getElementsByTagName("Second_Category")[0].firstChild.text);
                        secondCategory = parseFloat(markers[i].getElementsByTagName("Second_Category")[0].firstChild.nodeValue);
                    }


                    //Add the markers ID to the marker array
                    markerArray[id] = point;

                    // create the marker
                    var marker = createMarker(point, id, markerType);

                    //if the marker is not to be shown in map set the minzoom to a value that is not visible
                    if (!showInMap) {
                        zoomMin = 30;
                    }

                    //store the min and max zoom in the marker
                    marker.miz = zoomMin;
                    marker.maz = zoomMax;

                    //store the marker type in the marker
                    marker.type = markerType;

                    marker.showInfobox = showInfoxbox;

                    //Ta bort "//" teckenen ifrån raden redan för att se IDn för varje hållplats på kartan
                    //label = label + " " + id;

                    // add the info window to the marker
                    if (marker.showInfobox == 1) {
                        addInfowindow(marker, label, image, descr1, descr2, descr3);
                    }

                    // add the marker to marker manager
                    if (category == 0) {
                        mgr.addMarker(marker, zoomMin, zoomMax);
                        //mgr.addMarker(marker, 1, zoomMax);
                    }

                    // add the marker category to the array.
                    markerGroups[category].push(marker);

                    // if a second category for the marker exists, add the marker to the array
                    if (!(secondCategory == "")) {
                        markerGroups[secondCategory].push(marker);
                    }

                    // set marker as inactive
                    activeMarker = null;

                    // add tooltip to marker
                    var tooltip = new Tooltip(marker, label, 4);
                    marker.tooltip = tooltip;
                    //map.addOverlay(tooltip);
                    //tooltip.show();

                    GEvent.addListener(marker, 'mouseover', function() {
                        if (!(activeMarker == this)) {
                            document.getElementById("mtgt_" + this.id).style.zIndex = 1;
                            //this.tooltip.show();
                            map.addOverlay(this.tooltip);
                            //this.setImage("overlayimages/small_icon_hover.png");

                            if (this.type == 0) {
                                document.getElementById("mtgt_" + this.id).src = "overlayimages/red_icon_hover.png";
                            }
                            else if (this.type == 1) {
                                document.getElementById("mtgt_" + this.id).src = "overlayimages/blue_icon_hover.png";
                            }

                        }
                    });

                    GEvent.addListener(marker, 'mouseout', function() {
                        if (!(activeMarker == this)) {
                            //this.tooltip.hide();
                            map.removeOverlay(this.tooltip);
                            //this.setImage("overlayimages/small_icon.png");
                            if (this.type == 0) {
                                document.getElementById("mtgt_" + this.id).src = "overlayimages/red_icon.png";
                            }
                            else if (this.type == 1) {
                                document.getElementById("mtgt_" + this.id).src = "overlayimages/blue_icon.png";
                            }
                            document.getElementById("mtgt_" + this.id).style.zIndex = importanceOrder(this);
                        }
                    });

                    GEvent.addListener(marker, "click", function() {
                        if (activeMarker != null) {
                            if (activeMarker == this) {
                                map.addOverlay(this.tooltip);
                                if (this.type == 0) {
                                    document.getElementById("mtgt_" + this.id).src = "overlayimages/red_icon_hover.png";
                                }
                                else if (this.type == 1) {
                                    document.getElementById("mtgt_" + this.id).src = "overlayimages/blue_icon_hover.png";
                                }
                            }
                        }
                        // check if the infobox is enabled
                        if (this.showInfobox == 1) {
                            document.getElementById("mtgt_" + this.id).style.zIndex = 1;
                            //this.tooltip.hide();
                            //map.removeOverlay(this.tooltip);
                            //this.setImage("overlayimages/small_icon_active.png");
                            //document.getElementById("mtgt_" + this.id).src = "overlayimages/small_icon_active.png";
                            //this.setImage("overlayimages/black_icon.png")
                            //this.getIcon().image = "overlayimages/black_icon.png";

                            // set the activemarker to this marker
                            activeMarker = this;

                        }


                    });
                }

                var routeStopsArray = [];
                //Add normal routes
                routeStopsArray.push(['#808080', 59, 216, 4, 170, 150, 211, 3, 210, 193, 8, 40, 132, 67, 61, 83, 47, 103, 25, 39]);
                routeStopsArray.push(['#808080', 52, 6, 303, 1, 156, 126, 122, 99, 112, 226, 9, 185, 101, 109, 233, 59, 104, 5, 80, 274]);
                routeStopsArray.push(['#808080', 250, 115, 134, 237, 33, 25, 1, 37, 7, 76, 86]);
                routeStopsArray.push(['#808080', 216, 45, 9]);
                routeStopsArray.push(['#808080', 99, 117, 175]);
                routeStopsArray.push(['#808080', 4, 165, 183, 110, 191, 154, 8, 86, 108, 143, 159, 9, 309, 257, 73, 306, 308]);
                routeStopsArray.push(['#808080', 104, 232, 230, 228, 73, 120, 129, 187, 122, 42, 7, 108, 139, 178, 4, 304, 26, 171, 9, 34, 107, 181, 187]);

                // Add special route - Flygturen
                routeStopsArray.push(['#cf001d', 7, 188, 36, 303]);

                // Add special route - Y-buss
                routeStopsArray.push(['#fae91d', 52, 330, 329, 327, 249, 324, 322, 319, 318, 317]);
                routeStopsArray.push(['#fae91d', 324, 323, 248]);

                // Add special route - Köpenhamn->Europa
                routeStopsArray.push(['#133984', 274, 262, 267]);
                routeStopsArray.push(['#133984', 343, 262, 335]);
                routeStopsArray.push(['#133984', 262, 338]);

                // Add special route - Bohemian
                routeStopsArray.push(['#cf001d', 274, 263, 277]);

                // Cycle through the array and add routes to the map
                for (var i = 0; i < routeStopsArray.length; i++) {
                    var points = [];
                    var point = null;
                    for (var j = 1; j < routeStopsArray[i].length; j++) {
                        var lat_ = markerArray[routeStopsArray[i][j]].lat;
                        var lng_ = markerArray[routeStopsArray[i][j]].lng;
                        point = new GLatLng(lat_, lng_);
                        points.push(point);
                    }
                    var route = new GPolyline(points, routeStopsArray[i][0], 2, 1);
                    map.addOverlay(route);

                    //add routes to array, used to hide/show routes
                    routes.push(route);
                }

                // add route labelpoints
                var labelpoints = [];

                labelpoints.push([new GLatLng(55.62179298063115, 13.16162109375), "820,832"]);
                labelpoints.push([new GLatLng(56.842963648401295, 15.018310546875), "841,842"]);
                labelpoints.push([new GLatLng(58.08949277309781, 14.65576171875), "777,830,832,862"]);
                labelpoints.push([new GLatLng(58.884780849473636, 17.1881103515625), "777,830,832,835,855,862"]);
                labelpoints.push([new GLatLng(57.6689107171251, 12.4365234375), "777,830,857"]);
                labelpoints.push([new GLatLng(59.98250201795759, 15.0732421875), "800"]);
                labelpoints.push([new GLatLng(58.12431960569376, 12.2113037109375), "800"]);
                labelpoints.push([new GLatLng(59.32198054010197, 15.9136962890625), "801"]);
                labelpoints.push([new GLatLng(59.09138238455912, 14.765625), "801"]);
                labelpoints.push([new GLatLng(59.57885104663186, 17.95166015625), "897,899"]);
                labelpoints.push([new GLatLng(57.42720958655339, 12.205810546875), "820"]);
                labelpoints.push([new GLatLng(58.7111891496366, 11.458740234375), "820"]);
                labelpoints.push([new GLatLng(57.016814017391105, 14.007568359375), "832"]);
                labelpoints.push([new GLatLng(56.32872090717995, 15.8642578125), "835"]);
                labelpoints.push([new GLatLng(55.83831352210821, 13.634033203125), "835"]);
                labelpoints.push([new GLatLng(57.1958078966064, 16.446533203125), "835"]);
                labelpoints.push([new GLatLng(58.10110549730587, 13.985595703125), "839"]);
                labelpoints.push([new GLatLng(59.18155722094253, 14.04052734375), "839"]);
                labelpoints.push([new GLatLng(59.08009382655441, 15.380859375), "844"]);
                labelpoints.push([new GLatLng(58.487951979600375, 15.216064453125), "855"]);
                labelpoints.push([new GLatLng(57.65127960812027, 15.0732421875), "857"]);
                labelpoints.push([new GLatLng(57.504020175224646, 13.809814453125), "862"]);
                labelpoints.push([new GLatLng(59.71763761778773, 11.2664794921875), "888"]);
                labelpoints.push([new GLatLng(60.834204246024875, 15.0732421875), "890"]);
                labelpoints.push([new GLatLng(60.1141451165239, 16.270751953125), "890"]);
                labelpoints.push([new GLatLng(60.32150850738404, 17.347412109375), "897"]);

                var minZoom = 7;
                var maxZoom = 17;

                for (i = 0; i < labelpoints.length; i++) {
                    var str = labelpoints[i][1];

                    str = str.replace(new RegExp(",", "g"), "<br />");
                    var eLabel = new ELabel(labelpoints[i][0], str, "linjelabel_1");

                    mgr.addMarker(eLabel, minZoom, maxZoom);

                    //add label to array, used for show/hide function
                    labels.push(eLabel);
                }

                // add route custom labelpoints left
                var labelpoints = [];

                labelpoints.push([new GLatLng(61.554109444927185, 17.0947265625), "950 <img src='images/Ybusslogotyp.jpg'/>"]);
                labelpoints.push([new GLatLng(59.50087955346417, 16.138916015625), "866 <img src='images/flygturen-logo-large.gif'/>"]);
                labelpoints.push([new GLatLng(55.04061432771674, 11.77734375), "901 <img src='images/eurolines.jpg'/>"]);
                labelpoints.push([new GLatLng(53.592504809039376, 13.0078125), "901 <img src='images/bohemian-lines-logo.jpg'/>"]);



                var minZoom = 7;
                var maxZoom = 17;

                for (i = 0; i < labelpoints.length; i++) {
                    var str = labelpoints[i][1];

                    var eLabel = new ELabel(labelpoints[i][0], str, "linjelabel_2");

                    mgr.addMarker(eLabel, minZoom, maxZoom);

                    //add label to array, used for show/hide function
                    labels.push(eLabel);
                }

                // add route custom labelpoints right
                var labelpoints = [];

                labelpoints.push([new GLatLng(63.07984015900684, 18.3361816406255), "950 <img src='images/Ybusslogotyp.jpg'/>"]);
                labelpoints.push([new GLatLng(62.89271464700222, 15.66650390625), "950 <img src='images/Ybusslogotyp.jpg'/>"]);                

                var minZoom = 7;
                var maxZoom = 17;

                for (i = 0; i < labelpoints.length; i++) {
                    var str = labelpoints[i][1];

                    var eLabel = new ELabel(labelpoints[i][0], str, "linjelabel_3");

                    mgr.addMarker(eLabel, minZoom, maxZoom);

                    //add label to array, used for show/hide function
                    labels.push(eLabel);
                }

            }
        }
        request.send(null);
        //mgr.refresh();
    };

    function createMarker(position, id, type) {
        // create the marker icon
        var redMarker = new GIcon();
        redMarker.iconSize = new GSize(20, 23);
        redMarker.iconAnchor = new GPoint(9, 21);
        redMarker.image = "overlayimages/red_icon.png";
        redMarker.infoWindowAnchor = new GPoint(9, 2);

        // create the marker icon
        var blueMarker = new GIcon();
        blueMarker.iconSize = new GSize(20, 23);
        blueMarker.iconAnchor = new GPoint(9, 21);
        blueMarker.image = "overlayimages/blue_icon.png";
        blueMarker.infoWindowAnchor = new GPoint(9, 2);

        //create the lat/long point on the map
        var point = new GLatLng(position.lat, position.lng);

        var iconType
        // check the marker type
        if (type == 1) {
            iconType = blueMarker;
        }
        else {
            iconType = redMarker;
        }
        //create the marker
        var marker = new GMarker(point, { icon: iconType, zIndexProcess: importanceOrder });
        //var marker = new GMarker(point, { icon:new GIcon(redMarker), zIndexProcess: importanceOrder });

        // set options for marker
        marker.id = id;
        marker.importance = 0;

        //for (var i in opt) {
        //	marker[i] = opt[i];
        //}

        return marker;
    };

    function addInfowindow(marker, label, image, descr1, descr2, descr3) {
        // add listener for the message box
        GEvent.addListener(marker, 'click', function() {
            // check if the imageurl exists
            var imageHtml = "";
            if (!(image == "")) {
                imageHtml = "<div class='image'><img src=" + image + "></div>";
            }
            // check if the sections 2 text exists
            var section2 = "";
            if (!(descr2 == "")) {
                section2 = "<div class='section2'>" + descr2 + "</div>";
            }

            // open all links in description 3 in a new window
            if (!(descr3 == "")) {
                descr3 = descr3.replace(new RegExp("<a ", "g"), "<a target='_blank'");
            }

            marker.openExtInfoWindow(
				map,
				"custom_info_window_red",
				"<div class='padding'>" +
				"<div class='title'>" + label + "</div>" +
				"<div class='sections'>" +
				imageHtml +
				"<div class='section1'>" + descr1 + "</div>" +
                section2 +
				"<div class='section3'> " + descr3 + "</div>" +
				"</div>" +
				"</div>",
				{ beakOffset: -31 }
			);
        });
    };

    function importanceOrder(marker, b) {
        return GOverlay.getZIndex(marker.getPoint().lat()) + marker.importance * 1000000;
    };

    function restrictZoom() {
        // Get the list of map types      
        var mt = map.getMapTypes();
        // Overwrite the getMinimumResolution() and getMaximumResolution() methods
        for (var i = 0; i < mt.length; i++) {
            mt[i].getMinimumResolution = function() { return 5; }
            mt[i].getMaximumResolution = function() { return 8; }
        }
    };

    function addDragablemarker() {
        var marker = new GMarker(map.getCenter(), { draggable: true });

        GEvent.addListener(marker, "click", function() {
            var html = marker.getLatLng();
            html = html.toString();

            marker.openInfoWindowHtml(html);


        });
        map.addOverlay(marker);
    };
};

function changeTab(category) {
    // first close the infowindow
    map.closeExtInfoWindow();

    // set the tab that will be active
    var activeTab = getTabId(category);

    // get the previously active tab to make it inactive
    var inactiveTab = getTabId(activeMainMenu);

    // set inactive tab in menu
    document.getElementById("tab_" + inactiveTab).style.backgroundImage = "url(overlayimages/tab_inactive.png)";
    document.getElementById("tab_" + inactiveTab).getElementsByTagName("a")[0].style.color = "#000";

    // set active tab in menu
    document.getElementById("tab_" + activeTab).style.backgroundImage = "url(overlayimages/tab_active.png)";
    document.getElementById("tab_" + activeTab).getElementsByTagName("a")[0].style.color = "#fff";

    //set the currently active tab
    activeMainMenu = category;

    // once the tab i selected the group of markers that is related to the tab should be loaded
    var markerGroup;

    // get the markers
    switch (category) {
        case "0":
            markerGroup = 0;
            break;
        case "1": case "3": case "4": case "5": case "6": case "7":
            // these are the groups that are related to the Resmål tab, if a group has been loaded before, then it should remain loaded when one returns to the tab
            markerGroup = activeResmal || 1;
            break;
        case "2":
            markerGroup = 8;
            break;
        default: tabid = 0;
    }

    toggleGroup(markerGroup)
};

function toggleGroup(group) {
    // check that the group is not allready active
    if (!(activeMarkerGroup == group)) {

        // first close the infowindow
        map.closeExtInfoWindow();

        // remove markers on map
        for (var i = 0; i < markerGroups[activeMarkerGroup].length; i++) {
            var activemarker = markerGroups[activeMarkerGroup][i];
            mgr.removeMarker(activemarker);
        }

        // add new markers to map
        for (var i = 0; i < markerGroups[group].length; i++) {
            var marker = markerGroups[group][i];
            mgr.addMarker(marker, marker.miz, marker.maz);
        }

        // hide/show routes and labels
        if (group == 0) {
            // show routes
            for (var i = 0; i < routes.length; i++) {
                var route = routes[i];
                map.addOverlay(route);
            }
            // show labels
            for (var i = 0; i < labels.length; i++) {
                var label = labels[i];
                mgr.addMarker(label, 7, 17);
            }
        }

        else {
            // hide routes
            for (var i = 0; i < routes.length; i++) {
                var route = routes[i];
                map.removeOverlay(route);
            }

            // remove labels
            if (labels.length > 0) {
                for (var i = 0; i < labels.length; i++) {
                    var label = labels[i];
                    mgr.removeMarker(label);
                }
            }
        }

        // hide/show submenu
        if (group == 1 || group == 3 || group == 4 || group == 5 || group == 6 || group == 7) {
            // show submenu resmal
            document.getElementById("submenu_resmal").style.display = "block";

            // hide other submenus
            document.getElementById("submenu_hallplatser").style.display = "none";
            document.getElementById("submenu_reseller").style.display = "none";

            // set active submenu item
            document.getElementById("resmal_" + group).getElementsByTagName("a")[0].style.color = "#000";


            // set active check box
            document.getElementById("radiogroup_" + group).checked = true;



            // set inactive submenu item
            if (!(document.getElementById("resmal_" + activeMarkerGroup) == null)) {
                document.getElementById("resmal_" + activeMarkerGroup).getElementsByTagName("a")[0].style.color = "#b3b3b3";
            }

            activeResmal = group;
        }
        else if (group == 2 || group == 8) {
            // hide other submenus
            document.getElementById("submenu_resmal").style.display = "none";
            document.getElementById("submenu_hallplatser").style.display = "none";

            // show submenu hallplatser
            document.getElementById("submenu_reseller").style.display = "block";

            // set active check box
            document.getElementById("radiogroup_" + group).checked = true;

            // set inactive submenu item
            if (!(document.getElementById("reseller_" + activeMarkerGroup) == null)) {
                document.getElementById("reseller_" + activeMarkerGroup).getElementsByTagName("a")[0].style.color = "#b3b3b3";
            }
        }
        else if (group == 0) {
            // hide submenu resmal
            document.getElementById("submenu_resmal").style.display = "none";
            document.getElementById("submenu_reseller").style.display = "none";

            // show submenu hallplatser
            document.getElementById("submenu_hallplatser").style.display = "block";
        }
        else {

        }

        activeMarkerGroup = group;
    }


};

function getTabId(id) {
    var tabid = 0;

    // set the tabs in the menu
    switch (id) {
        case "0":
            tabid = 0;
            break;
        case "1": case "3": case "4": case "5": case "6": case "7":
            tabid = 1;
            break;
        case "2": case "8":
            tabid = 2;
            break;
        default: tabid = 0;
    }
    return tabid;
};