AppendToWindowOnload(function()
{
    if (!GBrowserIsCompatible()) return;

    viewManager = new PanelViewManager();
    schoolModel.MarkerChanged.AddListener(UpdateSchoolMarker);

    map = new GMap2(document.getElementById("layout_map"));
    map.enableScrollWheelZoom();
    map.addControl(new GLargeMapControl());
    map.removeMapType(G_HYBRID_MAP);
    map.addControl(new GMapTypeControl());
    GEvent.addListener(map, "click", function(marker, point)
    {
        if (viewManager == null) return;
        if (viewManager.isLayerActive("school")) return;
        if (point != null)
        {
            viewManager.selectMapLocation(point.x, point.y);
        }
    });

    ResetZoom();

    //
    // create custom tile layer
    //
    var tileOtib = new GTileLayer(new GCopyrightCollection(""), 1, 17);
    tileOtib.myBaseURL = MY_BASE_URL + '/map.aspx';
    tileOtib.getTileUrl = function(tile, zoom)
    {
        var TILE_SIZE_PIXELS = 256;

        var proj = map.getCurrentMapType().getProjection();
        var p1 = proj.fromPixelToLatLng(new GPoint(tile.x * TILE_SIZE_PIXELS, tile.y * TILE_SIZE_PIXELS), zoom);
        var p2 = proj.fromPixelToLatLng(new GPoint((tile.x + 1) * TILE_SIZE_PIXELS, (tile.y + 1) * TILE_SIZE_PIXELS), zoom);

        var rnd = Math.random();

        return MY_BASE_URL + "/map.aspx?layer=" + viewManager.getLayerType() +
        "&filter=" + viewManager.getLayerFilter() +
		"&top=" + p1.y + "&left=" + p1.x +
		"&bottom=" + p2.y + "&right=" + p2.x +
		"&imageWidth=" + TILE_SIZE_PIXELS + "&imageHeight=" + TILE_SIZE_PIXELS + "&cacheDefeat=" + rnd;
    }

    tileOtib.isPng = function() { return false; }
    tileOtib.getOpacity = function() { return 0.8; }
    //tileOtib.getOpacity = function() { return 1; }

    rbpiTileOverlay = new GTileLayerOverlay(tileOtib);
    map.addOverlay(rbpiTileOverlay);
    map.addMapType(new GMapType([tileOtib], G_SATELLITE_MAP.getProjection(), "Zonder achtergrond"));

    viewManager.selectLayer('lpi');

    if (requestedMapStart != null)
    {
        map.setCenter(requestedMapStart.latlng, requestedMapStart.zoom);
    }
});

function ResetZoom()
{
    map.setCenter(new GLatLng(52.24798298, 5.4382324), 7);
}

function SelectOtibMapLayers(displayRbpiPolygons, displaySchoolMarkers)
{
    if (displayRbpiPolygons)
    {
        rbpiTileOverlay.show();
    }
    else
    {
        rbpiTileOverlay.hide();
    }

    if (displaySchoolMarkers)
    {
        schoolMarkers.values().invoke("show");
    }
    else
    {
        schoolMarkers.values().each(function(item) { item.hide(); });
    }
}

function openAddSchoolPanel(e)
{
    if (!viewManager.isLayerActive('school'))
    {
        viewManager.selectLayer("school");
    }
    schoolModel.addNew();
}
function closeLoginPanel()
{
    $('pnlLogin').hide();
    $('btnBeheer').setStyle({color:'#ffffff'});
}
function toggleLoginPanel(e)
{
    var btn = Event.element(e);
    var pnl = $('pnlLogin');
    pnl.toggle();
    if (pnl.visible())
    {
        $('btnBeheer').setStyle({color:'#00ff00'});

        try { $('txtName').select(); } catch (e) { }
    } 
    else 
    {     
        $('btnBeheer').setStyle({color:'#ffffff'});
    }
}

function login(e)
{
    Event.stop(e);
    WebserviceLpi_Login(
        document.getElementById('txtName').value,
        document.getElementById('txtPassword').value,
        function(item)
        {
            if (item == "true")
            {
                //location.reload();
                location.href = "Default.aspx?lat=" + map.getCenter().lat() + "&lng=" + map.getCenter().lng() + "&zoom=" + map.getZoom();
            }
            else
            {
                invalidPassword();
            }
        });
}

function invalidPassword()
{
    $("lblLogin").innerHTML = "Inloggen is mislukt. Probeer het opnieuw.";
    $("lblLogin").style.fontWeight = "bold";
    $('txtPassword').value = "";
}

function createMarker(schoolId, schoolNaam, point)
{
    var marker = new GMarker(point, { 'title': schoolNaam });
    GEvent.addListener(marker, "click", DisplaySchoolMarkerPanel.curry(schoolId));

    return marker;
}

