var posleft_arr = new Array();
var dur = 500;
var thiscolor;
$(function(){

	//setup
	
	$('ul#nav li a span.bg').css({opacity: 0});
	$('.arrow').css({opacity: 0});
	
	$('#images>div').each(function(i){
		posleft = i * $(this).width();
		posleft = "-"+posleft;
		posleft = parseInt(posleft);
		
		posleft_arr[i] = posleft;
		
		$(this).children().children().css({
			left: posleft			
		});	
	});
	
	
	$('ul#nav li a').hover(function(){
		//expand
		
		thisindex = $('ul#nav li a').index(this);
		thiscolor = $(this).children('strong').css('color');
		
		//button
		$(this)
		.children('strong')
		.css('color', "#fff")
		.end()
		.children('.bg')
		.animate({
			opacity: 1		 
		},{queue: false, duration: 5})
		.end()
		.children('.arrow')
		.animate({
			opacity: 1,
			left: 220
		},{queue: false, duration: dur});
		
		//image
		$('#images>div')
		.animate({
			width: 0		 
		},{queue:false, duration: dur})
		.eq(thisindex)
		.animate({
			width: 940
		},{queue:false, duration: dur})
		.children().children("span")
		.animate({
			left: 0
		},{queue:false, duration: dur})
		
		
	},function(){
		
		thisindex = $('ul#nav li a').index(this);
		
		//button
		$(this)
		.children('strong')
		.css('color', thiscolor)
		.end()
		.children('.bg')
		.animate({
			opacity: 0		 
		},{queue: false, duration: 5})
		.end()
		.children('.arrow')
		.animate({
			opacity: 0,
			left: 200
		},{queue: false, duration: dur});
		
		//image
		$("#images>div")
		.animate({
			width: 235
		},{queue:false, duration: dur})
		.each(function(i){
		$(this)
		.children().children()
		.animate({
			left: posleft_arr[i]			
		},{queue:false, duration: dur});
		})
	
	});	
	
	
	//IMAGES--------------------------------------------------
	
	
		$('#images a').hover(function(){
		//expand
		
		thisindex = $('#images a').index(this);
		thiscolor = $('ul#nav li a strong').eq(thisindex).css('color');
		
		//button
		$('ul#nav li a')
		.eq(thisindex)
		.children('strong')
		.css('color', "#fff")
		.end()
		.children('.bg')
		.animate({
			opacity: 1		 
		},{queue: false, duration: 5})
		.end()
		.children('.arrow')
		.animate({
			opacity: 1,
			left: 220
		},{queue: false, duration: dur});
		
		//image
		$('#images>div')
		.animate({
			width: 0		 
		},{queue:false, duration: dur})
		.eq(thisindex)
		.animate({
			width: 940
		},{queue:false, duration: dur})
		.children().children("span")
		.animate({
			left: 0
		},{queue:false, duration: dur})
		
		
	},function(){
		
		thisindex = $('#images>div a').index(this);
		
		//button
		$('ul#nav li a').eq(thisindex)
		.children('strong')
		.css('color', thiscolor)
		.end()
		.children('.bg')
		.animate({
			opacity: 0		 
		},{queue: false, duration: 5})
		.end()
		.children('.arrow')
		.animate({
			opacity: 0,
			left: 200
		},{queue: false, duration: dur});
		
		//image
		$('#images>div')
		.animate({
			width: 235
		},{queue:false, duration: dur})
		.each(function(i){
		$(this)
		.children().children()
		.animate({
			left: posleft_arr[i]			
		},{queue:false, duration: dur});
		})
	
	});		
	
});