var map;
var mapview;

var cur_active_layer;

var layer_peringatandinielninolanina;

var source_peringatandinielninolanina;

var legend_peringatandinielninolanina = [
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=peringatandinielninolanina,0", "< 10%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=peringatandinielninolanina,1", "10% - 20%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=peringatandinielninolanina,2", "20% - 30%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=peringatandinielninolanina,3", "30% - 40%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=peringatandinielninolanina,4", "40% - 50%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=peringatandinielninolanina,5", "50% - 60%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=peringatandinielninolanina,6", "60% - 70%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=peringatandinielninolanina,7", "70% - 80%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=peringatandinielninolanina,8", "80% - 90%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=peringatandinielninolanina,9", "> 90%"]
];

var infodetails;

$(function(){

    infodetails = new ol.Overlay({
		element: document.getElementById('infodetails'),
		autoPan: true,
		autoPanAnimation: {
			duration: 250,
		},
	});

    mapview = new ol.View({
		center: ol.proj.fromLonLat([118.1661992, -2.2070457]),
		zoom: 5,
		constrainResolution: true
	});

    //init ol
	map = new ol.Map({
		target: 'mapcontainer',
		layers: [
			new ol.layer.Tile({
				source: new ol.source.OSM()
			})
		],
		view: mapview,
		overlays: [infodetails],
		interactions: ol.interaction.defaults({mouseWheelZoom:false})
	});

    source_peringatandinielninolanina = new ol.source.ImageWMS({url: 'https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg'});
	layer_peringatandinielninolanina = new ol.layer.Image({source:source_peringatandinielninolanina, visible:false});
	map.addLayer(layer_peringatandinielninolanina);

    //init layer switcher
	
	$(".layerswitcher .toggle").click(function(){
		if($(this).parent().attr("state")=="opened"){
			$(this).siblings(".content").hide();
			$(this).children("button").children("i").removeClass("fa-times");
			$(this).children("button").children("i").addClass("fa-layer-group");
			$(this).parent().attr("state","closed");
		}else{
			$(this).siblings(".content").show();
			$(this).children("button").children("i").removeClass("fa-layer-group");
			$(this).children("button").children("i").addClass("fa-times");
			$(this).parent().attr("state","opened");
		}
	});

    $(".layerswitcher .content input[name^='optlayer']").change(function(){
		var date1 = $(this).siblings("select").children("option:selected").attr("date1") || $(this).attr("date1") || "";
		var date2 = $(this).siblings("select").children("option:selected").attr("date2") || $(this).attr("date2") || "";
		var num1 = $(this).siblings("select").children("option:selected").attr("num1") || $(this).attr("num1") || "";
		var num2 = $(this).siblings("select").children("option:selected").attr("num2") || $(this).attr("num2") || "";
		
		switchLayer({
			layername:$(this).val(),
			date1:date1,
			date2:date2,
			num1:num1,
			num2:num2
		});
	});

	//init default layer

	$(".layerswitcher .content input[value='peringatandinielninolanina']").prop('checked', true);
	switchLayer({
		layername:"peringatandinielninolanina"
	});

    //init info details
	
	map.on('singleclick', function (e) {
		var viewResolution = mapview.getResolution();
		
		switch(cur_active_layer){
			case "peringatandinielninolanina":
				var url = source_peringatandinielninolanina.getFeatureInfoUrl(e.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'});
				break;
		}
		
		if (url) {
			fetch(url).then(function (response) {
				if (!response.ok) {
					throw Error(response.statusText);
				}
				
				return response.text();
			}).then(function (html) {
				if(html.trim()==""){
					infodetails.setPosition(undefined);
				}else{
					$("#infodetails-content").html(html);
					infodetails.setPosition(e.coordinate);
				}
			}).catch(function(e){
				infodetails.setPosition(undefined);
				console.log("no data");
			});
		}
		
	});


    $("#mappic").hide();


	// opacity control

	$(".slctransparant").val(1);

	$(".slctransparant").change(function(){
		switch($(this).attr("layercode")){
			case "peringatandinielninolanina":
				layer_peringatandinielninolanina.setOpacity(Number($(this).val()));
				break;
		}
	});
});

function switchLayer(obj){
	
	var layername = obj.layername || "";
	var date1 = obj.date1 || "";
	var date2 = obj.date2 || "";
	var num1 = obj.num1 || "";
	var num2 = obj.num2 || "";
	
	cur_active_layer = layername;

    layer_peringatandinielninolanina.setVisible(false);

    $("#maptitle").show();

    $("#mappic").hide();

    switch(layername){
		case "peringatandinielninolanina":
			layer_peringatandinielninolanina.getSource().updateParams({
				'LAYERS': 'peringatandinielninolanina'
			});
			
			layer_peringatandinielninolanina.setVisible(true);
			$("#maptitle").html("Peringatan Dini El Nino / La Nina");

			break;

    }

    setLegend(layername, date1, date2, num1);

}

function setLegend(layername, date1, date2, num1){
	
	var legendsetting;
	
	switch(layername){
        case "peringatandinielninolanina":
			legendsetting = legend_peringatandinielninolanina;
			$("#mapannotation").hide();
			break;

    }

    var html="<table>";
	
	for(var i=0;i<legendsetting.length;i++){
		
		html+="<tr layername='"+layername+"' legendindex='"+i+"'><td><img src=\""+legendsetting[i][1]+"\" /></td><td>"+legendsetting[i][2]+"</td></tr>";
		
	}
	
	html+="</table>";
	
	$("#maplegend").html(html);
}