function DisplaySchoolMarkerPanel(schoolId, latLon)
{
    if (viewManager.isLayerActive('school'))
    {
        schoolModel.loadFromId(schoolId);
    }
    this.openInfoWindowHtml(templateSchoolPanel_Loading.evaluate({ Naam: this.getTitle() }));
    WebserviceLpi_SelectSchoolById(schoolId, DisplaySchoolMarkerPanel_Detailed.bind(this));
}

function DisplaySchoolMarkerPanel_Detailed(school)
{
    if (school.WebsiteUrl != "")
    {
        school.WebsitePadding = "<br /><br />";
    }
    this.payLoadSchool = school;
    this.openInfoWindowHtml(templateSchoolPanel_Detailed.evaluate(school), { maxWidth: 220 });
}

function UpdateSchoolMarker(id, naam, lat, lon)
{
    var marker = schoolMarkers.get(id);
    if (marker != null)
    {
        if (marker.getLatLng().lat() == lat && marker.getLatLng().lng() == lon) return;
        marker.closeInfoWindow();
        marker.setLatLng(new GLatLng(lat, lon));
    }
    else
    {
        marker = createMarker(id, naam, new GLatLng(lat, lon));
        schoolMarkers.set(id, marker);
        map.addOverlay(marker);
    }
    map.setCenter(new GLatLng(lat, lon), 12);
    dropMarker(marker);
}

function dropMarker(marker)
{
    var i = 10;
    new PeriodicalExecuter(function(pe)
    {
        if (--i == 0) pe.stop();
        if (i % 2 == 0)
        {
            marker.show();
        }
        else
        {
            marker.hide();
        }
    }, 0.25);
}

var activeLpiSchoolMarker;
function setActiveLpiSchoolMarker(elem, id, lat, lon)
{
    if (activeLpiSchoolMarker != null)
    {
        map.removeOverlay(activeLpiSchoolMarker);
    }
    //activeLpiSchoolMarker = new GMarker(new GLatLng(lat, lon), { 'title': elem.innerHTML });
    activeLpiSchoolMarker = createMarker(id, elem.innerHTML, new GLatLng(lat, lon));
    map.addOverlay(activeLpiSchoolMarker);
    DisplaySchoolMarkerPanel.apply(activeLpiSchoolMarker, [id]);
}


