var windowWidth = 0
var scrollbarWidth = 0
var pullerWidth = 0
var mainContentWidth = 0
var pieceNumber = 14
jQuery.noConflict();

jQuery(document).ready(function() {
	setUpContainer();
	//alert(jQuery("#main-content").css("width"))
	//jQuery("#main-content").css("width","3000px")
	jQuery(window).resize(function(){
			resizeScrollbar();
	});
	resizeScrollbar();
	jQuery(".puller").draggable({
		axis:"x"
		,containment: 'parent'
		,cursor: 'hand'
		,distance: 5
		,scroll: false
		,scrollSensitivity: 500
		,drag: function(event, ui) { 
			dragging();
			jQuery(this).animate(
				//alert(jQuery(this).width())
				{"background-color":"#FFFFFF"},
				{duration: 200
				,ease: "swing"
				,queue: false
				}
			);
		}
		,stop: function(event,ui){
			jQuery(this).animate(
				//alert(jQuery(this).width())
				{"background-color":"#fc0000"},
				{duration: 200
				,ease: "swing"
				,queue: false}
			);
		}
	});
	jQuery(".puller").hover(
	  function () {
	    jQuery(this).animate(
				//alert(jQuery(this).width())
				{"background-color":"#FFFFFF"},
				{duration: 200
				,ease: "swing"
				,queue: false}
			);
	  }, 
	  function () {
	    jQuery(this).animate(
				//alert(jQuery(this).width())
				{"background-color":"#fc0000"},
				{duration: 200
				,ease: "swing"
				,queue: false}
			);
	  }
	);//====================
	jQuery(".scrollbar").click(
		function (e){
			clickScroll(e);
		}
	)
	
});
function setUpContainer(){
	widthVar = (parseInt(jQuery(".piece-container").css("margin-left")) + 25 +parseInt(jQuery(".piece-container").css("width"))) * pieceNumber +"px"
	//alert(widthVar)
	//alert(widthVar)
	jQuery("#main-content").css("width",widthVar)
	//alert(widthVar)
}
function updateVarible(){
	windowWidth = parseInt(jQuery(window).width());
	scrollbarWidth = windowWidth - 340 + "px"
	pullerWidth = Math.round(parseInt(jQuery(".scrollbar").css("width"))/10) + "px"
	mainContentWidth = jQuery("#main-content").css("width");
}
function dragging(){
	//updateVarible();
	//var ratio = parseInt(jQuery(".puller").css("left"))/parseInt(jQuery(".scrollbar").css("width"));
	//var target = (1-(ratio * windowWidth)) + "px"
	varibleA = parseInt(jQuery(".puller").css("left"));
	varibleB = parseInt(jQuery(".scrollbar").css("width"));
	varibleC = 	parseInt(jQuery("#main-content").css("width"));
	varibleD = 	jQuery(window).width();
	target = varibleA*(0 - varibleC + varibleD)/varibleB
	jQuery("#main-content").css("margin-left",target)
	//jQuery("#main-content").animate(
	//	{"margin-left": target},
	//	{duration: 100
	//	,ease: "swing"
	//	,queue: false}
	//);
	if( varibleA > varibleB-parseInt(jQuery(".puller").css("width"))*1.5){
		//alert("tutu")
		//jQuery(".puller").css("left","400px")
	}
}
function clickScroll(e){
	//alert(e.pageX)
	varibleA = parseInt(e.pageX - parseInt(jQuery(".scrollbar").css("margin-left")));
	varibleB = parseInt(jQuery(".scrollbar").css("width"));
	varibleC = 	parseInt(jQuery("#main-content").css("width"));
	varibleD = 	jQuery(window).width();
	target = varibleA*(20 - varibleC + varibleD)/varibleB
	varibleE = parseInt(e.pageX - parseInt(jQuery(".scrollbar").css("margin-left")) - parseInt(jQuery(".puller").css("width"))/2 ) + "px"
	//jQuery(".puller").css("left",varibleE)
	//alert("varibleB")
	if( varibleA < (varibleB - parseInt(jQuery(".puller").css("width"))/2)){
		jQuery(".puller").animate(
			{"left": varibleE},
			{duration: 400
			,ease: "swing"
			,queue: true}
		);
		jQuery("#main-content").animate(
			{"margin-left": target},
			{duration: 600
			,ease: 'swing'
			,queue: true}
		);
	}
}
function resizeScrollbar(){
	updateVarible();
	jQuery(".scrollbar").css("width",scrollbarWidth);
	jQuery(".puller").css("width",pullerWidth);
	jQuery(".puller").css("left","0px");
	
	
}