/****************************************************************************
 * @author Sebastian Klepper <sebastian@sl-entertainment.com>
 * @copyright SL Entertainment Group GmbH, http://www.sl-entertainment.com/
 ****************************************************************************/

$(document).ready(function() {
	
	// existing elements
	contentContainer = $('#portfolio-project');
	galleryContainer = $('#portfolio-gallery-container');
	list = $('#portfolio-gallery-list');
	
	// indices
	numberOfItems = list.children().length;
	currentItem = 0;
	lastItem = 0;
	pageSize = 9;
	numberOfPages = Math.ceil(numberOfItems / pageSize);
	currentPage = 0;
	
	// caches
	itemStatus = [true];
	contentLoaded = [contentContainer.children().first()];
	
	// layout setup
	$('.article').first().addClass('portfolio-dynamic');
	list.width(numberOfItems * 82);
	list.children().first().addClass('portfolio-gallery-active');
	
	// pagination w/ dots & slide effect
	if (numberOfItems > pageSize) {
		galleryContainer.prepend('<a href="#" id="portfolio-gallery-previous">&gt;</a>');
		buttonPrevious = $(galleryContainer.children().first());
		buttonPrevious.addClass('portfolio-gallery-inactive');
		
		galleryContainer.append('<a href="#" id="portfolio-gallery-next">&gt;</a>');
		buttonNext = $(galleryContainer.children().last());
		
		buttonPrevious.click(function(event){
			event.preventDefault();
			gallerySlideTo(currentPage - 1);
		});
		
		buttonNext.click(function(event){
			event.preventDefault();
			gallerySlideTo(currentPage + 1);
		});
		
		galleryContainer.append('<ul id="portfolio-gallery-pagination"></ul>');
		paginationContainer = galleryContainer.children().last();
		paginationContainer.width(numberOfPages * 9);
		for (var i = 0; i < numberOfPages; i++) {
			paginationContainer.append('<li><a href="#">&#x2022;</a></li>');
			var dot = paginationContainer.children().last();
			$(dot).click(onDotClick);
			if (i == currentPage) {
				dot.addClass('active');
			}
		}
		
		function onDotClick(event) {
			event.preventDefault();
			gallerySlideTo(paginationContainer.children().index($(this)));
		}
		
		function gallerySlideTo(pageNum) {
			
			if (pageNum > currentPage && currentPage < numberOfPages - 1) {
				var diff = (pageNum - currentPage) * 738;
				currentPage = pageNum;
				buttonPrevious.removeClass('portfolio-gallery-inactive');
				if (currentPage == numberOfPages - 1) {
					buttonNext.addClass('portfolio-gallery-inactive');
				}
				list.animate({
					left: '-=' + diff
				}, 600);
			}
			else if (pageNum < currentPage && currentPage > 0) {
				var diff = (currentPage - pageNum) * 738;
				currentPage = pageNum;
				buttonNext.removeClass('portfolio-gallery-inactive');
				if (currentPage == 0) {
					buttonPrevious.addClass('portfolio-gallery-inactive');
				}
				list.animate({
					left: '+=' + diff
				}, 600);
			}
			else {
				return;
			}
			
			var dots = paginationContainer.children();
			dots.each(function(i) {
				if (i == currentPage) {
					$(this).addClass('active');
				}
				else {
					$(this).removeClass('active');
				}
			});
		}
	}
	// asynchronous loading of content
	list.delegate('li', 'click', function(event) {
		event.preventDefault();
		lastItem = currentItem;
		list.children().each(function(i, item) {
			$(this).removeClass('portfolio-gallery-active');
			if (item == event.currentTarget) {
				currentItem = i;
			}
		});
		$(this).addClass('portfolio-gallery-active');
		
		var url = $(this).children().first().attr('href');
		var split = url.split('/');
		var hash = split[split.length-2];
		window.location.hash = hash;
		
		if (lastItem == currentItem) {
			return;
		}
		
		if (!itemStatus[currentItem]) {
			contentContainer.addClass('portfolio-project-loading');
			contentLoaded[lastItem].fadeOut(function() {
				contentContainer.append('<div class="portfolio-project-content"></div>');
				contentLoaded[currentItem] = contentContainer.children().last();
				contentLoaded[currentItem].hide();
				contentLoaded[currentItem].load(url + ' .article > *', function() {
					contentLoaded[currentItem].fadeIn(function() {
						contentContainer.removeClass('portfolio-project-loading');
					});
					itemStatus[currentItem] = true;
				});
			});
		}
		else {
			contentLoaded[lastItem].fadeOut();
			contentLoaded[currentItem].fadeIn();
		}
	});
	
	// consider url hash
	if (window.location.hash) {
		var children = list.children();
		for (var i = 0; i < children.length; i++) {
			var url = $(children[i]).children().first().attr('href');
			var split = url.split('/');
			var hash = split[split.length-2];
			if ("#"+hash == window.location.hash) {
				$(children[i]).click();
				break;
			}
		}
		
	}
	
});