var map;
var mapview;

var cur_active_layer;

var layer_enso_status;
var layer_enso_subsurface;
var layer_enso_kriteria;
var layer_enso_history;

var source_enso_status;
var source_enso_subsurface;
var source_enso_kriteria;
var source_enso_history;

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

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

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

var legend_enso_history = [
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=enso_history,0", "< 10%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=enso_history,1", "10% - 20%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=enso_history,2", "20% - 30%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=enso_history,3", "30% - 40%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=enso_history,4", "40% - 50%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=enso_history,5", "50% - 60%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=enso_history,6", "60% - 70%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=enso_history,7", "70% - 80%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=enso_history,8", "80% - 90%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=enso_history,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_enso_status = new ol.source.ImageWMS({url: 'https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg'});
	layer_enso_status = new ol.layer.Image({source:source_enso_status, visible:false});
	map.addLayer(layer_enso_status);

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

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

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

    //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 info details
	
	map.on('singleclick', function (e) {
		var viewResolution = mapview.getResolution();
		
		var alllayers = [
			{
				layercode: "enso_status",
				url: source_enso_status.getFeatureInfoUrl(e.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'}),
				layertitle: "Status"
			},
            {
				layercode: "enso_subsurface",
				url: source_enso_subsurface.getFeatureInfoUrl(e.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'}),
				layertitle: "Subsurface"
			},
            {
				layercode: "enso_kriteria",
				url: source_enso_kriteria.getFeatureInfoUrl(e.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'}),
				layertitle: "Kriteria"
			},
            {
				layercode: "enso_history",
				url: source_enso_history.getFeatureInfoUrl(e.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'}),
				layertitle: "History"
			}
		];
		
		$("#infodetails-content").html("");

		var hasinfo = false;
		var processedlayer = 0;

		var totallayertoprocess = $("input[name^='optlayer']:checked").length;

		for(var i=0;i < alllayers.length;i++){

			if($("input[value='"+alllayers[i].layercode+"']").is(":checked")){

				var url = alllayers[i].url;

				fetch(url).then(async function (response) {
					if (!response.ok) {
						throw Error(response.statusText);
					}
					
					return {
						html: await response.text(),
						title: this.title
					};
				}.bind({
					title: alllayers[i].layertitle
				})).then(function (obj) {

					processedlayer++;

					var htmltrim = obj.html.trim();
					if(htmltrim){
						if(htmltrim.substring(0, 5) == "<tabl"){
							$("#infodetails-content").append("<div><div style='background-color: rgba(85, 164, 246, 1);color: white;padding: 5px;text-align: center;'><b>"+obj.title+"</b></div>"+obj.html+"</div>");
							hasinfo = true;
						}
					}

					if(processedlayer == totallayertoprocess){
						if(hasinfo){
							infodetails.setPosition(e.coordinate);
						}else{
							infodetails.setPosition(undefined);
						}
					}

				}).catch(function(e){
					processedlayer++;

					if(processedlayer == totallayertoprocess){
						if(hasinfo){
							infodetails.setPosition(e.coordinate);
						}else{
							infodetails.setPosition(undefined);
						}
					}
				});

			}
		}
		
	});


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

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


	// opacity control

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

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

			case "enso_subsurface":
				layer_enso_subsurface.setOpacity(Number($(this).val()));
				break;

			case "enso_kriteria":
				layer_enso_kriteria.setOpacity(Number($(this).val()));
				break;

			case "enso_history":
				layer_enso_history.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_enso_status.setVisible($("input[value='enso_status']").is(":checked"));
    layer_enso_subsurface.setVisible($("input[value='enso_subsurface']").is(":checked"));
    layer_enso_kriteria.setVisible($("input[value='enso_kriteria']").is(":checked"));
    layer_enso_history.setVisible($("input[value='enso_history']").is(":checked"));

	setLegend(layername, date1, date2, num1);

	var maptitle = [];
	var mappic = [];
	if($("input[value='enso_status']").is(":checked")){
		maptitle.push("Status ENSO");
		mappic.push("<img src='ftp/enso/enso_status_img.jpg' style='width:350px;' />");

		if(layername == "enso_status"){
			layer_enso_status.getSource().updateParams({
				'LAYERS': 'enso_status'
			});
		}

		$("#maplegend_enso_status").show();
	}else{
		$("#maplegend_enso_status").hide();
	}
	if($("input[value='enso_subsurface']").is(":checked")){
		maptitle.push("Subsurface ENSO");
		mappic.push("<img src='ftp/enso/enso_subsurface_img.jpg' style='width:350px;' />");

		if(layername == "enso_subsurface"){
			layer_enso_subsurface.getSource().updateParams({
				'LAYERS': 'enso_subsurface'
			});
		}

		$("#maplegend_enso_subsurface").show();
	}else{
		$("#maplegend_enso_subsurface").hide();
	}
	if($("input[value='enso_kriteria']").is(":checked")){
		maptitle.push("Kriteria ENSO");

		if(layername == "enso_kriteria"){
			layer_enso_kriteria.getSource().updateParams({
				'LAYERS': 'enso_kriteria'
			});
		}
	
		$("#maplegend_enso_kriteria").show();
	}else{
		$("#maplegend_enso_kriteria").hide();
	}
	if($("input[value='enso_history']").is(":checked")){
		maptitle.push("History ENSO");

		if(layername == "enso_history"){
			layer_enso_history.getSource().updateParams({
				'LAYERS': 'enso_history'
			});
		}
	
		$("#maplegend_enso_history").show();
	}else{
		$("#maplegend_enso_history").hide();
	}

	if(maptitle.length > 0){
		$("#maptitle").show();
		$("#maptitle").html(maptitle.join(", "));
		$("#legendcontainer").show();
	}else{
		$("#maptitle").hide();
		$("#legendcontainer").hide();
	}

	if(mappic.length > 0){
		$("#mappic").show();
		$("#mappic").html(mappic.join("<br>"));
		$("#legendcontainer").show();
	}else{
		$("#mappic").hide();
		$("#legendcontainer").hide();
	}

    

}

function setLegend(layername, date1, date2, num1){
	
	var legendsetting;
	var legendtext;
	
	switch(layername){
        case "enso_status":
			legendsetting = legend_enso_status;
			legendtext = "Status";
			break;

        case "enso_subsurface":
			legendsetting = legend_enso_subsurface;
			legendtext = "Subsurface";
			break;

        case "enso_kriteria":
			legendsetting = legend_enso_kriteria;
			legendtext = "Kriteria";
			break;

        case "enso_history":
			legendsetting = legend_enso_history;
			legendtext = "History";
			break;
    }

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