(function($){

    var soundmap = window.Soundmap || {}

    _.extend(soundmap,	{

        map: undefined,
        layers:{},

        initMap: function(){

								mapboxUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w';
						var grayscale = L.tileLayer(mapboxUrl, {id: 'mapbox/light-v10'}),
					  		streets   = L.tileLayer(mapboxUrl, {id: 'mapbox/streets-v11'});
            this.map = L.map('map_canvas_options',{center: [this.origin.lat, this.origin.lng], zoom: this.origin.zoom, layers: [grayscale,streets]});
            this.map.addControl(
                new L.Control.Layers(
                    {
                        'Grayscale':grayscale,
                        'Streets': streets
                    }, {}
                )
            );


            this.map.addEventListener('dragend', this.mapDrag, this);
            this.map.addEventListener('zoomend', this.mapZoom, this);
            this.map.addEventListener('baselayerchange', this.layerChange, this);

            this.initEvents();
        },

        layerChange: function(event){
            var _t = event.layer._type;
            $('#soundmap_op_origin_type').val(_t);
        },

        mapDrag: function(event){
            var _l = this.map.getCenter();
            $('#soundmap_op_origin_lat').val(_l.lat);
            $('#soundmap_op_origin_lng').val(_l.lng);
        },
        mapZoom: function(event){
            $('#soundmap_op_origin_zoom').val(this.map.getZoom());
        },
        initEvents: function(){
					setTimeout( () => { this.map.invalidateSize(); }, 0);
        }


    });




    $(document).ready(function(){
        soundmap.initMap();
    });

}(jQuery));