var OTOS = window.OTOS || {};
OTOS.Main = function () {

    return {

        /**
         * The names of the different chart types
         */
        CHARTNAMES: { 'FC_2_3_Column2D':  'Pylväskaavio',
                      'FC_2_3_Column3D':  'Kolmiulotteinen pylväskaavio',
                      'FC_2_3_Line':      'Viivakaavio',
                      'FC_2_3_Bar2D':     'Palkkikaavio',
                      'FC_2_3_Area2D':    'Aluekaavio',
                      'FI2_RT_Area':      'Aluekaavio',
                      'FI2_RT_Line':      'Viivakaavio' },


        /**
         * The available chart types for the different statistics types
         */
        CHARTTYPES: [[ 'FC_2_3_Column3D', 'FC_2_3_Column2D', 'FC_2_3_Line', 'FC_2_3_Area2D', 'FC_2_3_Bar2D' ],
                     [ 'FC_2_3_Column3D', 'FC_2_3_Column2D', 'FC_2_3_Line', 'FC_2_3_Area2D', 'FC_2_3_Bar2D' ],
                     [ 'FC_2_3_Column3D', 'FC_2_3_Column2D', 'FC_2_3_Line', 'FC_2_3_Area2D', 'FC_2_3_Bar2D' ],
                     [ 'FI2_RT_Area', 'FI2_RT_Line' ]],


        /**
         * The treemode. When user has clicked the name of the server/camera/imagearea, the treemode is true.
         * When the user has added the different elements to the content area one by one by clicking the arrows,
         * the treemode is false
         */
        TREEMODE: false,


        /**
         * The calendar
         */
        CAL: null,


        /**
         * The preloader
         */
        preload: function () {

            // global ajax-responders for showing and hiding the progressbar everytime a request starts or ends
            Ajax.Responders.register({
                onCreate: OTOS.Util.showProgressBar,
                onComplete: OTOS.Util.hideProgressBar
            });

            // create thte toggle navigation -button
            OTOS.Dom.setAsFirstChild(OTOS.ElementManager.createToggleNavButton(), document.getElementsByTagName('body')[0]);

            // rounded corners
            OTOS.Dom.roundCorners($('navContainer'), "images/cornerImage.gif", 3, 10);
            OTOS.Dom.roundCorners($('header'), "images/cornerImage.gif", 3, 10);

            // event observers
            Event.observe(window, 'resize', function () {
                OTOS.ElementManager.columnWidthChanged();
            });

            OTOS.Util.getServerData(OTOS.ElementManager.createPage); // get the server data
        },


        /**
         * Updates the chart types -dropdown with new values (from the global JS-array). Each
         * statistics type has it's own chart types which are defined in the OTOS.Main.CHARTTYPES -array.
         */
        updateChartTypes: function () {

            var chartTypes      = OTOS.Main.CHARTTYPES[$F('lstStatTypes')],
                lstChartTypes   = $('lstChartTypes');

            OTOS.Dom.removeChildNodes(lstChartTypes);

            // populate the charttype -dropdown
            for (var i = 0; i < chartTypes.length; i++) {
                lstChartTypes.options[i] = new Option(OTOS.Main.CHARTNAMES[chartTypes[i]], chartTypes[i]);
            } // for

            // try to select the option that was selected before updating the dropdown. if
            // the selection fails, just select the first option
            if (!OTOS.FormElement.selectOptionByValue(lstChartTypes, OTOS.ElementConfig.CHART_TYPE)) {
                lstChartTypes.options[0].selected = true;
            } // if

            OTOS.ElementConfig.CHART_TYPE = $F('lstChartTypes'); // update the global variable

        },


        /**
         * Creates window.location.hash -string. Searches for components in the content
         * area and gets the values of the form elements in the navigation bar and makes
         * a formatted string out of them. Different components of the string are separated
         * by &-chars and different parts of the components are separated by commas (,).
         *
         * Different components have different prefixes. The prefixes are as follows:
         *
         * - s  = serverElement
         * - c  = cameraElement
         * - a  = areaElement
         * - p  = period
         * - t  = time
         * - ct = chart type
         * - st = statistic type
         *
         * @return  The created hashstring
         * @type    {string}
         */
        createHash: function () {

            // update only if the OTOS.Main.TREEMODE is not set (the elements are added
            // separately by clicking the add-link in the navigation)

            if (OTOS.Main.TREEMODE) {
                return false;

            } else {

                var contentElement  = $(CONTENT_ELEMENT_ID),
                    arrElements     = document.getElementsByClassName('element', contentElement),
                    strHash         = '#',
                    arr             = [];

                // go through all the founded childNodes and append them into the array

                for (var i = 0; i < arrElements.length; i++) {

                    /*
                    * the id's of the elements are formed by combining the id's of the
                    * servers, cameras and areas. for example, area elements have id's
                    * like 'areaElement_serverAddress_cameraId_areaId'
                    */
                    var currentEl   = arrElements[i],
                        elId        = currentEl.id,
                        parts       = elId.split('_');

                    if (Element.hasClassName(currentEl, 'serverElement')) {
                        arr.push('s=' + parts[1]);
                    } else if (Element.hasClassName(currentEl, 'imageContainer')) {
                        arr.push('c=' + parts[1] + '|' + parts[2]);
                    } else if (Element.hasClassName(currentEl, 'areaElement')) {
                        arr.push('a=' + parts[1] + '|' + parts[2] + '|' + parts[3]);
                    } // else if

                } // for

                strHash += 'cols=' + OTOS.ElementConfig.COLUMN_COUNT;
                strHash += '&p=' + OTOS.ElementConfig.PERIOD;
                strHash += '&t=' + OTOS.ElementConfig.HOUR;
                strHash += '&ct=' + OTOS.ElementConfig.CHART_TYPE;
                strHash += '&st=' + OTOS.ElementConfig.STAT_TYPE;
                strHash += '&' + arr.join('&');

                return strHash;

            }  // if

        },


        /**
         * Updates the window.location.hash if the treemode is not true
         */
        updateHash: function () {

            var newHash = OTOS.Main.createHash();

            if (newHash !== false) {
                window.location.hash = OTOS.Main.createHash();
            } // if

        }

    };

}();