//
// Classes in this view:
//
// function PanelViewManager
// function Rbpi_View
// function Lpi_View
// function RbpiList_View
// function Gemeente_View
// function LpiList_View
// function Plaats_View
//


var viewManager;

/*
AppendToWindowOnload(function ()
{
    viewManager = new PanelViewManager();
    //viewManager.selectLayer('lpi');
    viewManager.selectLayer('school');
});
*/

/*****************************************************************************/
/*
 * PanelViewManager
 */
function PanelViewManager()
{
    this.rbpiView = new Rbpi_View();
    this.lpiView = new Lpi_View();
    this.gemeenteView = new Gemeente_View();
    this.plaatsView = new Plaats_View();
    this.schoolView = new School_View();
    
    this.activeView = null;
    this.layerType = null;
}


PanelViewManager.prototype.selectLayer = function(layerType, layerFilter)
{
    this.layerType = layerType;
    this.layerFilter= layerFilter;

    this._updateMapImage(layerType);
    this._hideActivePanel();
    this._setActiveTag(layerType);

    if ($('btnAddSchool') != null) $('btnAddSchool').hide();
    if (activeLpiSchoolMarker != null) activeLpiSchoolMarker.hide();
    
    $('btnSearchSchool').hide();
    $('btnSearchRbpi').hide();
    $('btnSearchLpi').hide();
    $('btnShowAllRbpis').hide();
    $('btnShowAllLpis').hide();
    searchSchool.closePanel();
    searchRbpi.closePanel();
    searchLpi.closePanel();
    switch (layerType)
    {
        case "rbpi":
            this.activeView = this.rbpiView;
            $('btnSearchRbpi').show();
            SelectOtibMapLayers(true, false);
            break;
        case "lpi":
            this.activeView = this.lpiView;
            $('btnSearchLpi').show();
            SelectOtibMapLayers(true, false);
            break;
        case "gemeente":
            this.activeView = this.gemeenteView;
            SelectOtibMapLayers(true, false);
            break;
        case "plaats":
            this.activeView = this.plaatsView;
            SelectOtibMapLayers(true, false);
            break;
        case "school":
            SelectOtibMapLayers(false, true);
            if ($('btnAddSchool') != null) $('btnAddSchool').show();
            $('btnSearchSchool').show();
            this.activeView = this.schoolView;
            break;
    }

    if (this.activeView != null) this.activeView.show();

}
PanelViewManager.prototype.isLayerActive = function(layerType)
{
    return layerType == this.getLayerType();
}
PanelViewManager.prototype.getLayerType = function()
{
	return this.layerType;
}
PanelViewManager.prototype.getLayerFilter = function()
{
    //return "9b3074c3-a710-4181-9f6a-cad35f60cf72";
    return this.layerFilter;
}
PanelViewManager.prototype._hideActivePanel = function()
{
    if(this.activeView == null) return;
    this.activeView.hide();
    this.activeView = null;
}

PanelViewManager.prototype._setActiveTag = function(layerType)
{
	if(this._activeTag != null)
	{
		RemoveCssClass(this._activeTag, "tab_selected");
	}
	this._activeTag = $('tab_' + layerType);
	this._activeTag.addClassName('tab_selected');
}


PanelViewManager.prototype._updateMapImage = function(layerType)
{
    if(map != null)
    {
   	    map.setZoom(map.getZoom()); 
    }
}

PanelViewManager.prototype.ReloadMapWithDelay = function()
{
	setTimeout(this._updateMapImage.bind2(this), 500);
}


PanelViewManager.prototype.selectMapLocation = function(mapX, mapY)
{
    if(this.activeView == null) return;
    
    this.activeView.SelectMapLocation(mapX, mapY);
}

PanelViewManager.prototype.isActiveView = function(view)
{
    return this.activeView == view;
}


/*****************************************************************************/
/*
 * RBPI View
 */
function Rbpi_View()
{
    //
    // hook up to controllers
    // btnSave is hooked up in the HTML because we can't stop the event propagation easily
    //
    document.getElementById('rbpi_panel_tab_1').onclick = this.divTab_OnClick.bindAsEventListener2(this, 'LPI');
    document.getElementById('rbpi_panel_tab_2').onclick = this.divTab_OnClick.bindAsEventListener2(this, 'Gemeente');
    document.getElementById('rbpi_panel_tab_3').onclick = this.divTab_OnClick.bindAsEventListener2(this, 'Plaats');

    document.getElementById('rbpi_panel_Name').onkeyup = this.txtNameNumber_OnKeypress.bindAsEventListener2(this);
    document.getElementById('rbpi_panel_Number').onkeyup = this.txtNameNumber_OnKeypress.bindAsEventListener2(this);
    
    //
    // hook up to model
    //
    rbpiModel.ModelChangedEvent.AddListener(this._rbpi_Model_OnChange.bind2(this));
    rbpiModel.ModelReloadedEvent.AddListener(this._rbpi_Model_OnReloaded.bind2(this));

    this._EnableSaveButton(false);

    if (!UserIsLpiEditor())
    {
        $('rbpi_panel_btnOpslaan').hide();
        $('rbpi_panel_Name').disable();
        $('rbpi_panel_Number').disable();
    }
    else
    {
        $('rbpi_panel_btnOpslaan').show();
        $('rbpi_panel_Name').enable();
        $('rbpi_panel_Number').enable();
    }
}


