if(typeof manager !== 'undefined'){
manager.addComponent('000B', 'station_select',  function(tools){
var comp = this;
    var api_token = "QRct5E1hLW46QALW3quFeKe7tSPyA6MmzSexEyFgF2Q3sch0huZsbGEbvOwh";
    var container = "station_select";
    this.componentWrapper = "<div id='componentWrapper' style=' width:75%; height:75%; z-index:9999999; position:absolute; top:0px; left:0px; display:none'></div>";
    comp.selectedStid = null;
	comp.checkSelect = [];
	comp.mapInit = false;
	comp.displayedMsgs = [];
	comp.lang = "fr";

	this.init = function(){



	    $('body').append(comp.componentWrapper);
        document.getElementById(container).innerHTML = "<span id='stationNameBox'></span><span style='cursor:pointer; background:white; border:1px solid black; color:black; font-family:arial, sans serif; font-weight:bold; padding:3px 10px 3px 10px; border-radius:5px;margin-left:10px;' id='componentBtn'>Choisir une station</span>" ;

        $('#componentBtn').click(function(event){
            event.stopPropagation();
            cw = $('#componentWrapper') ;
            cw.show();
            cw.css("top", Math.max(0, (($(window).height() - cw.outerHeight()) / 2) + $(window).scrollTop()) + "px");
            cw.css("left", Math.max(0, (($(window).width() - cw.outerWidth()) / 2) + $(window).scrollLeft()) + "px");

            if(!comp.mapInit){
                comp.loadMap();
             }
             comp.map.invalidateSize();
             comp.windowInit();
        });
	    comp.componentUI();
	};

	this.componentUI = function(){
		url="https://cs2.solutions-mesonet.org/000B/function/componentUI";
		$.ajax({
			url: url,
			type: 'post',
			data : { 'api_token': api_token, 'lang' : comp.lang },
			success: function(data) {
				if(data!="null"){
					document.getElementById('componentWrapper').innerHTML = data ;
					comp.getSiteinfo();
				}
			}
		});
	};
	
	this.addStationsToMap = function(){
	    markers = [];
		for(var z in comp.siteinfo){
		    shape = L.circleMarker([comp.siteinfo[z].lat, comp.siteinfo[z].lon], {className:"mapLink "+z,radius:5,color:"#000000",weight:1,opacity:1,fillColor:"#ffffff",fillOpacity:1})
			.bindPopup(
				'Nom :    '+comp.siteinfo[z].name+'<br>'+
				'Stid :   '+comp.siteinfo[z].stid+'<br>'+
				'LatLon : '+comp.siteinfo[z].lat+','+comp.siteinfo[z].lon+'<br>'
			).on('mouseover', function (e) {
				this.openPopup();
			}).on('mouseout', function (e) {
				this.closePopup();
			});			
		    markers.push(shape);
		}
		var markerGroup = new L.featureGroup(markers);
		markerGroup.addTo(comp.map);
		comp.map.fitBounds(markerGroup.getBounds());
		comp.mapInit = true ;
		comp.controls();
		$('.mapLink').mouseover(function(){
			stid = $(this).attr('class');
			if(stid.baseVal){
			    stid = stid.baseVal;
			}
			stid = stid.split(' ');
			stid = stid[1];
			comp.highlightStation(stid);
		}).mouseout(function(){
			stid = $(this).attr('class');
		    if(stid.baseVal){
			    stid = stid.baseVal;
			}
			stid = stid.split(' ');
			stid = stid[1];
			comp.unHighlightStation(stid);
		}).click(function(){
			stid = $(this).attr('class');
		    if(stid.baseVal){
			    stid = stid.baseVal;
			}
			stid = stid.split(' ');
			stid = stid[1];
			comp.changeStid(stid);
            $("#componentWrapper").hide();
		});
        comp.mapInit = true ;
		comp.controls();
	};
		
	this.controls = function(){
		$(window).resize(function(){
		    if($('#componentWrapper').css('display')=='block'){
		        comp.windowInit();
		    }
		}).click(function () {
            $("#componentWrapper").hide();
        });
        $("#componentWrapper").click(function (event) {
            event.stopPropagation();
        });

        $('#close').click(function(){
            $("#componentWrapper").hide();
        });
	};

	this.changeStid = function(stid){
	    comp.stid = stid;
        tools.cookie.set("stid", stid , 1500);
        tools.event.emit('stidChanged', comp.stid );
        $('#stationNameBox').html(comp.siteinfo[stid]['name']);
	};

	this.fillStationBox = function(){
		stationsList = "<ul>";
		for(var z in comp.siteinfo){
			stationsList += "<li class='stidLinks' id='station_"+z+"' stid='"+z+"' lat='"+comp.siteinfo[z].lat+"' lon='"+comp.siteinfo[z].lon+"'>"+comp.siteinfo[z].name+"</li>";
		}
		stationsList += "</ul>";
		$('#stationList').html(stationsList);
		$('.stidLinks').mouseover(function(){
			stid = $(this).attr('stid');
			comp.highlightStation(stid);
		}).mouseout(function(){
			stid = $(this).attr('stid');
		    comp.unHighlightStation(stid);
		}).click(function(){
			stid = $(this).attr('stid');
			comp.changeStid(stid);
			$("#componentWrapper").hide();
		});
	};
	
	this.getSiteinfo = function(){
	    if(!comp.siteinfo){
            url="https://cs2.solutions-mesonet.org/000B/function/siteinfo";
            $.ajax({
                url: url,
                type: 'post',
                data : { 'api_token': api_token },
                success: function(data) {
                    if(data!="null"){
                        comp.siteinfo = JSON.parse(data);
                        comp.fillStationBox();
                        stid = tools.cookie.get("stid");
                        if(stid){
                        	$('#stationNameBox').html(comp.siteinfo[stid]['name']);
                        }
                    }
                }
            });
	    }
	};
	
	this.highlightStation = function(stid){
		$('.'+stid).attr('fill', '#ff0000');
		station = $('#station_'+stid);
		station.css('background', '#cccccc');
		station.css('color', '#313131');
		station.css('font-weight', 'bold');
	};
	
	this.loadMap = function(){
		accessToken = 'pk.eyJ1Ijoic29sdXRpb25zbWVzb25ldCIsImEiOiJjaWg4MWZ3NzkwdDZzdXVraW85dmNueWtrIn0.n2gMIwhOiHOTEf_8KWOqng';
		comp.baseMapSatellite = L.tileLayer('https://api.mapbox.com/styles/v1/solutionsmesonet/cij1mxsxd001a8vklcoc7ggrc/tiles/256/{z}/{x}/{y}?access_token={accessToken}', {
			attribution: '',
			maxZoom: 18,
			accessToken: accessToken
		});
		comp.map = L.map("mapContainer", {
			center: [47, -73.4],
			zoom: 6,
			layers: [comp.baseMapSatellite]
		});
	    comp.addStationsToMap();

	};
	
	this.unHighlightStation = function(stid){
		$('.'+stid).attr('fill', '#ffffff');
		station = $('#station_'+stid);
		station.css('background', '#313131');
		station.css('color', '#ffffff');
		station.css('font-weight', 'normal');
	};

	this.windowInit = function(){
		height = $("#componentWrapper").height()-75;
		$('.boxes').css('height',height+"px");
		$('#mapContainer').css('height',$('#mapBox').height()+"px");
		$('#stationList').css('height','95%');
		$('#selecteStationList').css('height',$('#selectedStationBox').height()-100);

	};//after_init script

})
}else{
    console.error('Manager script has not been loaded.');
}