(function($){

	//used
	
	$.fn.scrollViewer = function (settings){

		var settings = $.extend({
				prev_btn 	: '#left_btn',
				next_btn 	: '#right_btn',
				scroll_area : '.scroll_view_area',
				scroll_at	: 1,
				items	 	: 'li',
				navigation	: false,
				duration 	: 1200,
				start	 	: 0,
				step		: 1,
				exclude		: 0,
				jump	 	: false,
				onAfter 	: function(){}
			}, settings);
		
		return this.each(function(){

				
			var $$ = $(this);
			
			$$.wrapInner('<div class="'+settings.scroll_area.substr(1) +'"></div>');
			
			var	$area = $$.find(settings.scroll_area),
				$area_num = $(settings.items, $area).length,
				$area_width = $(settings.items, $area).css('width');
				
			var	$aw = $area_width.substring(0, $area_width.indexOf('p'));
			
					
			$area.width($area_num * $aw * 3);
			
			
			if ($area_num > settings.scroll_at) {
				
				var scrollControl = $('<div>',{
					id	: 'scroll_control'
				});
				
				var leftBtn = $('<div>',{
					id	: 'left_btn'
				});
	
				var rightBtn = $('<div>',{
					id	: 'right_btn'
				});	
			
				leftBtn.appendTo(scrollControl);
				rightBtn.appendTo(scrollControl);
				$$.before(scrollControl);
			}
			
			
		
			console.log($area_num);
			console.log($area_width.substring(0, $area_width.indexOf('p')));
			console.log($area_num * $aw * 2);
						
			// Plugin Code Here
			    $$.serialScroll({
			        items:settings.items,
			        prev: settings.prev_btn,
			        next: settings.next_btn,
			        //offset:0, //when scrolling to photo, stop 230 before reaching it (from the left)
			        start: settings.start, //as we are centering it, start at the 2nd
			        navigation:settings.navigation,
			        duration: settings.duration,
			        lazy: true,
			        force:true,
			        stop:true,
			        lock:false,
			        cycle:false, //don't pull back once you reach the end
			        step: settings.step,
			        easing:'easeOutQuart', //use this easing equation for a funny effect
			        jump: settings.jump, //click on the images to scroll to them
			        exclude: settings.exclude,
			        onBefore:function( e, elem, $pane, $items, pos ){
				        /**
				         * 'this' is the triggered element 
				         * e is the event object
				         * elem is the element we'll be scrolling to
				         * $pane is the element being scrolled
				         * $items is the items collection at this moment
				         * pos is the position of elem in the collection
				         * if it returns false, the event will be ignored
				         */
				         //those arguments with a $ are jqueryfied, elem isn't.
				         if (pos >= 1){
				         	$(settings.prev_btn).fadeIn();
				         }
				         else{
				         	$(settings.prev_btn).fadeOut();
				         }
				         
				         if (pos == ($area_num - settings.exclude -1)){
				         	$(settings.next_btn).fadeOut();
				         }
				         else{
				         	$(settings.next_btn).fadeIn();
				         }
				         
				         	$(settings.items).removeClass("active").addClass("inactive");
				         	$(elem).addClass('active').removeClass("inactive");

				    },
				    onAfter:function( elem ){
				        //'this' is the element being scrolled ($pane) not jqueryfied
				        if(typeof settings.onAfter == 'function'){
    			  			settings.onAfter.call(this);
    					}
				       
					}
			    });
			
		
		});
	
	};
	
})(jQuery);