var $j = jQuery.noConflict();

$j(document).ready(function() {
	
	/* Setup variables
	-----------------------------------------------------*/
	
    $j(document).ready(function(){
	
		
		var list = $j(".imgContainer");
		var total = $j(".imgContainer").length;
		var count = 0;
		var win_w = $j(this).width() - 270;
		var maxX = 0;
		var minX = "";
		var dragWidth = "";
		var minX_2 = "";
		var dragWidth_2 = "";
		
		resizer();
		
		
		$j(".imgContainer").mousedown(function(e) {
			e.preventDefault();
		});
		
		$j("#scrollContent").children("img").mousedown(function(e) {
			e.preventDefault();
		});
		
		
		$j(window).resize(function() {
			
			resizer();
			
			adjustScrollers();
			
		});
		
		
		
		function resizer() {
	
			win_w = $j(this).width() - 270;
			dragWidth = win_w - $j("#dragger").width();
			dragWidth_2 =  $j("#scrollContent").width() - $j("#scrollWrapper").width();
			minX = win_w - $j("#scrollContent").width();
	
			// Set the width of the scrollbar & wrapper
			$j("#scrollbar").css("width",win_w);
			$j("#scrollWrapper").css("width",win_w);	
			$j("#scrollBoundary").css({
				"width":(($j("#scrollContent").width() - win_w) + $j("#scrollContent").width()),
				"left":(win_w - $j("#scrollContent").width())
			});	
		}
		
		
		
		function adjustScrollers() {
	
			if ($j("#dragger").position().left > dragWidth) {
				
				$j("#dragger").css("left",dragWidth);
			}
			
			var percent = $j("#dragger").position().left/dragWidth;
			var newPos = (minX * percent);
			$j("#scrollContent").animate({left:newPos},{duration:700,easing:'easeOutQuart',queue:false});
			
		}
		
	
	
		
		$j("#dragger").draggable({
			axis: 'x',
			containment: 'parent',
			
			start: function(event, ui) {
				resizer();
			},
			
			drag: function(event, ui) { 
				
				var percent = $j(this).position().left/dragWidth;
				var newPos = (minX * percent);
				$j("#scrollContent").animate({left:newPos},{duration:0,queue:false});
			}
		});
		
		
		/*
		$j("#scrollContent").draggable({
			axis: 'x',
			containment: $j("#scrollBoundary"),
			
			start: function(event, ui) {
				resizer();
			},
			
			drag: function(event, ui) { 
				event.preventDefault();
				var percent = (-$j(this).position().left)/dragWidth_2;
				var newPos = (dragWidth * percent);
				$j("#dragger").animate({left:newPos},{duration:0,queue:false});
			}
		});
		*/
		
		var down_x = null;
		var up_x = null;
		
		
		$j("#scrollContent").bind('touchstart', function(e){
			resizer();
			down_x = e.originalEvent.touches[0].pageX;
		});
		
		$j("#scrollContent").bind('touchmove', function(e){
			e.preventDefault();
			up_x = e.originalEvent.touches[0].pageX;
			//slide_content();
		});
		
		$j("#scrollContent").bind('touchend', function(e){
			slide_content();
		});
		
		function slide_content() {
			var newPos = $j("#scrollContent").position().left - (down_x - up_x);
			if (newPos > 0) newPos = 0; 
			if (newPos < (win_w - $j("#scrollContent").width())) newPos = (win_w - $j("#scrollContent").width());
			
			$j("#scrollContent").animate({left:newPos},{duration:700,easing:'easeOutQuart',queue:false});
			
			
			var percent = (-newPos)/dragWidth_2;
			var dragPos = (dragWidth * percent);
			$j("#dragger").animate({left:dragPos},{duration:700,easing:'easeOutQuart',queue:false});
			
			
		}
    });
});