/**
 * @author tjunghans, Namics AG, www.namics.com
 * To change the slide show delay, modify value of slideShowDelay
 */
 
var NX = NX || {};

NX.oswald = NX.oswald || {};

(NX.oswald.recipescontrol = function () {
	var activeIndex = 0,
		activeCssClass = 'activeRecipeItem', 
		bindEvents = null,
		fireControlHtmlBuilt = null,
		fireRecipesItemsChanged = null,
		getActiveIndex = null,
		init = null,
		mouseOver = false,
		onControlItemClick = null,
		prepare = null,
		$recipesItems = null,
		$recipesItemsControl = null,
		recipeItemsCount = 0,
		setActiveControlLight = null,
		slideShowDelay = 8000, // Milliseconds
		slideShowTimer = null,
		startSlideShow = null,
		stopSlideShow = null,
		switchToIndex = null,
		tabs = null;
	
	fireControlHtmlBuilt = function () {
		$recipesContainer.trigger('controlHtmlBuilt');
	};
	
	fireRecipesItemsChanged = function () {
		$recipesContainer.trigger('recipesItemsChanged');
	};
	
	onControlItemClick = function () {
		var $controlItemLinks = null;
		
		$controlItemLinks = $recipesItemsControlListItems.children('a');
		
		$controlItemLinks.click(function () {
			activeIndex = $controlItemLinks.index(jQuery(this));
			
			switchToIndex(activeIndex);
			
			return false;
		});
	};
	
	/* This is the old function, without fade effect */
	/* switchToIndex = function (newIndex) {
		$recipesItems.removeClass('active');
		
		jQuery($recipesItems.get(newIndex)).addClass('active');
			
		setActiveControlLight();
			
		fireRecipesItemsChanged();
	};*/


	switchToIndex = function (newIndex) {
		var currentIndex = getActiveIndex(),
			nextIndex = newIndex,
			$currentRecipeItem = null,
			$nextRecipeItem = null;
			
			$currentRecipeItem = jQuery($recipesItems.get(currentIndex));
			$nextRecipeItem = jQuery($recipesItems.get(nextIndex));
		
		// give the recipe with index = nextIndex the class "next"
		$nextRecipeItem.addClass('nextRecipeItem');
		
		// fade "next" in		
		stopSlideShow();

		$nextRecipeItem.fadeIn(1000, function () {
			
			// set callback of fadeIn
			
			// remove .active from recipe with index "currentIndex"
			$currentRecipeItem.removeClass('active');
			
			// swap .next with .active on recipe with class .next
			// fadeIn adds the inlinse style "display: block". This has to be removed as well.
			$nextRecipeItem.addClass('active').removeClass('nextRecipeItem').css('display','');
			
			// setActiveIndex()
			activeIndex = nextIndex;
			
			setActiveControlLight();
			
			fireRecipesItemsChanged();
			
			// only start slideshow if the mouse is off the recipe
			if (!mouseOver) {
				startSlideShow();
			} else {
				stopSlideShow();
			}
		});
		
	}
	
	switchToNextIndex = function () {
		if (activeIndex < recipeItemsCount-1) {
			++activeIndex;
		} else {
			activeIndex = 0;
		}
		
		switchToIndex(activeIndex);
	};
	
	startSlideShow = function () {
		slideShowTimer = setTimeout(function () {
		
			switchToNextIndex();
			
			if (slideShowTimer) {
				startSlideShow();
			}
		},slideShowDelay);
	};
	
	stopSlideShow = function () {
		clearTimeout(slideShowTimer);
		slideShowTimer = null;
	};
	
	bindEvents = function () {
		onControlItemClick();
		
		$recipesContainer.hover(function () {
			stopSlideShow();
			mouseOver = true;
		},
		function () {
			startSlideShow();
			mouseOver = false;
		});	
	};
	
	setActiveControlLight = function () {
		$recipesItemsControlListItems.removeClass(activeCssClass);
		jQuery($recipesItemsControlListItems.get(getActiveIndex())).addClass(activeCssClass);
	};
	
	prepare = function () {
		var controlHtml = '',
			htmlListItem = '';
			i = 0;
		
		htmlListItem = '<li><a href="#">&nbsp;</a></li>';
		
		for (i = 0; i < recipeItemsCount; ++i) {
			controlHtml += htmlListItem;
		}
		
		$recipesContainer.append('<div id="recipesItemControl"><ul>' + controlHtml + '</ul></div>');
		
		$recipesItemsControl = jQuery('#recipesItemControl');
		$recipesItemsControlListItems = $recipesItemsControl.children('ul').children('li');
		
		// fire event when we know the control is available
		fireControlHtmlBuilt();
		
		// activate the control light with the specific index
		setActiveControlLight();
		
		// bind events
		bindEvents();
	};
	
	getActiveIndex = function () {
		return $recipesItems.index($recipesContainer.children('.active'));
	};
	
	init = function () {
		$recipesContainer = jQuery('#recipesInnerWrapper');
		
		if ($recipesContainer.length < 1) {
			return false;
		}
		
		$recipesItems = $recipesContainer.children('.recipesItem');
		recipeItemsCount = $recipesItems.length;
		activeIndex = getActiveIndex();
		
		prepare();
		
		
		//trigger clicks on a.more_recipes and unset blur
		$('a.more_recipes').click( function(){
			switchToNextIndex();
			return false;
		});
		$('a.more_recipes').focus(function (){
			if(this.blur) { 
				this.blur(); 
			}
		});
		
		
		//trigger mouse wheel on recipe_main
		jQuery('div.recipe_main').bind('mousewheel', function(event, delta) {
			var $self = jQuery(this),
                $scrollers = null,
                step = 0,
                value = 0,
                newValue = 0;
               
            //alle sichtbaren scroll-bars   
            $scrollHandles = $self.contents().find('.scroll-handle').filter(function(){ return jQuery(this).css('display') != 'none'; });
            
            step = $scrollHandles.slider('option','step');
            value = $scrollHandles.slider('value');
            newValue = value + step * delta;
            
           	//set the new value and trigger the events
           	$scrollHandles.trigger('slide');
			$scrollHandles.slider('value', newValue);
			$scrollHandles.trigger('slidestop');
            
            return false;
        });

		startSlideShow();
		
	};
	
	return {
		init : init,
		startSlideShow : startSlideShow,
		stopSlideShow : stopSlideShow
	}
}());

jQuery(document).ready(function () {
	NX.oswald.recipescontrol.init();
});