Rbpi_View.prototype.show = function()
{
    rbpiModel._reset();
    $('rbpi_panel').show();
}

Rbpi_View.prototype.hide = function()
{
    $('rbpi_panel').hide();;
    $('rbpi_export_postcodes').hide();
}

Rbpi_View.prototype.SelectMapLocation = function(mapX, mapY)
{
    rbpiModel.loadFromMap(mapX, mapY);
}   


Rbpi_View.prototype.btnSave_OnClick = function(e)
{
    rbpiModel.setNaam(document.getElementById('rbpi_panel_Name').value);
    rbpiModel.setNumber(document.getElementById('rbpi_panel_Number').value);
    rbpiModel.save();
    viewManager.ReloadMapWithDelay();
    this._EnableSaveButton(false);
}

Rbpi_View.prototype._EnableSaveButton = function(isEnabled)
{
    document.getElementById('rbpi_panel_btnOpslaan').disabled = !isEnabled;
}

Rbpi_View.prototype.txtNameNumber_OnKeypress = function(e)
{
    var name = $F('rbpi_panel_Name');
    var number = $F('rbpi_panel_Number');
    
    this._EnableSaveButton(
        rbpiModel.isValid()
        &&
        (name != '' && number != '')
        &&
        (rbpiModel.getNaam() != name || rbpiModel.getNumber() != number));
}


Rbpi_View.prototype.divTab_OnClick = function(e, tabId)
{
    if(/tab_selected/.test(GetSource(e).className)) return;

    this._deselectTabs();
    GetSource(e).className += " tab_selected";
    
    this._DisplayTab(tabId);

}

Rbpi_View.prototype._DisplayTab = function(tabId)
{
    document.getElementById('rbpi_panel_list').innerHTML = "";
    
    rbpiModel.loadList(tabId);

    //
    // we trigger the 'paint' event
    //
    this._rbpi_Model_OnChange(tabId); 
}
Rbpi_View.prototype._deselectTabs = function()
{
    RemoveCssClass(document.getElementById('rbpi_panel_tab_1'), "tab_selected");
    RemoveCssClass(document.getElementById('rbpi_panel_tab_2'), "tab_selected");
    RemoveCssClass(document.getElementById('rbpi_panel_tab_3'), "tab_selected");
}

Rbpi_View.prototype._rbpi_Model_OnChange = function(fieldName)
{
    if(!viewManager.isActiveView(this)) return;
    
    switch(fieldName)
    {
        case 'Naam' :
            this._rbpi_Model_NameChanged();
            break;
        case 'Number' :
            this._rbpi_Model_NumberChanged();
            break;
        case 'LPI' :
            this._rbpi_Model_ListChanged(rbpiModel.getLpis());
            break;
        case 'Gemeente' :
            this._rbpi_Model_ListChanged(rbpiModel.getGemeentes());
            break;
        case 'Plaats' :
            this._rbpi_Model_ListChanged(rbpiModel.getPlaatsen());
            break;
    }
}

Rbpi_View.prototype._rbpi_Model_OnReloaded = function(modelIsValid, errorMsg)
{
    if(!viewManager.isActiveView(this)) return;
    
    // not very pretty
    if(/tab_selected/.test(document.getElementById('rbpi_panel_tab_1').className))
    {
        this._DisplayTab('LPI');   
    }
    else if(/tab_selected/.test(document.getElementById('rbpi_panel_tab_2').className))
    {
        this._DisplayTab('Gemeente');   
    }
    else if(/tab_selected/.test(document.getElementById('rbpi_panel_tab_3').className))
    {
        this._DisplayTab('Plaats');   
    }
    
    $('rbpi_export_postcodes').style.display = (modelIsValid) ? "" : "none";
    $('rbpi_regio_reports').style.display = (modelIsValid) ? "" : "none";

    
    if(!modelIsValid)
    {
        if(errorMsg != null) { document.getElementById('rbpi_panel_header').innerHTML = errorMsg; }
        return;
    }       
    
    if(!document.getElementById('rbpi_panel_Name').disabled)
    {
        document.getElementById('rbpi_panel_Name').focus();
    }
    
}

Rbpi_View.prototype._rbpi_Model_NameChanged = function()
{
    document.getElementById('rbpi_panel_Name').value = rbpiModel.getNaam();
    document.getElementById('rbpi_panel_header').innerHTML = rbpiModel.getNaam();
    if(!rbpiModel.isValid())
    {
        document.getElementById('rbpi_panel_header').innerHTML = "Klik op de kaart om een RBPI te selecteren";
    }
}
Rbpi_View.prototype._rbpi_Model_NumberChanged = function()
{
    document.getElementById('rbpi_panel_Number').value = rbpiModel.getNumber();
}


Rbpi_View.prototype._rbpi_Model_ListChanged = function(arrayOfStrings)
{
    var pnlList = document.getElementById('rbpi_panel_list');
    pnlList.innerHTML = arrayOfStrings.join("<br />");
}

Rbpi_View.prototype.exportPostcodesToCsv = function(e)
{
    location.href = "exportpostcodes.aspx?mode=rbpi&id=" + rbpiModel._id;
}

