/**
 * OnApp is a frontend for search and browse the data of ortsnamen.ch
 * @copyright Nova Innovation Solutions GmbH
 * @author nyffenegger
 */
if (ON == undefined) {
    var ON = {};
    if (ON.api == undefined) {
        ON.api = {};
    }
}

/**
 * Main class implementing the application
 * @classDescription Implenetation of onapp2.php
 * @namespace ON
 */
ON.Onapp = function(){

    // Make local members possible...
    var that = this;
    
    // YUI Shortcuts
    var Dom = YAHOO.util.Dom;
    var Event = YAHOO.util.Event;
    var Json = YAHOO.lang.JSON;
    
    // Controls
    var layout;
    //that.myDataTable = {};
    var btHelp;
    this.myTabView = {};
    var myHelpPanel;
    var mCluster;
    var autoCompleteGemeinde;
    var selectKantoneS;
    var selectKantoneA;
    
    // GMap Objects
    that.markers = {};
    that.map = undefined;
    that.currentDS = {};
    
    // Defaults
    var startZoom = 8;
    var zoomFlurnamen = 14;
    var zoomGemeinden = 10;
    var zoomKantone = 5;
    var zoomRange; // 0 = Kantone, 1 = Gemeinden, 2 = Flurnamen

    var currentPage = "on-splash";
    
    /** 
     * Eventhandler for search buttons
     */
    var onButtonClick = function(){
        if (this.get("id") == 'btSerachAdv') {
            that.loaddata(true);
        }
        else {
            that.loaddata(false);
        }
    }

    /**
     * This method displays the div with id=page in the yui body.
     * In future this construct (Navigationlinks, div containers and showPage method) could become a
     * ELSTR_PageNavigation Widget.
     */
    var showPage = function(page) {
        if (page != currentPage) {
            YAHOO.util.Dom.setStyle(page,'display','');
            YAHOO.util.Dom.setStyle(currentPage,'display','none');
            currentPage = page;
        }
    }
    
    /**
     * Load data into datatabel
     * @param {Object} adv True if advanced search was selected
     */
    that.loaddata = function(adv){
        var URLVars = "";
        
        if (adv === false) {
            var mTerm = encodeURIComponent(document.getElementById("tbTerm").value);
            var mOrt = encodeURIComponent(document.getElementById("tbOrt").value);
            var mKanton = encodeURIComponent(document.getElementById("tbKanton").value);
            URLVars = "adv=false&term=" + mTerm + "&ort=" + mOrt + "&kanton=" + mKanton;
        }
        else 
        if (adv === true) {
            var mID = encodeURIComponent(document.getElementById("IDtbAID").value);
            var mName = encodeURIComponent(document.getElementById("IDtbAName").value);
            var mGemeinde = encodeURIComponent(document.getElementById("IDtbAGemeinde").value);
            var mOrt = encodeURIComponent(document.getElementById("IDtbAOrt").value);
            var mTeilgebiet = encodeURIComponent(document.getElementById("IDtbATeilgebiet").value);
            var mBezirk = encodeURIComponent(document.getElementById("IDtbABezirk").value);
            var mKanton = encodeURIComponent(document.getElementById("IDtbAKanton").value);
            var mBeschreibung = encodeURIComponent(document.getElementById("IDtbABeschreibung").value);
            var mDeutung = encodeURIComponent(document.getElementById("IDtbADeutung").value);
            URLVars = "adv=true&AID=" + mID + "&AName=" + mName + "&AGemeinde=" + mGemeinde + "&AOrt=" + mOrt + "&ATeilgebiet=" + mTeilgebiet + "&ABezirk=" + mBezirk + "&AKanton=" + mKanton + "&ABeschreibung=" + mBeschreibung + "&ADeutung=" + mDeutung;
        }
        
        var formatUrl = function(elCell, oRecord, oColumn, sData){
            var url = "index.php?" + URLVars + "&detail=" + oRecord.getData("ID");
            elCell.innerHTML = "<a href='" + url + "'>" + sData + "</a>";
        };
        
        var formatLinkButton = function(elCell, oRecord, oColumn, sData){
            var y = oRecord.getData("KoordY");
            var x = oRecord.getData("KoordX");
            var cData = '<div class="oncell">' + sData + '</div>';
            if ((y > 0 ) && (x > 0)) {
                cData = '<div class="oncell onmapcell">' + sData + '</div>';
            }
            elCell.innerHTML= cData;
        };
        
        var formatQuellen = function(elCell, oRecord, oColumn, sData){
            elCell.innerHTML = "<div class = 'phonetik'>" + sData + "</a>";
        };
        
        var myColumnDefs = [{
            key: "Name",
            sortable: true,
            formatter: formatLinkButton
        }, {
            key: "Gemeinde",
            sortable: true
        }, {
            key: "Kanton",
            sortable: true
        }, {
            key: "Beschreibung"
        }
        ];
        
        var myDataSource = new YAHOO.util.DataSource(ON.dataSources.serachURL+"&" + URLVars + "&end");
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        myDataSource.connXhrMode = "ignoreStaleResponses";
        myDataSource.responseSchema = {
            resultsList: "result"
        }
        
        var myConfigs = {
            paginated:true,
            selectionMode: "single",
            paginator:{
                containers: null,
                currentPage: 1,
                dropdownOptions: [25,50,100,500],
                pageLinks: 0,
                rowsPerPage: 20
            }
        };
        
        that.myDataTable = new YAHOO.widget.DataTable("text", myColumnDefs, myDataSource, myConfigs);
        that.myDataTable.subscribe("rowClickEvent", that.myDataTable.onEventSelectRow);
        that.myDataTable.subscribe("rowSelectEvent", onSelectResultRow, that.myDataTable, true);
        //that.myDataTable.subscribe("rowSelectEvent", new function(){alert("TEST");}), that.myDataTable, true);
        that.myDataTable.subscribe("dataReturnEvent", that.createMarkers);
    }
    
    /**
     * minimize the search panel
     */
    var closeLeft = function(){
        var a = document.createElement('a');
        a.href = '#';
        a.innerHTML = 'Add Left Unit';
        Dom.get('closeLeft').parentNode.appendChild(a);
        
        Dom.setStyle('tLeft', 'display', 'none');
        Dom.setStyle('closeLeft', 'display', 'none');
        Event.on(a, 'click', function(ev){
            Event.stopEvent(ev);
            Dom.setStyle('tLeft', 'display', 'inline');
            Dom.setStyle('closeLeft', 'display', 'inline');
            a.parentNode.removeChild(a);
            layout.addUnit(layout.get('units')[3]);
            layout.getUnitByPosition('left').on('close', function(){
                closeLeft();
            });
        });
    };
    
    /**
     * Listen to the return key of the search buttons
     * @param {Object} e
     * @param {Object} adv
     */
    that.onKeyPress = function(e, adv){
        var keynum;
        var keychar;
        var numcheck;
        if (window.event) // IE
        {
            keynum = e.keyCode;
        }
        else 
        if (e.which) // Netscape/Firefox/Opera
        {
            keynum = e.which;
        }
        if (keynum == 13) {
            that.loaddata(adv);
        }
    }
    
    /**
     * initialize the google map
     */
    var loadmap = function(){
        if (GBrowserIsCompatible()) {
            that.map = new GMap2(document.getElementById("map_canvas"));
            that.map.setCenter(new GLatLng(47.0, 8.7), startZoom, G_PHYSICAL_MAP);
            that.map.setUIToDefault();
        // Add our custom behavior
        //GEvent.addListener(that.map, "moveend", ON.myOnApp.updateMarkers);
        //GEvent.addListener(that.map, "zoomend", ON.myOnApp.updateMarkers);
        }
        
    }
    
    /**
     * Show the Help Window
     */
    var showHelp = function(){
        myHelpPanel.show();
    }
    
    var findMarker = function(id){
        for (var i = 0; i < that.markers.length; i++) {
            if (that.markers[i].onid == id) 
                return that.markers[i];
        }
        return undefined;
    }
    
    /***
     * Event Handlers for Serach
     */
    var onSelectResultRow = function(){
        var data = this.getRecordSet().getRecord(this.getSelectedRows()[0])._oData;
        if (ON.app.myTabView.get('activeIndex') == 0) {
            // Move and zoom the map to the recordset			
            var res = swissGridToCoords(parseInt(data.KoordY), parseInt(data.KoordX));
            if ((data.KoordY > 0) && (data.KoordX > 0)) {
                var point = new GLatLng(res[0], res[1]);
                if (that.map.getZoom() < zoomFlurnamen) {
                    that.map.setZoom(zoomFlurnamen);
                }
                that.map.panTo(point);
                // && that.currentMarker.onid != data.ID
                if (that.currentMarker != undefined && that.currentMarker.onid != data.ID) {
                    that.currentMarker.setImage(LIBS.appVersion + '/' + LIBS.appName + '/assets/marker.png');
                }
                var newMarker = findMarker(data.ID);
                if (newMarker != undefined) {
                    newMarker.setImage(LIBS.appVersion + '/' + LIBS.appName + '/assets/marker_active.png');
                    that.currentMarker = newMarker;
                }
            }
        }
        // Update Tab
        that.updateDetailsTab(data.ID, data);
    }
    
    /**
     * Updates the list of markers and add them to cluster
     */
    that.createMarkers = function(request, response){
        loadmap();
        that.markers = [];
        var sicon = new GIcon(G_DEFAULT_ICON);
        //sicon.image = "assets/img/marker.png";
        //var rs = that.myDataTable.getRecordSet();
        var rs = request.response.results
        if (rs.length > 0) {
            for (var i = 0; i < rs.length; i++) {
                var data = rs[i];
                if ((data.KoordY > 0) && (data.KoordX > 0)) {
                    var res = swissGridToCoords(parseInt(data.KoordY), parseInt(data.KoordX));
                    var point = new GLatLng(res[0], res[1]);
                    var id = data.ID;
                    
                    // Set up our GMarkerOptions object
                    // markerOptions = { icon:letteredIcon };
                    var marker = new GMarker(point, {
                        title: data.Name
                    });
                    marker.onid = id;
                    //makrer.data = data;
                    //marker.opts.title = data.name;
                    GEvent.addListener(marker, "click", function(){
                        this.openInfoWindowHtml('<iframe frameborder="0" src="/services/ON_WidgetServer_Results?method=getDetailGM&id=' + this.onid + '" width="480" height="300"></iframe>');
                        that.updateDetailsTab(this.onid, data);
                    //hat.myDataTable.selectRow();
                    });
                    that.markers.push(marker);
                }
            }
        }
        mCluster = new MarkerClusterer(that.map, that.markers);
    };
    
    that.updateDetailsTab = function(onid, data){
    
        var handleSuccess = function(o){
            if (o.responseText !== undefined) {                
                var div = document.getElementById('detailsTab');
                div.innerHTML = o.responseText;
            }
            // Show Contribution Dialog, if available
            if (document.getElementById('showDlgContribution') != undefined) {
                ON.contribution.showDlgContribution['default'] = new YAHOO.widget.Button("showDlgContribution");
                ON.contribution.showDlgContribution['default'].on("click", ON.contribution.showDialog);
            }
        };
        
        var url = '/services/ON_WidgetServer_Results?method=getDetailInnerHTML&id=' + onid;
        // TODO: Here implement a generic concept to customize
        if (data != undefined && (data.Kanton == "AI" || data.Kanton == "AR" || data.Kanton == "SH")) {
            url = url + "&contribute=true";
        }
        var callback = {
            success: handleSuccess
        };
        var request = YAHOO.util.Connect.asyncRequest('GET', url, callback);
    }

    /**
     * Consturct the UI elements and Variables, triggerd by onDOMReady
     */
    this.initializeControls = function(){
        // Create layout
        layout = new YAHOO.widget.Layout({
            units: [{
                position: 'top',
                height: 40,
                body: 'top1',
                gutter: '4px',
                collapse: false,
                resize: false
            }, {
                position: 'bottom',
                height: 30,
                body: 'bottom1',
                gutter: '4px'
            }, {
                position: 'left',
                header: 'Datensatz Recherche',
                width: 640,
                resize: true,
                body: 'left1',
                gutter: '4px',
                collapse: true,
                collapseSize: 30,
                scroll: true,
                animate: true
            }, {
                position: 'right',
                header: 'Hilfe',
                width: 300,
                resize: true,
                body: 'helpPannel',
                gutter: '4px',
                collapse: true,
                collapseSize: 30,
                scroll: true,
                animate: true
            }, {
                position: 'center',
                header: 'Anzeige',
                body: 'center1',
                gutter: '4px'
            }]
        });

        layout.on('render', function(){
            layout.getUnitByPosition('right').collapse();

            // Init Tabview
            YAHOO.util.Event.onAvailable('tabview', function(){
                that.myTabView = new YAHOO.widget.TabView('tabview');
                var maptab = new YAHOO.widget.Tab({
                    label: 'Karte',
                    content: '<div id="map_canvas">Karte konnte nicht geladen werden</div>',
                    active: true
                });
                that.myTabView.addTab(maptab);

                that.myTabView.addTab(new YAHOO.widget.Tab({
                    label: 'Details',
                    content: '<div id="detailsTab"><p>Kein Datensatz selektiert</p></div>',
                    cacheData: true,
                    scroll: true
                }));

                // Implement API navigation
                if (ON.api.detailID != undefined) {
                    that.updateDetailsTab(ON.api.detailID);
                    that.myTabView.set('activeIndex', 1);
                }
            });

            // Define all Autocomplete
            ON.dataSources = new ON.DataSources();
            ON.dataSources1 = new ON.DataSources();
            selectKantoneS = new ON.Widgets.DropDownDataBound('tbKanton', ON.dataSources.kantone);
            selectKantoneA = new ON.Widgets.DropDownDataBound('IDtbAKanton', ON.dataSources1.kantone);

            layout.getUnitByPosition('left').on('close', function(){IDtbAKanton
                closeLeft();
            });

            // Create Serach Area with animation
            that.btSerach = new YAHOO.widget.Button("btSerach");
            that.btSerach.on("click", onButtonClick);

            that.btSelectAdvSerach = new YAHOO.widget.Button("btSelectAdvSerach");
            that.btSelectAdvSerach.on("click", function(){
                var animA = new YAHOO.util.Anim('accordTwo', {
                    height: {
                        to: 210
                    }
                });
                var animB = new YAHOO.util.Anim('accordOne', {
                    height: {
                        to: 0
                    }
                });
                // 48
                animA.duration = 0.3;
                animB.duration = 0.3;

                animA.animate();
                animB.animate();
                YAHOO.util.Dom.get('advSerachBox').style.display = "";
                YAHOO.util.Dom.get('simpleSerachBox').style.display = "none";
            });

            that.btSerachAdv = new YAHOO.widget.Button("btSerachAdv");
            that.btSerachAdv.on("click", onButtonClick);

            that.btSelectSimpleSerach = new YAHOO.widget.Button("btSelectSimpleSerach");
            that.btSelectSimpleSerach.on("click", function(){
                var animA = new YAHOO.util.Anim('accordTwo', {
                    height: {
                        to: 0
                    }
                });
                var animB = new YAHOO.util.Anim('accordOne', {
                    height: {
                        to: 100
                    }
                });
                // 48
                animA.duration = 0.3;
                animB.duration = 0.3;

                animA.animate();
                animB.animate();
                YAHOO.util.Dom.get('advSerachBox').style.display = "none";
                YAHOO.util.Dom.get('simpleSerachBox').style.display = "";
            });

            // Instantiate the AutoComplete
            autoCompleteGemeinde = new YAHOO.widget.AutoComplete("tbOrt","acGemeindeContainer", ON.dataSources.oDS);
            autoCompleteGemeinde.generateRequest = function(sQuery) {
                return "?method=autocomplete&field=Gemeinde&query=" + sQuery +"&kanton="+YAHOO.util.Dom.get('tbKanton').value;
            };

            var autoCompleteNameA = new YAHOO.widget.AutoComplete("IDtbAName","acNameContainerA", ON.dataSources.oDS);
            autoCompleteNameA.generateRequest = function(sQuery) {
                return "?method=autocomplete&field=Name&query=" + sQuery +"&kanton="+YAHOO.util.Dom.get('IDtbAKanton').value;
            };

            var autoCompleteGemeindeA = new YAHOO.widget.AutoComplete("IDtbAGemeinde","acGemeindeContainerA", ON.dataSources.oDS);
            autoCompleteGemeindeA.generateRequest = function(sQuery) {
                return "?method=autocomplete&field=Gemeinde&query=" + sQuery +"&kanton="+YAHOO.util.Dom.get('IDtbAKanton').value;
            };

            var autoCompleteOrtA = new YAHOO.widget.AutoComplete("IDtbAOrt","acOrtContainerA", ON.dataSources.oDS);
            autoCompleteOrtA.generateRequest = function(sQuery) {
                return "?method=autocomplete&field=Ort&query=" + sQuery +"&kanton="+YAHOO.util.Dom.get('IDtbAKanton').value;
            };

            var autoCompleteTeilgebietA = new YAHOO.widget.AutoComplete("IDtbATeilgebiet","acTeilgebietContainerA", ON.dataSources.oDS);
            autoCompleteTeilgebietA.generateRequest = function(sQuery) {
                return "?method=autocomplete&field=Teilgebiet&query=" + sQuery +"&kanton="+YAHOO.util.Dom.get('IDtbAKanton').value;
            };

            var autoCompleteBezirkA = new YAHOO.widget.AutoComplete("IDtbABezirk","acBezirkContainerA", ON.dataSources.oDS);
            autoCompleteBezirkA.generateRequest = function(sQuery) {
                return "?method=autocomplete&field=Bezirk&query=" + sQuery +"&kanton="+YAHOO.util.Dom.get('IDtbAKanton').value;
            };
            



        });
        layout.render();

        YAHOO.util.Event.on('tLeft', 'click', function(ev){
            Event.stopEvent(ev);
            layout.getUnitByPosition('left').toggle();
        });

        YAHOO.util.Event.on('closeLeft', 'click', function(ev){
            Event.stopEvent(ev);
            layout.getUnitByPosition('left').close();
        });

        layout.on('resize', function(){
            //Event.on('layout' resize', function(){
            //
            var _height = document.getElementById("layout-doc").clientHeight ;
            var _width = document.getElementById("tabview").clientWidth ;
            //var _width = document.getElementById("center1").clientWidth;

            YAHOO.util.Dom.setStyle('detailsTab', 'height', _height - 148 +"px");
            //YAHOO.util.Dom.setStyle('detailsTab', 'height', _height - 148 +"px");

            YAHOO.util.Dom.setStyle('map_canvas', 'height', _height - 148 +"px");
            YAHOO.util.Dom.setStyle('map_canvas', 'width', _width - 15 +"px");
            //YAHOO.util.Dom.setStyle('map_canvas', 'width', _width - 50 +"px");
            //if (that.map == undefined) {
            loadmap();
        //}

        //Resize Accordeon Buttons
        /*var _width = document.getElementById("left1").clientWidth;
			YAHOO.util.Dom.setStyle('btSelectSimpleSerach', 'width', _width +"px");
			YAHOO.util.Dom.setStyle('btSelectAdvSerach', 'width', _width  +"px");*/
        });

    };
    
    /**
     *Init and basic ELSTER specific implemenations
     * @constructor
     */
    this.init = function() {
        var callback = function() {
            // Load the css files and initialize the controls
            var cssUrls = [
            ELSTR.applicationData.config.host + '/jslib/elstr/' + LIBS.elstrVersion + '/assets/elstr.css',
            //LIBS.appVersion + '/shared/assets/shared.css',
            ELSTR.applicationData.config.host + '/' + LIBS.appVersion + '/' + LIBS.appName + '/assets/' + LIBS.appName + '.css' ];
            ELSTR.loader("css", cssUrls);

            // Load the script files and start application
            var scriptUrls = [
            '/jslib/elstr/' + LIBS.elstrVersion + '/build/Language.js',
            '/jslib/elstr/' + LIBS.elstrVersion + '/build/User.js',
            '/jslib/var/latlng_coords.js',
            '/jslib/markercluster/1.0/src/markerclusterer_packed.js',
            '/' + LIBS.appVersion + '/shared/DataSources.js',
            '/' + LIBS.appVersion + '/shared/Formatters.js',
            //LIBS.appVersion + '/' + LIBS.appName + '/widgets/Settings.js',
            '/' + LIBS.appVersion + '/' + LIBS.appName + '/widgets/DropDownDataBound.js',
            '/' + LIBS.appVersion + '/' + LIBS.appName + '/widgets/Contribution.js'];
            ELSTR.loader("script", scriptUrls, function() {
                YAHOO.util.Event.onDOMReady(function() {
                    // Init the language class and panel
                    ELSTR.lang = new ELSTR.Language();
                    ELSTR.lang.init("/services/ELSTR_LanguageServer",ELSTR.applicationData.language, false, "");

                    that.initializeControls();
                    that.startApplication();
                });
            });
        }
        ELSTR.loadAppData(LIBS.appName, callback);
    }
        
    this.startApplication = function(){
        
        try
        {
            // Init the user and force auth
            ON.user = new ELSTR.User();
            ON.user.onAfterAuthEvent.subscribe(function(type, args){

                });
            var isAuthorizationRequired = false;
            //ON.user.init(isAuthorizationRequired);

            // Init Widgets
            //ON.settings = new ON.Settings();
            //ON.settings.init();
            ON.contribution = new ON.Contribution();
            ON.contribution.initialize();
            
            // Show the Application
            showPage('on-application');
        }
        catch (e)
        {
            that.handleError(e);
        }
    }


    this.handleError = function(e) {
        try { // workaround for detecting undefined variable ELSTR.lastException in catch
            if (NP.lastException==undefined) {
                ELSTR.lastException="noexception";
            }
        }
        catch(e2) {
            ELSTR.lastException="noexception";
        }

        if (JSON.stringify(ELSTR.lastException)!=JSON.stringify(e))	{ // workaround to avoid multiple identical messages
            ELSTR.lastException = e;
            alert (e.message + " on line " + e.lineNumber + " in " + e.fileName);
        }
    }
}


// ////////////////////////////////////////////////////////////
// Start the application here and add main Object to Namespace

ON.app = new ON.Onapp();

ON.loader = new YAHOO.util.YUILoader( {
    base : '/jslib/yui/' + LIBS.yuiVersion + '/build/',
    loadOptional : true,
    filter: LIBS.yuiFilter,
    combine: LIBS.yuiCombine,
    allowRollup : true
});

ON.loader.addModule( {
    name : 'ELSTR',
    type : 'js',
    varName : "ELSTR",
    fullpath : '/jslib/elstr/' + LIBS.elstrVersion + '/build/Elstr.js',
    requires : [ 'yahoo', 'dom', 'event', 'json', 'get', 'datasource' ]
});

ON.loader.require("yahoo", "dom", "event", "button", "container", "connection", "animation",
    "datasource", "datatable", "json", "animation", "element", "resize", "layout", "tabview", "autocomplete");
ON.loader.require("reset", "fonts", "grids");
ON.loader.require("ELSTR");
ON.loader.insert( {
    onSuccess : ON.app.init
});

//ON.myOnApp = new ON.Onapp();