$(document).ready(function() {

	$('.banners').append($('.banners-inner'));
	$('.banner').each(function(index) {
	   $('.banner-nav').append('<a href="#" id="'+index+'" class="nav-'+index+'"><img class="nav-btn" src="/wp-content/themes/big-pink/images/banner-nav-off.png" /><img class="nav-btn-on" src="/wp-content/themes/big-pink/images/banner-nav-off.png" /></a>')
	});
	
	function showNextBox() {
	
			queueNextBox();
			var left = parseFloat($('.banners-inner').css('left'));
			var slideCount = $('.banner').length;
            var end = ((slideCount - 1) * 980) * -1;
            var width = slideCount * 980;
			
			$('.nav-btn-on').fadeOut();
			
			
			
            
			left = (left == end) ? 0 : left - 980;
			
			var btnOn = (((left * -1) / 980) >= slideCount) ? 0 : ((left * -1) / 980);
			$('.nav-' + btnOn).children('.nav-btn-on').fadeIn();
			
			$('.banners-inner').animate({
				left: left + 'px'
			}, {
				duration: 2000,
				complete: function() {
					var left = parseFloat($(this).css('left'));
					$(this).css('z-index', '10');
				}
			});
		}
		
	var boxshow;
    function queueNextBox(ms) {
        if (boxshow)
            clearTimeout(boxshow);
        boxshow = setTimeout(showNextBox, ms || 6000); // time to wait for next slide in milliseconds
    }
		queueNextBox();
		
		$('.banner-nav a').click(function(event) {
			event.preventDefault();
				
			var left = parseFloat($('.banners-inner').css('left'));
			
			if(left % 980 === 0) {
			
				queueNextBox(20000);
				
				var clicked = parseInt($(this).attr('id'));
				
				var newLeft = ((clicked * -980));
			
				$('.nav-btn-on').fadeOut();
				$(this).children('.nav-btn-on').fadeIn();
				
				$('.banners-inner').animate({
					left: newLeft + 'px'
				}, {
					duration: 1000,
					specialEasing: {
						top: 'swing'
					}
				});
			}
				
		});
});