var refreshIntervalId = 0 ;
var pause = 20000;
var length;

var currentFrame = 1;
var lastFrame = 1;
var newFrame = 1;

$(document).ready(function () {
    length = $("#hero-slider img").length;
	if (length > 1) {
		startTimer();
	} else {
		$("#previous").hide();
		$("#next").hide();
		$(".controls").hide();
	}
});

this.startTimer = function ()  {
	refreshIntervalId = setInterval(rotate,pause);	
}

this.rotate = function(){
	lastFrame = currentFrame;
	newFrame = nextSlider();
	show();
};

this.prevClick = function(){
	clearInterval(refreshIntervalId);
	lastFrame = currentFrame;
	newFrame = prevSlider();
	show();
	startTimer();
	// $("#hero-img-" + currentshow).css('z-index', -2);
};

this.nextClick = function(){
	clearInterval(refreshIntervalId);
	rotate();
	startTimer();
};

this.heroClick = function(id){
	clearInterval(refreshIntervalId);
	lastFrame = currentFrame;
	newFrame = id;
	show();
	startTimer();
};

this.nextSlider = function () {
    if (currentFrame == length) {
        return 1;
    } else {
        return currentFrame + 1; 
    }
}

this.prevSlider = function () {
    if (currentFrame == 1) {
        return length;
    } else {
        return currentFrame - 1; 
    }
}

this.show = function () {
    // Step 1: Set the new slide's depth to -2
    $("#hero-img-" + newFrame).css('z-index', -2);
    // Step 2: Fade out old title
	if (  $("#hero-title-" + lastFrame).length ) {
		
		$("#hero-title-" + lastFrame).animate({ opacity: 0 }, 1000, function () {
			// Step 3: Fade out upper image
			$("#hero-img-" + lastFrame).animate({ opacity: 0 }, 2000, function () { });    
			// Step 3b: Fade in lower image
			$("#hero-img-" + newFrame).animate({ opacity: 1 }, 2000, function () {
				// Step 4: Change new slides depth to -1
				$("#hero-img-" + newFrame).css('z-index', -1);
				// Step 5: Fade in new title
				$("#hero-title-" + newFrame).animate({ opacity: 1 }, 1000, function () { });
				// Step 6: Set New Prev/Next Buttons
				$("#hero-img-" + lastFrame).css('z-index', -5);
				$("#hero-menu-" + lastFrame).removeClass('active');
				$("#hero-menu-" + newFrame).addClass('active');
				currentFrame = newFrame;
			});
		});
		
	} else {
			// Step 3: Fade out upper image
			$("#hero-img-" + currentFrame).animate({ opacity: 0 }, 2000, function () { });    
			// Step 3b: Fade in lower image
			$("#hero-img-" + newFrame).animate({ opacity: 1 }, 2000, function () {
				// Step 4: Change new slides depth to -1
				$("#hero-img-" + newFrame).css('z-index', -1);
				// Step 6: Set New Prev/Next Buttons
				$("#hero-menu-" + currentFrame).removeClass('active');
				$("#hero-menu-" + newFrame).addClass('active');
				currentFrame = newFrame;
			});
		
	}
}