// Product category hero slides - JPD //

// some variables and functions we need globally
var currSlide = 0;
$(document).ready(function() {
var init = function(){
		hide_all_active();
		$('.slide-nav-prev').addClass('inactive');
		$('.slide-nav.first-slide').addClass('active');
		$('#hero-slide1').show();
		var first_img = $('#hero_img1').attr("src");
		$('#dishwashers-categories-underlay').css('background-image','url('+first_img+')');
	}
	
	
	// Slide Hero
	
	var slideLink = $('.hero .hero-transitioner ul li.slide-nav');
	
	var heroImage = $('#hero-image-container img');
	
	var slideContent = $('.main-flagship-copy');
	
	var current_slide = 0;
	
	
	var hide_all_active = function() {
		// Remove active class from the list items
		slideLink.removeClass('active');
		// Hide the active content
		slideContent.hide();
		// Hide the active image
		heroImage.hide();
		
		$('.hero .slide-nav-next').removeClass('inactive');
		$('.hero .slide-nav-prev').removeClass('inactive');
	};


	
	$(slideLink).click(function(e) {
		e.preventDefault();
		hide_all_active();
		
		// Store this as jQuery object
		var $target = $(this);

		var index = $target.attr('rel').split('-')[1] - 1;
		current_slide = index;
		
		// Set the clicked link to active
		$target.addClass('active');
		
		// Show the content for the active link
		$(slideContent[current_slide]).fadeTo('slow', 1);
		$(slideContent[index]).show()
		
		// Show the image for the active link
		var heroImgSrc = $(heroImage[index]).attr('src');
	
		$('#dishwashers-categories-underlay').fadeTo('slow', 0.3, function()
				{
				    $(this).css('background-image', 'url('+heroImgSrc+')');
				}).fadeTo('slow', 1);
		
		var $_slideLink = $(slideLink[index]);
		if($_slideLink.hasClass('last-slide')) {
			$('.hero .slide-nav-next').addClass('inactive');
		}
		else if($_slideLink.hasClass('first-slide')) {
			$('.hero .slide-nav-prev').addClass('inactive');
		}
	});
	
	$('.hero .slide-nav-next').click(function(e){
		e.preventDefault();
		if (currSlide != 0) current_slide = 0;
		var $_slideLink = $(slideLink[current_slide]);
		if(!$('.hero .slide-nav-next').hasClass('inactive')) {
			hide_all_active();
		
			//Handle next button
			current_slide++;

			$_slideLink = $(slideLink[current_slide]);

			// Add one to account for next/prev buttons
			$_slideLink.addClass('active');
			
			// Show the content for the active link
			$(slideContent[current_slide]).fadeTo('slow', 1);
			$(slideContent[current_slide]).show()
			
			// Show the image for the active link
			//$(heroImage[current_slide]).show();
			var heroImgSrc = $(heroImage[current_slide]).attr('src');
			
			$('#dishwashers-categories-underlay').fadeTo('slow', 0.3, function()
					{  			
					    $(this).css('background-image', 'url('+heroImgSrc+')');
					}).fadeTo('slow', 1);
			
			if($_slideLink.hasClass('last-slide')) {
				$('.hero .slide-nav-next').addClass('inactive');
			}
		}
	});
	
	$('.hero .slide-nav-prev').click(function(e){
		e.preventDefault();
		
		var $_slideLink = $(slideLink[current_slide]);
		if (!$('.hero .slide-nav-prev').hasClass('inactive')) {
			hide_all_active();
			
			current_slide--;
			$_slideLink = $(slideLink[current_slide])
			// Add one to account for next/prev buttons
			$_slideLink.addClass('active');
			
			// Show the content for the active link
			$(slideContent[current_slide]).fadeTo('slow', 1);
			$(slideContent[current_slide]).show()
			
			// Show the image for the active link
			var heroImgSrc = $(heroImage[current_slide]).attr('src');

			$('#dishwashers-categories-underlay').fadeTo('slow', 0.3, function()
					{
					    $(this).css('background-image', 'url('+heroImgSrc+')');
					}).fadeTo('slow', 1);
			
			if($_slideLink.hasClass('first-slide')) {
				$('.hero .slide-nav-prev').addClass('inactive')
			}
		}
	});
	

			
	init();
	// start animation of slides
	var slideTimer = window.setInterval("advance_slide()",5000);
	
	
	// if user hovers over slides nav, stop animating; start again on mouseout
	$('.hero-slide-nav').hover(function(){
		clearInterval(slideTimer);
	},function(){
		slideTimer = window.setInterval("advance_slide()",5000);
	});
	
});



// function to govern timed slideshow
function advance_slide() {
	var slideLink = $('.hero-transitioner ul li.slide-nav');

	var heroImage = $('#hero-image-container img');

	var slideContent = $('.main-flagship-copy');

	
			//are we at the last slide?
			if($('.hero .slide-nav-next').hasClass('inactive')) {
				// we are at the last slide. Reset everything.
				slideLink.removeClass('active');
				slideContent.hide();
				heroImage.hide();
				$('.slide-nav.first-slide').addClass('active');
				$('.hero .slide-nav-prev').addClass('inactive');
				$('#hero-slide1').fadeTo('slow', 1);
				$('#hero-slide1').show();
				var first_img = $('#hero_img1').attr("src");
				
				$('#dishwashers-categories-underlay').fadeTo('slow', 0.3, function()
						{
						    $(this).css('background-image', 'url('+first_img+')');
						}).fadeTo('slow', 1);
				$('.hero .slide-nav-next').removeClass('inactive');
				currSlide = 1;
				
			} else {
				
				// we're not at the last slide. Proceed normally.
				$('.hero .slide-nav-next').trigger('click');
				currSlide = 0;
			}
			
		}
