// JavaScript Document
$(function(){	
	//Set needed variables
	var currentSpot = 0;
	var currentLeft = 0;
	var nextLeft = 0;
	var PFcurrentWidth = 0;
	var PFliSize = 0;
	var PFulSize = 0;

	//put in the current list and settings
	function loadList(){
	PFcurrentWidth = $("#PF_scrollerContainer #PF_scrollerBox #brandsList li").length;
	PFliSize = 100 / PFcurrentWidth;
	if(PFcurrentWidth >= 5){
		PFulSize = (PFcurrentWidth * 20);
	} else {
		PFulSize = (PFcurrentWidth * (100 / PFcurrentWidth));
	}
	$("#PF_scrollerContainer #PF_scrollerBox ul li").css("width", PFliSize+"%");
	$("#PF_scrollerContainer #PF_scrollerBox ul").css("width",PFulSize+"%"); 
	
	currentSpot = 0;
	currentLeft = 0;
	nextLeft = 0;
	$("#pf_scroll_left_arrow").css("display","none");
		if(PFcurrentWidth > 5){
			$("#pf_scroll_right_arrow").css("display","block");
		} else {
			$("#pf_scroll_right_arrow").css("display","none");
		}
		$("#brandsList").css("display","block").css("left","0");
	}
		
	//load the default list
	loadList();
	
	//click the right arrow.
	$("#pf_scroll_right_arrow").click(function(){
		var fullBoxWidth = $("#PF_scrollerContainer #PF_scrollerBox").width();
		currentSpot++;
		var percentLeft = PFulSize - (currentSpot * 100);
		if(percentLeft > 100){
			percentLeft = 100;
		}
		nextLeft = (fullBoxWidth * percentLeft * -.01);
		nextLeft = currentLeft + nextLeft;
		
		$("#PF_scrollerContainer #PF_scrollerBox ul").animate({ left: nextLeft },500 );
		currentLeft = nextLeft; 
		if(percentLeft < 100){
			$("#pf_scroll_right_arrow").css("display","none");
		}
		$("#pf_scroll_left_arrow").css("display","block");
	});
	
	//click the left arrow
	$("#pf_scroll_left_arrow").click(function(){
		var fullBoxWidth = $("#PF_scrollerContainer #PF_scrollerBox").width();
		currentSpot--;
		var percentLeft = PFulSize - (currentSpot * 100);
		if(percentLeft > 100){
			percentLeft = 100;
		}
		if(currentSpot == 0){
			nextLeft = 0;
			$("#pf_scroll_left_arrow").css("display","none");
		} else {
			nextLeft = (fullBoxWidth * percentLeft * .01);
			nextLeft = currentLeft + nextLeft;
		}
		$("#PF_scrollerContainer #PF_scrollerBox ul").animate({ left: nextLeft },500 );
		$("#pf_scroll_right_arrow").css("display","block");
		currentLeft = nextLeft;  
	}); 
});