var currentImage = false;
var prevImage = false;
var nextImage = false;
var currentPage = 0;
var maxPage = false;
var thumbsHeight = false;
var thumbsPerPage = 0;

$(document).ready(function() {

		$('#page-gallery-thumbnails ul li a').click(function() { 
				pageGalleryShowImage( $(this).attr('id') );
				return false;
			});

		// paging for thumbnails

		thumbsHeight = $('#page-gallery-thumbnails').height();
		var thumbsWidth = $('#page-gallery-thumbnails').width();

		// count thumbnails
		var thumbCount = $('#page-gallery-thumbnails ul').children().size(); 

		// get width, height and margins of thumb	
		var a = $( '#page-gallery-thumbnails ul li a:first');

		var thumbWidth = a.width();
		var thumbHeight = a.height();

		marginTop = $( '#page-gallery-thumbnails ul li:first').css('margin-top');
		marginTop = marginTop.substring ( 0, marginTop.length - 2 ); // strip off 'px'
		marginTop = Number(marginTop);

		marginRight = $( '#page-gallery-thumbnails ul li:first').css('margin-right');
		marginRight = marginRight.substring ( 0, marginRight.length - 2 ); // strip off 'px'
		marginRight = Number(marginRight);

		marginBottom = $( '#page-gallery-thumbnails ul li:first').css('margin-bottom');
		marginBottom = marginBottom.substring ( 0, marginBottom.length - 2 );
		marginBottom = Number(marginBottom);

		marginLeft = $( '#page-gallery-thumbnails ul li:first').css('margin-left');
		marginLeft = marginLeft.substring ( 0, marginLeft.length - 2 ); // strip off 'px'
		marginLeft = Number(marginLeft);

		var columns = Math.round ( thumbsWidth / ( thumbWidth + marginLeft + marginRight ));

		// total number of rows in thumb list
		var rows = Math.round ( thumbCount / columns );

		var thumbsTotalHeight = rows * ( thumbHeight + marginLeft + marginRight );

		// how many pages of thumbs
		var thumbPages = Math.ceil ( thumbsTotalHeight / thumbsHeight );

		maxPage = thumbPages;
		currentPage = 0;

		thumbsPerPage = Math.floor ( thumbsHeight / ( thumbHeight + marginTop + marginBottom ) ) * columns;
		var rowsPerPage = thumbsPerPage / columns;

		if ( thumbCount <= thumbsPerPage ) {
			$('#page-gallery-pager').remove();
		} else {
			var s ='';
			s += '<ul>';
			s += '<li id="page-gallery-pager-previous">';
			s += '<a href="javascript: void(0);">&lt;</a>';
			s += '</li>';

			for ( var i = 0; i <= maxPage - 1; i++ ) {
				s += '<li>';
				s += '<a href="javascript: void(0);" id="page-gallery-pager-jump-' + i + '">' + ( Number(i) + 1 ) + '</a>';
				s += '</li>';
			}

			s += '<li id="page-gallery-pager-next">';
			s += '<a href="javascript: void(0);" >&gt;</a>';
			s += '</li>';
			s += '</ul>';
			$('#page-gallery-pager').html ( s );

			$('#page-gallery-pager-previous a').click(function() {
					this.blur();
					pageGalleryScrollToPage ( currentPage - 1 );
					return false;
				});

			$('#page-gallery-pager-next a').click(function() { 
					this.blur();
					pageGalleryScrollToPage ( currentPage + 1 );
 					return false;
				});

			for ( var i = 0; i <= maxPage; i++ ) {
				$('#page-gallery-pager-jump-' + i ).click(function( e ) {

						// extract page from id
						var els = this.id.split('-');
						var page = els[4];
						this.blur();
						pageGalleryScrollToPage ( page );
						return false;

					});
			}
		}
		// show first image on page load

		var a = $('#page-gallery-thumbnails ul li:first').children('a:first');
		if ( $(a).attr('id') != undefined ) {
			i = ( $(a).attr('id') );
			pageGalleryShowImage( i );
		}

		// hilite first page in pager
		$('#page-gallery-pager-jump-0').addClass( 'page-gallery-pager-active' );

	});

function pageGalleryScrollToPage ( page ) {

	if ( page == currentPage || page < 0 || page > maxPage ) {
		return false;
	}

	var targetTop = page * thumbsHeight;
	$('#page-gallery-thumbnails').animate({scrollTop: targetTop}, 250 );

	$('#page-gallery-pager ul li a').removeClass( 'page-gallery-pager-active' );
 	$('#page-gallery-pager-jump-' + page).addClass( 'page-gallery-pager-active' );

	currentPage = page;
	
}

function log ( s ) {
	$('#log').html( s );
}

function pageGalleryShowImage( e ) {

	e = $( '#' + e );

	e.blur();

	$('#page-gallery-thumbnails ul li a').removeClass( 'page-gallery-thumbnail-active' );
	e.addClass( 'page-gallery-thumbnail-active' );

	var attrs = e.attr('rel').split('|');

	var position = attrs[0];
	var image = attrs[1];
	var title = attrs[2];

	if ( image == currentImage ) {
		return false;
	}

	var page = Math.floor ( ( Number(position) - 1 ) / thumbsPerPage );
	pageGalleryScrollToPage ( page );

	currentImage = image;

	var a = false;

	var s = '';

	if ( true == pageGalleryShowTitle && undefined != title ) {
		s += '<h3 id="page-gallery-title"><span>' + title + '</span></h3>';
	}

	a = $(e).parent().next().children('a:first');
	if ( $(a).attr('id') != undefined ) {
 		i = ( $(a).attr('id') );
		s += '<a href="javascript:void(0);" onclick="pageGalleryShowImage( \'' + i + '\' );"><span>&raquo;</span></a>';
	}

	a = $(e).parent('li').prev('li').children('a:first');
	if ( $(a).attr('id') != undefined ) {
 		i = ( $(a).attr('id') );
		s += '<a href="javascript:void(0);" onclick="pageGalleryShowImage( \'' + i + '\' );"><span>&laquo;</span></a>';
	}

	$('#page-gallery-image').fadeOut( function() { $('#page-gallery-image').css('background', 'url(/image/' + image + 'x' + pageGalleryZoomWidth + '.jpg) center no-repeat'); $('#page-gallery-image').html( s ); $('#page-gallery-image').fadeIn(); });

}