class vademecum_widget{
		constructor(){

			this.backgroundColor1   = 'black';
			this.textColor1         = 'white';
			this.textHighlightColor1 = '#ff6900';
			this.fontFamily1        = 'futura-pt,sans-serif';

			this.backgroundColor2   = 'white';
			this.textColor2         = 'black';
			this.textHighlightColor2 = '#ff6900';
			this.fontFamily2        = 'futura-pt,sans-serif';
			this.cid		= '';
			this.summary		= '';
			this.currency		= '';
			this.cost		= '';
		}

		build(style='small-1', course='Kung Fu Fit', element='',theme='light'){
			this.setStyle(style);
			this.setTheme(theme);
			this.setElement(element);
			this.getCourse(course);
		}
		setStyle(style){
			this.style = style;
		}
		setTheme(theme){
			this.theme = theme;
		}
		getCourse(course){
			this.course = course;
			var xmlhttp = new XMLHttpRequest();

			var instance = this;
			xmlhttp.onreadystatechange = function() {
				if (this.readyState == 4 && this.status == 200) {
					var courseArray = JSON.parse(this.responseText);
					instance.cid = courseArray.cid;
					instance.summary = courseArray.summary;
					instance.currency = courseArray.currency;
					instance.cost = courseArray.cost;
					document.getElementById(instance.element).append(instance.code());
				}
			};	


			xmlhttp.open("POST", "https://vademecum-academy.com/platform/vademecum-widget.php?course=" + this.course, true);
			xmlhttp.send();

			this.platformLink      = 'https://vademecum-academy.com';
			this.signupLink        = 'https://vademecum-academy.com/platform/login/signup.php?lang=en';
			this.linkText          = 'Create free account';
			this.target            = 'VadeMecum';

		}
		setElement(element){
			this.element = element;
		}
		setLanguage(language){
			this.language = language;
		}

		code(){
			if(this.course)return this.render();
			else return "";
		}

