var icons_folder	= "/data/layout-icons/";
var select_layout	= document.getElementById('story_layout');
var layout_icon		= "";

if(select_layout)
{
	var layout_preview = document.getElementById('layout_preview');
	
	select_layout.onchange = function()
	{
		Loader(icons_folder + this.options[this.selectedIndex].value + ".jpg");
	}
}


function Loader(imageURL)
{
	layout_preview.src = icons_folder + "loader.gif";
	
	layout_icon = imageURL;
	
	layout_preview.style.display = "block";
	
	var img = new Image;
	
	img.onload	= Loader.prototype.onload;
	img.onerror	= Loader.prototype.onerror;
	img.onabort	= Loader.prototype.onabort;
	
	img.src = layout_icon;
}

Loader.prototype.onload = function()
{
	layout_preview.src = layout_icon;
}

Loader.prototype.onerror = function()
{
	layout_preview.src = icons_folder + "error.jpg";
}

Loader.prototype.onabort = function()
{
	layout_preview.style.display = "none";
}



function getElementsByClassName(class_name, node, tag)
{
	var class_elements = [];
	var regex = new RegExp('\\b' + class_name + '\\b');
	var tag_elements = node.getElementsByTagName(tag);
	
	for(var i=0; i<tag_elements.length; i++)
	{
		if(regex.test(tag_elements[i].className))
		{
			class_elements.push(tag_elements[i]);
		}
	}
	
	return class_elements;
}


var tabs = getElementsByClassName("tabs", document.getElementsByTagName("body")[0], "div");

if(tabs.length)
{
	for(var i=0; i<tabs.length; i++)
	{
		var tab_links = document.createElement('div');
		
		tab_links.className = "tab_links";
		
		tabs[i].insertBefore(tab_links, tabs[i].childNodes[0]);
		
		
		var tab_titles = [];
		var tab = getElementsByClassName("tab", tabs[i], "div");
		
		for(var j=0; j<tab.length; j++)
		{
			var tab_link = document.createElement('a');
			var tab_link_text = document.createTextNode(tab[j].title);
			
			tab_link.appendChild(tab_link_text);
			
			
			tab_link.setAttribute("href", "javascript:void(null);");
			tab_link.setAttribute("id", "link-" + i + "-" + j);
			
			tab_links.insertBefore(tab_link, null);

			
			tab_link.onclick = function()
			{
				set_tab(this.id);
				this.blur();
			}
			


			if(j>0)
			{
				tab[j].style.display = "none";
			}
			else
			{
				link_set_active("link-" + i + "-" + j);
			}
		}
	}
}


function set_tab(setter)
{
	var link_data = setter.split("-");
	
	var tab = getElementsByClassName("tab", tabs[link_data[1]], "div");
	
	
	for(var i=0; i<tab.length; i++)
	{
		if(i != link_data[2])
		{
			tab[i].style.display = "none";

			link_set_inactive("link-" + link_data[1] + "-" + i);
		}
		else
		{
			tab[i].style.display = "block";
			
			link_set_active(setter);
		}
	}
}

function link_set_active(link_id)
{
	document.getElementById(link_id).setAttribute("class", "active-link");
	
	document.getElementById(link_id).style.backgroundColor = "transparent";
	document.getElementById(link_id).style.borderBottomColor = "#f3f8fa";
}

function link_set_inactive(link_id)
{
	document.getElementById(link_id).removeAttribute("class");
	document.getElementById(link_id).removeAttribute("style");
}