/**
 * @author tjunghans, Namics AG, www.namics.com
 * All functionality for slider and tabs is done here.
 * oswald.recipescontrol.js depends on this file.
 */
 
var NX = NX || {};

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

(NX.oswald.recipes = function () {
	var bindEvents = null,
		createTabsInstance = null,
		init = null,
		onSlide = null,
		options = null,
		$scrollHandles = null;
	
	options = {
		'SLIDER_MAX_VAL' : 100,
		'SLIDER_MIN_VAL' : 0,
		'CLIPPING_HEIGHT' : 200 // actual height defined in css is 210px. Deducted 20px to add padding-bottom, looks better.
	};

	// event handling
	onSlide = function () {
		$scrollHandles.bind('slide', function(event, ui) {
			var $self = jQuery(this),
				$scrollContainer = null,
				sliderValue = 0,
				contentScrollByValue = 0,
				contentHeight = 0;
			
				sliderValue = $self.slider('value');
				$scrollContainer = $self.next('.scroll-contents-wrapper').children('.scroll-contents ');
				contentHeight = $scrollContainer.height();
														
				contentScrollByValue = -1 * (((options.SLIDER_MAX_VAL - sliderValue) / options.SLIDER_MAX_VAL) * (contentHeight - options.CLIPPING_HEIGHT));
								
				$scrollContainer.css('top',contentScrollByValue + 'px');
				
		});
		
		// Todo: apply DRY
		$scrollHandles.bind('slidestop', function(event, ui) {
	
			var $self = jQuery(this),
				$scrollContainer = null,
				sliderValue = 0,
				contentScrollByValue = 0,
				contentHeight = 0;
			
				sliderValue = $self.slider('value');
				$scrollContainer = $self.next('.scroll-contents-wrapper').children('.scroll-contents ');
				contentHeight = $scrollContainer.height();
														
				contentScrollByValue = -1 * (((options.SLIDER_MAX_VAL - sliderValue) / options.SLIDER_MAX_VAL) * (contentHeight - options.CLIPPING_HEIGHT));
				
				// - options.CLIPPING_HEIGHT
				$scrollContainer.css('top',contentScrollByValue + 'px');
				
		});
	};
	
	bindEvents = function () {
		onSlide();
	};
	
	// we need these three methods to handle one ul li list controlling more than one set of tabs
	createTabsInstance = function () {
		var $tabs = null,
			tabsInstance = null;
		
		$tabs = jQuery("ul.recipeTabs");
		
		// iterate through each tab and assign contents
		$tabs.each(function (i) {
			tabsInstance = jQuery(this).tabs('.recipesItem:eq(' + i + ') .recipe_main > div');
			tabsInstance.children('li').children('a').focus(function (){
				if(this.blur) { 
					this.blur(); 
				}
			});
		});
				
	};
	
	init = function () {
		$scrollHandles = jQuery('.scroll-handle');
				
		if ($scrollHandles.length < 1) {
			return false;
		}
		
		$scrollHandles.slider({
			'orientation' : 'vertical',
			'min' : options.SLIDER_MIN_VAL,
			'max' : options.SLIDER_MAX_VAL,
			'step' : 10,
			'value' : 99
		});
		
		bindEvents();
		
		// check compare content height to clipping and deactivate slider if necessary
		// should be done when recipe content is visible (active)
		
		jQuery('#recipesContainer .recipesItem .recipeContent .recipe_main').children('div').each(function(i) {
			var $self = jQuery(this);
			
			// make element visible to calculate height
			$self.show();
			
			if (parseInt($self.children('.scroll-contents-wrapper').children('.scroll-contents').height(),10) <= options.CLIPPING_HEIGHT) {
				$self.children('.scroll-handle').slider('disable');
			}
			
			$self.hide();
		});
		
		createTabsInstance();
		
	};
	
	return {
		bindEvents : bindEvents,
		createTabsInstance : createTabsInstance,
		init : init
	};
}());

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