$(document).ready(function (){
	var gallery = $('.catslider');
	var ul = $('.catslider ul');
	ul.width(getUlRealWidth(ul));
	assignControlls(gallery);
	function assignControlls(gallery){
		var container = gallery.find('.container');
		var ul = container.find('ul');

		var c_width = container.width();
		var u_width = ul.width();

		ul.css({left: 0});

		if (u_width>c_width){
			var d = c_width - u_width;
			/*----controls----*/
			gallery.find('a.prev').hover(function (){
				var distance = ul.css('left');
				distance = parseInt(distance.replace('px', ''));
				distance= -distance;
				duration = distance * 5;

				ul.animate({ 'left' : +  0 + 'px' }, duration, 'linear');
				setTimeout(function (){
					checkHiding(gallery);
				}, 100);

			}, function (){
				ul.stop();
				checkHiding(gallery);
			});

			gallery.find('a.next').hover(function (){
				var distance = ul.css('left');
				distance = parseInt(distance.replace('px', ''));
				distance-= d;
				duration = distance * 5;

				ul.animate({ 'left' : +  d + 'px' }, duration, 'linear');
				setTimeout(function (){
					checkHiding(gallery);
				}, 100);
			}, function (){
				ul.stop();
				checkHiding(gallery);
			});

			/*----------------*/

	        gallery.mousewheel(function(event, delta) {

	        	var newval = parseInt(ul.css('left').replace('px', ''))+delta*40;
	        	newval = newval > 0 ? 0 : (newval < d ? d : newval);

	        	ul.css('left', newval+'px');
	            checkHiding(gallery)
				event.stopPropagation();
				event.preventDefault();
			});
		}
		checkHiding(gallery);
	}
	function checkHiding(gallery){
		var container = gallery.find('.container');
		var ul = container.find('ul');

		var c_width = container.width();
		var u_width = ul.width();

		var d = c_width - u_width;

       var position = parseInt(gallery.find('ul').css('left').replace('px', ''));
       if (position>=0) gallery.find('a.prev').fadeOut(100);
       			 else gallery.find('a.prev').show();
       if (position<=d) gallery.find('a.next').fadeOut(100);
       			 else gallery.find('a.next').show();
	}
	function getUlRealWidth(ul){
		ul_width = 0;
		ul.find('li').each(function(){
			var ml = $(this).css('margin-left');
			var mr = $(this).css('margin-right');
			ml = parseInt(ml.replace('px', ''));
			mr = parseInt(mr.replace('px', ''));
	        ul_width+=$(this).width()+ml+mr + 1;
		});
		return ul_width;
	}});