/*
	Add this script line just before closing body tag
	<script type="text/javascript" src="//api.responster.com/popoversurvey/"></script>
	Any object that should open a survey needs to have the css class 'open-survey'

	There are 2 ways to specify which survey the element should open

	1: add the data attribute with the form url, without protocol
	 	ex: data = 'form.responster.com/mxXvC4/?email=mail@box.com'

	2: add the survey attribute to the element with the 6 letter survey id
		ex: survey = 'mxXvC4'
	   if there are meta data, add the meta attribute to the element
	   	ex: meta = 'email=mail@box.com'
*/

(function () {
	addClickListeners('open-survey');
	styleLaunchButton();

	function addClickListeners(classname) {
		var elements = document.getElementsByClassName(classname);
		for (var i = 0; i < elements.length; i++) {
			elements[i].style.cssText = 'cursor:pointer;';
			addEvent(elements[i],'click',function(e) { showSurvey(e) });
		}
	}

	function styleLaunchButton() {
		var button = document.getElementsByClassName("responster-button")[0];
		if (button) {
			button.setAttribute("style", "background: #19adee; color: #fff; border: 0; padding: 18px 30px; font-weight: 400; border-radius: 4px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 14px; cursor: pointer; outline: 0 !important;");
		}
	}

	function showSurvey(obj) {
		obj.preventDefault();
		var targeturl = createUrlForTarget(obj.target);
		if(targeturl == '') { return false; }
		createDivFrameToUrl(targeturl);
	}

	function createDivFrameToUrl(targeturl) {
		var d = document;
		var close = createCloseButton();
		var iframe = createSurveyFrame('https://'+targeturl);
		var overlay = createOverlayDiv();
		overlay.appendChild(iframe);
		overlay.appendChild(close);
		d.body.appendChild(overlay);
	}

	function createCloseButton() {
		var close = document.createElement('div');
		close.style.cssText = 'cursor: pointer; top: 20px; right: 20px; width: 18px; height: 18px; position: fixed; background: url(https://account.responster.com/images/sprite.png) -232px -475px no-repeat;';
		close.setAttribute('title', 'Close');
		return close;
	}

	function createSurveyFrame(url) {
		var iframe = document.createElement('iframe');
		iframe.style.cssText = 'width: 90%; width: calc(100vw - 100px); height: 84%; height: calc(100vh - 100px); border: none;';
		iframe.src = url;
		var shadowWrapper = document.createElement('div');
		shadowWrapper.style.cssText= 'background: rgba(20,20,0,.9); position: absolute; width: 90%; width: calc(100vw - 100px); height: 84%; height: calc(100vh - 100px); top: 5%; top: calc(0vh + 50px); left: 8%; left: calc(0vw + 50px); box-shadow: rgba(0,0,0,0.5) 0 0 200px; border-radius: 5px;';
		var roundedWrapper = document.createElement('div');
		roundedWrapper.style.cssText = 'border-radius: 5px; overflow: hidden;'
		shadowWrapper.appendChild(roundedWrapper);
		roundedWrapper.appendChild(iframe);
		return shadowWrapper;
	}

	function createOverlayDiv() {
		var div = document.createElement('div');
		div.id = 'ResponsterSurvey';
		div.style.cssText = 'top: 0; left: 0; width: 100%; height: 100%; position: fixed; z-index: 9999; background: rgba(0,0,0,0.8);';
		addEvent(div,'click',function() { div.parentNode.removeChild(div) });
		return div;
	}

	function createUrlForTarget(element) {
		var targeturl = element.getAttribute('data');
		if(!targeturl) {
			var survey = element.getAttribute('survey');
			if(!isValidFormID(survey)) {
				return '';
			}

			var meta = element.getAttribute('meta');
			targeturl = 'form.responster.com/' + encodeURI(survey);
			if(meta) {
				targeturl = targeturl + '/?' + encodeURI(meta);
			}
		}
		return targeturl.replace(/https?\:\/+/i,'').replace(/^\/+/,'');
	}

	function isValidFormID(formID) {
		return (formID.replace(/[a-z0-9]/ig,'') == '');
	}

	function addEvent(element, evnt, funct) {
		if (element.attachEvent) {
		  	element.attachEvent('on'+evnt, funct);
		} else {
		  	element.addEventListener(evnt, funct, false);
		}
	}
})();