var JS_PHP_PROVIDER_URL='ebcbgdapi';//const { PARAM_GET_HTML } = require("./ebc-app");

function dob(oid) {
    return document.getElementById(oid);
}

function initDataClasses(map, tiles, params = null) {
    
    const C_PARAM_SELECTOR_DETAIL_PANEL = 5001;
    
    const C_PARAM_SEL_TEMPLATE_LOCATION = 6001;
    const C_PARAM_TEMPLATESEL_MARKER_DETAIL = 6002;
    const C_PARAM_TEMPLATESEL_SEARCH_OPT = 6003;
    const C_PARAM_TEMPLATESEL_LOAD_GPX = 6004;
    const C_PARAM_TEMPLATESEL_UPLOAD_GPX = 6005;
    const C_PARAM_TEMPLATESEL_EDIT_LOCATION = 6006;
    const C_PARAM_TEMPLATESEL_ADD_LOCATION = 6007;
    const C_PARAM_TEMPLATESEL_DELETE_LOCATION = 6008;
    const C_PARAM_TEMPLATESEL_POST_LOCATION = 6009;
    const C_PARAM_TEMPLATESEL_POST_DELETE_LOCATION = 6010;
    const C_PARAM_TEMPLATESEL_POST_ROUTE_PLANNER = 6011;
    const C_PARAM_TEMPLATESEL_POST_TRIP_RECORDING = 6012;
    const C_PARAM_TEMPLATESEL_MARKER_GROUP = 6013;
    const C_PARAM_TEMPLATESEL_REST_MARKER = 6014;
    const C_PARAM_TEMPLATESEL_ADD_PICTURE = 6015;
    const C_PARAM_TEMPLATESEL_POST_PICTURE = 6016;

    const C_PARAM_LATITUDE = 2001;
    const C_PARAM_LONGITUDE = 2002;
    const C_PARAM_LOCATION_TYPE = 2003;
    const C_PARAM_OSM_ID = 2004;
    const C_PARAM_TEXT_1 = 2005;
    const C_PARAM_TEXT_2 = 2006;
    const C_PARAM_REC_ID = 2007;
    const C_PARAM_TEXT_3 = 2028;
    const C_PARAM_PICTURE_KEY = 2029;
    
    const C_PARAM_DETADM_CMD = 2008;
    const C_PARAM_DETADM_CMD_POST_MARKER = 2101;
    const C_PARAM_DETADM_CMD_DEL_MARKER = 2102;
    const C_PARAM_DETADM_CMD_POST_MARKER_PICTURE = 2103;
    const C_PARAM_DETADM_CMD_DEL_MARKER_PICTURE = 2104;

    const C_PARAM_DET_MARKER_ZOOM = 2009;
    const C_PARAM_DET_MARKER_TYPE = 2010;

    const C_MARKER_TYPE_SPRING = 1001;
    const C_MARKER_TYPE_BIKE_REPAIR = 1002;
    const C_MARKER_TYPE_CHARGERS = 1003;
    const C_MARKER_TYPE_PARKING = 1004;
    const C_MARKER_TYPE_MARKETPLACE = 1005;
    const C_MARKER_TYPE_MEDICAL_FACILITY = 1006;
    const C_MARKER_TYPE_FOOD = 1007;
    const C_MARKER_TYPE_RENTAL = 1008;
    const C_MARKER_TYPE_SHELTER = 1009;
    const C_MARKER_TYPE_HOUSING = 1010;
    const C_MARKER_TYPE_PEAK = 2001;

    const C_MARKER_TYPE_CHARGERS_GROUP = 3003;
    const C_MARKER_TYPE_CHARGERS_GROUP_S = 3004;

    const C_ICON_BW_LOCATION_SMALL = 'img/bw-location-small.png';
    const C_ICON_BW_CHARGER_SMALL = 'img/bw-charger-small.png';
    const C_ICON_BW_SPRING_SMALL = 'img/bw-spring-small.png';
    const C_ICON_BW_HOSPITAL_SMALL = 'img/bw-hospital-small.png';
    const C_ICON_BW_FOOD_SMALL = 'img/bw-restaurant-small.png';
    const C_ICON_BW_PARKING_SMALL = 'img/bw-parking-small.png';
    const C_ICON_BW_PEAK_SMALL = 'img/bw-peak-small.png';
    const C_ICON_BW_HOTEL_SMALL = 'img/bw-hotel-small.png';
    const C_ICON_BW_SERVICE_SMALL = 'img/bw-service-small.png';
    const C_ICON_BW_MARKETPLACE_SMALL = 'img/bw-marketplace-small.png';
    const C_ICON_BW_HOUSING_SMALL = 'img/bw-housing-small.png';
    const C_ICON_BW_CITY_SMALL = 'img/bw-city-small.png';

    const C_MARKER_DATA_TYPE_PICTURE = 101;
    const C_MARKER_DATA_TYPE_TEXT = 102;
    const C_MARKER_DATA_TYPE_230V = 111;
    const C_MARKER_DATA_TYPE_USB = 112;
    const C_MARKER_DATA_TYPE_BOSCH = 113;
    const C_MARKER_DATA_TYPE_SHIMANO = 114;
    const C_MARKER_DATA_TYPE_YAMAHA = 115;
    const C_MARKER_DATA_TYPE_PANASONIC = 116;
    const C_MARKER_DATA_TYPE_BOSCH_SMART = 117;
    const C_MARKER_DATA_TYPE_WIFI = 118;
    const C_MARKER_DATA_TYPE_UNI = 119;
    const C_MARKER_DATA_TYPE_PRODUCER = 120;

    let use_location_pointer = params && params.getValueByName('USE_LOCATION_POINTER') > 0;

    let EbcLocations = P.EbcObject.extend(P.EbcObject, {
		
        className: 'EbcLocations',

        _loc: [],
        _on_refresh: null,

        options: {
        },
                    
        initialize: function (on_refresh) {
            P.EbcLogger.v('initialize', this);
            this._on_refresh = on_refresh;
        },

        destroy: function () {
        },

        getLocation: function (ix) {
            return (this._values.length < ix) ? null : this._values[ix];
        },

        deleteLocation: function (ix) {
            if (ix >= this.getCount())
                return;
            delete this._loc[ix];
            this._update();
        },

        addLocation: function (lat, lon, alt) {
            P.EbcLogger.v('loc: ' + lat + ' ' + lon + ' ' + alt, this, 'addLocation');				
            this._loc.push([lat, lon, alt]);
            this._update();
        },

        getCount: function () {
            return this._loc.length;
        },

        _update: function () {
            if (this._on_refresh)
                this._on_refresh(this);
        },

        showCurrentLocation: function () {
            leafletmap.locate({setView: true, maxZoom: 15});
        },

    });


    let i_detail_panel = P.i(P.EbcAjaxPanel, {

        className: 'i_detail_panel',

        _visible_tab: 0,
        _geolocation_api: null,
        _permission_api: null,
        _target_point_img: null,
        _map: null,
        _tiles: null,
        _location_latlng: null,

        options: {
            instance_id: 'i_detail_panel',
            container_id: 'detail_panel',
            provider_url: JS_PHP_PROVIDER_URL,
            has_close_button: true,
            use_post: true,
            json_res: false,
            TAB_LOCATION: 0,
            TAB_NEAREST: 1,
            TAB_TRIP_RECORDING: 2,
            TAB_CURR_LOCATION: 3,
            TAB_LOAD_GPX: 4,
            TAB_EDIT_LOCATION: 5,
            TAB_ADD_LOCATION: 6,
            TAB_DELETE_LOCATION: 7,
            TAB_ROUTE_PLANNER: 8,
            TAB_GROUP: 9,
        },

        initialize: function (argc, argv) {
            P.logger.d(argc + '/' + argv.length + '/' + this.options.container_id, this, 'initialize');
            P.EbcAjaxPanel.initialize.call(this, this.options.container_id, this.options.provider_url);
            this._map = argv[0];
            this._tiles = argv[1];
            this._target_point_img = document.getElementById('leaflet_target_point');
        },

        destroy: function () {
            P.EbcAjaxPanel.destroy.call(this)
        },

        show: function () {
            this._setVisibleTab(this._visible_tab);
            P.EbcAjaxPanel.show.call(this);
        },

        hide: function () {
            this._hide_target_pointer();
            P.EbcAjaxPanel.hide.call(this);
        },

        html: function () {
            return P.EbcAjaxPanel.html.call(this);
        },

        instanceId: function () {
            //P.logger.v('instanceId ' + this.options.instance_id, this);
            return this.options.instance_id;
        },

        showLocationTab: function () {
            this._visible_tab = this.options.TAB_LOCATION;
            this.show();
        },

        showLocation: function (latlng = null) {
            this._visible_tab = this.options.TAB_LOCATION;
            if (!latlng)
                latlng = L.latLng(map.getCenter());
            if (this._location_latlng != null && this._location_latlng.lat == latlng.lat && this._location_latlng.lon == latlng.lon)
                return;
            this._location_latlng = latlng;
            setTimeout((latlng, t) => {
                let i_params_obj = P.i(P.EbcAjaxParams, {});
                i_params_obj.addValue(t.options.PARAM_SELECTOR, C_PARAM_SELECTOR_DETAIL_PANEL);
                i_params_obj.addValue(t.options.PARAM_TEMPLATE_SELECTOR, C_PARAM_SEL_TEMPLATE_LOCATION);
                i_params_obj.addValue(C_PARAM_LATITUDE, latlng.lat);
                i_params_obj.addValue(C_PARAM_LONGITUDE, latlng.lng);
                //i_params_obj.addValue(this.options.PARAM_SEARCH_OPT, 1);
                t._sendCommand(this.options.PARAM_GET_HTML, i_params_obj, null);
                t._location_latlng = null;
                t.setTitle('Location information', 'img/bw-target-small.png');
            }, 200, latlng, this);
            this.show();
            /*
            if (useResponsive()) {
                closeInfoPanel();
            }
            */
        },

        _getMarkerIcon(type) {
            switch (type) {
                case C_MARKER_TYPE_SPRING: return C_ICON_BW_SPRING_SMALL;
                case C_MARKER_TYPE_BIKE_REPAIR: return C_ICON_BW_SERVICE_SMALL
                case C_MARKER_TYPE_CHARGERS: return C_ICON_BW_CHARGER_SMALL
                case C_MARKER_TYPE_PARKING: return C_ICON_BW_PARKING_SMALL
                case C_MARKER_TYPE_MARKETPLACE: return C_ICON_BW_MARKETPLACE_SMALL
                case C_MARKER_TYPE_MEDICAL_FACILITY: return C_ICON_BW_HOSPITAL_SMALL
                case C_MARKER_TYPE_FOOD: return C_ICON_BW_FOOD_SMALL
                //case C_MARKER_TYPE_RENTAL: return C_ICON_BW_
                //case C_MARKER_TYPE_SHELTER: return C_ICON_BW_
                case C_MARKER_TYPE_HOUSING: return C_ICON_BW_HOUSING_SMALL
                case C_MARKER_TYPE_PEAK: return C_ICON_BW_PEAK_SMALL
                default: return '';
            }
        },

        showMarker: function (rec_id, type) {
            this._visible_tab = this.options.TAB_NEAREST;
            let i_params_obj = P.i(P.EbcAjaxParams, {});
            i_params_obj.addValue(this.options.PARAM_SELECTOR, C_PARAM_SELECTOR_DETAIL_PANEL);
            i_params_obj.addValue(this.options.PARAM_TEMPLATE_SELECTOR, C_PARAM_TEMPLATESEL_MARKER_DETAIL);
            i_params_obj.addValue(C_PARAM_REC_ID, rec_id);
            this._sendCommand(this.options.PARAM_GET_HTML, i_params_obj, null);
            this.show();
            this.setTitle('POI information', this._getMarkerIcon(type));
            if (useResponsive()) {
                closeInfoPanel();
            }
        },

        showMarkerGroup: function (rec_id, marker_type, zoom) {
            this._visible_tab = this.options.TAB_GROUP;
            let i_params_obj = P.i(P.EbcAjaxParams, {});
            i_params_obj.addValue(this.options.PARAM_SELECTOR, C_PARAM_SELECTOR_DETAIL_PANEL);
            i_params_obj.addValue(this.options.PARAM_TEMPLATE_SELECTOR, C_PARAM_TEMPLATESEL_MARKER_GROUP);
            i_params_obj.addValue(C_PARAM_REC_ID, rec_id);
            i_params_obj.addValue(C_PARAM_DET_MARKER_ZOOM, zoom);
            i_params_obj.addValue(C_PARAM_DET_MARKER_TYPE, marker_type);
            this._sendCommand(this.options.PARAM_GET_HTML, i_params_obj, null);
            this.show();
            this.setTitle('Nabíjecí stanice');
            if (useResponsive()) {
                closeInfoPanel();
            }
        },

        showLoadGpx: function () {
            this._visible_tab = this.options.TAB_LOAD_GPX;
            let i_params_obj = P.i(P.EbcAjaxParams, {});
            i_params_obj.addValue(this.options.PARAM_SELECTOR, C_PARAM_SELECTOR_DETAIL_PANEL);
            i_params_obj.addValue(this.options.PARAM_TEMPLATE_SELECTOR, C_PARAM_TEMPLATESEL_LOAD_GPX);
            this._sendCommand(this.options.PARAM_GET_HTML, i_params_obj, null);
            this.show();
            this.setTitle('Načíst GPX');
            if (useResponsive()) {
                closeInfoPanel();
            }    
        },

        _staticSelectText1: function () {
            let o = dob('text1');
            if (o) 
                o.focus();
        },

        _staticSelectText3: function () {
            let o = dob('text3');
            if (o) 
                o.focus();
        },

        _staticInvalidateMap: function () {
            P.logger.d('Invalidate markers', this, '_staticInvalidateMap');
            L.map.invalidateMarkers();
        },

        showEditLocation: function (ebc_search_id) {
            this._visible_tab = this.options.TAB_EDIT_LOCATION;
            let i_params_obj = P.i(P.EbcAjaxParams, {});
            i_params_obj.addValue(this.options.PARAM_SELECTOR, C_PARAM_SELECTOR_DETAIL_PANEL);
            i_params_obj.addValue(this.options.PARAM_TEMPLATE_SELECTOR, C_PARAM_TEMPLATESEL_EDIT_LOCATION);
            i_params_obj.addValue(C_PARAM_REC_ID, ebc_search_id);            
            this._sendCommand(this.options.PARAM_GET_HTML, i_params_obj, this._staticSelectText1);
            this.show();
            this.setTitle('Upravit místo');
        },

        showAddLocation: function (lat, lon, type = null) {
            this._visible_tab = this.options.TAB_ADD_LOCATION;
            let i_params_obj = P.i(P.EbcAjaxParams, {});
            i_params_obj.addValue(this.options.PARAM_SELECTOR, C_PARAM_SELECTOR_DETAIL_PANEL);
            i_params_obj.addValue(this.options.PARAM_TEMPLATE_SELECTOR, C_PARAM_TEMPLATESEL_ADD_LOCATION);
            i_params_obj.addValue(C_PARAM_LATITUDE, lat);            
            i_params_obj.addValue(C_PARAM_LONGITUDE, lon);                      
            i_params_obj.addValue(C_PARAM_LOCATION_TYPE, type);            
            this._sendCommand(this.options.PARAM_GET_HTML, i_params_obj, this._staticSelectText1);
            this.show();
            this.setTitle('Přidat místo');
        },

        showAddPicture: function (lat, lon, parent_id) {
            this._visible_tab = this.options.TAB_ADD_LOCATION;
            let i_params_obj = P.i(P.EbcAjaxParams, {});
            i_params_obj.addValue(this.options.PARAM_SELECTOR, C_PARAM_SELECTOR_DETAIL_PANEL);
            i_params_obj.addValue(this.options.PARAM_TEMPLATE_SELECTOR, C_PARAM_TEMPLATESEL_ADD_PICTURE);
            i_params_obj.addValue(C_PARAM_LATITUDE, lat);            
            i_params_obj.addValue(C_PARAM_LONGITUDE, lon);                      
            i_params_obj.addValue(C_PARAM_REC_ID, parent_id);            
            this._sendCommand(this.options.PARAM_GET_HTML, i_params_obj, this._staticSelectText3);
            this.show();
            this.setTitle('Add picture');
        },

        _postSaveLocationCb: function (xobj, status) {
            let json = JSON.parse(xobj.responseText);
            if (json.res == 0) {
                xobj.t.showMarker(json.rid);
            }
            //console.log(Object.values(xobj.t._map));
            // TODO invalidate only this marker
            P.logger.d('Invalidate markers ' + xobj.t._tiles, xobj.t, '_postSaveLocationCb');
            xobj.t._map.invalidateMarkers(xobj.t._map, xobj.t._tiles);
        },

        _postSavePictureCb: function (xobj, status) {
            let json = JSON.parse(xobj.responseText);
            if (json.res == 0) {
                xobj.t.showMarker(json.rid);
            }
            //console.log(Object.values(xobj.t._map));
            // TODO invalidate only this marker
            //P.logger.d('Invalidate markers ' + xobj.t._tiles, xobj.t, '_postSaveLocationCb');
            //xobj.t._map.invalidateMarkers(xobj.t._map, xobj.t._tiles);
        },

        _postDeleteLocationCb: function (xobj, status) {
            let json = JSON.parse(xobj.responseText);
            if (json.res == 0) {
                xobj.t.showLocation();
            } else {
                // TODO show error

            }
            //console.log(Object.values(xobj.t._map));
            // TODO invalidate only this marker
            P.logger.d('Invalidate markers ' + xobj.t._tiles, xobj.t, '_postDeleteLocationCb');
            xobj.t._map.invalidateMarkers(xobj.t._map, xobj.t._tiles);
        },

        postSaveLocation: function (lat, lon, type, text1, text2, id = null) {
            let i_params_obj = P.i(P.EbcAjaxParams, {});
            i_params_obj.addValue(this.options.PARAM_SELECTOR, C_PARAM_SELECTOR_DETAIL_PANEL);
            i_params_obj.addValue(this.options.PARAM_TEMPLATE_SELECTOR, C_PARAM_TEMPLATESEL_POST_LOCATION);
            i_params_obj.addValue(C_PARAM_REC_ID, id == null ? 0 : id);            
            i_params_obj.addValue(C_PARAM_LATITUDE, lat);            
            i_params_obj.addValue(C_PARAM_LONGITUDE, lon);            
            i_params_obj.addValue(C_PARAM_LOCATION_TYPE, type);            
            i_params_obj.addValue(C_PARAM_TEXT_1, text1);            
            i_params_obj.addValue(C_PARAM_TEXT_2, text2);       
            i_params_obj.addValue(C_PARAM_DETADM_CMD, C_PARAM_DETADM_CMD_POST_MARKER);
            if (dob(C_MARKER_DATA_TYPE_TEXT))
                i_params_obj.addValue(C_MARKER_DATA_TYPE_TEXT, dob(C_MARKER_DATA_TYPE_TEXT).value);
            if (dob(C_MARKER_DATA_TYPE_PRODUCER))
                i_params_obj.addValue(C_MARKER_DATA_TYPE_PRODUCER, dob(C_MARKER_DATA_TYPE_PRODUCER).value);
            if (dob(C_MARKER_DATA_TYPE_230V) && dob(C_MARKER_DATA_TYPE_230V).checked)
                i_params_obj.addValue(C_MARKER_DATA_TYPE_230V, dob(C_MARKER_DATA_TYPE_230V).value);
            if (dob(C_MARKER_DATA_TYPE_USB) && dob(C_MARKER_DATA_TYPE_USB).checked)
                i_params_obj.addValue(C_MARKER_DATA_TYPE_USB, dob(C_MARKER_DATA_TYPE_USB).value);
            if (dob(C_MARKER_DATA_TYPE_BOSCH) && dob(C_MARKER_DATA_TYPE_BOSCH).checked)
                i_params_obj.addValue(C_MARKER_DATA_TYPE_BOSCH, dob(C_MARKER_DATA_TYPE_BOSCH).value);
            if (dob(C_MARKER_DATA_TYPE_SHIMANO) && dob(C_MARKER_DATA_TYPE_SHIMANO).checked)
                i_params_obj.addValue(C_MARKER_DATA_TYPE_SHIMANO, dob(C_MARKER_DATA_TYPE_SHIMANO).value);
            if (dob(C_MARKER_DATA_TYPE_YAMAHA) && dob(C_MARKER_DATA_TYPE_YAMAHA).checked)
                i_params_obj.addValue(C_MARKER_DATA_TYPE_YAMAHA, dob(C_MARKER_DATA_TYPE_YAMAHA).value);
            if (dob(C_MARKER_DATA_TYPE_PANASONIC) && dob(C_MARKER_DATA_TYPE_PANASONIC).checked)
                i_params_obj.addValue(C_MARKER_DATA_TYPE_PANASONIC, dob(C_MARKER_DATA_TYPE_PANASONIC).value);
            if (dob(C_MARKER_DATA_TYPE_BOSCH_SMART) && dob(C_MARKER_DATA_TYPE_BOSCH_SMART).checked)
                i_params_obj.addValue(C_MARKER_DATA_TYPE_BOSCH_SMART, dob(C_MARKER_DATA_TYPE_BOSCH_SMART).value);
            if (dob(C_MARKER_DATA_TYPE_WIFI) && dob(C_MARKER_DATA_TYPE_WIFI).checked)
                i_params_obj.addValue(C_MARKER_DATA_TYPE_WIFI, dob(C_MARKER_DATA_TYPE_WIFI).value);
            if (dob(C_MARKER_DATA_TYPE_UNI) && dob(C_MARKER_DATA_TYPE_UNI).checked)
                i_params_obj.addValue(C_MARKER_DATA_TYPE_UNI, dob(C_MARKER_DATA_TYPE_UNI).value);
            this._sendCommand(this.options.PARAM_GET_JSON, i_params_obj, this._postSaveLocationCb);
            this.show();
            this.setTitle('POI information');
        },

        postSavePicture: function (text3, rid) {
            //this._sendCommand(this.options.PARAM_GET_JSON, i_params_obj, this._postSavePictureCb);

            let file = document.getElementById('picture_file');
            if (file == null || file.files == null || file.files.length == 0) {
                P.logger.w('No file', this, 'postSavePicture');
                return;
            }
            if (file.files.length > 0) {
                if (file.files[0].size > 8000000)
                    alert("Picture file is too large");
                else {
                    P.logger.v('length: ' + file.files.length, this, 'postSavePicture');
                    let i_params_obj = P.i(P.EbcAjaxParams, {});
                    //i_params_obj.addValue(this.options.PARAM_SELECTOR, C_PARAM_SELECTOR_DETAIL_PANEL);
                    //i_params_obj.addValue(this.options.PARAM_TEMPLATE_SELECTOR, C_PARAM_TEMPLATESEL_POST_PICTURE);
                    i_params_obj.addValue(C_PARAM_REC_ID, rid);            
                    i_params_obj.addValue(C_PARAM_TEXT_3, text3);       
                    i_params_obj.addValue(C_PARAM_DETADM_CMD, C_PARAM_DETADM_CMD_POST_MARKER_PICTURE);
                    this._ajaxUpload(this.options.provider_url, file, C_PARAM_SELECTOR_DETAIL_PANEL, C_PARAM_TEMPLATESEL_POST_PICTURE, this._postSavePictureCb, i_params_obj);
                    this.show();
                    this.setTitle('Add picture - result');
                }
            }

        },

        showDeleteLocation: function (ebc_search_id) {
            this._visible_tab = this.options.TAB_DELETE_LOCATION;
            let i_params_obj = P.i(P.EbcAjaxParams, {});
            i_params_obj.addValue(this.options.PARAM_SELECTOR, C_PARAM_SELECTOR_DETAIL_PANEL);
            i_params_obj.addValue(this.options.PARAM_TEMPLATE_SELECTOR, C_PARAM_TEMPLATESEL_DELETE_LOCATION);
            i_params_obj.addValue(C_PARAM_REC_ID, ebc_search_id);            
            this._sendCommand(this.options.PARAM_GET_HTML, i_params_obj, null);
            this.show();
            this.setTitle('Smazat místo (nelze vrátit!)');
        },

        showRoutePlanner: function (ebc_search_id) {
            this._visible_tab = this.options.TAB_ROUTE_PLANNER;
            let i_params_obj = P.i(P.EbcAjaxParams, {});
            i_params_obj.addValue(this.options.PARAM_SELECTOR, C_PARAM_SELECTOR_DETAIL_PANEL);
            i_params_obj.addValue(this.options.PARAM_TEMPLATE_SELECTOR, C_PARAM_TEMPLATESEL_POST_ROUTE_PLANNER);
            //i_params_obj.addValue(C_PARAM_REC_ID, ebc_search_id);            
            this._sendCommand(this.options.PARAM_GET_JSON, i_params_obj, null);
            this.refreshRouterPlanner();
            this.setTitle('Plánování trasy');
        },

        showTripRecording: function (ebc_search_id) {
            this._visible_tab = this.options.TAB_TRIP_RECORDING;
            let i_params_obj = P.i(P.EbcAjaxParams, {});
            i_params_obj.addValue(this.options.PARAM_SELECTOR, C_PARAM_SELECTOR_DETAIL_PANEL);
            i_params_obj.addValue(this.options.PARAM_TEMPLATE_SELECTOR, C_PARAM_TEMPLATESEL_POST_TRIP_RECORDING);
            //i_params_obj.addValue(C_PARAM_REC_ID, ebc_search_id);            
            this._sendCommand(this.options.PARAM_GET_JSON, i_params_obj, null);
            this.refreshTripRecording();
            this.setTitle('Záznam trasy');
        },

        postDeleteLocation: function (ebc_search_id) {
            let i_params_obj = P.i(P.EbcAjaxParams, {});
            i_params_obj.addValue(this.options.PARAM_SELECTOR, C_PARAM_SELECTOR_DETAIL_PANEL);
            i_params_obj.addValue(this.options.PARAM_TEMPLATE_SELECTOR, C_PARAM_TEMPLATESEL_POST_DELETE_LOCATION);
            i_params_obj.addValue(C_PARAM_REC_ID, ebc_search_id);            
            i_params_obj.addValue(C_PARAM_DETADM_CMD, C_PARAM_DETADM_CMD_DEL_MARKER);
            this._sendCommand(this.options.PARAM_GET_HTML, i_params_obj, this._postDeleteLocationCb);
            this.show();
        },

        postDeleteImage: function (marker_rid, key) {
            let i_params_obj = P.i(P.EbcAjaxParams, {});
            i_params_obj.addValue(this.options.PARAM_SELECTOR, C_PARAM_SELECTOR_DETAIL_PANEL);
            i_params_obj.addValue(this.options.PARAM_TEMPLATE_SELECTOR, C_PARAM_TEMPLATESEL_POST_DELETE_LOCATION);
            i_params_obj.addValue(C_PARAM_REC_ID, marker_rid);        
            i_params_obj.addValue(C_PARAM_PICTURE_KEY, key);    
            i_params_obj.addValue(C_PARAM_DETADM_CMD, C_PARAM_DETADM_CMD_DEL_MARKER_PICTURE);
            this._sendCommand(this.options.PARAM_GET_HTML, i_params_obj, this._postSavePictureCb);
            this.show();
        },

        uploadGpx: function () {
            let file = document.getElementById('gpx_file');
            if (file == null || file.files == null) {
                P.logger.w('No file', this, 'uploadGpx');
                return;
            }
            if (file.files.length > 0) {
                P.logger.v('length: ' + file.files.length, this, 'uploadGpx');
                this._ajaxUpload(this.options.provider_url, file, C_PARAM_SELECTOR_DETAIL_PANEL, C_PARAM_TEMPLATESEL_UPLOAD_GPX);
            }
        },

        /*
        showTripRecording: function () {
            this._visible_tab = this.options.TAB_TRIP_RECORDING;
            let latlng = L.latLng(map.getCenter());
            if (!this._geolocation_api)
                this._geolocation_api = navigator.geolocation;
            if (this._geolocation_api) {                
                let i_params_obj = P.i(P.EbcAjaxParams, {}, null);
                i_params_obj.addValue(this.options.PARAM_SELECTOR, this.options.PARAM_SELECTOR_DETAIL_PANEL);
                i_params_obj.addValue(this.options.PARAM_TEMPLATE_SELECTOR, this.options.PARAM_TEMPLATESEL_MARKER_DETAIL);
                i_params_obj.addValue(this.options.PARAM_LATITUDE, latlng.lat);
                i_params_obj.addValue(this.options.PARAM_LONGITUDE, latlng.lng);
            } else {
                P.logger.w('GEO api is not available', this);
            }
            this.show();
        },

        showCurrLocation: function () {
            this._visible_tab = this.options.TAB_CURR_LOCATION;
            if (this._requestGeolocationPermission()) {
                //let latlng = L.latLng(map.getCenter());
                if (!this._geolocation_api)
                    this._geolocation_api = navigator.geolocation;
                if (this._geolocation_api) {                
                    P.logger.v('call getCurrentPosition...', this);
                    let geoSettings = { enableHighAccuracy: false, maximumAge : 30000, timeout : 20000 };
                    this._geolocation_api.getCurrentPosition(this._currLocationCb, this._locationErrCb, geoSettings);
                } else {
                    P.logger.w('GEO api is not available', this);
                }
            }
            this.show();
        },
        */

        onReceiveData: function (data) {
            //P.logger.v(data, this, 'onReceiveData');
            this._updateContent(data);
        },

        visibleTab: function (tab) {
            return this.visible() && this._visible_tab == tab;
        },

        _hide_target_pointer: function () {
            /*
            if (this._target_point_img != null) {
                this._target_point_img.style.display = 'none';
            }
            */
        },

        _show_target_pointer: function () {
            /*
            if (use_location_pointer && this._target_point_img != null) {
                this._target_point_img.style.display = 'grid';
            }
            */
        },

        _setVisibleTab(tab) {
            this._visible_tab = tab;
            if (this._visible_tab == this.options.TAB_LOCATION || this._visible_tab == this.options.TAB_ADD_LOCATION)
                this._show_target_pointer();
            else
                this._hide_target_pointer();
        },

        _currLocationCb: function (position) {
            if (i_detail_panel._visible_tab != i_detail_panel.options.TAB_CURR_LOCATION)
                return;
            let html = '';
            if (position) {
                html += 'lat: ' + position.latitude;
                html += 'lon: ' + position.longitude;
            }
            i_detail_panel._div.innerHTML = html;
        }, 
        
        _onTimeoutCb: function (xmlhttp) {
            try {
                EbcLogger.v(this.className, this, '_onTimeoutCb');
                this._hideProgress();
            } catch (e) {
                EbcLogger.w(e, this, '_onTimeoutCb');
            }			
        },

        _locationErrCb: function (error) {
            P.logger.w('GEO api error: ' + error.code);
        },

        _initPermissionApi: function () {
            if (!this._permission_api)
                this._permission_api = navigator.permissions;
            if (this._permission_api)
                return true;
            else {
                P.logger.w('Permission api is not available', this);
                return this._permission_api != null;
            }
        },

        _requestGeolocationPermission: function () {
            if (this._initPermissionApi()) {
                this._permission_api.query({name:'geolocation'}).then(function(result) {
                    P.logger.i('GEO permission state: ' + result.state);
                    if (result.state === "denied") {
                        //this._permission_api.request()
                    }
                    result.onchange = function() {
                        P.logger.i('GEO permission state: ' + result.state);
                    }
                    return true;
                });
            }  
            return false;
        },

        _revokeGeolocationPermission: function () {
            if (this._initPermissionApi()) {
                this._permission_api.revoke({name:'geolocation'}).then(function(result) {
                    P.logger.i('GEO permission state: ' + result.state);
                });
            }
        },

        updateRecordingTab: function (locations) {

        },

    }, map, tiles);
    

    let i_trip_recording = P.i(EbcLocations, {

        className: 'i_trip_recording',

    }, null); 


    //detail_panel.hide();
    i_detail_panel.hide();
    window.i_detail_panel = i_detail_panel;
    window.i_trip_recording = i_trip_recording;
    
    /*
    let i_info_panel = P.i(P.EbcAjaxPanel, {

        className: 'i_info_panel',

        _visible_tab: 0,

        options: {
            instance_id: 'i_info_panel',
            container_id: 'info_panel',
            provider_url: 'ebcapi.php',
            has_close_button: true,
            use_post: true,
            json_res: false,
            TAB_LOCATION: 0,
        },

        initialize: function (testparam) {
            P.logger.v('initialize ' + testparam + '/' + this.options.container_id, this);
            P.EbcAjaxPanel.initialize.call(this, this.options.container_id, this.options.provider_url);
            //this.callInitHooks();
        },

        destroy: function () {
            P.EbcAjaxPanel.destroy.call(this)
        },

        html: function () {
            return P.EbcAjaxPanel.html.call(this);
        },

        instanceId: function () {
            //P.logger.v('instanceId ' + this.options.instance_id, this);
            return this.options.instance_id;
        },

        showSearchTab: function () {
            this.show();
        },

        showHelpTab: function () {
            this.show();
        },

        showAboutTab: function () {
            this.show();
        },

        onReceiveData: function (data) {
            P.logger.v(data, this, 'onReceiveData');
            this._updateContent(data);
        },

        visibleTab: function (tab) {
            return this.visible() && this._visible_tab == tab;
        },

    }, 'test');
    
    //i_info_panel.hide();
    window.i_info_panel = i_info_panel;
    */
 
    //console.log(Object.values(i_detail_panel));
    //console.log(detail_panel._div);
    //console.log(Object.values(P.EbcAjaxPanel));
    //detail_panel.call(detail_panel, 'detail_panel_div');
    //console.log(Object.values(detail_panel));
    //detail_panel.initialize('detail_panel_div'); // TODO
    //document.getElementById('detail_panel_div').innerHTML = detail_panel.html();
    //detail_panel.show();
    

}