Rbpi_View.prototype.openReportSite = function(e)
{
    window.open('http://www.rapporten.otib.nl/rapporten.aspx?regio=' + rbpiModel._id, 'Regiorapporten');
}


/*****************************************************************************/
/*
 * LPI View
 */
function Lpi_View()
{
    //
    // hook up to controllers
    // btnSave is hooked up in the HTML because we can't stop the event propagation easily
    //
    document.getElementById('lpi_panel_tab_1').onclick = this.divTab_OnClick.bindAsEventListener2(this, 'Gemeente');
    document.getElementById('lpi_panel_tab_2').onclick = this.divTab_OnClick.bindAsEventListener2(this, 'Plaats');
    document.getElementById('lpi_panel_tab_3').onclick = this.divTab_OnClick.bindAsEventListener2(this, 'School');

    document.getElementById('lpi_panel_Name').onkeyup = this.txtNameNumberRbpi_OnKeypress.bindAsEventListener2(this);
    document.getElementById('lpi_panel_Number').onkeyup = this.txtNameNumberRbpi_OnKeypress.bindAsEventListener2(this);
    
    document.getElementById('lpi_panel_rbpi').onchange = this.txtNameNumberRbpi_OnKeypress.bindAsEventListener2(this);
    
    //
    // hook up to model
    //
    lpiModel.ModelChangedEvent.AddListener(this._lpi_Model_OnChange.bind2(this));
    lpiModel.ModelReloadedEvent.AddListener(this._lpi_Model_OnReloaded.bind2(this));

    this._EnableSaveButton(false);
    
    //
    // create ListModel for dropdown
    //
    this.rbpiListView = new RbpiList_View(this);

    if (!UserIsLpiEditor())
    {
        $('lpi_panel_btnOpslaan').hide();
        $('lpi_panel_Name').disable();
        $('lpi_panel_Number').disable();
        $('lpi_panel_rbpi').disable();
    }
    else
    {
        $('lpi_panel_btnOpslaan').show();
        $('lpi_panel_Name').enable();
        $('lpi_panel_Number').enable();
        $('lpi_panel_rbpi').enable();
    }
}


Lpi_View.prototype.show = function()
{
    lpiModel._reset();
    document.getElementById('lpi_panel').style.display = "";
}

Lpi_View.prototype.hide = function()
{
    document.getElementById('lpi_panel').style.display = "none";
    document.getElementById('lpi_export_postcodes').style.display = "none";
}

Lpi_View.prototype.SelectMapLocation = function(mapX, mapY)
{
    lpiModel.loadFromMap(mapX, mapY);
}   

Lpi_View.prototype.exportPostcodesToCsv = function(e)
{
    location.href = "exportpostcodes.aspx?mode=lpi&id=" + lpiModel._id;
}

Lpi_View.prototype.btnSave_OnClick = function(e)
{
    lpiModel.setNaam(document.getElementById('lpi_panel_Name').value);
    lpiModel.setNumber(document.getElementById('lpi_panel_Number').value);
    lpiModel.setRbpi(document.getElementById('lpi_panel_rbpi').value);
    lpiModel.save();
    viewManager.ReloadMapWithDelay();
    this._EnableSaveButton(false);
}

Lpi_View.prototype._EnableSaveButton = function(isEnabled)
{
    document.getElementById('lpi_panel_btnOpslaan').disabled = !isEnabled;
}

Lpi_View.prototype.txtNameNumberRbpi_OnKeypress = function(e)
{
    var name = document.getElementById('lpi_panel_Name').value;
    var number = document.getElementById('lpi_panel_Number').value;
    var rbpi = document.getElementById('lpi_panel_rbpi').value;
    
    this._EnableSaveButton(
        lpiModel.isValid()
        &&
        (name != '' && number != '')
        &&
        (lpiModel.getNaam() != name || lpiModel.getNumber() != number || lpiModel.getRbpi() != rbpi));
}


Lpi_View.prototype.divTab_OnClick = function(e, tabId)
{
    if(/tab_selected/.test(GetSource(e).className)) return;

    this._deselectTabs();
    GetSource(e).className += " tab_selected";
    
    this._DisplayTab(tabId);

}

Lpi_View.prototype._DisplayTab = function(tabId)
{
    document.getElementById('lpi_panel_list').innerHTML = "";
    
    lpiModel.loadList(tabId);

    //
    // we trigger the 'paint' event
    //
    this._lpi_Model_OnChange(tabId); 
}
Lpi_View.prototype._deselectTabs = function()
{
    RemoveCssClass(document.getElementById('lpi_panel_tab_1'), "tab_selected");
    RemoveCssClass(document.getElementById('lpi_panel_tab_2'), "tab_selected");
    RemoveCssClass(document.getElementById('lpi_panel_tab_3'), "tab_selected");
}

Lpi_View.prototype._lpi_Model_OnChange = function(fieldName)
{
    if(!viewManager.isActiveView(this)) return;
    
    switch(fieldName)
    {
        case 'Naam' :
            this._lpi_Model_NameChanged();
            break;
        case 'Number' :
            this._lpi_Model_NumberChanged();
            break;
        case 'RBPI' :
//            alert('NIY');
            break;
        case 'Gemeente' :
            this._lpi_Model_ListChanged(lpiModel.getGemeentes());
            break;
        case 'Plaats' :
            this._lpi_Model_ListChanged(lpiModel.getPlaatsen());
            break;
        case 'School':
            this._lpi_Model_ListChanged(lpiModel.getScholen());
            break;
    }
}

