// Init Scroll Animation =====================================================================

var ScrollAnimation = {
	Details: function(placement) {
		var ImageDescription = $("div.scrollable li:first img").attr("alt");
		var DetailHtml = '<div class="details"><h2>' + ImageDescription + '</h2></div>';
		var ScrollButtons = '<a class="prev" title="Previous Slide">Previous</a><a class="next" title="Next Slide">Next</a>';
		$(placement).parent().append(ScrollButtons).append(DetailHtml);

	},
	
	Init: function(placement) {
		$(placement).scrollable({
			size: 1,
			interval: 4000,
			loop: true,
			easing: 'custom',
			speed: 0,
			onBeforeSeek: function(target) {
				ImageDescription = $("div.scrollable li:eq(" + target + ") img").attr("alt");
				$("div.scrollable").siblings(".details").find("h2").replaceWith("<h2>" + ImageDescription + "</h2>");
				this.getItems().fadeTo(0, 0);
			},
			onSeek: function() {
				this.getItems().fadeTo(350, 1);
			}
		});
	}
}

// Initialise methods onto Frontend Object ====================================================
var Frontend = {
	ScrollAnimation: ScrollAnimation
};