// JavaScript Document
$(document).ready(function(){
	$currentBanner = 1;
	$totalBanners = $('.banner .images').children().size();
	$swapping = false;
	resize();
	startSlide();

	$('.banner .images li').hover(
	function(){
		stopSlide();	
	},
	function(){
		startSlide();
	});
	
	$('.thumbnails .images li').click(function(){
		if (!$swapping){
			var html_id = $(this).attr('id');
			id = html_id.substring(9);
			stopSlide();
			$oldBanner = $currentBanner;
			$currentBanner = id;
			swapSelectedBanner($oldBanner);
			startSlide();
		}
		
	});

});

$(window).resize(function() {
	resize();	
});

function resize(){
	if($(window).width() > 984){
		$('.banner .images li').css('width',$(window).width());
		$('.banner .images li img').css('width',$(window).width());		
		$('.banner .images .info').css('width',$(window).width());	
		var height = $(window).width() * 715 / 1424;
		var margin_top = -((height - 495) / 2);
		$('.banner .images li img').css('margin-top', margin_top) ;				
	}else{
		$('.banner .images li').css('width',984);
		$('.banner .images li img').css('width',984);
		$('.banner .images .info').css('width',984);
		$('.banner .images li img').css('margin-top',0);
	}
}

function startSlide(){
	$interval = setInterval ( "swapBanner()", 3000 );
}

function stopSlide(){
	clearInterval($interval);
}

function swapBanner ()
{
	$swapping = true;
	$oldBanner = $currentBanner;
	$currentBanner++;
	if ($currentBanner == ($totalBanners + 1)){
		$currentBanner = 1;
		$oldBanner = $totalBanners;
	}
	$('.banner .images .image-'+$currentBanner).addClass('over');
	$('.banner .images .image-'+$oldBanner).addClass('above');
	$('.banner .images .image-'+$currentBanner).fadeIn(500, function(){
		$('.banner .images .image-'+$oldBanner).hide();		
		$('.banner .images .image-'+$currentBanner).removeClass('over');
		$('.banner .images .image-'+$oldBanner).removeClass('above');		
		$swapping = false;
	});
}

function swapSelectedBanner ($oldBanner)
{
	$swapping = true;
	$('.banner .images .image-'+$currentBanner).addClass('over');
	$('.banner .images .image-'+$oldBanner).addClass('above');
	$('.banner .images .image-'+$currentBanner).fadeIn(500, function(){
		$('.banner .images .image-'+$oldBanner).hide();		
		$('.banner .images .image-'+$currentBanner).removeClass('over');
		$('.banner .images .image-'+$oldBanner).removeClass('above');	
		$swapping = false;
	});
}