// jQuery(document).ready(function(){
// 	// var winH = jQuery(window).height();
// 	//     var winW = jQuery(window).width();
// 	//     var centerDiv = jQuery('#body');
// 	//     centerDiv.css('top', winH/2-centerDiv.height()/2);
// 	
// 	jQuery("#largeImage").mouseenter( function(){
// 		jQuery(".arrows").fadeIn();
// 	}).mouseleave( function(){jQuery(".arrows").fadeOut();});
// 	
// 	jQuery("#leftArrow").click(function(){
// 		jQuery(".previewImage").eq(jQuery(".previewImage").index(jQuery("#active"))-1).click();
// 	});
// 	
// 	jQuery("#rightArrow").click(function(){
// 		jQuery(".previewImage").eq(jQuery(".previewImage").index(jQuery("#active"))+1).click();
// 	});
// });
// 
// function loadImage(el, path, alt){
// 	jQuery("#active").attr("id", "");
// 	jQuery(el).attr("id", "active");
// 	jQuery("#largeImage > img:not(:first)").remove();
// 	jQuery("<img />").attr("src", path).attr("alt", alt).css({'z-index':2,'display':'none'}).appendTo("#largeImage");
// 	jQuery("#largeImage > img:first").fadeOut("slow", function(){jQuery(this).remove()});
// 	jQuery("#largeImage > img:last").fadeIn("slow", function(){jQuery(this).css({'z-index':3})});
// }


(function($) {
	
	
	/**
	 * Document ready.
	 */
	
	$(function() {
		
		
		
		/**
		 * Thumbnail scroll view.
		 */
		
		// Number of rows
		var kRows = 3;
		// Number of columns
		var kCols = 2;

		var kCells = kRows * kCols;
		
		
		var $images = $('#smallImages .preview');
				
		if ($images.length) {
			
			
			
			var dx = $images.eq(0).outerWidth();
			var dy = $images.eq(0).outerHeight();

			var $content  = $('#smallImages .content-view');
			var distance = dx*2;
			
			var x = 0;
			var y = 0;
			
			$images.each(function(idx) {
				
				// row
				var r = Math.floor(idx/kCols) % kRows; // => 0 0 1 1 2 2 0 0 1 1 2 2 0 0 ...
				// column
				var c = Math.floor(idx/kCells) + idx%kCols + Math.floor(idx/kCells); // => 0 1 0 1 0 1 2 3 2 3 2 3 4 5 4 5 4 5 ...
				
				
				$(this).css({
					position: 'absolute',
					top: (r*dy)+'px',
					left: (c*dx)+'px'
				});
								
			});


			var numberOfPages = Math.ceil($images.length/kCells);
			var currentPage = 0;
			var currentX = 0;
			
			var $prev = $("<a/>").attr('href','#prev').addClass('leftArrow');
			var $next = $("<a/>").attr('href','#next').addClass('rightArrow');
			$('#smallImages').append($prev, $next);
			
			var validateButtons = function() {
				if (currentPage > 0) {
					$prev.show();
				}
				else {
					$prev.hide();
				}
				if (currentPage+1 < numberOfPages) {
					$next.show();
				}
				else {
					$next.hide();
				}
			}
			validateButtons();

			$next.click(function() {
				currentPage++;
				currentX -= distance;
				$content.animate({
					left: currentX+'px',
				});
				validateButtons();
				return false;
			});
			
			$prev.click(function() {
				currentPage--;
				currentX += distance;
				$content.animate({
					left: currentX+'px',
				});
				validateButtons();
				return false;
			});
			
			
			
			/**
			 * Image viewer
			 */
			
			var $viewer = $('#largeImage');
			
			var $prevImg = $("<a/>").attr('href','#prev').addClass('leftArrow');
			var $nextImg = $("<a/>").attr('href','#next').addClass('rightArrow');
			
			$viewer.append($prevImg, $nextImg);
			
			var $selected = null;
						
			$images.find('.image').click(function() {
								
				var $a = $(this);
				
				$selected = $a.parent();
				
				var index = $images.index($selected);
				
				if (index > 0) {
					$prevImg.show();
				}
				else {
					$prevImg.hide();
				}
				if (index+1 < $images.length) {
					$nextImg.show();
				}
				else {
					$nextImg.hide();
				}
								
				var src = $(this).attr('href');
				
				var $old = $viewer.find('.image-container').css({zIndex:0});
				
				var $img = $("<div/>").addClass('image-container').css({zIndex:1}).hide().appendTo($viewer);
				
				var img = new Image();
				img.onload = function() {
					var w = img.width;
					var h = img.height;
					
					var t = parseInt(($viewer.outerHeight()-h)/2);
					var l = parseInt(($viewer.outerWidth()-w)/2);
					
					var $i = $(img);
					$i.css({
						top: t+'px',
						left: l+'px'
					});
					
					$img.append($i).fadeIn(500,function() {
						$old.remove();
					});
				}
				img.src = src;
				
				return false;
			}).eq(0).click(); //Intitial page load => Load the first image.
			
			$prevImg.click(function() {
				$selected.prev().children('.image').click();
				return false;
			});
			$nextImg.click(function() {
				$selected.next().children('.image').click();
				return false;
			})
			

			
		}
		
		
	});
	
	
})(jQuery);