Lpi_View.prototype._lpi_Model_OnReloaded = function(modelIsValid, errorMsg)
{
    if(!viewManager.isActiveView(this)) return;
    
    // not very pretty
    if(/tab_selected/.test(document.getElementById('lpi_panel_tab_1').className))
    {
        this._DisplayTab('Gemeente');   
    }
    else if(/tab_selected/.test(document.getElementById('lpi_panel_tab_2').className))
    {
        this._DisplayTab('Plaats');   
    }
    else if (/tab_selected/.test(document.getElementById('lpi_panel_tab_3').className))
    {
        this._DisplayTab('School');
    }
    
    document.getElementById('lpi_export_postcodes').style.display = (modelIsValid) ? "" : "none";
    
    if(!modelIsValid)
    {
        if(errorMsg != null) { document.getElementById('lpi_panel_header').innerHTML = errorMsg; }
        return;
    }   
    
    
    if(!document.getElementById('lpi_panel_Name').disabled)
    {
        document.getElementById('lpi_panel_Name').focus();
    }
    
    this.rbpiListView.setSelected(lpiModel.getRbpi());
    this.rbpiListView.reset();
}

Lpi_View.prototype._lpi_Model_NameChanged = function()
{
    document.getElementById('lpi_panel_Name').value = lpiModel.getNaam();
    document.getElementById('lpi_panel_header').innerHTML = lpiModel.getNaam();
    if(!lpiModel.isValid())
    {
        document.getElementById('lpi_panel_header').innerHTML = "Klik op de kaart om een LPI te selecteren";
    }
}
Lpi_View.prototype._lpi_Model_NumberChanged = function()
{
    document.getElementById('lpi_panel_Number').value = lpiModel.getNumber();
}


Lpi_View.prototype._lpi_Model_ListChanged = function(arrayOfStrings)
{
    var pnlList = document.getElementById('lpi_panel_list');
    pnlList.innerHTML = arrayOfStrings.join("<br />");
}



/*****************************************************************************/
/*
 * RBPI List View
 */
function RbpiList_View(owner)
{
    this.owner = owner;
    this.selectedRbpiId = "";
    this.dd = document.getElementById('lpi_panel_rbpi');
    
    rbpiListModel.ModelReloadedEvent.AddListener(
        this._rbpiList_Model_Reloaded.bind2(this)
    );
}

RbpiList_View.prototype.setSelected = function(rbpiId)
{
    this.selectedRbpiId = rbpiId;
}

RbpiList_View.prototype._addItem = function(rbpiId, name)
{
    var newIndex = this.dd.options.length;
    this.dd.options[newIndex] = new Option(name, rbpiId);
    if(rbpiId == this.selectedRbpiId)
    {
        this.dd.selectedIndex = newIndex;
    }
}

RbpiList_View.prototype.reset = function()
{
    var tmpName = this._emptyDropdown();
    this._addItem(this.selectedRbpiId, tmpName);
    
    rbpiListModel.reload();
}

RbpiList_View.prototype._rbpiList_Model_Reloaded = function()
{
    if(!viewManager.isActiveView(this.owner)) return;
    
    var rbpis = rbpiListModel.getRbpis();
    this.dd.options.length = 0;
    for(var i=0; i<rbpis.length; i++)
    {
        this._addItem(rbpis[i].Id, rbpis[i].Name);
    }
    
}

RbpiList_View.prototype._emptyDropdown = function()
{
    var name = this._findOptionName(this.selectedRbpiId);
    this.dd.options.length = 0;
    return name;
}

RbpiList_View.prototype._findOptionName = function(selectedRbpiId)
{
    for(var i=0; i<this.dd.options.length; i++)
    {
        if(this.dd.options[i].value == selectedRbpiId)
        {
            return this.dd.options[i].label;
        }
    }
    return "";
}




/*****************************************************************************/
/*
 * Gemeente View
 */
function Gemeente_View()
{
    //
    // hook up to controllers
    // btnSave is hooked up in the HTML because we can't stop the event propagation easily
    //

    document.getElementById('gemeente_panel_lpi').onchange = this.ddLbpi_OnChange.bindAsEventListener2(this);

    //
    // hook up to model
    //
    gemeenteModel.ModelChangedEvent.AddListener(this._gemeente_Model_OnChange.bind2(this));
    gemeenteModel.ModelReloadedEvent.AddListener(this._gemeente_Model_OnReloaded.bind2(this));

    this._EnableSaveButton(false);
    
    //
    // create ListModel for dropdown
    //
    this.lpiListView = new LpiList_View('gemeente_panel_lpi', this);

    if(!UserIsLpiEditor())
    {
        document.getElementById('gemeente_panel_btnOpslaan').style.display = 'none';
        document.getElementById('gemeente_panel_lpi').disabled = true;
    }
}


Gemeente_View.prototype.show = function()
{
    gemeenteModel._reset();
    document.getElementById('gemeente_panel').style.display = "";
}

