// Global Properties
var m_panelMarginRight = 22;
var m_currentPosition = 1;
var m_targetPosition = 1;
var m_xPosition = 0;
var m_xPositionTarget = 0;
var m_moveMeBoolean = false;
var m_panelsInView = 1;

var panelWidth = 0;
var panelCount = 0;
var panelInitialLeft = 23;
var containerWidth = 0;


function px(number) {
	result = number + "px";
	return result;
}

function goTheFrame() {
	if(m_moveMeBoolean) {
		xPos = m_xPosition - ((m_xPosition - m_xPositionTarget) * .2);
		
		if( Math.abs(xPos - m_xPositionTarget) < 1 ) {
			xPos = m_xPositionTarget;
			m_moveMeBoolean = false;
		}
		
		$("div.scrollBar").css("left", xPos);
		
		// Debugging
		$("div.currentPosition").html("Current Position = " + m_currentPosition);
		$("div.targetPosition").html("Target Position = " + m_targetPosition);
		$("div.gap").html("Gap = " + (xPos - m_xPositionTarget));
		
		var calc = xPos;
		$("div.nextCalc").html("Target Position = " + m_xPositionTarget );
		
		m_xPosition = xPos;
	}
}

function ChangePosition(number) {
	m_xPositionTarget = (number * panelWidth) + (number * m_panelMarginRight) - panelInitialLeft;
	m_xPositionTarget = -m_xPositionTarget;
}

function scrollOption(number) {
	if( number >= (panelCount-m_panelsInView) )
	{
		m_targetPosition = (panelCount-m_panelsInView);
	}
	else
	{
		m_targetPosition = number;
	}
	
	$("div.currentPosition").html("Current Position = " + m_targetPosition);
	ButtonSetPosition();
}

function setNumberPanelPosition(number) {
	$("div.numberSelector > a").css("color", "#000");
	$("div.numberSelector > a").eq(number-1).css("color", "#c31f24");
}

function ButtonSetPosition() {
	ChangePosition(m_targetPosition-1);
	m_moveMeBoolean = true;// Activate the motion
}

$(document).ready(function() {
	// Panel
	$("div.scrollBar > .panel").css("margin-right", m_panelMarginRight);
	panelWidth = $("div.scrollBar > .panel").css("width");
	panelCount = $("div.scrollBar > .panel").length;
	scrollBarContentWidth = $("div.scrollBarContainer").css("width");
	m_panelsInView = Math.floor(scrollBarContentWidth / panelWidth) - 1;
	
	// Container
	containerWidth = (panelWidth * panelCount) + (m_panelMarginRight * panelCount);
	$("div.scrollBar").css("width", px(containerWidth));
	
	//generate numbered links
	tempHtml = "";
	
	for(iCount=1;iCount<=panelCount;iCount++) {
		tempHtml += "<a>" + iCount + "</a>";
		if(iCount < panelCount) {
			tempHtml += " / ";	
		}
	}

	$("div.numberSelector").html(tempHtml);
	setNumberPanelPosition(1);
	// END
	
	
	goTheFrame = setInterval(goTheFrame, 20);
	
	// Button Events
	$("div.leftButton > a").click(function(event) {
		
		m_targetPosition = (m_targetPosition <= 1)? (panelCount-m_panelsInView): m_targetPosition--;
		
		$("div.nextCalc").html("Target Position = " + m_targetPosition );
		$("div.currentPosition").html("Current Position = " + m_targetPosition);
		
		setNumberPanelPosition(m_targetPosition)
		ButtonSetPosition()
   	});
	
	$("div.rightButton > a").click( function(event) {
		
		m_targetPosition = (m_targetPosition >= (panelCount-m_panelsInView))? 1: m_targetPosition++;
		
		$("div.nextCalc").html("Target Position = " + m_targetPosition );
		$("div.currentPosition").html("Current Position = " + m_targetPosition);
		
		setNumberPanelPosition(m_targetPosition)
		ButtonSetPosition()
  });
	
	$("div.numberSelector > a").click(function(event) {
		var linkIndex = $("div.numberSelector > a").index(this);
		$("div.numberSelector > a").css("color", "#000");
		$("div.numberSelector > a").eq(linkIndex).css("color", "#c31f24");
		
		scrollOption(linkIndex+1);
	});
});