(function($){

// Easing equation, taken from http://demos.flesler.com/jquery/serialScroll/
// in turn borrowed from jQuery easing plugin
// http://gsgd.co.uk/sandbox/jquery/easing/

$.easing.easeOutQuart = function (x, t, b, c, d) {
	return -c * ((t=t/d-1)*t*t*t - 1) + b;
};

$.maketoc = {
	source:   false,
	item:     '.suite',
	wrap_tpl: '<div class="raised toc-canvas"><div class="toc-viewport"><ul>${ content }</ul></div></div>',
	item_tpl: '<li><a href="${ href }"><img src="${ media_url }images/suites/${ slug }-thumb.gif" alt="${ style }" /><strong>${ name } Suite</strong> <span class="period">${ period }</span></a></li>',
	get_metadata: (function(i, settings){
		var $this      = $(this),
			$img       = $this.find('img'),
			year_from  = parseInt($this.find('.period .from').text(), 10),
			year_to    = parseInt($this.find('.period .to').text(), 10),
			bar_offset = year_from - 1310,
			bar_width  = year_to - year_from,
			period     = $.trim($this.find('.period').text().replace(/\s+/g, ' ')),
			result     = ({
				"i":          i,
				"even_odd":   ['odd', 'even'][i%2],
				"href":       '#' + $this.attr('id'),
				"slug":       $img.attr('src').match(/([^/]+)\.(\w+)$/)[1],
				"style":      $img.attr('alt'),
				"name":       $this.find('h3').text(),
				"year_from":  year_from,
				"year_to":    year_to,
				"bar_offset": bar_offset,
				"bar_width":  bar_width,
				"period":     period
			});
		return result;
	}),
	extra_data: $.extend({}, $.website),
	prepend: true
};

$.fn.maketoc = function(settings) {
	var o = $.extend({}, $.maketoc, settings);
	
	return this.each(function(i){
		var html, items = [];
		$(o.source||this).find(o.item).each(function(i){
			var metadata = $.extend({}, o.extra_data, o.get_metadata.apply(this, [i, o]));
			items.push($.substitute(o.item_tpl, metadata));
		});
		html = $.substitute(o.wrap_tpl, {"content": items.join("\n")});
		if(o.prepend)
			$(this).prepend(html);
		else
			$(this).append(html);
	});
};

$.slideshow = {
	wrap: '<div class="slideshow-canvas"><div class="slideshow-viewport"></div></div>',
	items:'.slide',
	easing: 'easeOutQuart',
	// prev:'#screen2 a.prev',
	// next:'#screen2 a.next',
	duration: 1200, //?
	interval: 10000,
	force: true,
	stop: true,
	lock: false,
	cycle: true,
	jump: false,
	easing: 'easeOutQuart',
	axis: "x",
	onBefore: function(e, slide, viewport){
		return viewport.data('hover') !== true;
	}
}
$.fn.slideshow = function(settings) {
	var o = $.extend({}, $.slideshow, settings);
	
	return $(this.map(function(){
		var $viewports,
			sum = 0;$(o.items).map(function(){sum += $(this).outerWidth(true)});
		
		return $(this)
			.wrap(o.wrap)
			.width(sum)
			.parent()
				.hover(
					function(){$(this).data('hover', true)},
					function(){$(this).data('hover', false)}
				)
				.serialScroll(o)
				.get();
	}));
};

$(function(){
// suites:
	var $viewports = $('.slideshow').slideshow();
	$viewports.parent()
		.maketoc({
			source: $viewports,
			prepend: false,
			wrap_tpl: '<div class="raised timeline-canvas"><div class="timeline-viewport"><ul>${ content }</ul></div></div>',
			item_tpl: '<li class="${ slug } ${ even_odd }" style="left: ${ bar_offset }px"><a href="${ href }" title="${ name } Suite" style="width:${ bar_width }px"><span class="from">${ year_from }</span> <span class="to">${ year_to }</span></a></li>'
		})
		.maketoc({source: $viewports})
		.find(".toc-canvas ul, .timeline-canvas ul")
			.hoverscrollable()
			.localScroll({
				target: $viewports,
				easing: 'easeOutQuart',
				axis: "x",
				onBefore: function(e, slide, viewport){
					viewport.trigger('stop').trigger('start');
					return true;
				}
			}, 500);
});

})(jQuery);