//Control variables
var isAnimating = false;

//Scroll Variables
var leftTimer = null;
var rightTimer = null;
var leftBound = 0;
var rightBound = 0;
var IE6Comp = 0;
var ulWidth = 0;
var scrollSpeed = 3; //How many pixels per loop.
var interval = 10; //How often should  the scroll execute (In Milliseconds)

$(document).ready(function() {
	if($('div#collectionGallery').size() > 0) {
		//Make sure the width is accurate
		ulWidth = parseInt($('div#collectionGallery div#splashLoaders div.wrapper ul:first').width());

		//Set the width of the wrapper so we can scroll it
		IE6Comp = navigator.appVersion.indexOf("MSIE 6.0") != -1 ? 2 * $('div#splashLoaders ul').size() : 0;
		$('div#collectionGallery div#splashLoaders div.wrapper').css('width', ($('div#splashLoaders ul').size() * ulWidth) + IE6Comp);
		
		//Set the left bound
		leftBound = parseInt($('div#collectionGallery div#splashLoaders div.wrapper').width()) - parseInt($('div#collectionGallery div#splashLoaders').width());
		
		//If we click an arrow, scroll the appropriate direction.
		$('div#collectionGallery img.scroll').mouseenter(function() {
			if($(this).attr('id') == 'rightArrow') {
				//Scroll the contents to the left
				clearRightTimer();
				scrollLeft();
			}
			else {
				//Scroll the contents to the right
				clearLeftTimer();
				scrollRight();
			}
		});
		
		$('div#collectionGallery img.scroll').mouseleave(function() {
			//Stop the timers so nothing happens anymore.
			clearLeftTimer();
			clearRightTimer();
		});
		
		//If we click on an image within the splashLoaders we want to swap the splash image
		$('div#collectionGallery div#splashLoaders li img').click(function() {
			//Make sure there is no animation going on when the click is made
			if(!isAnimating) {
				swapImages(this);
			}
		});
		
		//When the window resizes we want to recalculate the left bound and make sure the display isn't past the boundary
		window.onresize = function() {
			leftBound = parseInt($('div#collectionGallery div#splashLoaders div.wrapper').width()) - parseInt($('div#collectionGallery div#splashLoaders').width());
			currLeft = Math.abs(parseInt($('div#collectionGallery div#splashLoaders div.wrapper').css('left')));
			if(currLeft > leftBound && currLeft != 0)
				$('div#collectionGallery div#splashLoaders div.wrapper').css('left', -1 * leftBound);
		};
	}
		
	$('a.hover-trigger').livequery(function() {
		$(this).hover(function() {
			//On hover
			$('div#hover-container div#hover-display').html($(this).html().replace(/medium/g, 'large').replace(/small/g, 'large'));
		});
	});
});


//Begins scrolling the wrapper to the left and binds the timer to call this again
function scrollLeft() {
	//Before we can move it we need to make sure we're within bounds.
	currLeft = parseInt($('div#collectionGallery div#splashLoaders div.wrapper').css('left'));
	if(Math.abs(currLeft) < leftBound) {
		$('div#collectionGallery div#splashLoaders div.wrapper').css('left', currLeft - scrollSpeed);
		if(leftTimer == null)
			leftTimer = setInterval(scrollLeft, interval);
	} else {
		clearLeftTimer();
	}
}

//Begins scrolling the wrapper to the right and binds the timer to call this again
function scrollRight() {
	//Before we can move it we need to make sure we're within bounds.
	currLeft = parseInt($('div#collectionGallery div#splashLoaders div.wrapper').css('left'));
	if(currLeft < rightBound) {
		$('div#collectionGallery div#splashLoaders div.wrapper').css('left', currLeft + scrollSpeed);
		if(rightTimer == null)
			rightTimer = setInterval(scrollRight, interval);
	} else {
		clearRightTimer();
	}
}

function clearLeftTimer() {
	if(leftTimer != null) {
		clearInterval(leftTimer);
		leftTimer = null;
	}
}

function clearRightTimer() {
	if(rightTimer != null) {
		clearInterval(rightTimer);
		rightTimer = null;
	}
}

function swapImages(theLink) {
	imageRecid = $(theLink).attr('rel');
	isAnimating = true;
	
	//Add the 'old' class to the image that is currently there.
	$('div#collectionGallery div#splashImage img').addClass('old');
	
	//Remove the old link
	if($('div#collectionGallery div#splashImage a').size() > 0)
		$('div#collectionGallery div#splashImage a').replaceWith($('div#collectionGallery div#splashImage a').html());
	
	//Append the new image
	$('div#collectionGallery div#splashImage').append("<img class='new fixed' rel='" + imageRecid + "' src='/_images/item/medium/" + imageRecid + "_medium.jpg' />");

	//Set the link for this new item.
	$($('div#collectionGallery div#splashImage img.new')).wrap("<a class='hover-trigger' target='_blank' href='/index.cfm?contentID=itemPopOut&itemID=" + $(theLink).parent().attr('rel') + "'></a>");
	
	//Load the new image into the hover-display
	//$('div#hover-container div#hover-display').html("<img src='/_images/item/large/" + imageRecid + "_large.jpg' />");

	//Fade out the old, and bring in the new. Once the old has been faded, remove it.
	$('div#collectionGallery div#splashImage img.old').fadeOut(750, function() {$(this).remove();});
	$('div#collectionGallery div#splashImage img.new').fadeIn(750, function() {isAnimating = false;});
}