$(document).ready(function(){
	$('#sliderGallery').Slider();
});

(function($){
$.fn.Slider = function(params){
	var defaults = {
		moveLeft: true,
		onItem: false,
		isAnimating: false,
		timer: null
	},
	intialize = function(id){
		
/////////////////////////////////////////////////////////////
/////     Bind Hover Events on Left & Right Buttons     /////
/////////////////////////////////////////////////////////////
		$('div#leftButton').hover(function(){
			$(this).addClass('leftImageHov');
			clearInterval(defaults.timer);
		},function(){
			$(this).removeClass('leftImageHov');
			setTimer();
		});
		$('div#rightButton').hover(function(){
			$(this).addClass('rightImageHov');
			clearInterval(defaults.timer);
		},function(){
			$(this).removeClass('rightImageHov');
			setTimer();
		});
	
/////////////////////////////////////////////////////////////
/////         Stop Animation on Hovering Items          /////
/////////////////////////////////////////////////////////////
		$('#canvas ul li').hover(function(){
			clearInterval(defaults.timer);
		},function(){
			setTimer();
		});
	
/////////////////////////////////////////////////////////////
/////        Get Size of the #Canvas ul & Set It        /////
/////////////////////////////////////////////////////////////
		var li = $('#canvas ul li');
		var liWidth = li.eq(0).width();
		var liCount = li.length;
		$('#canvas ul').css({width: liWidth*liCount + 'px', left: '0px'});

/////////////////////////////////////////////////////////////
/////    Bind Click Event on the Left & Right Buttons   /////
/////////////////////////////////////////////////////////////	
		var leftLimit = (liWidth*liCount) - $('div#canvas').width();
		$('div#leftButton').click(function(){
			if(!defaults.isAnimating)
				Animate(liWidth, 600, leftLimit);
		});
		$('div#rightButton').click(function(){
			if(!defaults.isAnimating)
				Animate((-1*liWidth), 600, leftLimit);
		});	
	
		setTimer();
	},
	setTimer = function(){
		defaults.timer = setInterval(doAnimation, 5000 );		
	},
	Animate = function(amount, time, leftLimit){
		defaults.isAnimating = true;
		var leftVal = $('div#canvas ul').css('left');
		leftVal = leftVal.replace('px','');
		leftVal = leftVal*1;
		amount += leftVal;
	
/////////////////////////////////////////////////////////////
/////                    Range Check                    /////
/////////////////////////////////////////////////////////////	
		if(amount < (-1*leftLimit)) { amount = (-1*leftLimit); defaults.moveLeft = false; }
		if(amount > 0) { amount = 0; defaults.moveLeft = true; }
	
		$('div#canvas ul').animate({
			left: amount
		}, time, function() { defaults.isAnimating=false; });
	},
	
/////////////////////////////////////////////////////////////
/////                     Animation                     /////
/////////////////////////////////////////////////////////////
	doAnimation = function(){
		var li = $('#canvas ul li');
		var liWidth = li.eq(0).width();
		var liCount = li.length;
		var leftLimit = (liWidth*liCount) - $('div#canvas').width();
		var animValue = liWidth*3;
		if(defaults.moveLeft) animValue *= -1;
		else animValue = leftLimit;
		Animate(animValue, 600, leftLimit);  
	}

	return this.each(function(){
		intialize(this);
	});
}
})(jQuery);