jQuery(document).ready(function($){
	
	// resizing banner
	
	var bannerImg = '';	
	
	function resizeBanner(bannerImg, divWidth, divHeight, startRatio, divRatio){
	
		if (divRatio < startRatio){
		
			bannerImg.height(divHeight);
			bannerImg.css('margin-top', -divHeight/2);
			bannerImg.width(divHeight*startRatio);
			bannerImg.css('margin-left', -(divHeight*startRatio)/2);	
		
		} else {
		
			bannerImg.width(divWidth);
			bannerImg.css('margin-left', -divWidth/2);
			bannerImg.height(divWidth/startRatio);
			bannerImg.css('margin-top', -(divWidth/startRatio)/2);
		
		}	
	
	}  
	
	function topBanner () {
		 
		var bannerImg = $(".top img");
		var divWidth = $(".top").width();
		var divHeight = $(".top").height();
		var startRatio = 6;
		var divRatio = divWidth / divHeight;
		
		resizeBanner(bannerImg, divWidth, divHeight, startRatio, divRatio);
																					
	}
	
	function sideBanner () {
		 
		var bannerImg = $(".side img");
		var divWidth = $(window).width()*0.3;
		var divHeight = $(window).height()*0.35;
		var startRatio = 2;
		var divRatio = divWidth / divHeight;
		
		resizeBanner(bannerImg, divWidth, divHeight, startRatio, divRatio);
																					
	}
	
	// add class active on first image in div
	
	$(function(){
		
		$(".banner img:first").addClass('active');	

	});
	
	// slideshow banner
	
	var bannerDiv = '';
	var transitionTime = '';
	
	function bannerSwitch(bannerDiv, transitionTime) {
		
	    var active = $("."+bannerDiv+".banner img.active");
	
	    if ( active.length == 0 ) { 
	    
	    	active = $("."+bannerDiv+".banner img:last");
	    
	    }
	
	    var next =  active.next().length ? active.next() : $("."+bannerDiv+".banner img:first");
	    var divWidth = $("."+bannerDiv+".banner").width();
	
	    active.addClass('last-active');
	
	    next.css({opacity: 0.0})
	        .addClass('active')
	        .animate({opacity: 1.0}, transitionTime, function() {
	            active.removeClass('active last-active');
	        });
	}
	
	function topBannerSwitch(){
	
		var bannerDiv = 'top';
		var transitionTime = 1000;
		
		bannerSwitch(bannerDiv, transitionTime);
	}				

	function middleBannerSwitch(){
	
		var bannerDiv = 'middle';
		var transitionTime = 700;
		
		bannerSwitch(bannerDiv, transitionTime);
	}
	
	function bottomBannerSwitch(){
	
		var bannerDiv = 'bottom';
		var transitionTime = 500;
		
		bannerSwitch(bannerDiv, transitionTime);
	}	
					
	$(window).resize(function(){
				
		topBanner();
		sideBanner();
		
	});
	
	$(function(){
				
		topBanner();
		sideBanner();
		
		setInterval(topBannerSwitch, 16000);
		setInterval(middleBannerSwitch, 18300);
		setInterval(bottomBannerSwitch, 12000);
	
	});

});