$(document).ready(init);

var charset = "abcdefghijklmnopqrstuvwxyz.@";
var cipher = [13, 4, 22, 18, 27, 19, 7, 14, 12, 0, 18, 22, 8, 11, 1, 20, 
17, 13, 26, 13, 4, 19];
var STORY_RETURN = "<div class='listHeader odd'><a href='#' id='writing' class='closeStory'><- return</a></div>";
var LIST_TOP = "<div class='listHeader odd'></div>";

function init() {
	$(".listLink").live('click', activateList);
	$(".teaserLink").live('click', showFullStory);
	$(".closeStory").live('click', destory);
	$(window).resize(resize)
	decipher();
}

function decipher() {
	var mailto = "";
	for (var i = 0; i < cipher.length; i++) {
		mailto += charset.charAt(cipher[i]);
	}
	var link = $("#mailto");
	link.attr('href', "mailto:" + mailto);
	link.html(mailto);
}

var current = "";
var originalOffset;
var alteredOffset;
var sections = {
	multimedia: "You're looking at <span class='large'>multimedia</span>.<br/>I also have <a href='blosxom.php/writing/?flav=teaser' id='writing' class='listLink'>writing</a> and <a href='blosxom.php/audio/?flav=minimalist' id='audio' class='listLink'>audio</a> samples available.",
	writing: "This is the <span class='large'>writing</span> section.<br/>Don't forget to sample some <a href='blosxom.php/multimedia/?flav=minimalist' id='multimedia' class='listLink'>multimedia</a> or <a href='blosxom.php/audio/?flav=minimalist' id='audio' class='listLink'>audio</a>.",
	audio: "Had enough <span class='large'>audio</span> for now?<br/>There's also <a href='blosxom.php/writing/?flav=teaser' id='writing' class='listLink'>writing</a> and <a href='blosxom.php/multimedia/?flav=minimalist' id='multimedia' class='listLink'>multimedia</a>."
};

function activateList() {
	if (originalOffset == undefined) {
		originalOffset = $(".column").offset().left;
		$(".column").css('margin-left', originalOffset);
		var cWidth = $(".column").outerWidth();
		alteredOffset = (originalOffset + (cWidth / 2)) - (cWidth);
		//console.log(alteredOffset);
		if (alteredOffset < 10) alteredOffset = 10;
	}

	$(".list").remove();
	$(".story").remove();
	var column = $(".column");
	column.fadeIn().animate({'margin-left': alteredOffset});
	column.after("<div class='list'></div>");
	$(".list").html("<span class='loader'>loading...</span>").offset({top: 0, left: column.width() + alteredOffset});
	var selected = $(this).attr('id');
	$.get($(this).attr('href'), 
		{client: 'javascript'},
		function(data) {
		$(".list").html(data).prepend(LIST_TOP).hide().fadeIn();
		$(".listHeader").html(sections[selected]);
	});
	window.location = "#";
	return false;
}

function showFullStory() {
	$(".story").remove();
	var column = $(".column");
	var storyList = $(".list");
	column.hide();
	storyList.animate({left: alteredOffset, top: 0});
	storyList.after("<div class='story'></div>");
	var storyDiv = $(".story");
	storyDiv.html("<span class='loader'>loading...</span>").offset({top: 0, left: alteredOffset + storyList.outerWidth()});
	$.get($(this).attr('href'), 
		{client: 'javascript'},
		function(data) {
		storyDiv.html(data).prepend(STORY_RETURN).hide().fadeIn();
	});
	window.location = "#";
	return false;
}

function destory() {
	$(".story").remove();
	$('.column').css('margin-left', alteredOffset);
	$(".list").animate({left:$('.column').width() + alteredOffset}, function() {$('.column').fadeIn()});
}

function resize() {
	if (originalOffset == undefined) return;
	if ($('.story').length) {
		var listWidth = $(".list").outerWidth();
		var center = $(window).width() / 2;
		alteredOffset = center - listWidth;
		$('.list').offset({left: alteredOffset});
		$('.story').offset({left: alteredOffset + listWidth});
	} else {
		var cWidth = $(".column").outerWidth();
		var center = $(window).width() / 2;
		alteredOffset = center - cWidth;
		$('.column').css('margin-left', alteredOffset);
		$(".list").offset({top: 0, left: cWidth + alteredOffset});
	}
}