const MONTHS = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];

var map;
var mapview;

var cur_active_layer;

var layer_pcht_das;
var layer_pchdas_a50;
var layer_pchdas_a100;
var layer_pchdas_a150;
var layer_pchdas_a200;
var layer_pchdas_a300;
var layer_pchdas_b20;
var layer_pchdas_b50;
var layer_pchdas_b100;

var source_pcht_das;
var source_pchdas_a50;
var source_pchdas_a100;
var source_pchdas_a150;
var source_pchdas_a200;
var source_pchdas_a300;
var source_pchdas_b20;
var source_pchdas_b50;
var source_pchdas_b100;

var maptitle_pcht_das;
var maptitle_pchdas_b100;
var maptitle_pchdas_b50;
var maptitle_pchdas_b20;
var maptitle_pchdas_a50;
var maptitle_pchdas_a100;
var maptitle_pchdas_a150;
var maptitle_pchdas_a200;
var maptitle_pchdas_a300;

var legend_pcht_das = [
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=pcht_das,0", "Tidak ada peringatan"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=pcht_das,1", "Waspada"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=pcht_das,2", "Siaga"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=pcht_das,3", "Awas"]
];

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

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

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

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

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

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

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

var legend_pchdas_b100 = [
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=pchdas_b100,0", "< 10%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=pchdas_b100,1", "10% - 20%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=pchdas_b100,2", "20% - 30%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=pchdas_b100,3", "30% - 40%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=pchdas_b100,4", "40% - 50%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=pchdas_b100,5", "50% - 60%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=pchdas_b100,6", "60% - 70%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=pchdas_b100,7", "70% - 80%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=pchdas_b100,8", "80% - 90%"],
	["", "https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg&mode=legendicon&icon=pchdas_b100,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_pcht_das = new ol.source.ImageWMS({url: 'https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg'});
	layer_pcht_das = new ol.layer.Image({source:source_pcht_das, visible:false});
	map.addLayer(layer_pcht_das);
	
	source_pchdas_a50 = new ol.source.ImageWMS({url: 'https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg'});
	layer_pchdas_a50 = new ol.layer.Image({source:source_pchdas_a50, visible:false});
	map.addLayer(layer_pchdas_a50);
	
	source_pchdas_a100 = new ol.source.ImageWMS({url: 'https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg'});
	layer_pchdas_a100 = new ol.layer.Image({source:source_pchdas_a100, visible:false});
	map.addLayer(layer_pchdas_a100);
	
	source_pchdas_a150 = new ol.source.ImageWMS({url: 'https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg'});
	layer_pchdas_a150 = new ol.layer.Image({source:source_pchdas_a150, visible:false});
	map.addLayer(layer_pchdas_a150);
	
	source_pchdas_a200 = new ol.source.ImageWMS({url: 'https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg'});
	layer_pchdas_a200 = new ol.layer.Image({source:source_pchdas_a200, visible:false});
	map.addLayer(layer_pchdas_a200);
	
	source_pchdas_a300 = new ol.source.ImageWMS({url: 'https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg'});
	layer_pchdas_a300 = new ol.layer.Image({source:source_pchdas_a300, visible:false});
	map.addLayer(layer_pchdas_a300);
	
	source_pchdas_b20 = new ol.source.ImageWMS({url: 'https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg'});
	layer_pchdas_b20 = new ol.layer.Image({source:source_pchdas_b20, visible:false});
	map.addLayer(layer_pchdas_b20);
	
	source_pchdas_b50 = new ol.source.ImageWMS({url: 'https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg'});
	layer_pchdas_b50 = new ol.layer.Image({source:source_pchdas_b50, visible:false});
	map.addLayer(layer_pchdas_b50);
	
	source_pchdas_b100 = new ol.source.ImageWMS({url: 'https://cews.bmkg.go.id/cgi-bin/mapserv?map=bmkg'});
	layer_pchdas_b100 = new ol.layer.Image({source:source_pchdas_b100, visible:false});
	map.addLayer(layer_pchdas_b100);
	
	//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
		});
	});
	
	$(".layerswitcher .content select").change(function(){
		
		if($(this).siblings("input").is(":checked")){//hanya jika layer aktif
			var date1 = $(this).children("option:selected").attr("date1");
			var date2 = $(this).children("option:selected").attr("date2");
			var num1 = $(this).children("option:selected").attr("num1");
			var num2 = $(this).children("option:selected").attr("num2");
			
			switchLayer({
				layername:$(this).siblings("input").val(),
				date1:date1,
				date2:date2,
				num1:num1,
				num2:num2
			});
		}
		
	});

	//init default layer
	
		
	$(".layerswitcher .content input[value='pcht_das']").prop('checked', true);
	switchLayer({
		layername:"pcht_das",
		date1:"2024-09-01",
		num1:"1"
	});
	
			

	//init info details
	
	map.on('singleclick', function (e) {
		var viewResolution = mapview.getResolution();
		
		var alllayers = [
			{
				layercode: "pcht_das",
				url: source_pcht_das.getFeatureInfoUrl(e.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'}),
				layertitle: "Peringatan Dini Curah Hujan Tinggi"
			},
			{
				layercode: "pchdas_b100",
				url: source_pchdas_b100.getFeatureInfoUrl(e.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'}),
				layertitle: "Prakiraan Curah Hujan Probabilistik <100mm"
			},
			{
				layercode: "pchdas_b50",
				url: source_pchdas_b50.getFeatureInfoUrl(e.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'}),
				layertitle: "Prakiraan Curah Hujan Probabilistik <50mm"
			},
			{
				layercode: "pchdas_b20",
				url: source_pchdas_b20.getFeatureInfoUrl(e.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'}),
				layertitle: "Prakiraan Curah Hujan Probabilistik <20mm"
			},
			{
				layercode: "pchdas_a50",
				url: source_pchdas_a50.getFeatureInfoUrl(e.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'}),
				layertitle: "Prakiraan Curah Hujan Probabilistik >50mm"
			},
			{
				layercode: "pchdas_a100",
				url: source_pchdas_a100.getFeatureInfoUrl(e.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'}),
				layertitle: "Prakiraan Curah Hujan Probabilistik >100mm"
			},
			{
				layercode: "pchdas_a150",
				url: source_pchdas_a150.getFeatureInfoUrl(e.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'}),
				layertitle: "Prakiraan Curah Hujan Probabilistik >150mm"
			},
			{
				layercode: "pchdas_a200",
				url: source_pchdas_a200.getFeatureInfoUrl(e.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'}),
				layertitle: "Prakiraan Curah Hujan Probabilistik >200mm"
			},
			{
				layercode: "pchdas_a300",
				url: source_pchdas_a300.getFeatureInfoUrl(e.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'}),
				layertitle: "Prakiraan Curah Hujan Probabilistik >300mm"
			}
		];
		
		$("#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);
						}
					}
				});

			}
		}
		
	});

	//print out

	$("#mapprint").click(function(){
		
		var zoom = map.getView().getZoom();
		var center = ol.proj.transform(map.getView().getCenter(), 'EPSG:3857', 'EPSG:4326');
		var date = $(".layerswitcher .content select").children("option:selected").attr("date1");
		var num = $(".layerswitcher .content select").children("option:selected").attr("num1");

		window.open("peringatancurahhujan_print.php?zoom=" + zoom + "&center0=" + center[0] + "&center1=" + center[1] + "&date=" + date + "&num=" + num);
	});

	// opacity control

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

	$(".slctransparant").change(function(){
		switch($(this).attr("layercode")){
			case "pcht_das":
				layer_pcht_das.setOpacity(Number($(this).val()));
				break;
			case "pchdas_a50":
				layer_pchdas_a50.setOpacity(Number($(this).val()));
				break;
			case "pchdas_a100":
				layer_pchdas_a100.setOpacity(Number($(this).val()));
				break;
			case "pchdas_a150":
				layer_pchdas_a150.setOpacity(Number($(this).val()));
				break;
			case "pchdas_a200":
				layer_pchdas_a200.setOpacity(Number($(this).val()));
				break;
			case "pchdas_a300":
				layer_pchdas_a300.setOpacity(Number($(this).val()));
				break;
			case "pchdas_b20":
				layer_pchdas_b20.setOpacity(Number($(this).val()));
				break;
			case "pchdas_b50":
				layer_pchdas_b50.setOpacity(Number($(this).val()));
				break;
			case "pchdas_b100":
				layer_pchdas_b100.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;
	
	var odate1 = date1.substring(8,10);
	var odate2 = date2.substring(8,10);
	
	var omonth1_m2 = MONTHS[(parseInt(date1.substring(5,7))-3) < 0?(parseInt(date1.substring(5,7))-3+12):(parseInt(date1.substring(5,7))-3)];
	var omonth1_m1 = MONTHS[(parseInt(date1.substring(5,7))-2) < 0?(parseInt(date1.substring(5,7))-2+12):(parseInt(date1.substring(5,7))-2)];
	var omonth1 = MONTHS[parseInt(date1.substring(5,7))-1];
	var omonth1_p1 = MONTHS[(parseInt(date1.substring(5,7))) > 11?(parseInt(date1.substring(5,7))-12):(parseInt(date1.substring(5,7)))];
	var omonth1_p2 = MONTHS[(parseInt(date1.substring(5,7))+1) > 11?(parseInt(date1.substring(5,7))+1-12):(parseInt(date1.substring(5,7))+1)];

	var oyear1 = date1.substring(0,4);
	
	var omonth2_m2 = MONTHS[(parseInt(date2.substring(5,7))-3) < 0?(parseInt(date2.substring(5,7))-3+12):(parseInt(date2.substring(5,7))-3)];
	var omonth2_m1 = MONTHS[(parseInt(date2.substring(5,7))-2) < 0?(parseInt(date2.substring(5,7))-2+12):(parseInt(date2.substring(5,7))-2)];
	var omonth2 = MONTHS[parseInt(date2.substring(5,7))-1];
	var omonth2_p1 = MONTHS[(parseInt(date2.substring(5,7))) > 11?(parseInt(date2.substring(5,7))-12):(parseInt(date2.substring(5,7)))];
	var omonth2_p2 = MONTHS[(parseInt(date2.substring(5,7))+1) > 11?(parseInt(date2.substring(5,7))+1-12):(parseInt(date2.substring(5,7))+1)];

	var oyear2 = date2.substring(0,4);
	
	layer_pcht_das.setVisible($("input[value='pcht_das']").is(":checked"));
	layer_pchdas_a50.setVisible($("input[value='pchdas_a50']").is(":checked"));
	layer_pchdas_a100.setVisible($("input[value='pchdas_a100']").is(":checked"));
	layer_pchdas_a150.setVisible($("input[value='pchdas_a150']").is(":checked"));
	layer_pchdas_a200.setVisible($("input[value='pchdas_a200']").is(":checked"));
	layer_pchdas_a300.setVisible($("input[value='pchdas_a300']").is(":checked"));
	layer_pchdas_b20.setVisible($("input[value='pchdas_b20']").is(":checked"));
	layer_pchdas_b50.setVisible($("input[value='pchdas_b50']").is(":checked"));
	layer_pchdas_b100.setVisible($("input[value='pchdas_b100']").is(":checked"));
	
	setLegend(layername, date1, date2, num1);
	
	var maptitle = [];

	if($("input[value='pcht_das']").is(":checked")){

		if(layername == "pcht_das"){
			maptitle_pcht_das = "PERINGATAN DINI CURAH HUJAN TINGGI<BR />BERLAKU DASARIAN "+romawi(num1)+" "+omonth1.toUpperCase()+" "+oyear1;

			layer_pcht_das.getSource().updateParams({
				'LAYERS': 'pcht_das,prov,kabkot', 
				'date': date1,
				'num': num1
			});
		}

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

		maptitle.push(maptitle_pcht_das);

		$("#maplegend_pcht_das").show();
	}else{
		$("#maplegend_pcht_das").hide();

		$("#mapprint").hide();
	}

	if($("input[value='pchdas_a50']").is(":checked")){

		if(layername == "pchdas_a50"){
			maptitle_pchdas_a50 = "PRAKIRAAN CURAH HUJAN<BR />DASARIAN "+romawi(num1)+" "+omonth1.toUpperCase()+" "+oyear1+"<BR />PELUANG HUJAN &gt; 50 MM<BR /><span style=\"font-size:0.8em;\">UPDATE "+odate2+" "+omonth2.toUpperCase()+" "+oyear2+"</span>";

			layer_pchdas_a50.getSource().updateParams({
				'LAYERS': 'pchdas_a50,prov,kabkot', 
				'date1': date1,
				'date2': date2,
				'num': num1
			});
		}

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

		maptitle.push(maptitle_pchdas_a50);

		$("#maplegend_pchdas_a50").show();
	}else{
		$("#maplegend_pchdas_a50").hide();

		$("#mapprint").hide();
	}

	if($("input[value='pchdas_a100']").is(":checked")){

		if(layername == "pchdas_a100"){
			maptitle_pchdas_a100 = "PRAKIRAAN CURAH HUJAN<BR />DASARIAN "+romawi(num1)+" "+omonth1.toUpperCase()+" "+oyear1+"<BR />PELUANG HUJAN &gt; 100 MM<BR /><span style=\"font-size:0.8em;\">UPDATE "+odate2+" "+omonth2.toUpperCase()+" "+oyear2+"</span>";

			layer_pchdas_a100.getSource().updateParams({
				'LAYERS': 'pchdas_a100,prov,kabkot', 
				'date1': date1,
				'date2': date2,
				'num': num1
			});
		}

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

		maptitle.push(maptitle_pchdas_a100);

		$("#maplegend_pchdas_a100").show();
	}else{
		$("#maplegend_pchdas_a100").hide();

		$("#mapprint").hide();
	}

	if($("input[value='pchdas_a150']").is(":checked")){

		if(layername == "pchdas_a150"){
			maptitle_pchdas_a150 = "PRAKIRAAN CURAH HUJAN<BR />DASARIAN "+romawi(num1)+" "+omonth1.toUpperCase()+" "+oyear1+"<BR />PELUANG HUJAN &gt; 150 MM<BR /><span style=\"font-size:0.8em;\">UPDATE "+odate2+" "+omonth2.toUpperCase()+" "+oyear2+"</span>";

			layer_pchdas_a150.getSource().updateParams({
				'LAYERS': 'pchdas_a150,prov,kabkot', 
				'date1': date1,
				'date2': date2,
				'num': num1
			});
		}

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

		maptitle.push(maptitle_pchdas_a150);

		$("#maplegend_pchdas_a150").show();
	}else{
		$("#maplegend_pchdas_a150").hide();

		$("#mapprint").hide();
	}

	if($("input[value='pchdas_a200']").is(":checked")){

		if(layername == "pchdas_a200"){
			maptitle_pchdas_a200 = "PRAKIRAAN CURAH HUJAN<BR />DASARIAN "+romawi(num1)+" "+omonth1.toUpperCase()+" "+oyear1+"<BR />PELUANG HUJAN &gt; 200 MM<BR /><span style=\"font-size:0.8em;\">UPDATE "+odate2+" "+omonth2.toUpperCase()+" "+oyear2+"</span>";

			layer_pchdas_a200.getSource().updateParams({
				'LAYERS': 'pchdas_a200,prov,kabkot', 
				'date1': date1,
				'date2': date2,
				'num': num1
			});
		}

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

		maptitle.push(maptitle_pchdas_a200);

		$("#maplegend_pchdas_a200").show();
	}else{
		$("#maplegend_pchdas_a200").hide();

		$("#mapprint").hide();
	}

	if($("input[value='pchdas_a300']").is(":checked")){

		if(layername == "pchdas_a300"){
			maptitle_pchdas_a300 = "PRAKIRAAN CURAH HUJAN<BR />DASARIAN "+romawi(num1)+" "+omonth1.toUpperCase()+" "+oyear1+"<BR />PELUANG HUJAN &gt; 300 MM<BR /><span style=\"font-size:0.8em;\">UPDATE "+odate2+" "+omonth2.toUpperCase()+" "+oyear2+"</span>";

			layer_pchdas_a300.getSource().updateParams({
				'LAYERS': 'pchdas_a300,prov,kabkot', 
				'date1': date1,
				'date2': date2,
				'num': num1
			});
		}

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

		maptitle.push(maptitle_pchdas_a300);

		$("#maplegend_pchdas_a300").show();
	}else{
		$("#maplegend_pchdas_a300").hide();

		$("#mapprint").hide();
	}

	if($("input[value='pchdas_b20']").is(":checked")){

		if(layername == "pchdas_b20"){
			maptitle_pchdas_b20 = "PRAKIRAAN CURAH HUJAN<BR />DASARIAN "+romawi(num1)+" "+omonth1.toUpperCase()+" "+oyear1+"<BR />PELUANG HUJAN &lt; 20 MM<BR /><span style=\"font-size:0.8em;\">UPDATE "+odate2+" "+omonth2.toUpperCase()+" "+oyear2+"</span>";

			layer_pchdas_b20.getSource().updateParams({
				'LAYERS': 'pchdas_b20,prov,kabkot', 
				'date1': date1,
				'date2': date2,
				'num': num1
			});
		}

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

		maptitle.push(maptitle_pchdas_b20);

		$("#maplegend_pchdas_b20").show();
	}else{
		$("#maplegend_pchdas_b20").hide();

		$("#mapprint").hide();
	}

	if($("input[value='pchdas_b50']").is(":checked")){

		if(layername == "pchdas_b50"){
			maptitle_pchdas_b50 = "PRAKIRAAN CURAH HUJAN<BR />DASARIAN "+romawi(num1)+" "+omonth1.toUpperCase()+" "+oyear1+"<BR />PELUANG HUJAN &lt; 50 MM<BR /><span style=\"font-size:0.8em;\">UPDATE "+odate2+" "+omonth2.toUpperCase()+" "+oyear2+"</span>";

			layer_pchdas_b50.getSource().updateParams({
				'LAYERS': 'pchdas_b50,prov,kabkot', 
				'date1': date1,
				'date2': date2,
				'num': num1
			});
		}

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

		maptitle.push(maptitle_pchdas_b50);

		$("#maplegend_pchdas_b50").show();
	}else{
		$("#maplegend_pchdas_b50").hide();

		$("#mapprint").hide();
	}

	if($("input[value='pchdas_b100']").is(":checked")){

		if(layername == "pchdas_b100"){
			maptitle_pchdas_b100 = "PRAKIRAAN CURAH HUJAN<BR />DASARIAN "+romawi(num1)+" "+omonth1.toUpperCase()+" "+oyear1+"<BR />PELUANG HUJAN &lt; 100 MM<BR /><span style=\"font-size:0.8em;\">UPDATE "+odate2+" "+omonth2.toUpperCase()+" "+oyear2+"</span>";

			layer_pchdas_b100.getSource().updateParams({
				'LAYERS': 'pchdas_b100,prov,kabkot', 
				'date1': date1,
				'date2': date2,
				'num': num1
			});
		}

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

		maptitle.push(maptitle_pchdas_b100);

		$("#maplegend_pchdas_b100").show();
	}else{
		$("#maplegend_pchdas_b100").hide();

		$("#mapprint").hide();
	}


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

function setLegend(layername, date1, date2, num1){
	
	var legendsetting;
	
	switch(layername){
		case "pcht_das":
			legendsetting = legend_pcht_das;
			$("#mapannotation").hide();
			legendtext = "Peringatan Dini Curah Hujan Tinggi";
			break;
		case "pchdas_a50":
			legendsetting = legend_pchdas_a50;
			$("#mapannotation").hide();
			legendtext = "Prakiraan Curah Hujan Probabilistik &gt;50mm";
			break;
		case "pchdas_a100":
			legendsetting = legend_pchdas_a100;
			$("#mapannotation").hide();
			legendtext = "Prakiraan Curah Hujan Probabilistik &gt;100mm";
			break;
		case "pchdas_a150":
			legendsetting = legend_pchdas_a150;
			$("#mapannotation").hide();
			legendtext = "Prakiraan Curah Hujan Probabilistik &gt;150mm";
			break;
		case "pchdas_a200":
			legendsetting = legend_pchdas_a200;
			$("#mapannotation").hide();
			legendtext = "Prakiraan Curah Hujan Probabilistik &gt;200mm";
			break;
		case "pchdas_a300":
			legendsetting = legend_pchdas_a300;
			$("#mapannotation").hide();
			legendtext = "Prakiraan Curah Hujan Probabilistik &gt;300mm";
			break;
		case "pchdas_b20":
			legendsetting = legend_pchdas_b20;
			$("#mapannotation").hide();
			legendtext = "Prakiraan Curah Hujan Probabilistik &lt;20mm";
			break;
		case "pchdas_b50":
			legendsetting = legend_pchdas_b50;
			$("#mapannotation").hide();
			legendtext = "Prakiraan Curah Hujan Probabilistik &lt;50mm";
			break;
		case "pchdas_b100":
			legendsetting = legend_pchdas_b100;
			$("#mapannotation").hide();
			legendtext = "Prakiraan Curah Hujan Probabilistik &lt;100mm";
			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>";
	
	$("#areacoverage").hide();
	
	$("#maplegend tr").unbind();
	
	$("#maplegend_"+layername).html(html);
	
	if(layername!="titikstationmatahari"){
		$("#maplegend_"+layername+" tr.trlegend").click(function(){
			setAreaCoverage($(this).attr("layername"), $(this).attr("legendindex"), date1, date2, num1);
		});
	}
}

function setAreaCoverage(layername, legendindex, date1, date2, num1){
	$("#mapannotation").hide();
	$("#areacoverage").show();
	$("#areacoverage-content").html("<i>Loading...</i>");
	
	$.post("areacoverage.php?req=getareacoverage", {
		layername:layername,
		legendindex:legendindex,
		date1:date1,
		date2:date2,
		num1:num1
	},function(data){
		if(jQuery.isEmptyObject(data)){
			$("#areacoverage-content").html("Wilayah tidak ditemukan");
		}else{
			var html="";
			for(var i=0;i<data.length;i++){
				html+="<div class='item'>";
				html+="<div class='title'>"+data[i].prov+"</div>";
				html+="<div class='content'>";
				
				for(var j=0;j<data[i].kabkot.length;j++){
				
					html+="<div>"+data[i].kabkot[j]+"</div>";
				
				}
				
				html+="</div>";
				html+="</div>";
			}
			
			$("#areacoverage-content").html(html);
		}
	});
}

function romawi(num){
	switch(Number(num)){
		case 1:
			return "I";
		case 2:
			return "II";
		case 3:
			return "III";
		case 4:
			return "IV";
		case 5:
			return "V";
	}
}