var THUMBS_PER_PAGE = 7;
var siteUrl;
var pluginUrl;
var gallery;
var pages;
var currentPageIndex = 0;
var currentPhotoIndex = 0;
var thumbsVisible = false;

function drawGallery( data, textStatus ) {
	$("#photo").html( "<img id='image'/>" );
	
	gallery = data;
	splitIntoPages( data );

	drawThumbs( 0 );
	showImage( 0, 0 );
	wireThumbPanelEvents();

	$("#photo").click( advance );

	showThumbs();
	setTimeout( hideThumbs, 2000 );
}


function splitIntoPages( data ) {
	pages = new Array();
	_thepage = new Array();

	for( i=0; i<data.length; i++ ) {
		_thepage[ _thepage.length ] = data[ i ];

		if( _thepage.length == THUMBS_PER_PAGE || i == data.length - 1 ) {
			pages[ pages.length ] = _thepage;
			_thepage = new Array();
		}
	}
}
 


function showImage( pageIndex, imageIndex ) {
	if( pages[ pageIndex ][ imageIndex ] ) {
		var image = pages[ pageIndex ][ imageIndex ];
		var imageUrl = siteUrl + "/" + image.path + "/" + image.filename;

		$("#photo #image").attr( "src", imageUrl );

		$("#thumbs img").removeClass( "active" );
		$("#tn" + imageIndex).addClass( "active" );
	}
}


function drawThumbs() {
	var thepage = pages[ currentPageIndex ];

	var thumbsPanel = $("#thumbs" ).empty();

	var previousImageCount = currentPageIndex * THUMBS_PER_PAGE;

	var prevButton = $( "<img id='prevPage' class='button' />" );
	if( currentPageIndex > 0 ) {
		prevButton.attr( "src", pluginUrl + "left-trans.png" );
		prevButton.click( showPreviousPage );
	} else {
		prevButton.attr( "src", pluginUrl + "left-disabled-trans.png" );
		prevButton.addClass( "inactive" );
	}

	thumbsPanel.append( prevButton );

	for( var i=0; i<thepage.length; i++ ) {
		var imageNumber = previousImageCount + i + 1;

		var theimage = thepage[ i ];
		var thumbSrc = siteUrl + "/" + theimage.path + "/thumbs/thumbs_" + theimage.filename;
		var thumb = $( "<img id='tn" + i + "' src='" + thumbSrc + "' title='" + imageNumber + " of " + gallery.length + "'/>" );
		thumb.click( function() {
			var imageIndex = this.id.substring( 2 );
			showImage( currentPageIndex, imageIndex );

			currentPhotoIndex = imageIndex; } );
		thumb.hover( function() { $( "#" + this.id ).addClass( "hover" ); }, function() { $( "#" + this.id ).removeClass( "hover" ); } );
	
		thumbsPanel.append( thumb );
	}

	var nextButton = $( "<img id='nextPage' class='button' />" );
        if( currentPageIndex < pages.length - 1 ) {
		nextButton.attr( "src", pluginUrl + "right-trans.png" );
                nextButton.click( showNextPage );
        } else {
		nextButton.attr( "src", pluginUrl + "right-disabled-trans.png" );
		nextButton.addClass( "inactive" );
        }

        thumbsPanel.append( nextButton );
}


function wireThumbPanelEvents() {
	$("#thumbs").bind( "mouseenter", showThumbs );
        $("#thumbs").bind( "mouseleave", hideThumbs );
}


function unwireThumbPanelEvents() {
	$("#thumbs").unbind( "mouseenter" );
	$("#thumbs").unbind( "mouseleave" );
}


function hideThumbs() {
	if( thumbsVisible ) {
		thumbsVisible = false;
		unwireThumbPanelEvents();
		$("#thumbs").stop( true ).animate( {top:"-70px"}, 500 );
		setTimeout( wireThumbPanelEvents, 500 );
	}
}


function showThumbs() {
	if( !thumbsVisible ) {
		thumbsVisible = true;
		$("#thumbs").stop( true ).animate( {top:"-140px"}, 500 );
	}
}


function showPreviousPage() {
	if( currentPageIndex == 0 ) {
		currentPageIndex = pages.length;
	}

	currentPageIndex--;
	drawThumbs();
}


function showNextPage() {
	currentPageIndex++;

	if( currentPageIndex == pages.length ) {
		currentPageIndex = 0;
	}

	drawThumbs();
}


function advance() {
	thepage = pages[ currentPageIndex ];
	currentPhotoIndex++;

	if( currentPhotoIndex == thepage.length ) {
		showNextPage();
		currentPhotoIndex = 0;
	}

	showImage( currentPageIndex, currentPhotoIndex );
}