/*
 * THE NARE - PHOTO GALLERY ANIMATION
 *
 * Subject to copyright.
 *
 * Web Development - LOOKsystems Limited
 * mailto:info@looksystems.ltd.uk
 * http://www.looksystems.ltd.uk
 *
 */

var gallery_with_duration 	= true;
var gallery_position_offsets  	= new Array();

// image preloading
jQuery.preloadImages = function(images) {
	for(i in images) {
		jQuery("<img>").attr("src", images[i]);
	}
}

// run gallery images, offset must be given
function photo_gallery(images, offset) {

	if (typeof(images) != 'object') return;
	if (!offset) offset = 0;

	//settings
	var is_images_preloaded		= false;
	var is_init			= false;
	var animation_speed		= 200;

	//define image offset for show image on div center
	function add_image_position_offset(pos, img)
	{
		var offset = Math.round((704 - img.width()) / 2);
		
		if (offset > 0) {
			gallery_position_offsets[pos] = -offset;
		} else {
			gallery_position_offsets[pos] = 0;
		}
	}
	
	//change dom structure and fill big grid with images
	function fill_big_grid()
	{
		$('div.images').html('').css('overflow', 'hidden');
		
		var ul = $('<ul></ul>');
		
		$('div.images').append(
			ul.css(
				{
					'width': '10000px',
					'padding-left': '225px',
					'opacity': 0
				}
			)
		);
		
		var li	 = null;
		var img  = null;
		
		for (var i = 0; i < images.length; i++) {
			li = $('<li><a href="#"><img id="mainImage'+ (i + 1) +'" src="'+ images[i]['largeImage'] +'"/></a></li>');
			ul.append(li);
			add_image_position_offset(i, li.find('a > img'));
		}

	}
	
	function illuminate_selected_image(imageNumber)
	{
		$('table.smalls tbody tr td').each(
			function () {
				$(this).removeClass('select');
				var a = $(this).find('a');
				
				if (
					a && a.attr('href')	&& (get_current_image_id(a) == imageNumber)
				)
				{
					$(this).addClass('select');
				}
			}
		);
	}
	
	function show_image_info(pos)
	{
		illuminate_selected_image(pos);
		$('span.total_numbers').text(images.length);
		$('span.current_number').text(pos + 1);
		$('h5.title').text(images[pos]['title']);
		$('p.description').text(images[pos]['description']);
	}
	
	function init_scroll_to()
	{
		fill_big_grid();
			
		jQuery.easing.easeOutQuart = function (x, t, b, c, d) {
			return -c * ((t=t/d-1)*t*t*t - 1) + b;
		};
		
		$('div.images').serialScroll({
			items:'li',
			next:'p.numbers a.forward',
			prev:'p.numbers a.backward',
			offset: gallery_position_offsets, //when scrolling to photo, stop 230 before reaching it (from the left)
			start: 0, //as we are centering it, start at the 2nd
			duration: 500,
			force:true,
			stop:true,
			lock:false,
			cycle:false, //don't pull back once you reach the end
			easing:'swing', //use this easing equation for a funny effect
			jump: true, //click on the images to scroll to them
			
			onBefore:function( e, elem, $pane, $items, pos) {
				$items.each(
					function() {
						$(this).find('a > img').animate({opacity: '.25'}, animation_speed);
					}
				);
				
				show_image_info(pos);			
			},
			onAfter:function( e, elem, $pane, $items, pos ){
				var img = $(e).find('a > img').animate({opacity: '1'}, animation_speed);
				gallery_with_duration = true;
			}
		})
			.trigger('goto', [offset]);
		
		is_init = true;
	}
	
	//preload gallery images. images array with given name must be exist 
	function preload(images, name) {
		var count =  images.length;
		var loaded = 0;
		
		for(var i = 0; i < images.length; i++)
		{
			jQuery("<img>")
			.load(function() {
				++loaded;
				if (loaded == count) {
					is_images_preloaded = true;
					init_scroll_to(); //init scrollTo plugin if images preloaded
					$('div.images > ul').animate({opacity: '1'}, animation_speed);
				}
			})
			.attr("src", images[i][name]);
		}
	}
	
	//fill grid (selector) with column count "cols" and row count "rows" by images.
	function fill_grid(selector, cols, rows)
	{
		var tbody = $(selector + ' tbody');
		var td = null;
		var tr = $('<tr></tr>');
		for (var i = 0; i < (cols * rows); i++) 
		{
			if ((i != 0) && ((i % cols) == 0)) {
				tbody.append(tr);
				tr = $('<tr></tr>');
			}
			
			if (i < images.length) {
				td = $('<td><a href="?show=' + i + '"><img src="'+images[i]['smallImage']+'"/></a></td>');
			} else {
				// if images come to the end, fill by empty image
				if (!site_prefix) site_prefix = '';
				td = $('<td><img src="'+site_prefix+'img/nosmall.gif"/></td>')
			}
			
			tr.append(td);
		}
		
		if (tr)
			tbody.append(tr);
	}
	
	//prepare dom for gallery
	function prepare_dom()
	{
		var gallery_block = 
			$(
				'<h1>Photo Gallery</h1>'
				+ '<div class="gallery-block slideshow">'
					+ '<div class="images"></div>'
					+ '<table class="smalls">'
						+ '<tbody>'
						+ '</tbody>'
					+ '</table>'
					+ '<div class="details">'
						+ '<p class="numbers"><a class="backward" href="./nare/tour?show=0"><span>&lt;</span></a>&nbsp;<span class="current_number">2</span> / <span class="total_numbers">4</span>&nbsp;<a class="forward" href="./nare/tour?show=2"><span>&gt;</span></a></p>'
						+ '<h5 class="title">The Nare Yacht</h5>'
						+ '<p class="description">Why not take a trip in out hotel yacht?</p>'
					//	+ '<ul class="links">'
					//	+ '<li><a href="./nare/spa/treatment" title="Book a treatment">Book a treatment</a></li>'
					//	+ '</ul>'
					+ '</div>'
				+ '</div>'
			);
		
		$('#content').html('').append(gallery_block); //drop old dom and add new
	
		fill_grid('table.smalls', 4, 4); //fill small image grid by images
	}
	
	// starting image preloading and show loading form
	function begin_loading()
	{
		preload(images, 'largeImage');
					
		if (!is_images_preloaded) { 
			//if preload process not finished
			$('div.images').html('').append(
				'<div id="loading"><h1>Loading...</h1></div>'
			);
			
			//disable control
			$('a.forward, a.backward').click( //
				function () 
				{
					return false;
				}
			);
		}
	}
	
	//attach function (func) on click event for elements given by selector.   
	function attach_on_click_func(selector, funct)
	{
		$(selector + ' tr td > a').each(
			function () {
				this.onclick = funct;
				this.ondbclick = function() {return false;}
			}
		);
	}
	
	//define current image id by url
	function get_current_image_id(a)
	{
		var id = a.attr('href').substring(a.attr('href').search(/show=/) + 5);
		
		if (!isNaN(id)	&& (id < images.length)	&& (id >= 0)) {
			return parseInt(id);
		} else {
			return 0;
		}
	}
	
	//go to image which id eq offset 
	function change_gallery_state(offset)
	{
		$('div.images').trigger('goto', [offset]);
	}
	
	//init internal page gallery
	function init_internal_gallery(start)
	{
		attach_on_click_func(
			'table.smalls',
			
			function() {
				if (is_images_preloaded) {
					var id = get_current_image_id($(this)); 					
					gallery_with_duration = false;
					change_gallery_state(id);
				}
				
				return false;
			}
		);
		
		show_image_info(start)
		
		if (start == 0)
			illuminate_selected_image(start);
	}
	
	//init gallery 
	function init_gallery() {
		if ($('table').is('.thumbs')) {//define current page (gallery or gallery_internal)
			attach_on_click_func(
				'table.thumbs',
				function () {
					offset = get_current_image_id($(this)); // define current image id
					
					$('div.gallery-block').animate(
						{'opacity': 0},
						animation_speed,
						function () {
							prepare_dom(); // prepare dom structure for gallery
							begin_loading();
							init_internal_gallery(offset);
						}
					);
					
					return false;
				}
			);
		} else {
			begin_loading();
			init_internal_gallery(offset);
		}
	}
	
	if ((offset < 0) || (offset >= images.length))
		offset = 0;
	
	init_gallery();
}

$(document).ready(function () {
	if (typeof(preload) == 'object') $.preloadImages(preload);
	photo_gallery(gallery_images, gallery_offset);
});