/* Pagination - uses typo3 frame style "Pagination slide container" to create
 * a dynamic on-page pagination. */

var pagination = {
	init: function($slides)
	{
		this.$slides = $slides;
		var $firstSlide = $slides.first();
		
		// Prepare page link list
		var $pageList = $('<div/>', {
			'class': 'page-numbers'		
		});
		
		// Create a link for each page
		for (var i=0;i < $slides.length;i++)
		{
			var $a = $('<a/>', {
				html: ' '+(i+1)+' ',
				href: '#js',
				'class': 'page-number' 
			});
			// Assign page number for later use
			$a.data('pageNumber', i);
			$a.click(function (e) {
				pagination.clickPageNumber(this);
				return false;
			});
			
			// Insert separator
			if (i > 0)
			{
				$pageList.append('|');
			}
			
			// Add link to page link list
			$pageList.append($a);
		}
		// Add page link list to DOM
		$firstSlide.before($pageList);
		
		// Store some things for later use
		this.$pageList = $pageList;
		this.$pageLinks = $('div.page-numbers a');
		
		// Register for click event on page links
		/*$(document).delegate(
			'ul.page-numbers a', 
			'click', 
			function (e) {
				pagination.clickPageNumber(this);
				// Make sure to return false for The Evil (aka IE) 
				return false;
			}
		);*/
		
		// Enable first link
		this.$pageLinks.eq(0).addClass('page-active');
		// Show only first slide
		this.$slides.hide();
		this.$slides.eq(0).show();
	},
	
	clickPageNumber: function (element)
	{
		// Get current and old element
		var $element = $(element);
		var $oldElement = this.$pageLinks.filter('a.page-active').eq(0);
		
		// Swap active element 
		$oldElement.removeClass('page-active');
		$element.addClass('page-active');
		
		// Swap visible slide
		this.$slides.eq($oldElement.data('pageNumber')).hide();
		this.$slides.eq($element.data('pageNumber')).show();
	}
};

$(document).ready(function() {
	// Preselect slides and call init only if there is more than one
	var $slides = $('.page-slide'); 
	if($slides.length > 1){
		pagination.init($slides); 
	}
});