/** 
 * Robert Wunsch Image Gallery + Menu Hover
 * 
 * @copyright	steffenbew 2010
 * @author		Steffen Bewersdorff
 * @mail		mail@steffenbew.com
 * @website		http://steffenbew.com
 * @version		1.0
 * @date		01/10
 */
 
"use strict";

jQuery(document).ready(function ($) {

	var self, selected, thumbs, opacityValue, fullsizeContainer, fullsizeContainerHeight, fullsizeImg, thumbOpacity, nextImg, nextImgSrc, newImage;


	// quick visual menu change
	$('#nav li').click(function () {
	
		self = $(this);
		
		if (self.hasClass('current_page_item')) {
			return false;
		}
		
		$('.current_page_item').removeClass('current_page_item');
		$(this).addClass('current_page_item');

	});


	// thumbnails
	thumbs = $('#thumbnails ul li a');

	// define selected image
	selected = 0;
		
	// low opacity value
	opacityValue = 0.7;

	// fullsize image container (with ajax-loader bg)
	fullsizeContainer = $('#fullsize');
	fullsizeContainerHeight = fullsizeContainer.height();
	
	// fullsize image
	fullsizeImg = $('#fullsize img');
	
	// set opacity of all thumbs and nav buttons to zero + hide fullsize image
	thumbs.css('cursor', 'default').css('opacity', 0);
	$('#prev, #next').css('opacity', 0);
	fullsizeImg.hide();
	
	
	// load the fullsize image 
	function loadImage(index) {

		// next thumbnail
		nextImg = thumbs.filter('.loaded').eq(index);

		// only load if not selected
		if (!nextImg.hasClass('selected')) {

			// fullsize src
			nextImgSrc = nextImg.attr('href');

			// animate opacity of previous thumbnail to lower
			$('a.selected').fadeTo(200, opacityValue).removeClass('selected').parent('li').removeClass('selected');
			
			// assign clicked thumbnail the selected class and set opacity to full
			nextImg.fadeTo(0, 1).addClass('selected').parent('li').addClass('selected');

			// create fullsize image object
			newImage = $('<img />').css('opacity', 0).attr('src', nextImgSrc);

			// fade out fullsize image --> callback
			$('#fullsize img').stop().fadeTo(150, 0, function () {

				// remove old fullsize image
				$('#fullsize img').remove();
				
				// append and fade in new fullsize image
				fullsizeContainer.append(newImage);
				
				// set top margin of new image (center) and fade in
				newImage.css('margin-top', (fullsizeContainerHeight - nextImg.data('imgHeight')) / 2).fadeTo(400, 1);
				
				// change image title
				$('#image-title').text(nextImg.attr('title'));
				
				// remove preload indicator when first image is loaded
				if (index === selected) {
					fullsizeContainer.css('backgroundPosition', '-9999px -9999px');
				}

			});

		}

	}
	

	//preload index image
	function preloadImages(index) {

		self = thumbs.eq(index);
		thumbOpacity = opacityValue;

		if (index === thumbs.length) {
			return false;
		}
		

		$("<img />").load(function () {
		
			self.data('imgHeight', this.height);

			// fade in thumbnail
			$("<img />").load(function () {

				// delay next load process
				setTimeout(function () {
		
					// load first image automatically
					if (index === selected) {		
						thumbOpacity = 1;
						loadImage(index);				
					}
		
					preloadImages(index + 1);
				
				}, 100);
				
				self.fadeTo(400, thumbOpacity).addClass('loaded').css('cursor', 'pointer');
				
			}).attr('src', self.children('img').attr('src'));

		}).attr('src', self.attr('href'));
		
	}
	
	// start preloading the images
	preloadImages(0);
	

	// thumb hover effect
	thumbs.hover(function () {
	
		// hover only if loaded
		$(this).filter('.loaded').stop().fadeTo(100, 1);
		
	}, function () {
	
		// if not selected -> animate opacity to lower
		if (!$(this).hasClass('selected')) {
			$(this).filter('.loaded').fadeTo(50, opacityValue);
		}
		
	});


	// load the image clicked
	thumbs.click(function () {
		
		// load only if loaded
		if ($(this).hasClass('loaded')) {
			// get index of new image
			selected = thumbs.index(this);
			
			// load new image
			loadImage(selected);
		}
		
		// prevent default
		return false;
		
	});
	
	
	// display ajax-loader if no images are cached
	setTimeout(function () {
		if (!$('.selected').hasClass('loaded')) {
			fullsizeContainer.css('backgroundPosition', 'center center');
		}
	}, 500);


	//prev + next hover effect
	$('#prev, #next').hover(function () {
	
		// animate opacity to full
		$(this).stop().fadeTo(150, 1);
		
	}, function () {
	
		// fade away
		$(this).fadeTo(300, 0);
	});
	
	
	// load preview image
	function loadPreviousImage() {
	
		// get index of new image
		selected = selected !== 0 ? selected - 1 : thumbs.filter('.loaded').length - 1;
		
		// load new image
		loadImage(selected);
		
	}
	

	// load next image
	function loadNextImage() {
	
		// get index of new image
		selected = selected !== thumbs.filter('.loaded').length - 1 ? selected + 1 : 0;
		
		// load new image
		loadImage(selected);
		
	}
	
	// load previous image on click
	$('#prev').click(function () {
	
		loadPreviousImage();
		
		// prevent default
		return false;
		
	});
	
	
	// load next image on click
	$('#next').click(function () {
	
		loadNextImage();
		
		// prevent default
		return false;

	});
	
	// iPhone swipe handling
	$("#next, #prev, #protector").touchwipe({
		wipeLeft: loadNextImage,
		wipeRight: loadPreviousImage,
		min_move_x: 20,
		preventDefaultEvents: false
	});

});