		render() {
			if(!_paq){ var _paq = window._paq = window._paq || []; }
			_paq.push(['setCustomVariable',1,'widget','2024-04-27 17:13:44+02:00','visit']);
			_paq.push(['trackPageView']);
			_paq.push(['enableLinkTracking']);
			(function() {
				var u="https://matomo.webappearance.de/";
				_paq.push(['setTrackerUrl', u+'matomo.php']);
				_paq.push(['setSiteId', '8']);
				var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
				g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
			})();
			var div = document.createElement ("div");
			div.style.padding = "0";
			div.style.margin = "0";

			var logo = document.createElement ("img");
			logo.src = "https://vademecum-academy.com/platform/logo.svg";

			var logoLink = document.createElement ("a");
			logoLink.target = this.target;
			logoLink.href = this.platformLink;
			logoLink.append(logo);

			var title = document.createElement ("h3");
			title.style.color = this.textHighlightColor1;
			title.innerHTML = this.course;

			var courselink = 'https://vademecum-academy.com/platform/course/view.php?id=' + this.cid;

			var link = document.createElement("a");
			link.href = this.signupLink;
			link.target = this.target;
			link.style.color = this.textHighlightColor1;
			link.style.textDecoration = "underline";
			link.style.fontWeight = "normal";
			link.style.textDecoration = "none";

			link.innerHTML = this.linkText + ' »';

			var linkToCourse = document.createElement("a");
			linkToCourse.href = courselink;
			linkToCourse.target = this.target;
			linkToCourse.setAttribute = ("title",this.linkText);
			linkToCourse.style.textDecoration = "none";

			var accountLink = document.createElement("div");
			accountLink.append(link);
			accountLink.style.textAlign = "left";

			var price = document.createElement ("div");
			price.style.color = this.textHighlightColor1;
			price.innerHTML = this.cost + " ";

			if(this.currency == "EUR") price.append("€");

			switch (this.theme){
			case 'dark':
				_paq.push(['setCustomVariable',2,'theme','dark','page']);
				div.style.backgroundColor = this.backgroundColor1;
				div.style.fontFamily = this.fontFamily1;
				div.style.color = this.textColor1;
				div.style.border = "1px solid #e8e8e8";
				div.style.backgroundImage = "url(https://vademecum-academy.com/platform/boxbg2.png)";

			break;
			default:
				_paq.push(['setCustomVariable',2,'theme','default','page']);
				div.style.backgroundColor = this.backgroundColor2;
				div.style.fontFamily = this.fontFamily2;
				div.style.color = this.textColor2;
				div.style.border = "1px solid #e8e8e8";
				div.style.backgroundImage = "url(https://vademecum-academy.com/platform/boxbg2.png)";

			}

			_paq.push(['setCustomVariable',3,'style',this.style,'page']);
			switch (this.style){
		  	case 'large-1':
				var summary = document.createElement("div");
				summary.innerHTML = this.summary;
				div.style.maxWidth = "1200px";
				div.style.border = "0";
				div.style.backgroundPosition = "left -139px bottom -34px";
				div.style.backgroundRepeat = "no-repeat";
				div.style.backgroundSize = "400px 225px";
				div.style.borderRadius = "3px";
				//div.style.boxShadow = "1px 1px 2px 0px rgba(0, 0, 0, 0.36)";
				logo.style.margin = "20px";
				title.style.fontSize = "36px";
				title.style.margin = "20px";
				summary.style.margin = "20px";
				summary.style.fontSize = "16px";
				summary.style.lineHeight = "24px";
				price.style.fontSize = "60px";
				price.style.padding = "20px 20px 60px 0";
				price.style.margin = "0px";
				price.style.textAlign = "right";
				price.style.clear = "both";
				link.style.fontSize = "16px";
				accountLink.style.margin = "20px";
				accountLink.style.textAlign = "right";
				div.append(logoLink);
				var titleToCourse = linkToCourse.cloneNode(true);
				titleToCourse.append(title);
				div.append(titleToCourse);
				div.append(summary);
				div.append(accountLink);
				var priceToCourse = linkToCourse.cloneNode(true);
				priceToCourse.append(price);
				div.append(priceToCourse);

		  	break;
		  	case 'large-2':
				var summary = document.createElement("div");
				summary.innerHTML = this.summary;
				div.style.maxWidth = "1200px";
				div.style.backgroundPosition = "left -139px bottom -34px";
				div.style.backgroundRepeat = "no-repeat";
				div.style.backgroundSize = "400px 225px";
				div.style.borderRadius = "3px";
				logo.style.margin = "20px";
				title.style.fontSize = "36px";
				title.style.margin = "20px";
				summary.style.margin = "20px";
				summary.style.fontSize = "16px";
				summary.style.lineHeight = "24px";
				price.style.fontSize = "60px";
				price.style.padding = "20px 20px 60px 0";
				price.style.margin = "0px";
				price.style.textAlign = "right";
				price.style.clear = "both";
				link.style.fontSize = "16px";
				accountLink.style.margin = "20px";
				accountLink.style.clear = "both";
				accountLink.style.textAlign = "right";
				logo.style.maxWidth = "200px";
				logo.style.float = "right";
				var titleToCourse = linkToCourse.cloneNode(true);
				titleToCourse.append(title);
				div.append(titleToCourse);
				div.append(summary);
				div.append(logoLink);
				div.append(accountLink);
				var priceToCourse = linkToCourse.cloneNode(true);
				priceToCourse.append(price);
				div.append(priceToCourse);

		  	break;
		  	case 'large-3':
				var summary = document.createElement("div");
				summary.innerHTML = this.summary;
				div.style.maxWidth = "1200px";
				div.style.backgroundPosition = "left -139px bottom -34px";
				div.style.backgroundRepeat = "no-repeat";
				div.style.backgroundSize = "400px 225px";
				div.style.borderRadius = "3px";
				logo.style.margin = "20px";
				title.style.fontSize = "36px";
				title.style.margin = "20px";
				summary.style.margin = "20px";
				summary.style.fontSize = "16px";
				summary.style.lineHeight = "24px";
				price.style.fontSize = "60px";
				price.style.padding = "20px 20px 60px 0";
				price.style.margin = "0px";
				price.style.textAlign = "right";
				price.style.clear = "both";
				link.style.fontSize = "16px";
				accountLink.style.margin = "20px";
				accountLink.style.clear = "both";
				accountLink.style.textAlign = "right";
				logo.style.maxWidth = "200px";
				logo.style.float = "right";
				var titleToCourse = linkToCourse.cloneNode(true);
				titleToCourse.append(title);
				div.append(titleToCourse);
				var image = document.createElement("img");
				image.src = "https://vademecum-academy.com/platform/vademecum-widget-image.php?course=" + this.cid;
				image.style.width = "100%";
				var imageToCourse = linkToCourse.cloneNode(true);
				imageToCourse.append(image);
				div.append(imageToCourse);
				div.append(summary);
				div.append(logoLink);
				div.append(accountLink);
				var priceToCourse = linkToCourse.cloneNode(true);
				priceToCourse.append(price);
				div.append(priceToCourse);

		  	break;
		  	case 'small-1':
				div.style.maxWidth = "350px";
				div.style.border = "0";
				div.style.backgroundImage = 'none';
				div.style.padding = "0";
				logo.style.margin = "5px";
				title.style.fontSize = "26px";
				title.style.margin = "5px";
				title.style.color = div.style.color;
				price.style.fontSize = "36px";
				price.style.color = div.style.color;
				price.style.margin = "20px 5px";
				price.style.fontWeight = "bold";
				price.style.textAlign = "left";
				price.style.clear = "both";
				link.style.fontSize = "16px";
				accountLink.style.margin = "5px";
				div.append(logoLink);
				div.append(accountLink);
				var titleToCourse = linkToCourse.cloneNode(true);
				titleToCourse.append(title);
				div.append(titleToCourse);
				var priceToCourse = linkToCourse.cloneNode(true);
				priceToCourse.append(price);
				div.append(priceToCourse);
		  	break;
		  	case 'small-2':
				div.style.maxWidth = "350px";
				div.style.border = "0";
				div.style.backgroundImage = 'none';
				div.style.padding = "0";
				logo.style.margin = "5px";
				title.style.fontSize = "26px";
				title.style.margin = "5px";
				title.style.color = div.style.color;
				price.style.fontSize = "36px";
				price.style.color = div.style.color;
				price.style.margin = "20px 5px";
				price.style.fontWeight = "bold";
				price.style.textAlign = "left";
				price.style.clear = "both";
				link.style.fontSize = "16px";
				accountLink.style.margin = "5px";
				div.append(accountLink);
				var titleToCourse = linkToCourse.cloneNode(true);
				titleToCourse.append(title);
				div.append(titleToCourse);
				var priceToCourse = linkToCourse.cloneNode(true);
				priceToCourse.append(price);
				div.append(priceToCourse);
		  	break;
		  	case 'small-3':
				div.style.maxWidth = "350px";
				div.style.border = "0";
				div.style.backgroundImage = 'none';
				div.style.padding = "0";
				logo.style.margin = "5px";
				title.style.fontSize = "26px";
				title.style.margin = "5px";
				title.style.color = div.style.color;
				price.style.fontSize = "36px";
				price.style.color = div.style.color;
				price.style.margin = "20px 5px";
				price.style.fontWeight = "bold";
				price.style.textAlign = "left";
				price.style.clear = "both";
				link.style.fontSize = "16px";
				accountLink.style.margin = "5px";
				var titleToCourse = linkToCourse.cloneNode(true);
				titleToCourse.append(title);
				div.append(titleToCourse);
				var image = document.createElement("img");
				image.src = "https://vademecum-academy.com/platform/vademecum-widget-image.php?course=" + this.cid;
				image.style.width = "100%";
				var imageToCourse = linkToCourse.cloneNode(true);
				imageToCourse.append(image);
				div.append(imageToCourse);
				div.append(accountLink);
				var priceToCourse = linkToCourse.cloneNode(true);
				priceToCourse.append(price);
				div.append(priceToCourse);
		  	break;
		  	default:
				div.style.width = "250px";
				div.style.border = "0";
				div.append(logoLink);
		  	break;
			}
			return div;
		}
	}