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 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">What are you most looking forward to learning about in this months Maddie\'s Insights webcast? </p>'
		var pollQuestion = '<h5>What are you most looking forward to learning about in this months Maddie\'s Insights webcast? </h5><p style="z-index:100;"><a href="https://forum.maddiesfund.org/events/maddiesinsights">Join us on Dec 11 for Exploration of Opportunities for Barriers and Bias During Off Site Adoption Events</h5>'
		var pollLink = '<p><a href="https://forum.maddiesfund.org/events/maddiesinsights">Join us on Dec 11 for Exploration of Opportunities for Barriers and Bias During Off Site Adoption Events</h5>'
		
		var pollForm = '<form action="/tally-poll" method="post" class="formClass" id="pollForm">	<input type="hidden" id="pollID" name="pollID" value="213"/>		<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">Common processes in adoption decision-making</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">The role of implicit bias in these processes</label>	</div>		<div class="form-check">	  <input class="form-check-input" type="radio" name="answer" id="poll3" value="3">	  <label class="form-check-label" for="poll3">How organizational procedures can affect speed and equity of adoptions</label>	</div>		<div class="form-check">	  <input class="form-check-input" type="radio" name="answer" id="poll4" value="4">	  <label class="form-check-label" for="poll4">All of the above</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();
 		
 		
	  let pollTaken = getCookie("poll");
	  
	  if (pollTaken == 213) {
	   	buildBarChart();
	  } else {
	  	$("#pollQuestion").append(pollForm);
 		$("#pollResults").hide();
 		$("#pollResultsRespondents").hide();
 		
	  }
	  
	});


	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,
		          align: 'right',
		          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=213', 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',213,30);
			setCookie('hidePollModal',213,30);
		    	
	    var formData = {
	      pollID: 213,
	      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
				}
			});
		});	 

  
	};