//We start with this that is only needed and used in the help html file
function HelpPage(layout){ this.layout = layout }
HelpPage.prototype =
{
	scrollToggleFAQ: function(title)
	{
		var headers = document.getElementsByTagName('h1')
		for (var index = 0; index < headers.length; index++)
		{
			var item = headers[index];
			//TODO: change this when we have translations, so it keeps the key for all titles.
			if (item.textContent.trim() == title)
			{
				if (item.nextSibling.auto_data && item.nextSibling.click)
				{
					item.nextSibling.click()
				}
				this.layout.scrollToElement(item)
				break;
			}
		}
	},
};

//TODO: move this to the more general TemplateData wash functions! Currently they differ so much that stuff breaks.

//Then we have these items that goes into a separate help.js file.
HelpPage.prototype.toggleFAQButtonClick = function(e, element, layout)
{
	var index = element.auto_data
	this.layout.elements["toggle_button_" + index].style.display = "none"
	this.layout.elements["faq_body_" + index].style.display = "block"
	this.last_update = null;
	this.data = null;
}

HelpPage.prototype.setupFunction = function()
{
	var layout = this.layout;
	
	var footer = new StaticTemplate({ text : "##Feedback\n\
		Sadly I don't have time to respond to feedback, but I read every single email. So don't hesitate to email [support@feeds-app.com](mailto:support@feeds-app.com)\n" })
	var header = new StaticTemplate(layout.mainTitleSmall);
	
	var templateOptions = { header: header, footer: footer, classPrefix: "help", layout : layout, backgroundImage: "img/help_bg.jpg", imageColor: layout.feedsBlueColor, lessSpaciousLayout: 1, firstStyle: {}, secondStyle: { backgroundColor: layout.feedsBlueColor, color: "white" }, opaqueFooter: 1, }
	this.template = new FixedBackgroundTemplate(templateOptions);
	layout.setCSSFromSelector("." + this.template.classPrefix + "backgroundFixed", { backgroundPosition: "center center" })
	
	this.dataHandler = new TemplateData({layout: layout, template: this, table: "help", isStatic: 1})
	this.dataHandler.fetchData()
	layout.setCSSFromSelector(".toggle_button:hover", { backgroundColor : "rgb(179, 179, 179)" })
	
	var buttonPadding = 4;
	var button = layout.setCSSFromSelector(".toggle_button",
	{
		fontSize: "1em",
		display : "inline-block",
		textDecoration : "none",
		padding : buttonPadding+"px " + 2*buttonPadding+"px ",
		cursor : "pointer",

		textAlign : "left",
		//border : "1px solid rgba(0,0,0,0.42)",
		border: "none",
		backgroundColor : "inherit",
		color : "inherit",
	})
	layout.borderRadius(button, 30)
	
	layout.setCSSFromSelector("pre", { overflowX : "auto" });
	layout.setCSSFromSelector("pre ::-webkit-scrollbar",
	{
	    webkitAppearance: "none",
	    width: "7px",
		height: "8px"
	})
	layout.setCSSFromSelector("pre ::-webkit-scrollbar-thumb",
	{
	    borderRadius: "5px",
	    backgroundColor: "rgba(0,0,0,.5)",
	    boxShadow: "0 0 1px rgba(255,255,255,.5)"
	})
	layout.setCSSFromSelector("pre ::-webkit-scrollbar-corner",
	{
		backgroundColor: "rgba(0,0,0,0)",
	})
}

HelpPage.prototype.layoutFunction = function(rootElement)
{
	var layout = this.layout;
	if (!rootElement)
		rootElement = this.layout.elements.rootElement;
	
	layout.layoutJSON(rootElement, this.template.templateJSON())
	
	if (layout.is_feedsApp)
	{
		//layout.elements.view_intro_video.innerHTML = "<a href='#view_intro_video'><button>View intro again</button></a>";
	}
	
	this.template.layoutFunction(rootElement)
}

HelpPage.prototype.setContentData = function(data)
{
	this.template.setContentData(data)
}

HelpPage.prototype.washData = function(data)
{
	for (var index = 0; index < data.length; index++)
	{
		var post = data[index];
		//try regex -replace newlines.
		var layoutJSON = post.json_data
		if (layoutJSON)
		{
			layoutJSON = post.json_data.replace(/(\r\n|\n|\r)/gm, "\\n")
			layoutJSON = JSON.parse(layoutJSON);
			if (layoutJSON.type == "faq")
			{
				//replace general format to specific
				post.children =
				[
					{ html: post.title, type: "h1" },
					{ auto_data: index, var: "toggle_button_" + index, autoType: AUTO_TYPE.button, html: "➡︎ " + post.lead, autoListeners: { "click" : { target: this, includeEvent : 1, includeElement : 1, function: "toggleFAQButtonClick"}}, type: "div", className: "toggle_button" },
					{ var: "faq_body_" + index, text: post.body, style : { display : "none" }},
				]
				post.title = null;
				post.lead = null;
				post.body = null;
			}
		}
	}
}