$(document).ready(function()
{
	var easingType = 'easeOutQuad';
	var easingDuration = 600;
	var imageBoxHovered = false;
		
	$('.imageBox ul.imageBoxImages').width($('.imageBox ul.imageBoxImages li').length * 600);
	$('.imageBox').after('<ul class="imageBoxTitle"></ul>');
	
	var i = 0;
	
	$('.imageBox ul.imageBoxImages img').each(function()
	{
		var imageURL = $(this).attr('src');
		
		$(this).parent().attr({id: 'imageBoxImage-' + i});
		$(this).parent().css({backgroundImage: 'url(' + imageURL + ')'});
		$(this).remove();
		
		$('.imageBoxTitle').append('<li id="imageBoxTitle-' + i + '">' + $(this).attr('alt') + '</li>');
		
		if(i == 0)
		{
			$('#imageBoxTitle-' + i).addClass('active');
		}
		
		i++;	
	});		
	
	$('.imageBox .imageBoxImages a p').hide();
	$('.imageBoxTitle li').click(imageBoxNavigate);
	$('.imageBox .imageBoxImages a').hover(imageBoxHover, imageBoxOut);
	
	function imageBoxNavigate(event)
	{
		var id = $(this).attr('id').replace('imageBoxTitle-', '');
		var target = -Number(id) * 600;
		$('ul.imageBoxImages').animate({marginLeft: target}, easingDuration, easingType);
		
		if(!$(this).hasClass('active'))
		{
			$('.imageBoxTitle .active').removeClass('active');
			$(this).addClass('active');
		}
	}
	
	function imageBoxHover(event)
	{
		$(this).find('p').fadeIn(easingDuration, easingType);
		imageBoxHovered = true;
	}
	
	function imageBoxOut(event)
	{
		$(this).find('p').fadeOut(easingDuration / 2, easingType);
		imageBoxHovered = false;
	}	
});