Gemeente_View.prototype.hide = function()
{
    document.getElementById('gemeente_panel').style.display = "none";
    document.getElementById('gemeente_export_postcodes').style.display = "none";
}

Gemeente_View.prototype.SelectMapLocation = function(mapX, mapY)
{
    gemeenteModel.loadFromMap(mapX, mapY);
}   

Gemeente_View.prototype.btnSave_OnClick = function(e)
{
    gemeenteModel.setLpi(document.getElementById('gemeente_panel_lpi').value);
    gemeenteModel.save();
    viewManager.ReloadMapWithDelay();
    this._EnableSaveButton(false);
}

Gemeente_View.prototype.ddLbpi_OnChange = function(e)
{
    var lpi = document.getElementById('gemeente_panel_lpi').value;
    
    this._EnableSaveButton(
        gemeenteModel.isValid()
        &&
        (
        	gemeenteModel.getLpiNames().length > 1
        	||
        	gemeenteModel.getLpi() != lpi)
        );
}


Gemeente_View.prototype._EnableSaveButton = function(isEnabled)
{
    document.getElementById('gemeente_panel_btnOpslaan').disabled = !isEnabled;
}

Gemeente_View.prototype._DisplayTab = function(tabId)
{
    document.getElementById('gemeente_panel_list').innerHTML = "";
    
    gemeenteModel.loadList(tabId);

    //
    // we trigger the 'paint' event
    //
    this._gemeente_Model_OnChange(tabId); 
}
Gemeente_View.prototype._deselectTabs = function()
{
    RemoveCssClass(document.getElementById('gemeente_panel_tab_1'), "tab_selected");
}

Gemeente_View.prototype._gemeente_Model_OnChange = function(fieldName)
{
    if(!viewManager.isActiveView(this)) return;

    switch(fieldName)
    {
        case 'Naam' :
            this._gemeente_Model_NameChanged();
            break;
        case 'Provincie' :
            this._gemeente_Model_ProvincieChanged();
            break;
        case 'LPI' :
//            alert('NIY: lpi');
            break;
        case 'LpiNames' :
            this._gemeente_Model_LpiNamesChanged();
            break;
        case 'Plaats' :
            this._gemeente_Model_ListChanged(gemeenteModel.getPlaatsen());
            break;
    }
}

Gemeente_View.prototype._gemeente_Model_OnReloaded = function(modelIsValid, errorMsg)
{
    if(!viewManager.isActiveView(this)) return;

    // not very pretty
    if(/tab_selected/.test(document.getElementById('gemeente_panel_tab_1').className))
    {
        this._DisplayTab('Plaats');
    }
    
    if(!document.getElementById('gemeente_panel_lpi').disabled)
    {
        document.getElementById('gemeente_panel_lpi').focus();
    }
    
    document.getElementById('gemeente_export_postcodes').style.display = (modelIsValid) ? "" : "none";

    
    if(!modelIsValid)
    {
        if(errorMsg != null) { document.getElementById('gemeente_panel_header').innerHTML = errorMsg; }
        return;
    }    
    
    if(gemeenteModel.getLpiNames().length > 1)
    {
    	this._EnableSaveButton(true);
    }
    
    this.lpiListView.setSelected(gemeenteModel.getLpi());
    this.lpiListView.reset();
}

Gemeente_View.prototype._gemeente_Model_NameChanged = function()
{
    document.getElementById('gemeente_panel_Name').innerHTML = gemeenteModel.getNaam();
    document.getElementById('gemeente_panel_header').innerHTML = gemeenteModel.getNaam();
    if(!gemeenteModel.isValid())
    {
        document.getElementById('gemeente_panel_header').innerHTML = "Klik op de kaart om een gemeente te selecteren";
    }
}
Gemeente_View.prototype._gemeente_Model_ProvincieChanged = function()
{
    document.getElementById('gemeente_panel_Provincie').innerHTML = gemeenteModel.getProvincie();
}

Gemeente_View.prototype._gemeente_Model_LpiNamesChanged = function()
{
    var lpiNames = gemeenteModel.getLpiNames();
    var pnl = document.getElementById('gemeente_panel_LpiNamesContainer');
    
    if(lpiNames.length <= 1)
    {
        pnl.style.display = "none";
    }
    else
    {
        pnl.style.display = "";
        document.getElementById('gemeente_panel_LpiNames').innerHTML = lpiNames.join("<br />");
    }
}


Gemeente_View.prototype._gemeente_Model_ListChanged = function(arrayOfStrings)
{
    var pnlList = document.getElementById('gemeente_panel_list');
    
    pnlList.innerHTML = arrayOfStrings.join("<br />");
}

Gemeente_View.prototype.exportPostcodesToCsv = function(e)
{
    location.href = "exportpostcodes.aspx?mode=gemeente&id=" + gemeenteModel.getLpiId() + "&gemeente=" + gemeenteModel.getNaam();
}

/*****************************************************************************/
/*
 * LPI List View
 */
function LpiList_View(dropdownId, owner)
{
    this.owner = owner;
    this.selectedRbpiId = "";
    this.dd = document.getElementById(dropdownId);
    
    lpiListModel.ModelReloadedEvent.AddListener(
        this._lpiList_Model_Reloaded.bind2(this)
    );
}

