var debugtoggle = false;
//var debugtoggle = true;
debugtoggle = (document.location.href.indexOf('chainring.org')>-1) && debugtoggle;
function debug(msg) {
	if (debugtoggle) {
		$('#debug').show();
		if (typeof msg == "boolean") {
			msg = (msg)?"true":"false";
		}
		if ("string/number".indexOf(typeof msg) < 0) {
			msg = typeof msg;
		}
		
		if (msg == '===clear===') {
			$('#debug').empty().append('<input type="button" onclick="debug(\'===clear===\')" value="Clear" /> <br />').hide();
		} else {
			msg += '<br />';
			$('#debug').append(msg);
			if ($('#debug').height() > (window.innerHeight - 500)) debug('===clear===');
		}
	}
}

function hangPunctuation() {
	// not working with html entities! grr
	var re = new RegExp("^&lsquo;");
	$('.index p').each(function() {
		if ($(this).text().match(re)) {
			$(this).addClass('hangpunctuation');
		}
	});
}

function writeIndex() {
	var index = $('.index');
	var blackbar = $('.blackbar');
	
	$(data).each(function() {
		var h = $('<p>'+this.title+'</p>');
		if (this.hangpunctuation) h.addClass('hangpunctuation');
		if (this.disabled) h.addClass('disabled');
		if (! this.disabled) h.click(showSection).hover(function() {$(this).addClass('hover')},function() {$(this).removeClass('hover')});
		h.get(0).section = this;
		index.append(h);
	});

	blackbar.onemouseover(function() {
		blackbar.fadeOut(fadespeed);
		index.fadeIn(fadespeed);
	});
	
	data = null;
	
	blackbar.fadeIn(fadespeed);
}

function showIndex() {
	if (data) writeIndex();
	$('.index p').removeClass('hover');
	$('.content').removeClass('insection');
	$('.content div:visible').fadeOut(fadespeed);
	$('.index').fadeIn(fadespeed);
	$('.backlink').hide();
	$('.title').removeClass('hover').show();
}

function showBio() {
	$('.content').removeClass('insection');
	$('.content div:visible').fadeOut(fadespeed);
	$('.bio').fadeIn(fadespeed);
	$('p.title').hide();
	$('p.backlink').removeClass('hover').show();
}

function sendEmail() {
	document.location = 'mail'+'to:'+'kevin'+'@'+'kevin'+'ley'+'.'+'com';
}


function showSection() {
	if (this.section) {
		var section = this.section;
		var imagesfolder = this.section.imagesfolder;
		
		var table = $('<table border="0" cellpadding="0" cellspacing="0"><tr></tr></table>');
		$(this.section.images).each(function() {
			$('tr',table).append('<td><img src="/lib/images/'+imagesfolder+'/'+this+'" border="0" /></td>');
		});
		$('tr',table).append('<td valign="bottom"><a href="javascript:rewindSection()" class="rewind">/&#160;Rewind</a></td>');
		
		$('.section').empty().append(table);
		$('.section img').each(function(i) {
			this.index = i;
			this.section = section;
			$(this).click(scrollToImg);
		});
		
		$('.content').addClass('insection');
		$('.index').fadeOut(fadespeed);
		$('.section').left('10px').fadeIn(fadespeed);
		$('.title').hide();
		$('p.backlink').removeClass('hover').show();
	}
}

var sliding = false;
function scrollToImg(e) {
	var mouseevent = getMouseCoordinates(e);
	
	var img = $(this).offset();
	var section = $('.section').offset();
	var content = $('.content').offset();

	var sectionleft = section.left;
	if (img.left > 10) {
		// if they click on left edge of next image
		if (this.index > 0) {
			img = $('.section img').eq(this.index - 1).offset();
		} 
		sectionleft = section.left - img.width;
	} else if (img.left < 0) {
		// if they click on right edge of previous image
		sectionleft = section.left + img.width;
	} else if (img.left == 10 && mouseevent.x < (img.width / 2)) {
		// if they click on left half of current image
		debug('clicked on left side of current image');
		if (this.index > 0) {
			// move left if image 1 or greater
			img = $('.section img').eq(this.index - 1).offset();
			sectionleft = section.left + img.width;
		} else {
			// clicked on left side of first image
			//sectionleft = section.left - img.width;
		}
	} else {
		// if they click on right half of current image
		if (this.index < $('.section img').size() - 1) {
			sectionleft = section.left - img.width;
		} else {
			// they're at the last image, let's rewind
			sectionleft = 10;
		}
	}
	debug(img.left +':'+ section.left);

	if (sectionleft != section.left && ! sliding) {
		debug('final sectionleft:'+sectionleft);
		sliding = true;
		var callback = function() {
			$('.section').left(sectionleft+"px");
			sliding = false;
		};
		
		$('.section').animate({left: sectionleft},1000,callback);
	}
	e.preventDefault();
}

function rewindSection() {
		sliding = true;
		var sectionleft = 10;
		var callback = function() {
			$('.section').left(sectionleft+"px");
			sliding = false;
		};
		
		$('.section').animate({left: sectionleft},1000,callback);
}



function getMouseCoordinates(e) {
	var mouseevent = {};
	var event = e || window.event;

	var posx = 0;
	var posy = 0;
	if (event.pageX || event.pageY) 	{
		posx = event.pageX;
		posy = event.pageY;
	} else if (event.clientX || event.clientY) 	{
		posx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
		posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
	}

	mouseevent.x = posx;
	mouseevent.y = posy;
	return mouseevent;
}


var fadespeed = 500;




function startup() {
	$('.content div').hide();
	$('p.title span').click(showBio).hover(
		function() {$(this).addClass('hover')},
		function() {$(this).removeClass('hover')}
	);
	$('p.backlink span').click(showIndex).hover(
		function() {$(this).addClass('hover')},
		function() {$(this).removeClass('hover')}
	);
	
	$('span.emaillink').click(sendEmail).hover(
		function() {$(this).addClass('hover')},
		function() {$(this).removeClass('hover')}
	);

	writeIndex();
	$('.caption').fadeIn(fadespeed);
}
$(document).ready(startup);