$("#main ul.onderdelen li").hoverClick();

$(window).load(function()
{
    $("#main .wrapper").height( $("#main .wrapper").height()+20 );

    // google maps
    var map = new google.maps.Map( jQuery("#main .googlemaps").get(0), {
        zoom                : 6,
        center              : new google.maps.LatLng(51.1, 5.5),
        mapTypeId           : google.maps.MapTypeId.ROADMAP,
        mapTypeControl      : false,
        streetViewControl   : false,
        scrollwheel         : false,
        keyboardShortcuts   : false,
        navigationControl   : true,
        navigationControlOptions    : { style: google.maps.NavigationControlStyle.ANDROID,
                                        position: google.maps.ControlPosition.BOTTOM_LEFT }
    });
    

    // panels verbergen bij interactie met de kaart
    var panels = $("#zijbalk div.nieuws, #zijbalk div.reserveren, #content, #main .koeriersdiensten a");
    var panelTimer;

    function gatherPanelDimensions(){
        panels.each(function()
        {
            var el = $(this);
            el  .data("width", el.width())
                .data("height", el.height());
        });
    }

    function hidePanels() {
        panels.stop().animate({ width: 0, height: 0 }, 400);
        setPanelTimer();
    }

    function showPanels() {
        clearPanelTimer();

        if(infoWindow.isOpen)
            return;

        panels.each(function()
        {
            var el = $(this);
            el.stop().animate({ width: el.data("width"), height: el.data("height") }, 400);
        });
    }

    function setPanelTimer() {
        clearPanelTimer();
        panelTimer = setTimeout(showPanels, 2000)
    }

    function clearPanelTimer() {
        if(panelTimer)
            clearTimeout(panelTimer);
    }

    gatherPanelDimensions();


    // info window
    var infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(infoWindow, 'closeclick', function()
    {
        infoWindow.isOpen = false;
        showPanels();
    });

    var icons = {
        vestiging   : new google.maps.MarkerImage(  submap + "/content/img/markers.png",
                                        new google.maps.Size(23, 23),
                                        new google.maps.Point(0, 0)),

        referentie  : new google.maps.MarkerImage(  submap + "/content/img/markers.png",
                                        new google.maps.Size(13, 13),
                                        new google.maps.Point(28, 0))

    };

    function openInfoWindow() {
        hidePanels();
        clearPanelTimer();

        infoWindow.close();
        infoWindow.setPosition(this.getPosition());
        infoWindow.setContent(this._data.html);
        infoWindow.open(map);

        infoWindow.isOpen = true;
    }


    // markers toevoegen
    for(var i=0, len=markers.length; i<len; i++)
    {
        var marker = new google.maps.Marker({
            position    : markers[i].latlng,
            map         : map,
            flat        : true,
            icon        : icons[ markers[i].type ],
            title       : (markers[i].type == 'referentie') ? markers[i].title : '',
            zIndex      : (markers[i].type == 'vestiging') ? 100 : 1
        });
        marker.setAnimation(google.maps.Animation.DROP);

        marker._data = markers[i];

        google.maps.event.addListener(marker, 'click', openInfoWindow);
    }


    // algemene events
    google.maps.event.addListener(map, 'dragstart', function() { hidePanels(); clearPanelTimer(); });
    google.maps.event.addListener(map, 'dragend', hidePanels);
    google.maps.event.addListener(map, 'zoom_changed', hidePanels);
    google.maps.event.addListener(map, 'click', hidePanels);

    google.maps.event.addListener(map, 'mouseout', showPanels);
});