LpiList_View.prototype.setSelected = function(lpiId)
{
    this.selectedLpiId = lpiId;
}

LpiList_View.prototype.reset = function()
{
    var tmpName = this._emptyDropdown();
    this.dd.options[0] = new Option(tmpName, this.selectedLpiId);
    this.dd.selectedIndex = 0;
    
    lpiListModel.reload();
}

LpiList_View.prototype._lpiList_Model_Reloaded = function()
{
    if(!viewManager.isActiveView(this.owner)) return;

    var lpis = lpiListModel.getLpis();
    
    ClearChildren(this.dd);
    
    var activeGroup = null;
    
    for(var i=0; i<lpis.length; i++)
    {
        var lpi = lpis[i];
    
        if(activeGroup == null || activeGroup.label != lpi.GroupName)
        {
            activeGroup = document.createElement('optgroup');
            activeGroup.label = lpi.GroupName;
            this.dd.appendChild(activeGroup);
        }
        var opt = document.createElement('option');
        opt.value = lpi.Id;
        opt.text = lpi.Name;
        opt.innerText = lpi.Name;
        if(lpi.Id == this.selectedLpiId)
        {
        	opt.selected = true;
        }
        activeGroup.appendChild(opt);
    }
/*    
    for(var i=0; i<this.dd.options.length; i++)
    {
        if(this.dd.options[i].value == this.selectedLpiId)
        {
            this.dd.selectedIndex = i;
            alert(i + ' ' + this.selectedLpiId);
            break;
        }
        
    }
*/
}

LpiList_View.prototype._emptyDropdown = function()
{
    var name = this._findOptionName(this.selectedLpiId);
    ClearChildren(this.dd);
    return name;
}

LpiList_View.prototype._findOptionName = function(selectedLpiId)
{
    for(var i=0; i<this.dd.options.length; i++)
    {
        if(this.dd.options[i].value == selectedLpiId)
        {
            return this.dd.options[i].label;
        }
    }
    return "";
}



/*****************************************************************************/
/*
 * Plaats View
 */
function Plaats_View()
{
    //
    // hook up to controllers
    // btnSave is hooked up in the HTML because we can't stop the event propagation easily
    //

    document.getElementById('plaats_panel_lpi').onchange = this.ddLbpi_OnChange.bindAsEventListener2(this);

    //
    // hook up to model
    //
    plaatsModel.ModelChangedEvent.AddListener(this._plaats_Model_OnChange.bind2(this));
    plaatsModel.ModelReloadedEvent.AddListener(this._plaats_Model_OnReloaded.bind2(this));

    this._EnableSaveButton(false);
    
    //
    // create ListModel for dropdown
    //
    this.lpiListView = new LpiList_View('plaats_panel_lpi', this);

    if (!UserIsLpiEditor())
    {
        $('plaats_panel_btnOpslaan').hide();
        $('plaats_panel_lpi').disable();
    }
    else
    {
        $('plaats_panel_btnOpslaan').show();
        $('plaats_panel_lpi').enable();
    }

}


Plaats_View.prototype.show = function()
{
    plaatsModel._reset();
    document.getElementById('plaats_panel').style.display = "";
    document.getElementById('plaats_panel_lpi').style.display = "";
}

Plaats_View.prototype.hide = function()
{
    document.getElementById('plaats_panel').style.display = "none";
    document.getElementById('plaats_panel_lpi').style.display = "none";
    document.getElementById('plaats_export_postcodes').style.display = "none";
}

Plaats_View.prototype.SelectMapLocation = function(mapX, mapY)
{
    plaatsModel.loadFromMap(mapX, mapY);
}   

Plaats_View.prototype.btnSave_OnClick = function(e)
{
    plaatsModel.setLpi(document.getElementById('plaats_panel_lpi').value);
    plaatsModel.save();
    viewManager.ReloadMapWithDelay();
    this._EnableSaveButton(false);
}

Plaats_View.prototype.ddLbpi_OnChange = function(e)
{
    var lpi = document.getElementById('plaats_panel_lpi').value;
    
    this._EnableSaveButton(
        plaatsModel.isValid()
        &&
        (
        	plaatsModel.getLpiNames().length > 1
        	||
        	plaatsModel.getLpi() != lpi)
        );
}


Plaats_View.prototype._EnableSaveButton = function(isEnabled)
{
    document.getElementById('plaats_panel_btnOpslaan').disabled = !isEnabled;
}

Plaats_View.prototype._DisplayTab = function(tabId)
{
    document.getElementById('plaats_panel_list').innerHTML = "";
    
    plaatsModel.loadList(tabId);

    //
    // we trigger the 'paint' event
    //
    this._plaats_Model_OnChange(tabId); 
}

Plaats_View.prototype._plaats_Model_OnChange = function(fieldName)
{
    if(!viewManager.isActiveView(this)) return;

    switch(fieldName)
    {
        case 'Naam' :
            this._plaats_Model_NameChanged();
            break;
        case 'Gemeente' :
            this._plaats_Model_GemeenteChanged();
            break;
        case 'Provincie' :
            this._plaats_Model_ProvincieChanged();
            break;
        case 'LPI' :
//            alert('NIY: lpi');
            break;
        case 'LpiNames' :
            this._plaats_Model_LpiNamesChanged();
            break;
    }
}

