;(function(){
	

	$.fn.carot = function(){

		var target = $( this );

		var imgWidth = 110;
		var imgOuterWidth = 16;

		var showWidth = target.width();
		var calcWidthTotal = 0;

		// temp 
		//target.children( 'ul.list' ).css('width', ( imgWidth + imgOuterWidth) * target.find( 'ul li' ).length );
		target.css('position','relative');
		target.append('<div class="loading-mask" style="text-align:center;position:absolute;top:0;left:0;width:100%;height:100%;display:block;background-color:#191818;"></div>');



		$(window).load(function ( ) {

			$( 'div.loading-mask' ).hide();

			// ul list real width
			target.find( 'li' ).each(function(){
				calcWidthTotal += $(this).outerWidth(true);
			});
			target.children( 'ul.list' ).css('width', calcWidthTotal );


			// create scroll bar
			var scrollersize = Math.round(showWidth/calcWidthTotal*100);
			scrollersize = ( scrollersize < 1 ) ? 1 : scrollersize ;

			if ( scrollersize < 100 )
			//	target.siblings( '#afterimg' ).after('<div class="scrollbar" style="margin-left:25px;width:'+showWidth+'px"><div class="scroller" style="width:'+scrollersize+'%" >&nbsp;</div></div>');

			// scroll bar event
			var scrollbar	= target.siblings( '#afterimg' ).next();
			var scroller	= target.siblings( '#afterimg' ).next( ).children('div.scroller');
			var global = $(document);
			scrollersize = scroller.width();
			var scrollmax    = showWidth-scrollersize-2;
			var imgslidemax  = calcWidthTotal-showWidth;



			$( '#imgtoleft' ).click(function(){

				var scrollleft = target.scrollLeft(); 

				scrollleft = scrollleft - target.find( 'li' ).outerWidth(true) * 3;

				if ( scrollleft <= 0 ) 			scrollleft = 0;
				if ( scrollleft >= imgslidemax )  scrollleft = imgslidemax;

				target.animate({scrollLeft:scrollleft},200,'linear');

			});
			$( '#imgtoright' ).click(function(){
				var scrollleft = target.scrollLeft();

				scrollleft = scrollleft + target.find( 'li' ).outerWidth(true) * 3;

				if ( scrollleft <= 0 ) 			scrollleft = 0;
				if ( scrollleft >= imgslidemax )  scrollleft = imgslidemax;

				target.animate({scrollLeft:scrollleft},200,'linear');
			});




			scroller.mousedown(function ( de ) {

				var leftoff = scrollbar.position()['left'];
				var baroff  = scroller.position()['left'];
				var barclick = de.pageX - baroff;

				$( 'body' ).css('-moz-user-select','none');

				global.mousemove(function( e ){

					scrollleft = e.pageX-(leftoff+barclick);

					if ( scrollleft <= 0 ) 			scrollleft = 0;
					if ( scrollleft >= scrollmax )  scrollleft = scrollmax;

					scroller.css('left', scrollleft );
					var imageslide = imgslidemax/scrollmax*scrollleft;
					target.scrollLeft(imageslide);
				});
				global.mouseup(function(){
					$( 'body' ).css('-moz-user-select','text');
					global.unbind('mousemove');
				});
			});


		});

	};

})();