$(document).ready(function(){
// Banner elements
	// IMAGE SLIDER
	$('.slideshow').cycle({
		fx: 'scrollHorz',
		speed: 'slow',
		timeout: 5000,
		pager: '.prodNav ul',
		next: '.rightBtn',
		prev: '.leftBtn',
		pagerAnchorBuilder: function(idx, slide) { 
			// return selector string for existing anchor 
			return '.prodNav li:eq(' + idx + ')'; 
		},
		after: triangleAnimate
	});
	
	$("#play-pause .play").mouseover(function(){
		$(this).addClass("hover");
	});
	
	$("#play-pause .play").mouseout(function(){
		$(this).removeClass("hover");
	});
	
	$("#play-pause .play").click(function(){
		$(this).addClass("active");
		$("#play-pause .pause").removeClass("active");
		$('.slideshow').cycle('resume');
	});
	
	$("#play-pause .pause").mouseover(function(){
		$(this).addClass("hover");
	});
	
	$("#play-pause .pause").mouseout(function(){
		$(this).removeClass("hover");
	});
	
	$("#play-pause .pause").click(function(){
		$(this).addClass("active");
		$("#play-pause .play").removeClass("active");
		$('.slideshow').cycle('pause');
	});
	
	// Product Navigation Hovers and Actives
	$(".prodNav ul li").mouseover(function(){
		$(this).addClass("hover");
	});
	$(".prodNav ul li").mouseout(function(){
		$(".prodNav ul li").removeClass("hover");
	});
	$(".prodNav ul li").click(function(){
		$(".prodNav ul li").removeClass("activeSlide");
		$(this).addClass("activeSlide");
		triangleAnimate();
	});
	
	// Next and Previous Button Hovers
	$("#pager .leftBtn").mouseover(function(){
		$(".leftBtn .button").addClass("hover");
	});
	$("#pager .leftBtn").mouseout(function(){
		$(".leftBtn .button").removeClass("hover");
	});
	$("#pager .rightBtn").mouseover(function(){
		$(".rightBtn .button").addClass("hover");
	});
	$("#pager .rightBtn").mouseout(function(){
		$(".rightBtn .button").removeClass("hover");
	});
	$("#pager .rightBtn").click(function(){
		triangleAnimate();
	});
	$("#pager .leftBtn").click(function(){
		triangleAnimate();
	});
	function triangleAnimate(){
		if($(".prodNav ul li.gkpro").hasClass("activeSlide")){
			$(".prodNav .triangle").animate({left:'156px'}, 600);			
		}
		else if($(".prodNav ul li.bb").hasClass("activeSlide")){
			$(".prodNav .triangle").animate({left:'467px'}, 600);			
		}
		else if($(".prodNav ul li.gklite").hasClass("activeSlide")){
			$(".prodNav .triangle").animate({left:'780px'}, 600);			
		}
	}
});