Plaats_View.prototype._plaats_Model_OnReloaded = function(modelIsValid, errorMsg)
{
    if(!viewManager.isActiveView(this)) return;

    if(!document.getElementById('plaats_panel_lpi').disabled)
    {
        document.getElementById('plaats_panel_lpi').focus();
    }

    document.getElementById('plaats_export_postcodes').style.display = (modelIsValid) ? "" : "none";

    if(!modelIsValid)
    {
        if(errorMsg != null) { document.getElementById('plaats_panel_header').innerHTML = errorMsg; }
        return;
    }   

    if(plaatsModel.getLpiNames().length > 1)
    {
    	this._EnableSaveButton(true);
    }
    
    this.lpiListView.setSelected(plaatsModel.getLpi());
    this.lpiListView.reset();
}

Plaats_View.prototype._plaats_Model_NameChanged = function()
{
    document.getElementById('plaats_panel_Name').innerHTML = plaatsModel.getNaam();
    document.getElementById('plaats_panel_header').innerHTML = plaatsModel.getNaam();
    if(!plaatsModel.isValid())
    {
        document.getElementById('plaats_panel_header').innerHTML = "Klik op de kaart om een plaats te selecteren";
    }
}
Plaats_View.prototype._plaats_Model_GemeenteChanged = function()
{
    document.getElementById('plaats_panel_Gemeente').innerHTML = plaatsModel.getGemeente();
}
Plaats_View.prototype._plaats_Model_ProvincieChanged = function()
{
    document.getElementById('plaats_panel_Provincie').innerHTML = plaatsModel.getProvincie();
}

Plaats_View.prototype._plaats_Model_LpiNamesChanged = function()
{
    var lpiNames = plaatsModel.getLpiNames();
    var pnl = document.getElementById('plaats_panel_LpiNamesContainer');
    
    if(lpiNames.length <= 1)
    {
        pnl.style.display = "none";
    }
    else
    {
        pnl.style.display = "";
        document.getElementById('plaats_panel_LpiNames').innerHTML = lpiNames.join("<br />");
    }
}


Plaats_View.prototype._plaats_Model_ListChanged = function(arrayOfStrings)
{
    var pnlList = document.getElementById('plaats_panel_list');
    
    pnlList.innerHTML = arrayOfStrings.join("<br />");
}

Plaats_View.prototype.exportPostcodesToCsv = function(e)
{
    location.href = "exportpostcodes.aspx?mode=plaats&id=" + plaatsModel.getLpiId() + "&plaats=" + plaatsModel.getNaam();
}




/*****************************************************************************/
/*
 * School View
 */
function School_View()
{
    //
    // hook up to model
    //
    schoolModel.ModelChangedEvent.AddListener(this._school_Model_OnChange.bind2(this));
    schoolModel.ModelReloadedEvent.AddListener(this._school_Model_OnReloaded.bind2(this));

    this._EnableSaveButton(false);

    if (!UserIsSchoolEditor())
    {
        $('school_panel_btnOpslaan').hide();
        $('school_panel_websiteurl').hide();
        $('school_panel_websiteurl_link').show();
    }
    this.DisablePanel();
    Event.observe($('school_panel_postcode'), 'blur', this._UpdateSchoolPostcodeState.bind(this));
}

School_View.prototype._UpdateSchoolPostcodeState = function()
{
    var pc = $F('school_panel_postcode');
    if (pc != "" && !(new RegExp("\\d{4} ?[a-zA-Z]{2}").test(pc)))
    {
        $('school_panel_postcode').addClassName("school_panel_postcode_invalid");
        this._EnableSaveButton(false);
    }
    else
    {
        $('school_panel_postcode').removeClassName("school_panel_postcode_invalid");
        this._EnableSaveButton(true);
    }
}

School_View.prototype.show = function()
{
    schoolModel._reset();
    $('school_panel').show();
//    document.getElementById('plaats_panel_lpi').style.display = "";
}

School_View.prototype.hide = function()
{
    $('school_panel').hide();
}

School_View.prototype.DisablePanel = function()
{
    $('school_panel_websiteurl').disable();
    $('school_panel_naam').disable();
    $('school_panel_adres').disable();
    $('school_panel_postcode').disable();
    $('school_panel_niveau').disable();
    $('school_panel_notities').disable();

    $A(document.getElementsByName('school_panel_checkbox_programma')).each(function(i) { $(i).disable(); });
}

School_View.prototype.EnablePanel = function()
{
    $('school_panel_naam').enable();
    $('school_panel_websiteurl').enable();
    $('school_panel_adres').enable();
    $('school_panel_postcode').enable();
    $('school_panel_niveau').enable();
    $('school_panel_notities').enable();

    $A(document.getElementsByName('school_panel_checkbox_programma')).each(function(i) { $(i).enable(); });
}

School_View.prototype.SelectMapLocation = function(mapX, mapY)
{
    schoolModel.loadFromMap(mapX, mapY);
}

School_View.prototype.btnDelete_OnClick = function()
{
    if (!confirm("Klik Ok om deze school te verwijderen")) return;
    
    var id = schoolModel.getId();
    schoolModel.deleteSchool();
    schoolMarkers.get(id).closeInfoWindow();
    schoolMarkers.get(id).hide();
}

