var thumbList = new Array();
var thumbOffset = 290; // Width of item plus right margin
var timeIntBubble;

jQuery(document).ready(function($) {

	/* Remove urls */
	$('#Portfolio .Left, #Portfolio .Right').attr('href','javascript:void(0)');
	
	/* Remove urls from the portfolio thumbs - this may change later! */
	$('#Portfolio li > a').attr('href','javascript:void(0)');
								
	/* Left/Right Button Hover State */
	$('#Portfolio .Left, #Portfolio .Right').each(
		function(){
			// Add the nohover class which overrides the base css :hover state
			$(this).addClass('NoHover');
			// Add the hover state
			$(this).append('<span class="Hover" />');
		}
	).hover(
		function(){
			$(this).find('span.Hover').css({'opacity':0,'display':'block'});
			$(this).find('span.Hover').animate({opacity: 1},200,'swing');
		},
		function(){
			$(this).find('span.Hover').animate({opacity: 0},250,'swing');	
		}
	);
	
	/* Left/Right Button Clicky */
	$('#Portfolio .Left').click(function(){p_moveThumbs('left');});
	$('#Portfolio .Right').click(function(){p_moveThumbs('right');});
	
	
	/* Bubble Display */
	$('#Portfolio .Viewport li').hover(
		function(){
			clearTimeout(timeIntBubble);
			
			// Hide the inline bubble if it's being displayed
			$('#BubbleInline').hide('slow');
			
			// Replace Content
			$('#Bubble .Inner').html($(this).find('.BubbleContent').html());
//			$('#Bubble .Inner').html("HELLO");

			// Position
			var bHeight = $('#Bubble').outerHeight();
			$('#Bubble').css('top',$('#Portfolio').position().top - bHeight + 30);
			// Which position is this?
			var myPos = $(this).position().left;
			if(myPos == 0){
				$('#Bubble .Bottom').removeClass('Right').addClass('Left');
			}else if(myPos == 290){
				$('#Bubble .Bottom').removeClass('Right Left');
			}else if(myPos == 580){
				$('#Bubble .Bottom').removeClass('Left').addClass('Right');
			}
			
	
			// Display
			$('#Bubble').stop(true, true);

			/* IE cannot deal with fading PNGS, it is crap. */
			if(jQuery.support.opacity){
				$('#Bubble').fadeIn();
			}else{
				
				/* IE7 and IE8 bastards */
				$('#Bubble').show();
			}

		},
		function(){
			timeIntBubble = setTimeout(function(){
				if(jQuery.support.opacity){															
					$('#Bubble').fadeOut();
				}else{
					$('#Bubble').hide();
				}
			},200);
		}
	);
	
	/* Add a click handler to the Portfolio thumbs so they can be triggered by keyboard */
	$('#Portfolio .Viewport li').click(
		function(){
			$(this).mouseover();
		}
	);
	
	/* Add a body click to hide the portfolio entry */
//	$('body').click(
//		function(){
//			$('#Bubble').mouseleave();
//		}
//	);
	
	$('#Bubble').hover(
		function(){
			clearTimeout(timeIntBubble);
		},
		function(){
			timeIntBubble = setTimeout(function(){
				if(jQuery.support.opacity){															
					$('#Bubble').fadeOut();
				}else{
					$('#Bubble').hide();
				}
			},200);
		}			   
	);
	
	/* Portfolio Thumb Animation */
	$('#Portfolio .Viewport li').hover(
		function(){
			$(this).find('.Image').first().animate({top: -185},{duration: 300, easing: 'easeOutBounce'});
		},
		function(){
			$(this).find('.Image').first().animate({top: 0},{duration: 400, queue: false, easing: 'easeOutBounce'});
		}
	);

	/* Portfolio Thumb Scrolling */
	/* First we need to re-arrange the thumbs so that they are absolutely positioned and give each of them a position */
	/* We also need to wang them all in array to preserve ordering (for below) */
	var curPos = 0;
	$('#Portfolio .Viewport li').each(
		function(){
			$(this).addClass('JS').css('left',curPos);
			curPos += thumbOffset;
			thumbList.push($(this));
		}
	);

});

function p_moveThumbs(direction){
	var offset = (direction == 'left') ? thumbOffset : -thumbOffset;
	
	/* Work out the start point for moved thumbs  - This is the position of the farthest thing in the direction we are moving */
	var startPoint = 0;
	for(var i = 0;i < thumbList.length;i++){
		$(thumbList[i]).stop(false,true);
		if(direction == "left"){
			var myPos = $(thumbList[i]).position().left;
			if(myPos < startPoint){
				startPoint = myPos;	
			}
		}else{
			var myPos = $(thumbList[i]).position().left + thumbOffset;
			if(myPos > startPoint){
				startPoint = myPos;	
			}
		}
	}
	
	
	/* Move anything we need to move to correct end - we use the array of thumbs here to preserve their order. */
	var curPoint = startPoint;
	if(direction == "left"){
		for(var i = thumbList.length-1;i >= 0;i--){
			var $this = $(thumbList[i]);
			if(parseInt($this.css('left')) > thumbOffset*3){
				$this.css('left',curPoint - offset);
				curPoint -= Math.abs(offset);
			}
		}		
	}else{
		for(var i = thumbList.length-1;i >= 0;i--){
			var $this = $(thumbList[i]);
			if(parseInt($this.css('left')) < 0){
				$this.css('left',curPoint);
				curPoint += Math.abs(offset);
			}
		}
	}

	/* Do the animation */	
	$('#Portfolio .Viewport li').each(
		function(){
			var newPos = parseInt($(this).css('left'));
			newPos += offset;
			$(this).stop(false,true);
			$(this).animate({left: newPos},{duration: 400, queue: true, easing: 'swing'});

		}
	);
	
	
}