/**
 * @author Paul
 */
// JavaScript Document

// Creates clean round numbers.
// num = number to convert
// dec = decimal places
function roundNumber(num, dec) {
	var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
	return result;
}

function initialize() {

//set width of inner portfolio list, causing one long row
	var item_count = $("#portfolioList").children().length;
	var listWidth = (item_count * 336) - 26;
	$("#portfolioList").width(listWidth);
	
	var scrollerWidth = (3 / item_count) * 722;
	$("#scroller").width(scrollerWidth);
	
	var moveAmount = (1 / item_count) * 722;
	moveAmount = roundNumber(moveAmount,0);
	
	var maxMargin = (item_count - 3) * -336;
	
	//return variables as object
	return {
		listWidth : listWidth,
		scrollerWidth : scrollerWidth,
		moveAmount : moveAmount,
		item_count : item_count,
		maxMargin : maxMargin
	};

}

additive = 0;

// converts a string returned from a css property into a number
function formatPX (id,property) {

	var a = $(id).css(property);
	var px = a.length - 2;
	return  (a.substr(0,px) * 1);
	
}




// inversely move portfolio with the movement of the scroll bar
// p = percentage of move based on #scroller left
// w = width of portfolioList
// i = itemCount
// n = current number
// a = number to add
function inverseMove(p,w,i,n,a) {
	
	// usable width, stock width minus window width
	var b = w - 982;
	// percentage of width
	var c = (p * b);
	// usable css output
	var marginPercent = '-' + roundNumber(c,0) + 'px';
	$("#portfolioList").css( { marginLeft:marginPercent });
	e = 1 / (i - 3);
	f = p / 1;
	cur = n;
	math = 0 + ((n - 2) * e);
	mathLesser = 0 + ((n - 3) * e);
	additive = a;
	
	if (f >= math) {

		additive ++;
		
	
	} else if (f < mathLesser) {
	
		additive --;
	
	}
	
	cur = 3 + additive;
	if (cur < 10) {
		cur = '0' + cur;
	}
	strLatest = '<span class="accent">' + cur + '</span> of ' + i;
	$("#latest").html(strLatest);
	return cur;
	
}

// function to call on button click, handles scroll bar movement as well as portfolio list movement
// p = percent move as a distance of the width of the scroller bar
// d = direction. -1 for left, 1 for right
function portfolioSlide(p,d) {

	n = p * d;
	i = formatPX("#scroller","left");
	// variable to get current left position and add move result
	var moveLeft = (i*1) + (n*1);
	$("#scroller").animate( {left:moveLeft},600, 'easeOutExpo' );
	
	//convert marginLeft returned value into a number
	a = formatPX("#portfolioList","marginLeft");
	b = a - (336 * d);
	$("#portfolioList").animate( {marginLeft:b},550, 'easeOutExpo' );
	
}

$(document).ready(function() {

	var init = initialize();
	var area = 722 - init.scrollerWidth;
	var cur = 3;
	$('#scroller').css('left','0px');
	additive = 1;
	
	// intro animation
		$("#portfolioList").css("marginLeft","2000px");
	
		$("#portfolioList").animate({marginLeft:"0px"}, 1200, 'easeOutQuart');
		
		$("#scroller").css("marginLeft","1200px");
	
		$("#scroller").animate({marginLeft:"0px"}, 1600, 'easeOutQuart');
	
	
	strLatest = '<span class="accent">0' + cur + '</span> of ' + init.item_count;
	$("#latest").html(strLatest);

	
	$("#scroller").draggable({
							 
		containment: '#scrollBar',
		//snap: '.ui-widget-header',
		//snapMode: 'outer',
		axis: 'x',
		cursor: 'pointer',
		drag: function () {
			
			strLatest = '<span class="accent">0' + cur + '</span> of ' + init.item_count;
			$("#latest").html(strLatest);			

			var position = formatPX("#scroller","left");
			var tempPercent = position / area;
			var movePercent = roundNumber(tempPercent, 2);
			add = cur-3;
			cur = inverseMove(movePercent,init.listWidth,init.item_count,cur,add);
			
		}
	
	});
	$("#scroller").draggable('option', 'scroll', false);
	
// XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX	

	function clickRight() {

	
		var curMove = formatPX("#scroller","left")+init.moveAmount;
		if (curMove < area) {

			portfolioSlide(init.moveAmount,1);
				cur ++;
				if(cur >= init.item_count) {
					cur= init.item_count;
				}
				if (cur < 10) {
					cur = '0' + cur;
				}
				strLatest = '<span class="accent">' + cur + '</span> of ' + init.item_count;
				$("#latest").html(strLatest);
			
		} else {
			
			$("#scroller").animate( {left:area},500 );

			$("#portfolioList").animate( {marginLeft:init.maxMargin},500);
			
			strLatest = '<span class="accent">' + init.item_count + '</span> of ' + init.item_count;
			$("#latest").html(strLatest);
			
		}
		
	}
		
	function clickLeft() {
		
		if((formatPX("#scroller","left") - init.moveAmount) > 0) {
		
			portfolioSlide(init.moveAmount,-1);
			cur --;
			if (cur <= 3) {
				
				cur = 3;
				
			}
			if (cur < 10) {
				cur = '0' + cur;
			}
			strLatest = '<span class="accent">' + cur + '</span> of ' + init.item_count;
			$("#latest").html(strLatest);
			

		
		} else {
			
			$("#scroller").animate( {left:0},500 );

			$("#portfolioList").animate( {marginLeft:0},500);
			
			cur = 3;
			strLatest = '<span class="accent">0' + cur + '</span> of ' + init.item_count;
			$("#latest").html(strLatest);			
		}
		
	}	
	
// XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX	

		$("#portfolioRight").click(function() {
			
				clickRight();


		});
	
		$("#portfolioLeft").click(function() {
			
				clickLeft();
				
		});
		

});