window.forecastTab = Object.assign({}, window.forecastTab, {  
    forecastMaps: {  
        styleHandle: function(feature, context){
            // get props from hideout
	    const {bounds, colorscale, style, colorProp} = context.props.hideout;
            // get value the determines the color
            const value = feature.properties[colorProp];
	    for (let i = 0; i < bounds.length; ++i) {
		if (value > bounds[i]) {
	            // set the fill color according to the class
		    style.fillColor = colorscale[i];
		}
	    }
            return style;
        },
	pointToLayer: function(feature, latlng, context){
            const {min, max, colorscale, circleOptions, colorProp} = context.props.hideout;
            // set color based on color prop.
            circleOptions.fillColor = feature.properties[colorProp];
            // sender a simple circle marker.
            return L.circleMarker(latlng, circleOptions);
        },
	bindTooltip: function(feature, layer, context) {
            const props = feature.properties;
            // delete props.cluster;
            layer.bindTooltip(JSON.stringify(props.value), { opacity: 1.0 })
        }
    },
    wasMaps: {
        styleHandle: function(feature, context){
            // get props from hideout
	    const {bounds, colorscale, style, colorProp} = context.props.hideout;
            // get value the determines the color
            const value = feature.properties[colorProp];
	    style.fillColor = colorscale[value];
            return style;
        },
    }
});

window.evaluationTab = Object.assign({}, window.evaluationTab, {  
    evaluationMaps: {  
	pointToLayer: function(feature, latlng, context){
            const {circleOptions} = context.props.hideout;
            // sender a simple circle marker.
            return L.circleMarker(latlng, circleOptions);
        },
    }
});

window.observationsTab = Object.assign({}, window.observationsTab, {  
    observationsMaps: {  
	pointToLayer: function(feature, latlng, context){
            const {colorscale, circleOptions, colorProp} = context.props.hideout;
            const value = feature.properties[colorProp];
            circleOptions.fillColor = colorscale[value];
            // sender a simple circle marker.
            return L.circleMarker(latlng, circleOptions);
        },
    }
});

$(document).ready(function () {
    $(document).on('click', ".leaflet-popup-close-button", function () {
	elements = document.getElementsByClassName("leaflet-popup-close-button");
	
	for (let i = 0; i < elements.length; i++) {
	    var elem = elements[i];
	    // elem.replaceWith(elem.clone());
	    alert(elem.innerHTML);
	}

	alert('Closing!');
        elements[0].close();
    });
});

// Remove yellow from rc-slider-mark-text when moved
$(document).ready(function () {
    $(document).on('click','.rc-slider' , function () {
		const handle = document.getElementsByClassName('rc-slider-handle')[0];
		const text = document.getElementsByClassName('rc-slider-mark-text')[0];
		if (handle.style.left == '100%'){
			text.style.color = '#999';
		}else{
			text.style.color = '#F1B545';
		}
	})
})
		

// Add logos for the animated gifs
$(document).ready(function () {
	$(document).on('click', "#slider-graph", function () {
		const logos = document.getElementById('logos');
		if(!logos) {
			var img = new Image();
			img.src = './assets/images/logoline.png';
			img.style.position = 'absolute';
			img.style.width = '40rem';
			img.style.height = '5rem';
			img.style.top = '0';
			img.style.left = '23rem';
			img.style.zIndex = '999';
			img.setAttribute('id','logos');
			img.style.display = 'none';

			// Get the element to overlay the image on
			var div = document.querySelectorAll('.leaflet-map-pane')[0];

			// Append the image to the element
			div.appendChild(img);
		}
	});
});

// SEND FULLSCREEN REQUEST TO PARENT WINDOW
$(document).ready(function () {
    $(document).on('click', "#fullscreen-tab", function () {
	parent.postMessage('fullscreen', '*');
	})	
});

// DETECT IFRAME AND REMOVE FULLSCREEN BUTTON
$(window).on('load', function removeFullscreen () {
    const tab = document.getElementById('fullscreen-tab');
    if (tab != null) {
	if (window.self === window.top){
	    tab.style.visibility = "hidden";
	}
    } else {
	setTimeout(removeFullscreen, 5); 
    }
});

// Move datepicker above the time series area
$(document).ready(function () {
	$(document).on('click', ".SingleDatePickerInput_clearDate, .SingleDatePicker", function moveDatePicker () {
		const element = document.getElementsByClassName('DayPicker')[0];
		if (element != null) {
		    element.style.position = 'absolute';
		    element.style.bottom = '78px';
		}else {
		    setTimeout(moveDatePicker, 20);
		};
	});
});
