/**
 * Vertical slider with prev/next controls
 * - Has to be invoked on the slider ul
 * - The pickGalleryCallback is optional, if none is set, the items
 *   won't be faded on mose hover
 */

$.fn.verticalSlider = function($prev, $next, pickGalleryCallback) {
	
	var $slider = $(this);
	var $elements = $slider.find('li');
	var $firstElement = $elements.eq(0);
	var $links = $elements.find('a');
	
	var elementHeight = $firstElement.height(); 
			
	var currentOffset = 0;
	var maxOffset = $elements.size() - 3;
			
	$next.click(next);
	$prev.click(prev);
	
	if ($links.size() > 0) {	
		var fadedOut = .7;
		$links.css('opacity', fadedOut).eq(0).css('opacity', 1).addClass('Active');
		$links.click(pick).hover(function() {
			$(this).not('.Active').animate({opacity: 1}, 150);
		}, function() {
			$(this).not('.Active').animate({opacity: fadedOut}, 300);
		});
	}
	
	function prev() {
		if (currentOffset > 0) {
			currentOffset = Math.max(currentOffset - 3, 0);
			animate();
			if (currentOffset == 0) {
				$prev.addClass('PrevDisabled');
			}
			$next.removeClass('NextDisabled');
		}
		return false;
	}
	
	function next() {
		if (currentOffset < maxOffset) {
			currentOffset = Math.min(currentOffset + 3, maxOffset);
			animate();
			$prev.removeClass('PrevDisabled');
			if (currentOffset == maxOffset) {
				$next.addClass('NextDisabled');
			}
		}
		return false;
	}
	
	function animate() {
		var cssOffset = elementHeight * currentOffset * -1;
		$firstElement.stop().animate({
			marginTop: cssOffset + 'px'
		}, 800);
	}
	
	function pick() {
		$links.filter('.Active').removeClass('Active').animate({opacity: fadedOut}, 300);
		$(this).addClass('Active');
		
		var gallery = $(this).attr('href');
		gallery = gallery.substring(gallery.indexOf('/?/') + 3, gallery.length);
		pickGalleryCallback(gallery);
		
		return false;
	}
	
};



/**
 * Image gallery
 * - Has to be invoked on the container
 * - The first image should already be shown
 * - showImageCallback is optional
 */

var galleryTimeout;

$.fn.gallery = function($loading, showImageCallback) {
	
	var $container = $(this);
	
	var $imageLinks = $container.find('a.Image');
	$imageLinks.eq(0).addClass('Active');
	
	if ($imageLinks.size() <= 1) {
		return $container;
	}
	
	var currentImage = 0;
	var lastImage = $imageLinks.size() - 1;
	
	var timeoutLength = 4000;
	galleryTimeout = window.setTimeout(autoPlay, timeoutLength);
	
	$imageLinks.each(function(i) {
		$(this).click(function() {
			stopAutoPlay();
			currentImage = i;
			show();
			return false;
		});
	});
	
	var $prev = $container.find('a.Prev').click(prev);
	var $next = $container.find('a.Next').click(next);
	
	function prev() {
		stopAutoPlay();
		if (currentImage > 0) {
			currentImage--;
			show();
		}
		return false;
	}
	
	function next(timeoutCallback) {
		if (typeof timeoutCallback != 'function') {
			stopAutoPlay();
		}
		if (currentImage < lastImage) {
			currentImage++;
			show(timeoutCallback);
		}
		return false;
	}
	
	function show(timeoutCallback) {
		// activate the corresponding dot
		$imageLinks.filter('.Active').removeClass('Active');
		var $currentImageLink = $imageLinks.eq(currentImage).addClass('Active');
		
		// update next and prev links
		if (currentImage == 0) {
			$prev.addClass('PrevDisabled');
		} else {
			$prev.removeClass('PrevDisabled');
		}
		if (currentImage == lastImage) {
			$next.addClass('NextDisabled');
		} else {
			$next.removeClass('NextDisabled');
		}
		
		// show loading
		$loading.stop().animate({opacity: .6}, 400);
		
		// derive image src
		var href = $currentImageLink.attr('href');
		var path = href.substring(href.indexOf('?/') + 2, href.length);
		var src = scaledImageFolder + 'Portfolio/' + contenidoCategory + '/' + path + '.jpg';
		
		// get image name
		var name = $currentImageLink.html();

		// load and show image
		var image = new Image;
		image.onload = function() {
			var $oldImg = $container.find('img');
			var $img = $(document.createElement('img'));
			$img.attr('src', this.src);
			$img.css({zIndex: 4, opacity: 0});
			$container.append($img);
			$container.find('h1').html(name);
			$img.animate({opacity: 1}, 700, function() {
				$oldImg.remove();
				$loading.css('opacity', 0);
				$img.css('zIndex', 2);
			});
			
			if (typeof showImageCallback == 'function') {
				showImageCallback($currentImageLink);
			}
			if (typeof timeoutCallback == 'function') {
				timeoutCallback();
			}
		};
		image.src = src;
	}
	
	function autoPlay() {
		if (currentImage == lastImage) {
			currentImage = -1;
		}
		next(function() {
			galleryTimeout = window.setTimeout(autoPlay, timeoutLength);
		});
	}
	
	function stopAutoPlay() {
		if (galleryTimeout) {
			window.clearTimeout(galleryTimeout);
			galleryTimeout = false;
		}
	}
	
	return $container;
	
}