/*
A starting point to layout article like content.
In the template we put all those things that we might want to swap between articles. They can only affect things inside the article divs - not the body, menus, sidoePanels/frontPages or anything that describes anything other than each articles content.
*/
AggressiveLayout.prototype.articleTemplateCSS = function ()
{
	if (!window.content || !content.colors) content = { colors: { menu_background_color: "inherit", menu_front_color: "inherit", body_background_color: "inherit", body_front_color: "inherit", body_link_color: "inherit" }}
	
    this.setCSSFromSelector(".articleDiv", { fontFamily : "georgia, athelas serif, serif", padding: "0 10px" });
    this.setCSSFromSelector(".articleDiv a", { color : content.colors.body_link_color })
    
    this.setCSSFromSelector(".contentDiv", { backgroundColor : content.colors.body_background_color })
    
    var helveticaNeue = "HelveticaNeueLight, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif";
    var headings_setup = { fontWeight : "100", color : content.colors.body_front_color, fontFamily : helveticaNeue, textIndent : "0px" };
    this.setCSSFromSelector(".articleDiv h2", headings_setup)
    this.setCSSFromSelector(".articleDiv h3", headings_setup)
    this.setCSSFromSelector(".articleDiv h4", headings_setup)
    this.setCSSFromSelector(".articleDiv h3", headings_setup)
	
	this.setCSSFromSelector(".articleDiv h1", Object.assign(headings_setup, { fontSize : "3em", lineHeight: "1em" }))
    
    this.maxArticleWidth = 650;
    this.setCSSFromSelector(".articleTitleImage", { maxHeight : "400px", margin : "auto", display: "block" })
    this.setCSSFromSelector(".articleDiv", { maxWidth : this.maxArticleWidth + "px", margin : "auto", display: "block" })    //"#f2f2f3"
        
    this.setCSSFromSelector(".articleTitle", { padding: "0px 5px" })
    this.setCSSFromSelector(".articleLead", { fontWeight : "bold",  padding: "0px 5px" })
	
	this.setCSSFromSelector(".articleSeries", { cssFloat: "left", fontSize: "1.1em", margin: "1px", padding: "3px", color: content.colors.menu_front_color, backgroundColor: content.colors.menu_background_color, border: "1px dashed " + content.colors.menu_front_color, cursor : "pointer" })
	this.setCSSFromSelector(".articleSeries:hover", { color: "white", backgroundColor: "black" })
	
	this.setCSSFromSelector(".articleDate", { clear: "both", fontSize: "0.85em", padding: "0px 5px" })
    this.setCSSFromSelector(".articleTags", { cssFloat: "right", paddingLeft: "5px", maxWidth: "50%" })
	this.setCSSFromSelector(".articleTag", { cssFloat: "right", padding : "3px", margin: "1px", border: "1px solid " + content.colors.menu_background_color, cursor : "pointer" })
	this.setCSSFromSelector(".articleTag:hover", { color: "white", backgroundColor: "black" })
	
	//all lists don't have extra indents
	this.setCSSFromSelector("li", { textIndent : "0em" })
	this.setCSSFromSelector("ul", { textIndent : "0em" })
	this.setCSSFromSelector("ol", { textIndent : "0em" })
	
	//images in the text not much we can do?
	this.setCSSFromSelector(".articleText img", { maxWidth: "100%"})
	this.setCSSFromSelector(".articleText figcaption", { fontStyle: "italic", fontSize: "0.8em"})
	
    //Anfang - dropCaps
    var dropCaps = this.setCSSFromSelector(".articleText > p:first-child::first-letter",
	{
		color : content.colors.menu_background_color, cssFloat: "left", textIndent : "0em", padding: "4px 8px 0px 3px",
        fontSize: "5.4em", lineHeight: "0.7em"
    })
	
	//you can't use initial-letter in safari until AppleWebKit/603 - but it is still available in previous versions...
	//Also, initialLetter takes precedance over other styling, so we don't need to care about previous styling
	//this teaches us to stick with the basics that works in all browsers, here we have a wasted day.
	/*
	if (this.cssIsSupported("initial-letter", 3))
	{
		this.styleWithVendorPrefix(dropCaps, "initialLetter", 3)
	}
	*/
	
	//make all other p's don't have indent
	this.setCSSFromSelector(".articleText p:first-child", { textIndent : "0em" })

    var articleText = this.setCSSFromSelector(".articleText",
	{
		padding: "0px", textIndent : "1em", fontWeight : "100",
		fontSize : "1.2em", lineHeight : "1.5em",
	})
	var safari = false
	if (this.platform)
		safari = this.platform().safari
	else
		safari = window.is_safari
	
    if (safari)
    	this.justifyText(articleText)
    
    
    //every p immidiately following a h2,h3 inside the article text cannot have indents.
    this.setCSSFromSelector(".articleText h2 + p", { textIndent : "0em" })
	this.setCSSFromSelector(".articleText h3 + p", { textIndent : "0em" })
	this.setCSSFromSelector(".articleText pre", { overflow: "scroll", "-webkit-overflow-scrolling": "touch" });
	
	//Whaaaaat does this do? Propably turning invisible scrollbars to visible in iOS?
	this.setCSSFromSelector(".articleText ::-webkit-scrollbar",
	{
	    webkitAppearance: "none",
	    width: "7px",
		height: "8px"
	})
	this.setCSSFromSelector(".articleText ::-webkit-scrollbar-thumb",
	{
	    borderRadius: "5px",
	    backgroundColor: "rgba(0,0,0,.5)",
	    boxShadow: "0 0 1px rgba(255,255,255,.5)"
	})
};

