var grabbed = false;
var grabX = 0;
var imageSlider = null;
var xMargin = 0;

var sliderGrabbed = false;
var sliderBar = null
var sliderContainer = null;
var sliderGrabX = 85;
var sliderX = 85;
var sliderWidth = 170;
var isClick = true;
var clickTimeout = null;

var grabY = 0;

$( document ).ready( function()
{
	var imagebar = $( '#imageBar' );
	imageSlider = $( '.images' )[0];
	sliderBar = $( '#scroll' );
	sliderContainer = $( '#scrollerBar' );

	imagebar.mousedown( function( ev )
	{
		grabbed = true;
		grabX = ev.pageX;
		grabY = ev.pageY;
		ev.preventDefault();
		clickTimeout = setTimeout( function(){ 
			isClick = false; 
		}, 300 );
	});
	sliderBar.mousedown( function( ev )
	{
		sliderGrabbed = true;
		sliderGrabX = ev.pageX - sliderContainer.offset().left;
		grabY = ev.pageY;
		ev.preventDefault();
		clickTimeout = setTimeout( function(){ 
			isClick = false; 
		}, 300 );
	});

	sliderBar.mouseleave( function( ev )
	{
		ev.stopPropagation();
	});
	imagebar.mouseleave( function( ev )
	{
		ev.stopPropagation();
	});

	sliderContainer.click( function( ev )
	{
		sliderX -= sliderGrabX - ( ev.pageX - sliderContainer.offset().left );
		sliderX = Math.max( 0, sliderX );
		sliderX = Math.min( sliderX, sliderContainer.width() - sliderWidth );
		sliderBar[0].style.marginLeft = sliderX + 'px';
		sliderGrabX = ev.pageX - sliderContainer.offset().left;

		imageSlider.style.marginLeft = -( ( sliderX / ( sliderContainer.width() - sliderWidth / 1.7 ) ) * $( imageSlider ).width() ) + 'px';
		xMargin = Math.min( 0, xMargin );
	});

	$( document.body ).mousemove( function( ev )
	{
		if ( grabbed )
		{
			ev.preventDefault();
			if ( isNaN( xMargin ) ) xMargin = 0;

			xMargin -= grabX - ev.pageX;
			xMargin = Math.min( 0, xMargin );
			xMargin = Math.max( xMargin, -$( imageSlider ).width() + $( document ).width() );
			imageSlider.style.marginLeft = xMargin + 'px';
			grabX = ev.pageX;

			sliderX = -( ( xMargin / ( $( imageSlider ).width() - sliderWidth / 1.7 ) ) * sliderContainer.width() );
			sliderX = Math.max( 0, sliderX );
			sliderX = Math.min( sliderX, sliderContainer.width() - sliderWidth );
			sliderBar[0].style.marginLeft = sliderX + 'px';
		}
		if ( sliderGrabbed )
		{
			ev.preventDefault();
			if ( isNaN( sliderX ) ) sliderX = 0;

			sliderX -= sliderGrabX - ( ev.pageX - sliderContainer.offset().left );
			sliderX = Math.max( 0, sliderX );
			sliderX = Math.min( sliderX, sliderContainer.width() - sliderWidth );
			sliderBar[0].style.marginLeft = sliderX + 'px';
			sliderGrabX = ev.pageX - sliderContainer.offset().left;

			xMargin =  -( ( sliderX / ( sliderContainer.width() - sliderWidth / 1.7 ) ) * $( imageSlider ).width() );
			xMargin = Math.min( 0, xMargin );
			xMargin = Math.max( xMargin, -$( imageSlider ).width() + $( document ).width() );
			imageSlider.style.marginLeft = xMargin + 'px';
		}
	});
	
	$( '.images a' ).click( function( ev )
	{
		clearTimeout( clickTimeout );
		if ( !isClick )
		{
			ev.preventDefault();
			isClick = true;
			return false;
		}
		isClick = true;
	});

	$( document.body ).mouseup( function( ev )
	{
		ev.preventDefault();
		grabbed = false;
		sliderGrabbed = false;
		clickTimeout = setTimeout( function() { isClick = true; }, 300 );
	});

	$( document.body ).mouseleave( function( ev )
	{
		grabbed = false;
		sliderGrabbed = false;
	});
});