var scrollSpeed = 350;

$(document).ready(function() 
{

	//You have to specify width and height in #slider CSS properties
	//After that, the following script will set the width and height accordingly
	$('#mask-gallery, #gallery li').width($('#slider').width());	
	$('#gallery').width($('#slider').width() * $('#gallery li').length);
	$('#mask-gallery, #gallery li').height($('#slider').height());
	

	$('#gallery li:first').addClass('selected');

	
	//Next Slide by calling the function
	$('#btn-next').click(function () {
		newsscoller(0);	
		return false;
	});	

	//Previous slide by passing prev=1
	$('#btn-prev').click(function () {
		newsscoller(1);	
		return false;
	});	
	
	
	
});


function newsscoller(prev) 
{
	/* REPEATED! */
	$("#pagination a").each(function(index) 
	{
		$(this).removeClass("currentlyActive");
	});

	//Get the current selected item (with selected class), if none was found, get the first item
	var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');

	//if prev is set to 1 (previous item)
	if (prev) 
	{
		//Get previous sibling
		var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
	
	//if prev is set to 0 (next item)
	} 
	else 
	{
		//Get next sibling
		var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
	}

	//clear the selected class
	$('#gallery li').removeClass('selected');
	
	//reassign the selected class to current items
	next_image.addClass('selected');
	
	
	/*!!!!!!!!!!!!!!!!!*/
	$("#pagination a").eq(next_image.index()).addClass("currentlyActive");	


	//Scroll the items
	$('#mask-gallery').scrollTo(next_image, scrollSpeed);		
}

function goto(item) 
{
	$('#mask-gallery').scrollTo(item, scrollSpeed);		
	$(item).addClass('selected');
	
	
	$("#pagination a").each(function(index) 
	{
		$(this).removeClass("currentlyActive");
	});

	$("#pagination a").eq($(item).index()).addClass("currentlyActive");

}