var tab = [];
var tab_index = -1; // default at -1 since there is no page tab for landing
var title = "JSV3D.COM";
var loading_html = "<div class='center'><img src='img/loading.gif' title='loading content' /><p>loading...</p></div>";
var loading_error = "<div class='center'>error loading content</div>";

// init some shit
$(document).ready(function()
    {
		$('img.next').click(next_tab);
		$('img.prev').click(prev_tab);
		$('.nav').live('click', function () { set($(this).attr('href')) });
		initialize();
		set(window.location.hash);
    });

function content(mytitle, mytitle_src, myicon_src, mytab_src, mycontent_src)
{
	this.title 			= mytitle;
	this.title_src 		= mytitle_src;
	this.icon_src 		= myicon_src;
	this.tab_src 		= mytab_src;
	this.content_src 	= mycontent_src;
}

function initialize()
{
	tab.push(new content('#3d','img/font/3d.png','img/buttons/3d.png','img/tabs/3d.png','content/3d/3d.html'));
	tab.push(new content('#reel','img/font/reel.png','img/buttons/reel.png','img/tabs/reel.png','content/reel/reel.html'));
	tab.push(new content('#toys','img/font/toys.png','img/buttons/toys.png','img/tabs/toys.png','content/toys/toys.html'));
	tab.push(new content('#decks','img/font/decks.png','img/buttons/decks.png','img/tabs/decks.png','content/decks/decks.html'));
	tab.push(new content('#drawings','img/font/drawings.png','img/buttons/drawings.png','img/tabs/drawings.png','content/traditional/traditional.html'));
	tab.push(new content('#vector','img/font/vector.png','img/buttons/vector.png','img/tabs/vector.png','content/vector/vector.html'));
	tab.push(new content('#photo','img/font/photo.png','img/buttons/photo.png','img/tabs/photo.png','content/photo/photo.html'));
	tab.push(new content('#resume','img/font/resume.png','img/buttons/resume.png','img/tabs/resume.png','content/resume/resume.html'));
	tab.push(new content('#contact','img/font/contact.png','img/buttons/contact.png','img/tabs/contact.png','content/contact/contact.html'));
	tab.push(new content('#links','img/font/links.png','img/buttons/links.png','img/tabs/links.png','content/links/links.html'));
}

function set_tab()
{	
	if(tab_index == -1)
		return;
		
	$('#selection').attr('src',tab[tab_index].tab_src);
	$('#selection').attr('title',tab[tab_index].title);
	$('#title').html("<p>"+('title',tab[tab_index].title).toUpperCase()+"</p>");
	
	window.location.hash = tab[tab_index].title;
	
	$.ajax({
		url:			tab[tab_index].content_src,
		beforeSend: 	function() {
			$('#layer2').html(loading_html);
			},
		error: 		function(data) {
			$('#layer2').html(loading_error);
			},
		success: 		function(data) {
			// This shit here botches my links, moving the anchor contents outside of the tag!
			// $('#layer2').html(data);
			// console.log(data);
			
			// Don't know why I'm not just using my basic ajax library...
			document.getElementById('layer2').innerHTML = data;
			$("a.fb").fancybox({
				nextClick		: true,
				loop			: true,
				arrows			: true,
				prevEffect		: 'none',
				nextEffect		: 'none',
				closeBtn		: false,
				helpers		: { 
					title	: { type : 'inside' },
					buttons	: {}
					}
				});
			}	
		})
	
	document.title = title + " | " + tab[tab_index].title.toUpperCase();
}

function set(hash)
{
	if(!hash)
		return;
	for(var index in tab)
		if(tab[index].title == hash)
			tab_index = index;
	
	set_tab();
}

function next_tab(obj)
{
	if (tab_index >= tab.length -1)
		tab_index = 0;
	else
		tab_index++;	

	set_tab();
}

function prev_tab(obj)
{
	if (tab_index <= 0)
		tab_index = tab.length -1;
	else 
		tab_index--;
	
	set_tab();
}