/*
This is the default template for articles - perhaps we will never need anything more specialized than this - if we have more data in the articles we should be able to add them for everyone?

TODO: next in series!
*/
AggressiveLayout.prototype.generateArticleJSON = function(article)
{
	//prepare any articleTags if exists:
	var tagJSON = [];
	if (article.tags && article.tags.length)
	{
		for (var index = 0; index < article.tags.length; index++)
		{
			var tag_object = article.tags[index]
			var tagDiv =
			{
				autoType: AUTO_TYPE.anchorLink, html : tag_object.name, className: "articleTag", keysAndValues: { "tag_id": tag_object.id, "series_id": null, "post_url" : null }
			}
			tagJSON.push(tagDiv)
		}
	}
	
	var imageDiv = article.title_image ? { className : "articleTitleImage", src : article.title_image, autoType: AUTO_TYPE.image } : {}
	var articleJSON =
	{
		html: null, children :
		[
			{ className : "articleDiv", children:
				[
					{ className : "articleDiv", children:
						[
							{ type: "article", className : "articleDiv", style : { paddingBottom: "10px" }, children: 	//this is the textDiv
								[
									{ className : "articleTitle", text : article.title ? "#" + article.title : "", hideLinkStyle: 1, autoType: AUTO_TYPE.anchorLink, key: "post_url", },
									imageDiv,
									{ className : "articleSeries", html: article.series, style : { display : article.series ? "" : "none" },
										autoType: AUTO_TYPE.anchorLink, keysAndValues: { "tag_id": null, "series_id": article.series_id, "post_url" : null }
									},
									{ className : "articleTags", children : tagJSON },
									{ className : "articleDate", html : article.publish_date_string },
									{ className : "articleLead", text : article.lead || "" },
									{ className : "articleText", text : article.body },
								]
							},
						]
					},
				]
			},
		]
	}
	return articleJSON;
}

AggressiveLayout.prototype.articleTemplateLayout = function(article, parentDiv, options)
{
	var json = this.generateArticleJSON(article);
	this.layoutJSON(parentDiv, [json])
	this.fillHeightOfParent(parentDiv);
}