/*	This kind of script is my bread and butter.
	Take a simple page and add some slick interactivity with fewer than 100 lines of code.
	Of course, jQuery helps. :-)
	If you're hiring someone who does this kind of thing, we should talk.
	-Andrew, andrew@hedges.name
*/
$(function () {
	var durat, indic, masks, items, width, ancho, lefts, idx, len, name;
	
	durat = 200; // animation duration
	indic = $('#indicator a.dot');
	masks = $('#folio .mask,#indicator .arrow');
	items = $('#items');
	
	// how far do we slide for each move?
	width = (function () {
		var item, shim;
		item = $('li', items).width(); // returns the computed width of the 1st matching element
		shim = $('li.shim', items).width();
		return item + shim;
	})();
	
	// what's our starting left position?
	anchor = (items.position()).left;
	
	// calculate the left position for each item
	lefts  = [];
	$.each($('li', items), function () {
		var which;
		which = $(this).attr('name');
		if ('undefined' !== typeof which) {
			lefts[lefts.length] = anchor - (width * which);
		}
	});
	
	// attach click handler to indicators
	indic.click(function (evt) {
		var items, that;
		
		items = $('#items');
		
		// hilight correct indicator
		indic.removeClass('selected');
		$(this).addClass('selected');
		
		// determine # to which we're sliding and animate
		items.animate({
			left : (function () {
				var slot;
				slot = +$(evt.target).attr('href').replace('#', '');
				return anchor - width * slot;
			})()
		});
		
		// don't follow the click
		evt.preventDefault();
	});
	
	// attach click handler to masks
	masks.click(function (evt) {
		var items, left;
		
		// get rid of link outline
		this.blur();
		
		items = $('#items');
		left  = (items.position()).left;
		
		// determine direction and animate relatively
		if ($(this).hasClass('left')) {
			if (left < anchor) {
				items.animate({left:'+='+width});
				$('#indicator a.selected')
					.removeClass('selected')
					.parent().prev().children()
					.addClass('selected')
				;
			}
		}
		else {
			if (left > anchor - width * (lefts.length - 1)) {
				items.animate({left:'-='+width});
				$('#indicator a.selected')
					.removeClass('selected')
					.parent().next().children()
					.addClass('selected')
				;
			}
		}
		
		// don't follow the click
		evt.preventDefault();
	});
});