$(document).ready(function(){
	$('#animate_bg').css({'display' : 'none'});				   
	$(window).load(function(){	
	$('#animate_bg').fadeIn('slow');
	$('#dot_bg').animate({height: '100%'}, 1000);					   
	var actualimg = 1;
	var totalimages = $('#animate_bg img').length;
   	var skip_transition = false;
    var imagewidth = $('#animate_bg #im1').width();
    var imageheight = $('#animate_bg #im1').height();
	var ratio = imageheight/imagewidth;
	if(totalimages == 1){$('#animate_bg a').hide();}
    	supersizeImage($('#animate_bg #im1'), ratio);
    
    $(window).resize(function() {
			imagewidth = $('#im'+actualimg).width();
       		imageheight = $('#im'+actualimg).height();
			ratio = imageheight/imagewidth; 
			supersizeImage($('#im'+actualimg), ratio);
    });
	
	function fadeImage(action){
		if(skip_transition == false){
			$('#animate_bg img').fadeOut(2000);
			if(action == "prev"){
				actualimg = actualimg-1;
				if(actualimg < 1){actualimg = totalimages;}
			}else if(action == "next"){
				actualimg = actualimg+1;
				if(actualimg > totalimages){ actualimg = 1;}
			} 
			imagewidth = $('#im'+actualimg).width();
       		imageheight = $('#im'+actualimg).height();
			ratio = imageheight/imagewidth; 
			supersizeImage($('#im'+actualimg), ratio);
			$('#im'+actualimg).fadeIn(2000);
		}
		skip_transition = false; 
	}
   
    $(function() {
        if(totalimages >1 &&skip_transition == false ){
            setInterval(function() {   
				fadeImage('next');
            }, 7000);
        } 
    });
	
	$('#animate_bg a').click(function(){
		skip_transition = false; 
		var action = ($(this).attr('class'));
		fadeImage(action);
		skip_transition = true;
		return false;
	});
	
	$(document).keydown(function(event) {
		 
	  	if (event.keyCode == '39') { //NEXT
		 	$('#animate_bg .next').click();
	   	}else  if (event.keyCode == '37') { //PREV
		 	$('#animate_bg .prev').click();
	   	}
	   	 
	});

    function supersizeImage(image, ratios) {
       var browserwidth = $(window).width();
       var browserheight = $(window).height();
 	   if(imageheight == 0){imageheight = $(image).attr('height');}
		
       if ((browserheight/browserwidth) >= ratios){
               $(image).height(browserheight);
               $(image).width(browserheight / ratios); 
       } else { 
	   			 
               $(image).width(browserwidth);
               $(image).height(browserwidth * ratios);    
       }
     
       $(image).css('left', (browserwidth - $(image).width())/2);
       if($(image).height()>0){
       		$(image).css('top', (browserheight - $(image).height())/2);
       }
	}

 	});	
});