﻿var PAGE_SIZE = 10;
var CURRENT_PAGE_INDEX = 0;

$(document).ready(function()
{
	GetGalleryItemsPaged(0);
	SelectImageAfterAjax(':first');
});

function GetGalleryItemsPaged(pageIndex)
{
	$.ajax({
		type: "POST",
		url: "/webservices/Gallery.asmx/GetGalleryItemsPaged",
		data: "{'galleryPath':'" + GALLERY_PATH + "','pageIndex':'" + pageIndex + "','pageSize':'" + PAGE_SIZE + "'}",
		contentType: "application/json; charset=utf-8",
		dataType: "json",
		success: function(msg)
		{
			if (msg.d)
			{
				var data = $.evalJSON(msg.d);
				var itemsHtml = '';
				for (var i = 0; i < data.Items.length; i++)
				{
					itemsHtml += '<li>';
					itemsHtml += '<a href="javascript:void(0);" rel="' + data.Items[i].Intermediate + '" original="' + data.Items[i].Original + '" title="' + GALLERY_TITLE + '" description="' + GALLERY_TITLE + '">';
					itemsHtml += '<img src="' + data.Items[i].Thumbnail + '" alt="' + GALLERY_TITLE + '" style=\"display:none;\" />';
					itemsHtml += '</a>';
					itemsHtml += '</li>';
				}

				$('.thumbs').html(itemsHtml);
				$('.thumbs img').EffectChain({ duration: "0.2", order: "normal", effect: "fadeIn" });

				CURRENT_PAGE_INDEX = pageIndex;

				BuildPager(data.ItemCount);
				WireUpThumbs();
				SelectImage(':first');
			}
		}
	});
}

/*
function BuildImageControls(currentItem)
{
	var controls = $('#controls');
	controls.find('a.prev').mouseup(function()
	{
		var prevItem = currentItem.prev();
		if (prevItem.is('li'))
		{
			BuildImage(prevItem.children('a'));
		}
		else
		{
			GetGalleryItemsPaged(CURRENT_PAGE_INDEX - 1);
			SelectImageAfterAjax(':last');
		}
	});

	controls.find('a.next').mouseup(function()
	{
		alert($(this).attr('class'));
		var nextItem = currentItem.next();
		if (nextItem.is('li'))
		{
			BuildImage(nextItem.children('a'));
		}
		else
		{
			GetGalleryItemsPaged(CURRENT_PAGE_INDEX + 1);
			SelectImageAfterAjax(':first');
		}
	});
}
*/
function SelectImageAfterAjax(selector)
{
	$('#navigation').ajaxStop(function()
	{
		SelectImage(selector);
		$('#navigation').unbind('ajaxStop');
	});
}

function SelectImage(selector)
{
	$('.thumbs a' + selector).mouseup();
}

function WireUpThumbs()
{
	$('.thumbs a').mouseup(function()
	{
		BuildImage($(this));
	});
}

function BuildImage(container)
{
	var imageHtml = '<img src="' + container.attr('rel') + '" />';
	$('#slideshow').html('<span class="image-wrapper">' + imageHtml + '</span>').find('img').hide().fadeIn('slow');
	$('#download-link').attr('href', container.attr('original')).attr('target', '_blank');	
	//BuildImageControls(container.parent());
}

function BuildPager(totalRecords)
{	
	var numPages = Math.floor(totalRecords / PAGE_SIZE);
	if (totalRecords % PAGE_SIZE == 0)
	{
		numPages += 1;
	}
		
	var pagerHtml = '';
	// Prev Page Link
	if (CURRENT_PAGE_INDEX > 0)
	{
		var click = "GetGalleryItemsPaged(" + (CURRENT_PAGE_INDEX - 1) + ");";
		pagerHtml += '<a onclick="' + click + '" href="javascript:void(0);" title="PREV">PREV</a>';
	}

	// Page Index Links
	var startIndex;
	var endIndex;
	if (numPages <= 5)
	{
		startIndex = 0;
		endIndex = numPages - 1;
	}
	else
	{
		if (CURRENT_PAGE_INDEX >= numPages - 2)
		{
			startIndex = numPages - 4;
			endIndex = numPages;
		}
		else if (CURRENT_PAGE_INDEX >= 4)
		{
			startIndex = CURRENT_PAGE_INDEX - 2;
			endIndex = CURRENT_PAGE_INDEX + 2;
		}
		else if (CURRENT_PAGE_INDEX < 5)
		{
			startIndex = 0;
			endIndex = 4;
		}		
	}	
	
	for (var i = startIndex; i <= endIndex; i++)
	{
		var pageNum = i + 1;

		if (i == CURRENT_PAGE_INDEX)
		{
			pagerHtml += '<strong>' + pageNum + '</strong>';
		}
		else
		{
			var click = "GetGalleryItemsPaged(" + i + ");";
			pagerHtml += '<a onclick="' + click + '" href="javascript:void(0);" title="' + pageNum + '">' + pageNum + '</a>';
		}
	}

	// Next Page Link	
	if (CURRENT_PAGE_INDEX < numPages)
	{
		var click = "GetGalleryItemsPaged(" + (CURRENT_PAGE_INDEX + 1) + ");";
		pagerHtml += '<a onclick="' + click + '" href="javascript:void(0);" title="NEXT">NEXT</a>';
	}
	
	$('.pagination').html(pagerHtml);
}
