$(document).ready(function() {
	if (!Modernizr.csscolumns) {
		$('#nav .article-list').makeacolumnlists({cols: 2, colWidth: 160, equalHeight: false, startN: 1});
	}
	
	if ($('.feature .item').length && window.featured) {
		var featuredIndex = 0;
		var timeout = 5000;
		
		$(featured).each(function(index, item) {
			var $item = $('.feature .item:first').clone();
			$item.find('.title').html(item.title);
			$item.find('img').attr('src', item.image).attr('alt', item.alt);
			$item.find('a.main').attr('href', item.url);
			$item.insertAfter('.feature .item:last').fadeOut(0);
		});
		
		function transition() {
			var current = $('.feature .item').eq(featuredIndex);
			featuredIndex++;
			if (featuredIndex >= $('.feature .item').length) {
				featuredIndex = 0;
			}
			current.fadeOut(1000);
			$('.feature .item').eq(featuredIndex).fadeIn(1000, function() {
				setTimeout(transition, timeout);
			});
		}
		setTimeout(transition, timeout);
	}
	
	$('#content .project-list, #content .images').scrollable();
	
	if ($('body').is('#project, #about')) {
		if (Modernizr.canvas) {
			$('.images a').each(function() {
				var $img = $('img', this);
				var $newimg = $img.clone();
				$newimg.addClass('original');
				$newimg.insertAfter($img);
				$img.addClass('filter-greyscale');
			});
			$('.images').addClass('filtered').find('img:not(.original)').addFilter("filter-greyscale");
		}
		$('.images a').click(function() {
			var src = $(this).attr('href');
			var title = $(this).find('img[alt]').attr('alt');
			$('img.main').attr('src', src);
			$('.feature .title').text(title);
			$('.images .selected').removeClass('selected');
			$(this).addClass('selected');
			return false;
		});
	}
});

(function($) {
	$.fn.scrollable = function(options) {
		var defaults = {
			minSize: 6
		};
	
		options = $.extend(defaults, options);
	
		var items = this;
		var size = items.children().length;
		if (size <= options.minSize) {
			return this;
		}
		$('#content').addClass('scrollable');
		$('body').append('<a href="#" id="previous"></a>').append('<a href="#" id="next"></a>');
		var position = 0;
		function setControls(adjustment) {
			var newPosition = position + adjustment;
			if (newPosition > 0 || newPosition <= size * -160) {
				return;
			}
			position += adjustment;
			if (Modernizr.cssanimations) {
				items.css('margin-left', position + 'px');
			} else {
				items.animate({'margin-left': position + 'px'}, 500);
			}
			if (position == 0) {
				$('#previous').hide();
			} else {
				$('#previous').show();
			}
			if ((size - options.minSize) * -160 == position) {
				$('#next').hide();
			} else {
				$('#next').show();
			}
		}
		function next() {
			setControls(-160 * 6);
		}
		function previous() {
			setControls(160 * 6);
		}
		$('#next').click(function() {
			next();
			return false;
		});
		$('#previous').click(function() {
			previous();
			return false;
		});
		$(document).bind('keydown.scrollable', 'right', function(event) {
			next();
			event.preventDefault();
		});
		$(document).bind('keydown.scrollable', 'left', function(event) {
			previous();
			event.preventDefault();
		});
		$('#previous').hide();
		$('#content').hover(function() {
			$('#next, #previous').addClass('hover');
		}, function() {
			$('#next, #previous').removeClass('hover');
		});
	
		return this;
	}
})(jQuery);

/*
 * Special event for image load events
 * Needed because some browsers does not trigger the event on cached images.

 * MIT License
 * Paul Irish     | @paul_irish | www.paulirish.com
 * Andree Hansson | @peolanha   | www.andreehansson.se
 * 2010.
 *
 * Usage:
 * $(images).bind('load', function (e) {
 *   // Do stuff on load
 * });
 * 
 * Note that you can bind the 'error' event on data uri images, this will trigger
 * when data uri images isn't supported.
 * 
 * Tested in:
 * FF 3+
 * IE 6-8
 * Chromium 5-6
 * Opera 9-10
 */
(function ($) {

	$.event.special.load = {
		setup: function () {
			// Attach to DOM
			return false;
		},
		add: function (handleObj) {
			var img, src, handler;

			if (this.nodeName && this.nodeName.toLowerCase() === 'img' && this.src) {
				img = this;
				src = img.src;

				// Image is already complete, fire the handler (fixes browser issues were
				// cached images isn't triggering the load event)
				if (img.complete || img.readyState === 'complete') {

					handler = handleObj.handler;

					// this wrapper prevents the handler for being invoked twice if loading
					// completed and an event got queued during this javascript execution.
					// The handler is only called again if img.src changes.
					handleObj.handler = function (event) {

						//trigger() event objects do not have browser properties
						//(offsetX is chosen arbitrarily)
						var triggerEvent = !('offsetX' in event);

						// only call handler if trigger'ed or if img.src has changed
						if (triggerEvent || src !== img.src) {
							src = img.src;
							return handler.apply(img, arguments);
						}
					};

					// delayed trigger; binding gets a chance to finish and the required
					// jquery event object is passed to handler.
					setTimeout(function () { $(img).trigger('load'); }, 0);
				}

				// Check if data URI images is supported, fire 'error' event if not
				else if (img.readyState === 'uninitialized' && img.src.indexOf('data:') === 0) {
					$(img).trigger('error');
				}
			}
		}
	};
}(jQuery));