School_View.prototype.btnSave_OnClick = function(e)
{
    schoolModel.setNaam($F($('school_panel_naam')), true);
    schoolModel.setWebsiteUrl($F($('school_panel_websiteurl')), true);
    schoolModel.setAdres($F($('school_panel_adres')), true);
    schoolModel.setPostcode($F($('school_panel_postcode')), true);
    schoolModel.setNiveau($F($('school_panel_niveau')), true);
    schoolModel.setProgrammas(this._listSelectedProgrammas(), true);
    schoolModel.setNotities($F($('school_panel_notities')), true);

    schoolModel.save();
    viewManager.ReloadMapWithDelay();
    //this._EnableSaveButton(true);
}

School_View.prototype._EnableSaveButton = function(isEnabled)
{
    document.getElementById('school_panel_btnOpslaan').disabled = !isEnabled;
}

School_View.prototype._school_Model_OnChange = function(fieldName)
{
    if (!viewManager.isActiveView(this)) return;
    
    switch (fieldName)
    {
        case 'Naam':
            this._school_Model_NameChanged(); break;
        case 'Adres':
            this._school_Model_AdresChanged(); break;
        case 'Postcode':
            this._school_Model_PostcodeChanged(); break;
        case 'Plaats':
            this._school_Model_PlaatsChanged(); break;
        case 'WebsiteUrl':
            this._school_Model_WebsiteUrlChanged(); break;
        case 'Programmas':
            this._school_Model_ProgrammasChanged(); break;
        case 'Niveau':
            this._school_Model_NiveauChanged(); break;
        case 'Notities':
            this._school_Model_NotitiesChanged(); break;
    }
}

School_View.prototype._school_Model_OnReloaded = function(modelIsValid, errorMsg)
{
    if (!viewManager.isActiveView(this)) return;

    if(schoolModel.isNew() || !UserIsSchoolEditor())
    {
        $('school_delete_school').hide();
    }
    else
    {
        $('school_delete_school').show();
    }

    if (!$('school_panel_naam').disabled)
    {
        $('school_panel_naam').focus();
    }
    if (!modelIsValid || !UserIsSchoolEditor())
    {
        this.DisablePanel();
    }
    else
    {
        this.EnablePanel();
    }

    /*    if (!modelIsValid)
    {
    if (errorMsg != null) { document.getElementById('school_panel_header').innerHTML = errorMsg; }
    return;
    }
    */
    this._EnableSaveButton(true);
}

School_View.prototype._school_Model_NameChanged = function()
{
    document.getElementById('school_panel_naam').value = schoolModel.getNaam();
    document.getElementById('school_panel_header').innerHTML = schoolModel.getNaam();
    if (!schoolModel.isValid())
    {
        document.getElementById('school_panel_header').innerHTML = "Klik op de kaart om een school te selecteren";
       $('school_delete_school').hide(); 
    }
    if (schoolModel.isNew())
    {
        $('school_panel_header').update("Voer de gegevens van de nieuwe school in");
        $('school_panel_naam').focus();
    }
}
School_View.prototype._school_Model_AdresChanged = function()
{
    document.getElementById('school_panel_adres').value = schoolModel.getAdres();
}
School_View.prototype._school_Model_PostcodeChanged = function()
{
    document.getElementById('school_panel_postcode').value = schoolModel.getPostcode();
}
School_View.prototype._school_Model_PlaatsChanged = function()
{
    document.getElementById('school_panel_plaats').innerHTML = schoolModel.getPlaats();
}
School_View.prototype._school_Model_WebsiteUrlChanged = function()
{
    if (UserIsSchoolEditor())
    {
        document.getElementById('school_panel_websiteurl').value = schoolModel.getWebsiteUrl();
    }
    else
    {
        $('school_panel_websiteurl_link').href = FormatHref(schoolModel.getWebsiteUrl());
        $('school_panel_websiteurl_link').innerHTML = schoolModel.getWebsiteUrl();
    }
}
function FormatHref(href)
{
    return (new RegExp("^http://").test(href)) ? href : "http://" + href;
}

School_View.prototype._school_Model_ProgrammasChanged = function()
{
    var checkboxes = $A(document.getElementsByName('school_panel_checkbox_programma'));
    checkboxes.each(function(item) { item.checked = false; });
    schoolModel.getProgrammas().each(function(item) { $('school_panel_programma_' + item).checked = true; });
}
School_View.prototype._listSelectedProgrammas = function()
{
    var checkboxes = $A(document.getElementsByName('school_panel_checkbox_programma'));
    return checkboxes.findAll(function(item) { return item.checked; }).collect(function(item) { return $F(item); });
}


School_View.prototype._school_Model_NiveauChanged = function()
{
    SetDropdownValue($('school_panel_niveau'), schoolModel.getNiveau());
}
School_View.prototype._school_Model_NotitiesChanged = function()
{
    document.getElementById('school_panel_notities').value = schoolModel.getNotities();
}


function SetDropdownValue(dropdown, value)
{
    var item = $A($(dropdown).options).find(function(item) { return item.value == value; });
    if (item != null)
    {
        item.selected = true;
    }
}