$(document).ready(function()
{

	//how much items per page to show
	var show_per_page = 60;
	//getting the amount of elements inside content div
	var number_of_items = $('.productrow').size();
	//calculate the number of pages we are going to have
	var number_of_pages = Math.ceil(number_of_items/show_per_page);

	//set the value of our hidden input fields
	$('#current_page').val(0);
	$('#show_per_page').val(show_per_page);
	$('#number_of_pages').val(number_of_pages);


	//now when we got all we need for the navigation let's make it '

	/*
	what are we going to have in the navigation?
		- link to previous page
		- links to specific pages
		- link to next page
	*/

	var navigation_html = '<table border="0" id="paginationTable" height="7" style="border-collapse: collapse" cellpadding="0"><tr>';
	navigation_html += '<td width="25" align="center" style="border: 1px solid #CCCCCC; CURSOR: pointer" onclick="javascript:previous();" onMouseover="this.style.borderColor=\'#F6F6F6\'; this.style.borderColor=\'#999999\';" onMouseout="this.style.borderColor=\'#999999\'; this.style.borderColor=\'#CCCCCC\';"><span style="font:15px normal Arial, Arial, monospace;color:#333333">&#9668;</span></td><td width="9">&nbsp;</td>'

	var current_link = 0;
	while(number_of_pages > current_link)
	{
		navigation_html += '<td longdesc="' + current_link +'" id="pagination_no_' + current_link + '" class="page_link" width="25" onclick="javascript:go_to_page(' + current_link +');" align="center" style="border: 1px solid #CCCCCC; CURSOR: pointer" onMouseover="this.style.borderColor=\'#999999\';" onMouseout="this.style.borderColor=\'#CCCCCC\';"><span style="font:15px normal Arial, Arial, monospace;color:#000">'+ (current_link + 1) +'</span></td><td width="9">&nbsp;</td>'
		current_link++;
	}

	navigation_html += '<td width="25" align="center" style="border: 1px solid #CCCCCC; CURSOR: pointer" onclick="javascript:next();" onMouseover="this.style.borderColor=\'#F6F6F6\'; this.style.borderColor=\'#999999\';" onMouseout="this.style.borderColor=\'#999999\'; this.style.borderColor=\'#CCCCCC\';"><span style="font:15px normal Arial, Arial, monospace;color:#333333">&#9658;</span></td><td width="9">&nbsp;</td>';
	navigation_html += '<td class="paginationViewAll" align="center" style="border: 1px solid #CCCCCC; CURSOR: pointer; padding-left:5px; padding-right:5px" onclick="javascript:viewAll();" onMouseover="this.style.borderColor=\'#999999\';" onMouseout="this.style.borderColor=\'#999999\'; this.style.borderColor=\'#CCCCCC\';" width="145"><span style="font:15px normal Arial, Arial, monospace;color:#000">View All: ' + $('.imgitem').size() + ' Items</span></td>'
	navigation_html += '</tr></table>';


	$('#page_navigation').html(navigation_html);
	$('#page_navigation_bottom').html(navigation_html);
	

	//add active_page class to the first page link
	$('.page_link:first').addClass('active_page');
	$('.page_link[longdesc=0]').addClass('active_page');

	//hide all the elements inside content div
	$('.productrow').css('display', 'none');

	//and show the first n (show_per_page) elements
	$('.productrow').each(function(index) 
	{
		if (index >= 0 && index < show_per_page)
			$(this).css('display', 'block');
	});

});


function previous()
{
	new_page = parseInt($('#current_page').val()) - 1;
	go_to_page(new_page);
}

function next()
{
	new_page = parseInt($('#current_page').val()) + 1;
	go_to_page(new_page);
}

function viewAll()
{	
	$('.page_link').removeClass('active_page');
	scrollTo(0, 0);
	$('.paginationViewAll').addClass('active_page');
	$('.productrow').css('display', 'block');
}

function go_to_page(page_num)
{
	// scroll
	scrollTo(0, 0);
	//$("html").scrollTop(0).delay(300).scrollTop(0).delay(300).scrollTop(0);

	// Save scroll position 
	var db = (document.body) ? 1 : 0;
	var scroll = (window.scrollTo) ? 1 : 0;
	
	var pageXOffset = 0;
	var pageYOffset = 0;
	
	var x = (db) ? document.body.scrollLeft : pageXOffset;
  	var y = (db) ? document.body.scrollTop : pageYOffset;
		
	// Set page 	
	var totPages = parseInt($('#number_of_pages').val());
	if (page_num < 0 || page_num >= totPages)
		return;

	//get the number of items shown per page
	var show_per_page = parseInt($('#show_per_page').val());

	//get the element number where to start the slice from
	start_from = page_num * show_per_page;

	//get the element number where to end the slice
	end_on = start_from + show_per_page;

	//hide all children elements of content div, get specific items and show them
	/* $('.productrow').css('display', 'none').slice(start_from, end_on).css('display', 'block'); */
	$('.productrow').css('display', 'none');
	
	var startedDisp = false;
	$('.productrow').each(function(index) 
	{
		if (index >= start_from && index < end_on)
		{
			startedDisp = true;
			$(this).css('display', 'block');
		}
	});

	/*
		get the page link that has longdesc attribute of the current page and add active_page class to it
		and remove that class from previously active page link
	*/
	
	$('.paginationViewAll').removeClass('active_page');
	$('.page_link').removeClass('active_page');
	$('.page_link[longdesc=' + page_num + ']').addClass('active_page');
	$('#pagination_no_' + page_num).addClass('active_page');

	//update the current page input field
	$('#current_page').val(page_num);
	
	
}

/*@@ DEPRECATED 

function loadOtherimages()
{
	var viewLargerImagePath = "http://site.icanvasart.com/GalleryPage/ViewLarger.jpg";			
	$('.imgViewLarger').each(function(index)
	{
		$(this).bind("load",function(){ $(this).fadeIn(); });
		$(this).attr( 'src', viewLargerImagePath);
	});
	
	var moreDetailsrImagePath = "http://site.icanvasart.com/GalleryPage/MoreDetails.jpg";			
	$('.imgMoreDetails').each(function(index)
	{
		$(this).bind("load",function(){ $(this).fadeIn(); });
		$(this).attr( 'src', moreDetailsrImagePath);
	});
	
	var orderNowImagePath = "http://site.icanvasart.com/GalleryPage/OrderNow.jpg";			
	$('.imgOrderNow').each(function(index)
	{
		$(this).bind("load",function(){ $(this).fadeIn(); });
		$(this).attr( 'src', orderNowImagePath);
	});
	
	var starReviewImagePath = "http://site.icanvasart.com/GalleryPage/StarReview.jpg";			
	$('.imgStarReview').each(function(index)
	{
		$(this).bind("load",function(){ $(this).fadeIn(); });
		$(this).attr( 'src', starReviewImagePath);
	});
	
	
}

function loadimages()
{
	//Load Images
	$('.imgitem').each(function(index)
	{
		//$(this).attr( 'src', $(this).attr('realsrc'));
		$(this).bind("load",function(){ $(this).fadeIn(); });
		$(this).attr( 'src', $(this).attr('realsrc'));
	});
}
*/