$(document).ready(initCarousel);

var bBanners;
var bTimer = 0;
var bTimeout = 5000;
var bActive = 0;
var bCount = 0;
function initCarousel() {
	if ($('.carousel-item').length) {
	    bBanners = $('.carousel-item');
	    bCount = $('.carousel-item').length;
        $('.carousel-item:eq(0)')
            .css({left: 0});
        bTimer = setTimeout('bannerMove(1)', 3000);
        
        $("#carousel").append('<div class="car-left">left</div><div href="#" class="car-right">right</div>');
		$(".car-left").click(
		    function(event) { event.preventDefault(); clearTimeout(bTimer); bannerMove(0); }
		);
		$(".car-right").click(
		    function(event) { event.preventDefault(); clearTimeout(bTimer); bannerMove(1); }
		);
        $("#carousel").mouseover(function() {
    		$(".car-right").css("visibility","visible");
    		$(".car-left").css("visibility","visible");
    	}).mouseout(function(){
    		$(".car-right").css("visibility","hidden");
    		$(".car-left").css("visibility","hidden");
    	});
    	
    	inputActive = false;
    	$("input, textarea").focus( function() { inputActive = true } );
        $("input, textarea").blur( function() { inputActive = false } );
    	
    	if($('.car-left').get(0) || $('.car-right').get(0)) {
    		$(window).keyup( function(event) {
    			if(event.keyCode == 37 && !event.altKey && !inputActive) { // move right
    				bannerMove(0);
    			}
    			if(event.keyCode == 39 && !event.altKey && !inputActive) { // move left
    				bannerMove(1);
    			}
    		});
    	}
    	
	}
}

function bannerMove(dir) {
    clearTimeout(bTimer);
    if (dir) { // move left
        var bNext = (bActive < bCount - 1) ? bActive+1 : 0;
    //    $('.car-left').css({visibility: 'visible'});
        $(bBanners[bActive])
            .stop()
            .animate(
                {left: '-1200px'},
                { duration: 750, easing: 'easeInOutCirc', 
                    complete: function() {
                        $(this).css({left: '1200px'})
                    }
                });
        bActive = bNext;
        $(bBanners[bNext])
            .stop()
            .css({left: '1200px'})
            .animate(
                {left: '0px'}, 
                { duration: 750, easing: 'easeInOutCirc', 
                    complete: function() {
    //                    $('.car-left').css({visibility: 'hidden'});
                        bTimer = setTimeout('bannerMove(1)', bTimeout);
                    }
                });
    } else { // move right
        var bNext = (bActive > 0) ? bActive-1 : bCount-1;
    //    $('.car-right').css({visibility: 'visible'});
        $(bBanners[bActive])
            .stop()
            $(bBanners[bActive])
                .stop()
                .animate(
                    {left: '1200px'},
                    { duration: 750, easing: 'easeInOutCirc', 
                        complete: function() {
                            $(this).css({left: '1200px'})
                        }
                    });
        bActive = bNext;
        $(bBanners[bNext])
            .stop()
            .css({left: '-1200px'})
            .animate(
                {left: '0px'}, 
                { duration: 750, easing: 'easeInOutCirc', 
                    complete: function() {
    //                    $('.car-right').css({visibility: 'hidden'});
                        bTimer = setTimeout('bannerMove(1)', bTimeout);
                    }
                });
    }
    
}