// Wait until dom is ready...
  $( document ).ready(function() {

	getSatisfactionScore = function(){
		$.post(ddeLoc +  "getsatisfaction", '{"sessionid":"' + getSessionId() + '"}')
		.done( function(dataReturned){
			// Show the last satisfaction score
			// Since I'm trying to make this generic (and don't want to have to change lots of target HTML pages) this is all 
			//  done by injecting the elements into the DOM
			var li =  document.querySelector("#navbar .nav #satisfaction");
			if (null == li)
			{
				// Not in the UI already, so inject it
				var ul = document.querySelector("#navbar .nav");
				li = document.createElement("li");
				li.id = "satisfaction";
				li.classList.add("dropdown");				
				ul.appendChild(li);
			}
			var smiley = "undefined"
			if (""==dataReturned.Satisfaction_Value) 
				smiley = "undefined";
			else{
				var satisfactionValue = parseFloat(dataReturned.Satisfaction_Value);
				console.log("Satisfaction value is " + satisfactionValue);
				//"Satisfaction_Value" should be 0.0 to 100.0. Map to our image
				// Note that this could be done in the rule, but easier here
				if (satisfactionValue<=20)
					smiley = "1";
				else if (satisfactionValue<=40)
					smiley = "2";
				else if (satisfactionValue<=60)
					smiley = "3";
				else if (satisfactionValue<=80)
					smiley = "4";
				else 
					smiley = "5";
			}
			// If the user clicks on this then we always show the survey, as they'll probably want to change it
			li.innerHTML = "<a href='#' onclick='showSurvey()'><img src='./satisfaction/" + smiley + ".png' style='width:20px; height:20px;'/></a>";
			
		})
		.error(function(XMLHttpRequest, textStatus, errorThrown){
			// There's probably no rule, so we'll not do anything here
			console.log("DDE call failed: " + textStatus + " / " + errorThrown)
		})	
	
	}
	
	// Ask DDE if this user should have the survey shown
	getShowSurvey = function()
	{
		$.post(ddeLoc +  "can-show-satisfaction-survey", '{"sessionid":"' + getSessionId() + '"}')
		.done( function(dataReturned){
			console.log("Can we show the survey? " + dataReturned.output);
			if ("true"==dataReturned.output)
			{
				// Truthy? Then inject the survey HTML
				showSurvey();
			}
		})
		.error(function(XMLHttpRequest, textStatus, errorThrown){
			// There's probably no rule, so we'll not do anything here
			if (console.log){
				console.log("DDE call failed: " + textStatus + " / " + errorThrown)
			}		
		})	
	}
	
	// Show the survey. This might be a bit intrusive, so we only show it if a rule says we can (or if the user explicitly clicks for it)
	showSurvey = function(){
		
		// Since I'm trying to make this generic (and don't want to have to change lots of target HTML pages) this is all 
		//  done by injecting the elements into the DOM
		var surveyBar =  document.querySelector("#surveyBar");
		if (null == surveyBar)
		{
			// Not in the UI already, so inject it above the featuresbar
			var featuresBar =  document.querySelector("#featuresBar");
			var ul = document.querySelector("#navbar .nav");
			surveyBar = document.createElement("section");
			surveyBar.id = "surveyBar";
			surveyBar.classList.add("full-width","bg-blue");	
			// Yes, this is an awkward way of generating a bit of UI, but I can't be bothered with HTML templates			
			surveyHtml =  '<div class="features-bar">';
			surveyHtml += '<div><span id="survey-text" class="icon-star-full">How are we doing? </span></div>';
			surveyHtml += '<div><span><img src="./satisfaction/1.png" style="width:40px; height:40px;" onclick="writeSurvey(1)"/></span></div>';
			surveyHtml += '<div><span><img src="./satisfaction/2.png" style="width:40px; height:40px;" onclick="writeSurvey(2)"/></span></div>';
			surveyHtml += '<div><span><img src="./satisfaction/3.png" style="width:40px; height:40px;" onclick="writeSurvey(3)"/></span></div>';
			surveyHtml += '<div><span><img src="./satisfaction/4.png" style="width:40px; height:40px;" onclick="writeSurvey(4)"/></span></div>';
			surveyHtml += '<div><span><img src="./satisfaction/5.png" style="width:40px; height:40px;" onclick="writeSurvey(5)"/></span></div>';
			surveyHtml +=  '</div>';
			
			surveyBar.innerHTML = surveyHtml;
			featuresBar.parentNode.insertBefore(surveyBar, featuresBar);
		}
		// Set the text cleanly
		document.querySelector("#survey-text").innerHTML = "How are we doing?";
		
		
		// This is even more intrusive - a dialog - and quite ugly with it...
		/*let value = prompt("How satisfied are you on a scale of 1 (unhappy) to 5 (happy)?", "3");
			writeSurvey(value);
		*/
	}
	
	// Given a survey score, send it to DDE`
	writeSurvey = function(value)
	{
		if (null != value && value != "")
		{
			if (console.log){
				console.log("Writing satisfaction value: " + value);
			}
			// Tell DDE about the new score
			$.post(ddeLoc +  "writesatisfaction", '{"sessionid":"' + getSessionId() + '","satisfaction":"' + value +'"}')
			// And re-read the score. Give it a moment's delay to visually indicate there's something going on
			setTimeout(function() {
				getSatisfactionScore();
			},500);
		}
		// Say ta
		document.querySelector("#survey-text").innerHTML = "Thanks for your feedback";
		
	}
	
	// Make an initial call to the server to populate the data
	getSatisfactionScore();
	// And also ask if we should interrupt the user to ask for their satisfaction
	getShowSurvey();
	
});