﻿var mapControl = null;

dojo.declare("esriireland.projects.niea.ui.MapViewer", null, 
{
    mapInstance : null,
    callbackFunction : null,
    legendWidth : 280,
    headerHeight : 130,
    buttonOneToggle : true,
    buttonTwoToggle : true,
    buttonThreeToggle : true,
    buttonFourToggle : false,
    buttonFiveToggle : false,
    legendOpen : false,
    //Slider options
    locateSlider: null,
    locateSliderAccordion: null,
    locateSliderMenu: null,
    locateSliderMenuImage : null,
    locateSliderIsExtended: false,
    locateSliderCursor: null,
    //Zoom Scale
    toolbarZoomLevel : null,
    zoomLevelSelect : null,
    zoomLevelText : null,
    zoomLevelButton : null,

    //Default Constructor
    constructor : function(mapControl, callbackFunction)
    {
        //Log call
        console.log("Running: constructor");
        //Assign the map instance
        this.mapInstance = mapControl;
        //Assign the callback data
        this.callbackFunction = callbackFunction;
        //Resize the main content of the page
        this.resizeMainContent();
        //Setup the zoom level
        this.setupZoomLevel();
        //Setup the busy indicator
        this.setupBusyIndicator();
        //Attach a global resize event onto the page
        dojo.connect(null, "onresize", dojo.hitch(this, "resizeMainContent"));
    },
    
    clearIdentifyGraphics : function()
    {
        var message = "EventArg=clearIdentifyGraphics";
        var context = null;
        eval(this.callbackFunction);
    },
    
    toggleLegend: function()
    {
        toggleFloatingPanelVisibility('LegendFloatingPanel');
        expandFloatingPanel('LegendFloatingPanel');
    },
    
    resizeMainContent : function()
    {
        //Log
        console.log("Running: resizeMainContent");
        //Get the page size
        var pageHeight = this.getPageHeight();
        var pageWidth = this.getPageWidth();
        //Get the content area sizes
        var canvasHeight = pageHeight - this.headerHeight;
        var canvasWidth = pageWidth - this.legendWidth;
        var legendHeight = pageHeight - this.headerHeight;;
        var legendWidth = this.legendWidth;
        var innerLegendHeight = legendHeight - 210;
        var innerLegendWidth = this.legendWidth - 15;
        var innerLegendPaneWidth = this.legendWidth - 20;
        
        //Set the sizes
        dojo.style("header", "width", pageWidth + "px");
        dojo.style("map", "height", canvasHeight + "px");
        dojo.style("map", "width", canvasWidth + "px");
        
        //Set the accordion container
        dojo.style("legend", "height", legendHeight + "px");
        dojo.style("legend", "width", legendWidth + "px");
        dojo.style("accordionContainer", "height", legendHeight + "px");
        dojo.style("accordionContainer", "width", legendWidth + "px");
        dijit.byId("accordionContainer").resize();

        //Set the accordion container
        dojo.style("locateContentPaneOne", "width", innerLegendPaneWidth + "px");
        dojo.style("locateContentPaneTwo", "width", innerLegendPaneWidth + "px");
        dojo.style("locateContentPaneThree", "width", innerLegendPaneWidth + "px");
        dojo.style("locateContentPaneFour", "width", innerLegendPaneWidth + "px");
        dojo.style("locateContentPaneFive", "width", innerLegendPaneWidth + "px");
        dojo.style("locateContentPaneSix", "width", innerLegendPaneWidth + "px");
        dojo.style("locateContentPaneSeven", "width", innerLegendPaneWidth + "px");


        dojo.style("locateWhatEver", "height", innerLegendHeight + "px");
        dojo.style("locateWhatEver", "width", innerLegendWidth + "px");
        dojo.style("locateAccordionContainer", "height", innerLegendHeight + "px");
        dojo.style("locateAccordionContainer", "width", innerLegendWidth + "px");
        dijit.byId("locateAccordionContainer").resize();
        window.setTimeout("locateAccordionContainerResize();", 1000);

        //Resize the map
        this.mapInstance.resize(canvasWidth, canvasHeight, true); 
    },
    
    popUp : function(URL) 
    {
        day = new Date();
        id = day.getTime();
        eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=1,menubar=0,resizable=0,width=500,height=400,left=390,top=312');");
    },

    //Show the busy indicator when the map moves
    showBusyIndicator : function(sender) 
    {
        showLayer("BusyIndicator");
        if (sender != null) {
            window.status = "Pending Tiles: " + sender.pendingTiles.length;
        } 
    },

    //Show the pending tiles in the status window
    showPendingTiles : function(sender) 
    {
        if (sender != null) {
            window.status = "Pending Tiles: " + sender.pendingTiles.length;
        } 
    },

    //Hide the busy indicator 
    hideBusyIndicator : function(sender) 
    {
        hideLayer("BusyIndicator");
        if (sender!=null) {
            window.status = "";
        }
    },

    //Set the busy indicator so it shows up when the map is loading
    setupBusyIndicator : function()
    {
        this.mapInstance.pendingTiles.add_onRequestsPending(dojo.hitch(this, "showBusyIndicator"));
        this.mapInstance.pendingTiles.add_onRequestsRemove(dojo.hitch(this, "showPendingTiles"));
        this.mapInstance.pendingTiles.add_onRequestsCompleted(dojo.hitch(this, "hideBusyIndicator"));
    },
    
    //Setup the point identify
    pointIdentify : function()
    {
        console.log("Starting point identify");
        MapDragRectangle('Map1' ,'__Page_IdentifyPoint', true,'');
    },

    //Get the width of the page
    getPageWidth : function()
    {
        var myWidth = 0;
        if( typeof( window.innerWidth ) == 'number' ) {
            //Non-IE
            myWidth = window.innerWidth;
        } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
            //IE 6+ in 'standards compliant mode'
            myWidth = document.documentElement.clientWidth;
        } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
            //IE 4 compatible
            myWidth = document.body.clientWidth;
        }
        return myWidth;
    },

    //Get the height of the page
    getPageHeight : function()
    {
        var myHeight = 0;
        if( typeof( window.innerWidth ) == 'number' ) {
            //Non-IE
            myHeight = window.innerHeight;
        } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
            //IE 6+ in 'standards compliant mode'
            myHeight = document.documentElement.clientHeight;
        } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
            //IE 4 compatible
            myHeight = document.body.clientHeight;
        }
        if (dojo.isIE == 6)
        {
            return myHeight + 4;
        }
        else
        {
            return myHeight - 12;        
        }
    },
    //Toggle the layer button to display the required data
    toogleLayerButton : function(buttonId)
    {
        var displayOption = null;
        switch(buttonId)
        {
            case 1:
                displayOption = this.buttonOneToggle;
                this.buttonOneToggle = !this.buttonOneToggle;
                break;
            case 2:
                displayOption = this.buttonTwoToggle;
                this.buttonTwoToggle = !this.buttonTwoToggle;
                break;
            case 3:
                displayOption = this.buttonThreeToggle;
                this.buttonThreeToggle = !this.buttonThreeToggle;
                break;
            case 4:
                displayOption = this.buttonFourToggle;
                this.buttonFourToggle = !this.buttonFourToggle;
                break;
            case 5:
                displayOption = this.buttonFiveToggle;
                this.buttonFiveToggle = !this.buttonFiveToggle;
        }
        if (displayOption != null)
        {
            var message = "EventArg=toggleLayerButton_toggleLayer&buttonId=" + buttonId + "&displayOption=" +  displayOption;
            var context = null;
            eval(this.callbackFunction);
        }
    },
    
    setupZoomLevel : function() {
        this.zoomLevelSelect = dijit.byId('zoomLevelSelect');
        this.zoomLevelText = dijit.byId('zoomLevelText');
        this.zoomLevelButton = dijit.byId('zoomLevelButton');
        //Set the style so they are not displayed
        if (dojo.isIE) {
            dojo.style('zoomLevelTextContainer', 'verticalAlign', 'top');
            dojo.style('zoomLevelButton', 'height', '13px');
            dojo.style('zoomLevelButton', 'fontSize', '10px');
            dojo.style('zoomLevelButton', 'fontWeight', 'bold');
        }
        //Setup the original layout
        this.resetZoomLevel();
        //Connect the dojo command
        dojo.connect(this.zoomLevelButton, 'onclick', dojo.hitch(this, 'zoomLevelButtonClicked'));
    },
   
    resetZoomLevel : function() {
        this.zoomLevelText.attr('value', '1:50,000');
        this.zoomLevelSelect.reset();
        dojo.style('zoomLevelSelectContainer', 'display', '');
        dojo.style('zoomLevelTextContainer', 'display', 'none');
    },
    
    zoomLevelSelectChanged : function() {
        var selectedValue = this.zoomLevelSelect.attr('value');
        if (selectedValue == -2) {
            dojo.style('zoomLevelSelectContainer', 'display', 'none');
            dojo.style('zoomLevelTextContainer', 'display', '');
            this.zoomLevelText.focus();
        }
        if (selectedValue > 0) {
            var message = "EventArg=zoomLevel&scale=" + selectedValue;
            var context = null;
            eval(this.callbackFunction);
        }
    },
    
    zoomLevelButtonClicked : function() {
        var value = this.zoomLevelText.value;
        if (this.isNumericScale(value)) {
            while (value.indexOf('1:') > -1) {
                value = value.replace('1:', '');
            }
            while (value.indexOf(',') > -1) {
                value = value.replace(',', '');
            }        
            var message = "EventArg=zoomLevel&scale=" + value;
            var context = null;
            eval(this.callbackFunction);
        }
    },
    
    isNumericScale : function (sText)
    {
        var ValidChars = "0123456789:,";
        var IsNumber=true;
        var Char;
        for (i = 0; i < sText.length && IsNumber == true; i++) 
        { 
            Char = sText.charAt(i); 
            if (ValidChars.indexOf(Char) == -1) 
            {
                IsNumber = false;
            }
        }
        return IsNumber;
    }
});

function locateAccordionContainerResize()
{
    dijit.byId("locateAccordionContainer").resize();
    window.setTimeout("locateAccordionContainerResize();", 1000);
}

function toggleLocateSlider() {
    mapControl.toggleLocateSlider();
}

function resetZoomLevel() {
    mapControl.resetZoomLevel();
}

function toggleLegend() {
    mapControl.toggleLegend();
}

function pointIdentify() {
    mapControl.pointIdentify();
}

function zoomLevelSelectChanged() {
    mapControl.zoomLevelSelectChanged();
}

function zoomLevelButtonClicked() {
    mapControl.zoomLevelButtonClicked();
}

//The function to start once the page is loaded
function init()
{
    //Callback function string is pulled from the main page as it is outputted from the code
    mapControl = new esriireland.projects.niea.ui.MapViewer(Maps["Map1"], callbackFunctionString);
}

//Core
dojo.require("dojo.parser");
//Layout
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.ContentPane");
//Tool bar
dojo.require("dijit.Toolbar");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.FilteringSelect");

//Set the startup script for the map viewer
dojo.addOnLoad(init);