(function($) {

	var pagingIdx = 0,
		pageSize = 3,
		scrollBy = 2,
		cont = $('#content'),
		ul = cont.children('ul'),
		items = ul.children('li'),
		flyout, prevArrow, nextArrow, openers, closer, currentItem;
		
	function createArrows() {
		prevArrow = $('<a class="paging pagingPrev" href="#" />').click(pagePrev);
		nextArrow = $('<a class="paging pagingNext" href="#" />').click(pageNext);
		cont.prepend(prevArrow).append(nextArrow);
		updateArrows();
	}
	
	function updateArrows() {
		prevArrow.toggleClass('pagingDisabled pagingPrevDisabled', pagingIdx == 0);
		nextArrow.toggleClass('pagingDisabled pagingNextDisabled', pagingIdx + pageSize >= items.size());
	}
	
	function getItemSize() {
		var first = items.eq(0);
		return first.outerHeight() + parseInt( first.css('marginBottom') );
	}
	
	function pagePrev(e) {
		e.preventDefault();
		if(pagingIdx > 0) {
			pagingIdx -= scrollBy;
			items.eq(0).animate({
				marginTop: '+=' + (getItemSize() * scrollBy) + 'px'
			});
			updateArrows();
		}
	}
	
	function pageNext(e) {
		e.preventDefault();
		if(pagingIdx + pageSize < items.size()) {
			pagingIdx += scrollBy;
			items.eq(0).animate({
				marginTop: '-=' + (getItemSize() * scrollBy) + 'px'
			});
			updateArrows();
		}
	}
	
	function createOpeners() {
		items.each(function() {
			var me = $(this),
				link = $('a', me);
			link.append($('<span class="opener" />'))
				.click(function(e) {
					e.preventDefault();
					if(!currentItem) {
						currentItem = me;
						loadContent(link.attr('href'));
					}
				});
		});
		openers = $('span.opener', items);
	}
	
	function createFlyout() {
		flyout = $('<div id="flyout" />').hide().appendTo(cont);
	}
	
	function expandFlyout(callback) {
		function border(edge) {
			return parseInt(flyout.css('border-' + edge + '-width'));
		}
		flyout.stop(1,1)
			.removeClass('loading')
			.css(getItemPosAndSize()).show()
			.animate({
				top: 0,
				left: 0,
				width: cont.width() -  border('left') - border('right'),
				height: cont.height() - 10 - border('top') - border('bottom')
			}, {
				complete: function() {
					callback();
					$('<span class="closer" />').click(closeFlyout).hide().appendTo(flyout).fadeIn();
				}
			});
		ul.animate({ opacity: 0 })
	}
	
	function closeFlyout() {
		flyout.empty().stop(1,1)
			.animate(
				getItemPosAndSize(),
				{ complete: function() {
					$(this).fadeOut();
					openers.fadeIn();
					prevArrow.fadeIn();
					nextArrow.fadeIn();
				} }
			);
		ul.animate({ opacity: 1 })
		currentItem = null;
	}
	
	function loadContent(url) {
		flyout.css(getItemPosAndSize())
			.addClass('loading')
			.html('<span>Loading...</span>')
			.fadeIn();
		openers.fadeOut();
		prevArrow.fadeOut();
		nextArrow.fadeOut();

		// force url domain to that of the current page to avoid cross-site errors
		url = url.replace( /^(http:\/\/)[^\/]+/, "$1" + document.domain );
		
		var content = $('<div class="flyoutContent"/>').load(url + ' #content', null, function() {
			$(this).children().attr('id', null);
			flyout.empty();
			expandFlyout(function() {
				$('.screenshots', content).each(function() {
					new RecentWorkScreens(this);
				});
				content.hide().appendTo(flyout).fadeIn();
			});
		});
	}
	
	function getItemPosAndSize() {
		return $.extend(currentItem.position(), {
			width: currentItem.innerWidth(),
			height: currentItem.innerHeight()
		});
	}


	// Init
	createArrows();
	createOpeners();
	createFlyout();
	
})(jQuery);