var list = document.getElementById('covernav');
var items = list.getElementsByTagName('li');

for (var i = 0; i < items.length; i++)
{
	if (items[i].className == "link")
	{
	if (i == 1)
	{
		items[i].style.backgroundColor = '#1c2431';
		items[i].active = 1;
	//	items[i].style.width = '291px';
		items[i].childNodes[0].className = "displayed";
		//document.getElementById((i + 1) + '_title').style.display = "";
	}
	else
	{
		items[i].active = 0;
		items[i].style.width = '21px';
		items[i].className = "";
	}
	}
		
	items[i].onclick = function()
	{
		switch_cover(this, 1);
		return false;
	}
}

var something = setTimeout("changestory()", 5000);

function offset(obj)
{
	var left_offset = obj.offsetLeft;
	var top_offset = obj.offsetTop;

	while ((obj = obj.offsetParent) != null)
	{
		left_offset += obj.offsetLeft;
		top_offset += obj.offsetTop;
	}

	return { 'left' : left_offset, 'top' : top_offset };
}

/*var mainoff = offset(items[0]);
var mainrealoff = offset(items[0]);
document.getElementById('arrow').style.position = "absolute";
document.getElementById('arrow').style.left = parseInt(mainrealoff['left'] + 3) + 'px';
document.getElementById('arrow').style.top = parseInt(mainoff['top'] - 8) + 'px';*/

function changestory()
{
	var list = document.getElementById('covernav');
	var items = list.getElementsByTagName('li');

	for (var i = 1; i <= items.length; i++)
	{
		if (items[i].active == 1)
		{
			if (i == (items.length - 2))
			{
				var newi = 1;
				i = 1;
			}
			else
			{
				var newi = parseInt(i + 1);
			}
			
			something = setTimeout("changestory()", 5000);
			return switch_cover(items[newi]);
		}
		
		
		/*if (items[i].style.backgroundColor == 'rgb(54, 63, 78)' || items[i].style.backgroundColor == '#363f4e')
		{
			if (i == 4)
			{
				newi = 0;
				i = 0;
			}
			else
			{
				newi = parseInt(i + 1);
			}
			
			switch_cover(items[newi]);
			setTimeout("changestory()", 5000);
		}*/
	}
}

//alert(off['top']);

function switch_cover(value, clicked)
{
	if (clicked)
	{
		clearTimeout(something);
		something = setTimeout("changestory()", 5000);
	}

	// Change colors...
	var list = document.getElementById('covernav');
	var items = list.getElementsByTagName('li');

	if (value.id == "back" || value.id == "next")
	{
		for (var c = 1; c <= items.length; c++)
		{
			if (items[c].active == 1)
			{
				var act = items[c].childNodes[0].innerHTML.substr(0,1);
				if (act == 1 && value.id == "back")
				{
					act = (items.length - 1);
				}
				
				if (act == (items.length - 2) && value.id == "next")
				{
					act = 0;
				}

				if (value.id == "back")
				{
					var direction = (act - 1);
				}
				if (value.id == "next")
				{
					var direction = (parseInt(act) + 1);
				}

				return switch_cover(items[direction]);
			}
		}
	}

	var newcover = value.childNodes[0].innerHTML.substr(0,1);

	// Change the cover story info...
	document.getElementById('coverlink').href = covers[newcover]['link'];
	document.getElementById('coverimage').src = covers[newcover]['image'];
	if (covers[newcover]['title'])
	{
		document.getElementById('coverimage').alt = covers[newcover]['title'];
	}
	if (covers[newcover]['text'] && document.getElementById('coverdesc'))
	{
		document.getElementById('coverdesc').innerHTML = covers[newcover]['text'];
	}
	
	for (var i = 0; i < items.length; i++)
	{
		items[i].active = 0;
		if (items[i].style.backgroundColor == 'rgb(28, 36, 49)' || items[i].style.backgroundColor == '#1c2431')
		{
			items[i].style.backgroundColor = '#dde1ec';
			//items[i].style.width = '21px';
			items[i].childNodes[0].className = "";
			//document.getElementById((i + 1) + '_title').style.display = "none";
		}
	}

	value.style.backgroundColor = '#1c2431';

var off = offset(value.parentNode);
var realoff = offset(value);
//document.getElementById('arrow').style.left = parseInt(((newcover - 1) * 21) + 3) + 'px';
//alert(off['left'] + ' - ' + off['top']);
/*document.getElementById('arrow').style.position = "absolute";
document.getElementById('arrow').style.left = parseInt(realoff['left'] + 3) + 'px';
document.getElementById('arrow').style.top = parseInt(off['top'] - 8) + 'px';*/
	value.active = 1;
value.childNodes[0].className = "displayed";
	//value.style.width = '291px';
	//clearTimeout(something);
	//var something = setTimeout("switch_cover(" + items[(value + 1) + ")", 5000);
	return false;
}