var page = 1;

$(document).ready(function()	{
	$('#page_number').html('1');

	$('#left img.page-up').mouseover(function(){
		if ($(this).attr('alt') == "up")	{
			$(this).attr({ src: "/templates/images/left-uparrow_on.png" });
		}
	});
	$('#left img.page-up').mouseout(function(){
		$(this).attr({ src: "/templates/images/left-uparrow_off.png" });
		if ($(this).attr('alt') == "up")	{
			$(this).attr({ src: "/templates/images/left-uparrow.png" });
		}
	});
	$('#left img.page-down').mouseover(function(){
		if ($(this).attr('alt') == "down")	{
			$(this).attr({ src: "/templates/images/left-downarrow_on.png" });
		}
	});
	$('#left img.page-down').mouseout(function(){
		$(this).attr({ src: "/templates/images/left-downarrow_off.png" });
		if ($(this).attr('alt') == "down")	{
			$(this).attr({ src: "/templates/images/left-downarrow.png" });
		}
	});

	/* Move to the previous page */
	$('#left img.page-up').click(function(){
		prev_page = page - 1; /* get previous page number */
		if (prev_page > 1) {	/* if prev_page is higher then 1 (first page) */
			$('#page_'+page).slideUp();	/* hide active page */
			page = page - 1; /* decrease page */
			$('#page_'+page).slideDown();	/* show previous page */
			$(this).attr({ src: "/templates/images/left-uparrow.png" }); /* show ACTIVE image */
			$(this).attr({ alt: "up" }); /* turn on paging this way */
			$('#page_number').html(page); /* show page number */
		}
		else	{	/* if next_page is 1 or less */
			if ( $(this).attr('alt') == 'up' )
			{
				$('#page_'+page).slideUp();	/* hide active page */
				page = 1; /* set page 1 */
				$('#page_'+page).slideDown();	/* show previous page */
			}
			$(this).attr({ src: "/templates/images/left-uparrow_off.png" }); /* show OFF image */
			$(this).attr({ alt: "" }); /* turn off paging this way */
			$('#page_number').html('1'); /* show page number as 1 */
		}

		$('#left img.page-down').attr({ src: "/templates/images/left-downarrow.png" });
		$('#left img.page-down').attr({ alt: "down" });
	});

	/* Move to the next page */
	$('#left img.page-down').click(function()	{
		next_page = page + 1; /* get next page number */
		if (next_page < pages)	{ /* if next_page is lower then total pages amount */
			$('#page_'+page).slideUp(); /* hide active page */
			page = page + 1; /* increase page */
			$('#page_'+page).slideDown(); /* show next page */
			$(this).attr({ src: "/templates/images/left-downarrow.png" }); /* show ACTIVE image */
			$(this).attr({ alt: "down" }); /* turn on paging this way */
			$('#page_number').html(page); /* show page number */
		}
		else	{ /* if next page is equal or higher then total pages amount */
			if ( $(this).attr('alt') == 'down' )
			{
				$('#page_'+page).slideUp(); /* hide active page */
				page = pages; /* set page as a last */
				$('#page_'+page).slideDown(); /* show next page */
			}
			$(this).attr({ src: "/templates/images/left-downarrow_off.png" }); /* show OFF image */
			$(this).attr({ alt: "" }); /* turn off paging this way */
			$('#page_number').html(page); /* show page number */
		}

		$('#left img.page-up').attr({ src: "/templates/images/left-uparrow.png" });
		$('#left img.page-up').attr({ alt: "up" });
	});

	$('.buy-product').click(function(){
		kn = $(this).attr('id');
		$('.box-product').show();
		$('.box-content').load('/scripts/cart.php?a=add&q='+kn);
	});

	$('.continue').click(function(){
		$('.box-product').hide();
	});

});