/*
 * Hot N' Juicy jQuery Carousel
 * Authors: Luke Askew, Kevin Mack; Resource Interactive
 * Description: A jQuery sliding carousel with some delicious effects.
 */
 /* =============================================================================
    Directions:
    
    1.) HTML:
    <div class="hj-wrap">
    	<ul id="carousel-name">
    		<li>
    			<div class="hj-slide">Elements that slide</div>
    			<div class="hj-fade">Elements that fade</div>
    		</li>
    		<li>
    			<div class="hj-slide">Elements that slide</div>
    			<div class="hj-fade">Elements that fade</div>
    		</li>
    	</ul>
    	<div class=".hj-bg ir" id="bg-01"></div>
    </div>
    
    2.) CSS:
    <link rel="stylesheet" href="hj.css" type="text/css" />
    
    3.) Javascript:
    $(window).load(function () {
    	$('#carousel-name').hotjuicy();
    });
    
    
    ========================================================================== */
 
(function($) {
	$.fn.hotjuicy = function(options) {
		
		//Setting defaults
	    var defaults = {  
	        slideWidth: 940, 					// width of your slides
	        animationSpeed: 600, 				// how fast the animations are
	        advanceSpeed: 4000, 				// how long to stay on each slide 
	        easingType: '', 			        // easing type. use easing plugin for more options 
	        autoplay: true,						// automatically start the carousel
	        pauseOnHover: true, 				// pause when hovering over the slider
	        restartOnMouseOut: true, 		    // restart autoplay when not hovering over the 
	        directionalNav: true,				// manual advancing directional navs
	        paginationNav: true,				// pagination bullets
	        getsBackground: []					// array that contains id's and rel's to assign specific backgrounds to each slide
	 	};  
	    
	    //Extend those options
	    var options = $.extend(defaults, options); 
	
	    return this.each(function() {
	    	/* =============================================================================
	    	   Here's some global variables
	    	   ========================================================================== */
	    	var hj = $(this),
	    		hjWrap = $('.hj-wrap'),
	    		scrollAmount = parseInt(options.slideWidth * 1.2),
				numSlides = hj.find('li').get().length,
				currSlide = 1;
			
			
			/* =============================================================================
			   Here's some functions that we'll use later
			   ========================================================================== */
			   	
			//load the appropriate background image
	    	var updateBackground = function () {
				$.each(options.getsBackground[0], function(key, val){
					if ($.inArray(currSlide, val) >= 0) {
						$('.hj-bg[id!=#' + key +']').animate({ 'opacity': 0 }, (options.animationSpeed/2), function(){
							$('#' + key).animate({ 'opacity': 1 }, (options.animationSpeed/2));
						});
					}
				});
			};
			
			
			//hide the left/right nav if the next slide doesn't exist
			var checkNav = function() {		
				if (currSlide == 1) {
					$('#hj-nav-left').hide();
				} else {
					$('#hj-nav-left').show();
				}
				
				if (currSlide == numSlides) {
					$('#hj-nav-right').hide();
				} else {
					$('#hj-nav-right').show();
				}
			}; 
			
			//indicate which slide is active
			var updatePagination = function() {
				$('.hj-pagination').find('li').each(function(){
					if (currSlide == parseFloat($(this).attr('rel'))) {
						$(this).addClass('hj-pag-active');
					} else {
						$(this).addClass('hj-pag-active').removeClass('hj-pag-active');
					}
				});
			};
			
			var slideLeft = function () {
				$('.hj-fade').animate({ 'opacity': '0', 'filter': '' }, (options.animationSpeed/2));
				
				$('.hj-fade').animate({ 'left': '+=' + (scrollAmount*(currSlide - targetSlide)) }, (options.animationSpeed/2), options.easingType, function(){
					$('.hj-fade').animate({ 'opacity': '1', 'filter': '' }, (options.animationSpeed/2));
				});
				$('.hj-slide *').each(function(index){
					$(this).animate({ 'left': '+=' + (scrollAmount*(currSlide - targetSlide)) }, options.animationSpeed * ('1.' + Math.floor(Math.random()*11)), options.easingType);
				});
				currSlide = parseFloat(targetSlide);
				_gaq.push(['_trackEvent', 'Home Page Main Promo', 'Panel '+currSlide+' Displayed', 'Impression', 1, true]);

			};
			
			var slideRight = function () {
				$('.hj-fade').animate({ 'opacity': '0', 'filter': '' }, (options.animationSpeed/2));
				
				$('.hj-fade').animate({ 'left': '-=' + (scrollAmount*(targetSlide - currSlide)) }, (options.animationSpeed/2), options.easingType, function(){
					$('.hj-fade').animate({ 'opacity': '1', 'filter': '' }, (options.animationSpeed/2));
				});
				$('.hj-slide *').each(function(index){
					$(this).animate({ 'left': '-=' + (scrollAmount*(targetSlide - currSlide)) }, options.animationSpeed * ('1.' + Math.floor(Math.random()*11)), options.easingType);
				});
				currSlide = parseFloat(targetSlide);
				_gaq.push(['_trackEvent', 'Home Page Main Promo', 'Panel '+currSlide+' Displayed', 'Impression', 1, true]);
			};
			
			//autoplay timer
			var autoplay = function () {
				var clock,
					count = 0;
				
				var startClock = function () {
					clock = setInterval(function(){
						//run a count to make sure it doesn't run too many times in the background
						count += 1;
			
						if(count > 360) {
						    if (currSlide == numSlides) {
						    	targetSlide = 1;
						    	slideLeft();
						    } else {
						    	targetSlide = parseFloat(currSlide) + 1;
						    	slideRight();
						    }				
						    updateStuff();
						    count = 0;
						}			
							
					}, (options.advanceSpeed)/360);
				};
				
				if (options.autoplay) {
					startClock();
				}
				
				//pause on hover
				if (options.pauseOnHover) {
					hjWrap.mouseenter(function(){
						clearInterval(clock);
					});					
				}
				//restart on mouseout
				if (options.restartOnMouseOut) {
					hjWrap.mouseleave(function () {
						//check to see if there is an overlay or something present
						if ($('.hj-pause, .pls-container').length > 0) {
							clearInterval(clock);
						} else {
							startClock();
						}
					});
				}				
			};
			
			var someIEfixes = function() {
				//PNG opacity fox for IE
				$('.hj-fade, .hj-nav').addClass('fading-png');
				//yeah, junk sometimes looks crazy if we don't this
				$('.hj-fade').animate({ 'opacity': 0, 'filter': '' }, 0, function(){
					$(this).animate({ 'opacity': 1, 'filter': '' }, 0);
				});
			};
			
			//some functions that run everytime the slide changes
			var updateStuff = function () {
				if (options.directionalNav) {
					checkNav();
				}
				if (options.paginationNav) {
					updatePagination();
				}
				if (options.getsBackground.length > 0) {
					updateBackground();
				}				
			};
			
			var startTheHotJuiciness = function() {
				
				//do some IE fixes
				if ($.browser.msie) {
					someIEfixes();
				}
					
				//hide the backgrounds on load
				$('.hj-bg').animate({ 'opacity': 0, 'filter': '' }, 0);
				
				//set some styles of the carousel
				hj.addClass('hj');
				$('.hj li').css({ 'width': scrollAmount });				
				
				//set the width of the ul
				hj.width(scrollAmount * numSlides);
				
				//assign rel to each li based on its position in the list
				hj.find('li').each(function(index){
					$(this).attr({ 'rel': index + 1 });
				});
				
				//autoplay
				if (options.autoplay) {
					autoplay();
				}
				
				//build the pagination
				if (options.paginationNav) {
					hj.after('<ul class="hj-pagination"></ul>');
					
					var hjPagination = $('.hj-pagination');
					for (var i = 1; i < numSlides + 1; i++) {
						hjPagination.append('<li class="ir" rel="'+ i +'"></li>')
					}
					
					
					//add functionality
					$(hjPagination).find('li').click(function(){
						//get position of clicked and make it scroll the appropriate amount
						targetSlide = $(this).attr('rel');
						if (targetSlide < currSlide) {
							slideLeft();
						}
						if (targetSlide > currSlide) {
							slideRight();
						}
						updateStuff();
					});
					
				}
				
				//build the directional nav
				if (options.directionalNav) {
					hj.after('<a id="hj-nav-left" class="ir hj-nav">Left</a><a id="hj-nav-right" class="ir hj-nav">Right</a>').parent();
					
					var directionalNav = $('.hj-nav');
					
					//add functionality
					directionalNav.click(function(){
						if ($(this).text() === 'Left') {
							targetSlide = parseFloat(currSlide) - 1;
							slideLeft();			
						}
						if ($(this).text() === 'Right') {
							targetSlide = parseFloat(currSlide) + 1;
							slideRight();	
						}
						updateStuff();
					});
					directionalNav.css({'z-index': 200});
					
					//add hover effects					
					directionalNav.animate({ 'opacity': 0.8, 'filter': '' });
					
					directionalNav.hover(function(){
						$(this).stop().animate({ 'opacity': 1, 'filter': '' });
					}, function(){
						$(this).stop().animate({ 'opacity': 0.8, 'filter': '' });
					});
				}
				
				//do a quick update before we get started
				updateStuff();	
				
			};
			
			
			/* =============================================================================
			   Here's where we do stuff
			   ========================================================================== */
			
			//don't show anything until the dom is ready
			$(document).ready(function(){
				hjWrap.show(200, function(){
					hjWrap.animate({'opacity': 1, 'filter': ''}, 300);
					startTheHotJuiciness(); //way juicy dude!
				});
			});
				
	    });
     }
})(jQuery);