$(document).ready(function() {

	var portfolioCount = 0;

	//	load the portfolio html
	$.loadPortfolio = function( name ) {
		$('#portfolioDragBtn').animate({left:0},500);
		$('.portfolioList').animate({ opacity: 0.0}, 500, function() {
			$('#portfolioSlider').html('');
			$('#portfolioSlider').css({opacity: 0.0, left:0});
			$.ajax({
				url: '/portfolio/'+name,
				success:function(html) {
					$('#portfolioSlider').html(html);
					$.initializePortfolio();
					$('#portfolioSlider').stop().animate({opacity:1.0},500);
				}
			});
		});
	};
	
	function activateButton(id) {
		$('#portfolioSelector li a').removeClass('toggle');
		$('#'+id).addClass('toggle');
	};
	
	$('#portfolioDevelopment').click(function() { $.loadPortfolio('development'); activateButton( $(this).attr('id') ); });
	$('#portfolioDesign').click(function() { $.loadPortfolio('design'); activateButton( $(this).attr('id') ); });
	$('#portfolioProduction').click(function() { $.loadPortfolio('production'); activateButton( $(this).attr('id') ); });
	
	//	initialize the width of the portfolio
	$.initializePortfolio = function() {
		
		portfolioCount = 0;
	
		//	prepare the portfolio section
		//	get the width of the portfolioLists
		$('.portfolioList').each(function() {
		    portfolioCount ++;
		});
		
		var newWidth = portfolioCount * $('.portfolioList').width();
		
		//	set the proper width
		$('#portfolioSlider').width( newWidth );
		
		var activePortfolioClass;
		var portfolioTransitionTime = 500;
		/*	HOVER CONTROLS */
		$('.portfolioList li a').mouseover(function() {
		    
		    //	get the last class of this object
		    activePortfolioClass = $(this).attr('class').split(' ').slice(-1);
		    
		    //	fade all li's
		    $('.portfolioList li').stop().animate({opacity: 0.15},portfolioTransitionTime);
		    
		    //	keep this li full
		    $('a.'+activePortfolioClass).parent('li').stop().animate({opacity: 1.0},portfolioTransitionTime);
		    
		    $('.portfolioList li a.'+activePortfolioClass+'.name').stop().animate({
		    	'background-color': '#42a1ef'
		    }, portfolioTransitionTime);
		    
		    $('.portfolioList li a.'+activePortfolioClass+' span').stop().animate({opacity: 1.0},portfolioTransitionTime);
		    
		    return false;
		}).mouseout(function() {
		
		    $('.portfolioList li').stop().animate({opacity: 1.0},portfolioTransitionTime);
		    
		    $('.portfolioList li a.name').stop().animate({ 'background-color': '#2f3137' },portfolioTransitionTime);
		    
		    $('.portfolioList li a.'+activePortfolioClass+' span').stop().animate({opacity: 0.0},portfolioTransitionTime);
		});	
	};
	
	/* 	DRAG CONTROLS */
	$('#portfolioDragBtn').mousedown(function() {
		$.doportfolioDragBtn();
	});
	
	$("#portfolioDragBtn").click(function() {
		return false;
	});
	
	$(document).mouseup(function() {
		$(document).unbind('mousemove');
	});
	
	$.doportfolioDragBtn = function() {
	
		$(document).bind('mousemove',function(e) {
			
			//	drag controls position
			var controlsOffset = $("#portfolioDragBg").offset();
			var buttonWidth = Math.floor($('#portfolioDragBtn').width() / 2);
			
			//	move the draggable button to the mouse point
			var newPoint = e.pageX - controlsOffset.left - buttonWidth;
			
			//	if it's passed the left side
			if( newPoint < 1 )
				newPoint = 1;
			
			//	if it's passed the right side
			if( newPoint > $("#portfolioDragBg").width() )
				newPoint = $("#portfolioDragBg").width();
			
			//	set the new point
			$("#portfolioDragBtn").css({
				left: newPoint
			});
			
			//	now we need to calculate it's distance accross the bar
			//	and move the list behind it accordingly.
			var percentage = (newPoint) / $("#portfolioDragBg").width();
			
			//	you can implement 'snap' here.
			//	but I hate snap, so I wont'.
			/*
			if(percentage < .01)
				percentage = 0;
			if(percentage > .99)
				percentage = 100;
			*/
			
			//	how many lists are in this container?
			//	this is determined upon initialization and is
			//	stored in the var: portfolioCount
			/*
			var numOfLists = 0;
			$(".container ul.boxList").each(function() {
				numOfLists ++;
			});
			*/
			
			//	remove an amount equal to one list - so 100%
			//	doesn't show a blank screen
			//	then, animate the container
			var newContainerPos = Math.floor(percentage * ($("#portfolioSlider").width() - ($("#portfolioSlider").width() / portfolioCount)) );
			$('#newPos').val(newContainerPos);
			$('#portfolioSlider').stop().animate({
				left: - newContainerPos
			}, 150);
		});
	};
	
	//	click development
	$('#portfolioDevelopment').click();
});