function DisplayProposeAlternativeAddress(e, id)
    {
        var schoolMarker = schoolMarkers.get(id);
        schoolMarker.openInfoWindowHtml(templateSchoolPanel_Edit.evaluate(schoolMarker.payLoadSchool), { maxWidth: 220 });
    }
    function UpdateSubmitAlternativeAddressState()
    {
        $('btnSubmitAlternativeAddress').disabled = $F('txtAlternativeData') == '';
    }
    function SubmitAlternativeData(id)
    {
        new Ajax.Request("lpi.asmx/SubmitAlternativeData",
        {
            method: "post",
            parameters :
            {
                id: id,
                msg: $F('txtAlternativeData')
            },
            onException: Ajax_onException.bind(null, 'SubmitAlternativeData'),
            onFailure: Ajax_onFailure.bind(null, 'SubmitAlternativeData')
        }
        );
        
        $('btnSubmitAlternativeAddress').replace("<strong>Bedankt voor uw hulp. We zullen uw correctie nalezen en verwerken.</strong>");
    }

    var searchSchool =
    {
        openPanel: function(e)
        {
            var src = Event.element(e);
            var offset = src.cumulativeOffset();
            src.setStyle({color : '#00ff00'});

            if ($('pnlSearchSchool').visible())
            {
                this.closePanel();
            }
            else
            {
                $('searchSchoolNotFound').hide();

                $('pnlSearchSchool').setStyle({
                    left: $('layout_menu').getWidth() + "px",
                    top: offset.top + "px"
                }).show();

                $('txtSearchSchool').enable().focus();
            }
        },
        closePanel: function()
        {
            $('btnSearchSchool').setStyle({color : '#ffffff'});
            $('pnlSearchSchool').hide();
        },
        search: function(e)
        {
            Event.stop(e);
            new Ajax.Request('lpi.asmx/SearchSchool',
            {
                method: 'get',
                parameters: { query: $F('txtSearchSchool') },
                onSuccess: WebserviceLpi_InvokeCallback.curry(searchSchool.handleResult),
                onException: Ajax_onException.bind(null, 'searchSchool_Search'),
                onFailure: Ajax_onFailure.bind(null, 'searchSchool_Search')
            });
        },
        filterKeyDown: function(e)
        {
            var keyCode = (e.keyCode) ? e.keyCode : e.which;
            if (keyCode == 13)
            {
                Event.stop(e);
                this.search(e);
            }
        },
        handleResult: function(obj)
        {
            if (obj == null)
            {
                $('searchSchoolNotFound').show();
                $('txtSearchSchool').select();
            }
            else
            {
                map.setCenter(new GLatLng(obj.lat, obj.lon), 12);
            }
        }
    };
    
    var searchRbpi =
    {
        resultMarker : null,
        openPanel: function(e)
        {
            var src = Event.element(e);
            var offset = src.cumulativeOffset();
            src.setStyle({color : '#00ff00'});
            if ($('pnlSearchRbpi').visible())
            {
                this.closePanel();
            }
            else
            {
                $('searchRbpiNotFound').hide();

                $('pnlSearchRbpi').setStyle({
                    left: $('layout_menu').getWidth() + "px",
                    top: offset.top + "px"
                }).show();

                $('txtSearchRbpi').enable().focus();
            }
        },
        closePanel: function()
        {
            $('pnlSearchRbpi').hide();
            $('btnSearchRbpi').setStyle({color : '#ffffff'});

        },
        clear : function()
        {
            this.closePanel();
            if(this.resultMarker != null) this.resultMarker.hide();
            $('btnShowAllRbpis').hide();
            viewManager.selectLayer('rbpi', null);
        },
        search: function(e)
        {
            Event.stop(e);
            new Ajax.Request('lpi.asmx/SearchRbpi',
            {
                method: 'get',
                parameters: { query: $F('txtSearchRbpi') },
                onSuccess: WebserviceLpi_InvokeCallback.curry(searchRbpi.handleResult.bind(this)),
                onException: Ajax_onException.bind(null, 'searchRbpi_Search'),
                onFailure: Ajax_onFailure.bind(null, 'searchRbpi_Search')
            });
        },
        filterKeyDown: function(e)
        {
            var keyCode = (e.keyCode) ? e.keyCode : e.which;
            if (keyCode == 13)
            {
                Event.stop(e);
                this.search(e);
            }
        },
        handleResult: function(obj)
        {
            if (obj == null)
            {
                $('searchRbpiNotFound').show();
                $('txtSearchRbpi').select();
            }
            else
            {
                viewManager.selectLayer('rbpi', obj.rbpiId);
                $('btnShowAllRbpis').show();
                rbpiModel.loadFromGuid(obj.rbpiId);
                ResetZoom();
                this.displayResultMarker(obj.lat, obj.lon);
            }
        },
        displayResultMarker : function(lat, lon)
        {
            if(this.resultMarker == null)
            {
                this.resultMarker = new GMarker(new GLatLng(lat, lon));
                map.addOverlay(this.resultMarker);
            }
            else
            {
                this.resultMarker.setLatLng(new GLatLng(lat, lon));
                this.resultMarker.show();
            }
            dropMarker(this.resultMarker);
        }
    };
    
    var searchLpi =
    {
        resultMarker : null,
        openPanel: function(e)
        {
            var src = Event.element(e);
            var offset = src.cumulativeOffset();
            src.setStyle({color : '#00ff00'});

            if ($('pnlSearchLpi').visible())
            {
                this.closePanel();
            }
            else
            {
                $('searchLpiNotFound').hide();

                $('pnlSearchLpi').setStyle({
                    left: $('layout_menu').getWidth() + "px",
                    top: offset.top + "px"
                }).show();

                $('txtSearchLpi').enable().focus();
            }
        },
        closePanel: function()
        {
            $('pnlSearchLpi').hide();
            $('btnSearchLpi').setStyle({color : '#ffffff'});
        },
        clear : function()
        {
            this.closePanel();
            if(this.resultMarker != null) this.resultMarker.hide();
            $('btnShowAllLpis').hide();
            viewManager.selectLayer('lpi', null);
        },
        search: function(e)
        {
            Event.stop(e);
            new Ajax.Request('lpi.asmx/SearchLpi',
            {
                method: 'get',
                parameters: { query: $F('txtSearchLpi') },
                onSuccess: WebserviceLpi_InvokeCallback.curry(searchLpi.handleResult.bind(this)),
                onException: Ajax_onException.bind(null, 'searchLpi_Search'),
                onFailure: Ajax_onFailure.bind(null, 'searchLpi_Search')
            });
        },
        filterKeyDown: function(e)
        {
            var keyCode = (e.keyCode) ? e.keyCode : e.which;
            if (keyCode == 13)
            {
                Event.stop(e);
                this.search(e);
            }
        },
        handleResult: function(obj)
        {
            if (obj == null)
            {
                $('searchLpiNotFound').show();
                $('txtSearchLpi').select();
            }
            else
            {
                viewManager.selectLayer('lpi', obj.lpiId);
                $('btnShowAllLpis').show();
                this.displayResultMarker(obj.lat, obj.lon);
                lpiModel.loadFromGuid(obj.lpiId);
                ResetZoom();
                          
            }
        },
        displayResultMarker : function(lat, lon)
        {
            if(this.resultMarker == null)
            {
                this.resultMarker = new GMarker(new GLatLng(lat, lon));
                map.addOverlay(this.resultMarker);
            }
            else
            {
                this.resultMarker.setLatLng(new GLatLng(lat, lon));
                this.resultMarker.show();
            }
            dropMarker(this.resultMarker);
        }
    };