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

$(document).ready(function() {

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

	// paging for thumbnails

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

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

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

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

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

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

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

	var thumbsTotalHeight = rows * ( thumbHeight + marginBottom );
	var thumbPages = Math.ceil ( thumbsTotalHeight / thumbsHeight );
	maxPage = thumbPages - 1;

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

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

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

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

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

	for ( var i = 0; i <= maxPage; i++ ) {
		$('#showroom-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 = $('#showroom-gallery-thumbnails ul li:first').children('a:first');
	if ( $(a).attr('id') != undefined ) {
 		i = ( $(a).attr('id') );
		pageGalleryShowImage( i );
	}

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

});

function pageGalleryScrollToPage ( page ) {

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

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

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

	currentPage = page;
	
}

function log ( s ) {
	$('#log').val( s + "\n" + $('#log').val() );
}

function pageGalleryShowImage( e ) {

	e = $( '#' + e );

	e.blur();

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

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

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

	log ( image );

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

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

	currentImage = image;

	var a = false;

	var s = '';

	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>';
	}

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

}