function deleteCookie(name) {
		document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT';
	}  
	    
	function setCookie(cname, cvalue, exdays) {
	  const d = new Date();
	  d.setTime(d.getTime() + (exdays*24*60*60*1000));
	  let expires = "expires="+ d.toUTCString();
	  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/;Domain=maddiesfund.org";
	}
	
		    
	function setCookie2(cname, cvalue, exdays) {
	  const d = new Date();
	  d.setTime(d.getTime() + (exdays*24*60*60*1000));
	  let expires = "expires="+ d.toUTCString();
	  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
	}
	
	function getCookie(cname) {
		let name = cname + "=";
		let decodedCookie = decodeURIComponent(document.cookie);
		let ca = decodedCookie.split(';');
		for(let i = 0; i < ca.length; i++) {
			let c = ca[i];
			while (c.charAt(0) == ' ') {
			  c = c.substring(1);
			}
			if (c.indexOf(name) == 0) {
			  return c.substring(name.length, c.length);
			}
		}
	return "";
	}


		//var pollQuestion = '<h1 class="underlined">Poll Question</h1><p style="margin-bottom:-15px">July 10th is Dr. Lila Miller Shelter Medicine Day! Do you know the impact she\'s had on shelter animals everywhere and the obstacles she\'s overcome?</p>'
		var pollQuestion = '<h5>July 10th is Dr. Lila Miller Shelter Medicine Day! Do you know the impact she\'s had on shelter animals everywhere and the obstacles she\'s overcome?</h5><p style="z-index:100;"><a href="https://www.maddiesfund.org/july-10-2021-proclaimed-doctor-lila-miller-shelter-medicine-day.htm" target="_blank">Learn more about Dr. Lila Miller and her impact</h5>'
		var pollLink = '<p><a href="https://www.maddiesfund.org/july-10-2021-proclaimed-doctor-lila-miller-shelter-medicine-day.htm" target="_blank">Learn more about Dr. Lila Miller and her impact</h5>'
		
		var pollForm = '<form action="/tally-poll" method="post" class="formClass" id="pollForm">	<input type="hidden" id="pollID" name="pollID" value="195"/>		<br/><div class="form-check">	  <input class="form-check-input" type="radio" name="answer" id="poll1" value="1">	  <label class="form-check-label" for="poll1">Yes, the mother of shelter medicine is incredible!</label>	</div>	<div class="form-check">	  <input class="form-check-input" type="radio" name="answer" id="poll2" value="2">	  <label class="form-check-label" for="poll2">Tell me more about this amazing human being!</label>	</div>	<div><input style="position:static;margin-top:20px;" class="btn btn-sm" type="submit" onclick="sendData()"/></div></form>';


	$(document).ready(function(){
 		$("#pollQuestion").append(pollQuestion);
 		//buildBarChart();
 		
 		deleteCookie('poll');
 		deleteCookie('hidePollModal');
 		
	  let pollTaken = getCookie("poll");
	  let hidePollModal = getCookie("hidePollModal");
	  console.log('pollID: 195');
	  console.log('pollTaken:'+pollTaken);
	  console.log('hidePollModal:'+hidePollModal);
	  
	  if (pollTaken == 195 || hidePollModal == 195) {
	   	buildBarChart();
	  } else {
	  	$("#pollQuestion").append(pollForm);
 		$("#pollResults").hide();
 		$("#pollResultsRespondents").hide();
 		
 		$('#myModal').modal('show');
 		//setCookie('poll',195,1);
 		setCookie('hidePollModal',195,30);
	  }
	  
	});


	function buildBarChart() {
		var options = {
			series: [],  		      
			chart: {
				height: 250,
				type: 'bar',
				toolbar: {show: false},
				fontFamily: 'Lato, sans-serif'        	
			},
			dataLabels: {enabled: false},
			noData: {text: 'Loading...'},
        		colors: ['#7FCACF', '#B3B8B8', '#DD7E6F','#E4B87E', '#8582BE'],
			plotOptions: {
				bar: {
					barHeight: '100%',
					distributed: true,
					horizontal: true,
					dataLabels: {position: 'bottom'},
				}
			},
			dataLabels: {
				enabled: true,
				textAnchor: 'start',
				formatter: function (val, opt) {
					let series = opt.w.config.series
					let idx = opt.dataPointIndex
					let count = series[0].data[idx].z;
					return ' ' + val + '%';
				},
				offsetX: 0,
				dropShadow: {enabled: false},
				style: {
					fontSize: '14px',
					fontFamily: 'Lato, sans-serif' ,
					fontWeight: 'normal',
					colors: '#222222'
				},
			},
			stroke: {
				width: 2,
				colors: ['#fff']
			},
			yaxis: {
				labels:{show:true},
				axisBorder:{show:true},
				tooltip:{enabled:true},      
				labels: {
		          show: true,
		          minWidth: 0,
		          maxWidth: 160,
		          style: {
					fontSize: '14px',
					fontFamily: 'Lato, sans-serif' ,
					fontWeight: 'normal',
					colors: '#222222'
		          }
		        }
			},
			xaxis: {
				labels:{show:true},
				axisBorder:{show:true},
				tooltip:{enabled:true}
			},
			legend: { show: false},
			tooltip: {
				enabled: false
			},
			grid: {
				show:false,
			    padding: {
			        top: -10,
			        right: 0,
			        bottom: 0,
			        left: 0
			    } 
			},
			tooltip: {
			    custom: function({ series, seriesIndex, dataPointIndex, w }) {
			      return (
			        '<div style="background-color:#7F7F7F;color:#fff;padding:10px;text-align:center;">' +
			        "<span>" +
			        w.globals.labels[dataPointIndex] +
			        "<br/> " +
			        series[seriesIndex][dataPointIndex] +
			        "%</span>" +
			        "</div>"
			      );
			    }
			  }
		};
		
		var chart = new ApexCharts(document.querySelector("#pollResults"), options);
		chart.render();
		
		
		$.getJSON('/poll/poll-results?pollID=195', function(response) {
			chart.updateSeries([{
				name: 'Responders',
				data: response
			}])
			$('#respondents').html('Responses: '+response[0].respondents);
			console.log('get poll results: '+ response[0].respondents);
		});
		
	};    
      



	function sendData(form){
		

			
		$('form#pollForm').on('submit', function (e) {
	    	e.preventDefault();
	    	
			setCookie('poll',195,30);
		    	
	    var formData = {
	      pollID: 195,
	      answer: $(".form-check-input:checked").val()
	    };	    
	    var pollID = $("#pollID").val();
	    var answer = $(".form-check-input:checked").val();
    	
			$.ajax({
				type: 'post',
				url: '/tally-poll?pollID='+pollID+'&answer='+answer,
				data: formData,
				success: function () {
					$("#pollForm").hide();
					$("#pollResults").show();
					$("#pollResultsRespondents").show();
					console.log('/poll/poll-results?pollID='+pollID+'&answer='+answer);
					buildBarChart();
				},           
				error : function(result){
					$("#pollForm").hide();
					form.parent().replaceWith(pollAnswerBad); // should replace the form's parent div with the result
				}
			});
		});	 

  
	};