(function($) {
	var slideTime = 500;

	$(document).ready(function(){
		$('.box .tabs li').bind('click', tab_OnClick, true);		
		$('.box .scroller.left .icon').bind('click', slider_slide_left, true);
		$('.box .scroller.right .icon').bind('click', slider_slide_right, true);
		$('.box .pageList div').live('click', page_OnClick, true);
		initPagers();
	});
	
	function initPagers()
	{
		$('.box .tabContent').each(function(){
			// Find num pages
			var tabContent = jQuery(this).parents('.topLeft').children('.tabContent.active');
			var currentPage = tabContent.find('[name="currentPage"]').val() * 1;
			var objectsPerPage = tabContent.find('[name="objectsPerPage"]').val() * 1;
			var numPages = Math.ceil(tabContent.find('[name="numObjects"]').val() * 1 / objectsPerPage);
			
			// Empty any existing pages
			$(this).find('.pageList').children().remove();
			
			// Output that many page icons
			for (i = 0; i < numPages; i++)
			{
				$(this).find('.pageList').append('<div pageNumber="'+i+'"></div>');
			}
			
			// Set the current page as active
			$($(this).find('.pageList div')[currentPage]).addClass('active');
			
			// Set width of pageList to width of children
			var width = 0;
			$(this).find('.pageList').children().each(function(){
				width += $(this).outerWidth(true) * 1;
			});			
			$(this).find('.pageList').width(width);
		});
	}
	
	function updatePagers()
	{
		$('.box .tabContent').each(function(){
			// Find num pages
			var tabContent = jQuery(this).parents('.topLeft').children('.tabContent.active');
			var currentPage = tabContent.find('[name="currentPage"]').val() * 1;

			// Mark all other pages as not active
			$(this).find('.pageList div').removeClass('active');
			
			// Set the current page as active
			$($(this).find('.pageList div')[currentPage]).addClass('active');
	});
}
	function tab_OnClick() {
		var targetId = jQuery(this).attr('rel');
		
		// Remove class active and hide the active content area
		jQuery('#'+targetId).parent().children('.active').removeClass('active').hide();
		
		// Show the new content area and add active class
		jQuery('#'+targetId).addClass('active').show();
	
		// Remove class active from all other tabs, add to the clicked one						
		jQuery(this).parent().children().removeClass('active');
		jQuery(this).addClass('active');
		
		initPagers();
	}

	function slider_slide_left() {
		slider_slide.call(this, 'left');
	}
	
	function slider_slide_right() {
		slider_slide.call(this, 'right');
	}
	
	function page_OnClick() {
		var direction = 'same';
		var tabContent = jQuery(this).parents('.topLeft').children('.tabContent.active');
		var currentPage = tabContent.find('[name="currentPage"]').val() * 1;
		
		// Find the page number of the clicked page
		var nextPageNumber = $(this).attr('pageNumber') * 1;
		
		// Is it to the left or to the right of current page?
		if (nextPageNumber < currentPage) {
			direction = 'left';
			// Set the current page to the closest one of that page
			currentPage = nextPageNumber + 1;
		}
		else if (nextPageNumber > currentPage) {
			direction = 'right';
			// Set the current page to the closest one of that page
			currentPage = nextPageNumber - 1;
		}
		
		// Persist new currentPage
		tabContent.find('[name="currentPage"]').val(currentPage);			

		// Scroll to the clicked page
		slider_slide.call(this, direction);
	}
	
	function slider_slide(direction) {
		var tabContent = jQuery(this).parents('.topLeft').children('.tabContent.active');
		var currentPage = tabContent.find('[name="currentPage"]').val() * 1;
		var objectsPerPage = tabContent.find('[name="objectsPerPage"]').val() * 1;
		var numPages = Math.ceil(tabContent.find('[name="numObjects"]').val() * 1 / objectsPerPage);
		
		if (direction == 'right')
		{
			if (currentPage == numPages - 1)
				nextObjectPosition = 0;
			else
				nextObjectPosition = currentPage * objectsPerPage + 2;
				
			scrollLeftLength = '-=854px';
			pageModifier = 1;
		}
		else
		{
			if (currentPage == 0)
				nextObjectPosition = (numPages - 1) * objectsPerPage;
			else
				nextObjectPosition = currentPage * objectsPerPage - 2;
			
			scrollLeftLength = '+=854px';
			pageModifier = -1;
		}
		
		var isScrolling = tabContent.find('[name="isScrolling"]');
		if (isScrolling.val() == 'true')
		{
			return false;
		}
		
		// Lock multiple scrolling at the same time
		tabContent.find('[name="isScrolling"]').val('true');
		
		
		// Create new page in viewPort
		if (direction == 'right')
			tabContent.find('.viewPort').append('<div class="page right"></div>');
		else
			tabContent.find('.viewPort').prepend('<div class="page left"></div>');
		
		// Clone page that we want to scroll in to the viewPort
		jQuery(tabContent.find('.objects').children()[nextObjectPosition]).clone().appendTo(
			tabContent.find('.viewPort .page.'+direction)
		);
		jQuery(tabContent.find('.objects').children()[nextObjectPosition]).next().clone().appendTo(
			tabContent.find('.viewPort .page.'+direction)
		);
		jQuery('.ellipsis').ellipsis();
		
		// Scroll pages
		tabContent.find('.viewPort .page:not(.'+direction+')').animate({
				left: scrollLeftLength
			},
			slideTime,
			function() {
			}
		);
		tabContent.find('.viewPort .page.'+direction).animate({
				left: scrollLeftLength
			},
			slideTime,
			function() {
				// Delete scrolled out page from viewPort
				jQuery(tabContent.find('.viewPort .page:not(.'+direction+')')).remove();
	
				// Remove direction class, set new page number
				tabContent.find('.viewPort .page').removeClass(direction);
				currentPage += pageModifier;
				
				if (currentPage > numPages - 1) {
					currentPage = 0;
				}
				else if (currentPage == -1)
				{
					currentPage = numPages - 1;
				}
				
				// Persist
				tabContent.find('[name="currentPage"]').val(currentPage);

				isScrolling.val('false');
				updatePagers();
			}
		);
	}
})(jQuery);