/**
 * Configurator Control Scripts
 */
/* jQuery Closure */
(function($){

/* Document ready */
$(function() {
	
	var productFinder = $('#productFinder');
	
	//
	// Augments jQuery's browser object with ie6
	//
	var b = navigator.userAgent.toLowerCase();
	$.browser.msie6 = /msie 6.0/.test(b) && !/opera/.test(b);

	//productFinder.activity();
	
		
	// Rendering data via jQuery.templates
	function render(data) {
		
		//console.log('data = %o', data.productConfigurator);
		
		var productFinderTemplate = $.template('productFinderTemplate', $("#productFinderTemplate"));
		
		//productFinder.activity(false);
		
		// Render now
		var s = $.tmpl('productFinderTemplate', data.productConfigurator, {
			hairTypeTranslatedName : data.productConfigurator.hairTypeTranslatedName
		});
		productFinder.append(s);
	
		// Accordion
		productFinder.find('#accordion').accordion({
			active:false,
			collapsible:true,
			icons: { 'header': 'ui-icon-category', 'headerSelected': 'ui-icon-category' },
			autoHeight:false
		});

		// Layout tweaks
		$('.slider', productFinder).each(function() {

			var $this = $(this),
				last = $this.find('a.item').last();
				
			// Set selected
			$this.find('a.all').addClass('selected');
			
			/* Last-item class */
			last.addClass('last-item');
		});
		$('.panel:last', productFinder).addClass('last-panel');
		
		//
		// Click handler
		//
		// Accordion elements handled with click-handler in order to stopPropagation
		//
		$( "#accordion .category-headline a", productFinder ).click(function(e){

			var $this = $(this),
				dataContainer = $this.closest('.category-headline').next('.panel')
				enableToggle = $this;
		
			if (enableToggle.hasClass('disabled')) {
				enableToggle.removeClass('disabled').addClass('enabled');
				dataContainer.data('enabled', true);
			} else {
				enableToggle.removeClass('enabled').addClass('disabled');			
				dataContainer.data('enabled', false);				
			}

			// Update
			prepareUpdate();
					
			e.stopPropagation();
			e.preventDefault();
			
			return false;
		});
		$( "#accordion .category-headline", productFinder ).click(function(e){

			var $this = $(this),
				dataContainer = $this.next('.panel'),
				prevHighlightState = dataContainer.data().highlight || dataContainer.data('highlight', false) && false,
				prevEnabledState = dataContainer.data().enabled,
				enableToggle = $this.find('a'),
				panels = $('.panel', productFinder);
			
			
			// Set highlightState
			$.each(panels, function() {
				$(this).data('highlight', false);
			});
			dataContainer.data('highlight', true);
			
			// Call Enable/Disable, assuming collapsed state with ui-state-default - class
			if (enableToggle.hasClass('disabled')) {
				// Set enabling state
				$this.find('a').trigger('click');
			}
			
			// Omnitare tracking categories
			Omniture.trackSubPageView('/' + $(this).attr('id'));
			
			// Update
			prepareUpdate();
			
			//console.log('before => prevHighlightState %o, prevEnabledState %o', prevHighlightState, prevEnabledState);
			
			// Do not collapse  when expanded and not enabled
			if (prevHighlightState === true && prevEnabledState === false) {
				
				//console.log('if condition => prevHighlightState %o, prevEnabledState %o', prevHighlightState, prevEnabledState);
				
				e.stopPropagation();
				e.preventDefault();
				
				return false;
			}
			
		});	
		
		// Prepare slider
		$(".slider").each(function(i, el) {
			
			// For each slider:
			var items = null,
				slider = $(this).css({
					position : 'relative'
				}),
				sliderOffset = slider.offset(),
				$items = slider.find('a'),
				currentIndex = null,
				handle = slider.find('span.handle:eq(0)').css({
					position : 'absolute',
					display : 'block',
					cursor : 'pointer'
				})
			;
			
			var getItems = function () {
				
				if (items !== null) {
					return items;
				}
				
				items = [];
				
				var elementsHidden = false;
				$items.each(function(i, el) {
					var $this = $(this),
						pos = $this.position();
					
					if (!$this.is(':visible')) {
						elementsHidden = true;
						return false;
					}
					
					items.push({
						y : pos.top,
						el : $this,
						index : i
					});
					
					$this.data('index', i);
					$this.data('y',pos.top);
				});
				
				if (elementsHidden) {
					return null;
				}
				
				return items;
			};
			
			$items.click(function() {
				items = items || getItems();
				if (!items) {
					return false;
				}
				//console.log("click", $(this), $(this).data('index'));
				//console.log($(this).offset(), $(this).position());
				setActive($(this).data('index'));
				return false;
			});
			
			var setActive = function(index, animate) {
				
				items = items || getItems();
				if (!items) {
					return false;
				}

				index = index === null ? items.length - 1 : index;
				
				//index = (index >= 0) ? index : items.length-1;
				//console.log("setActive", index, bubu);
				//console.log('index = %o, items = %o, items.length = %o', index, items, items.length);
				
				var item = items[index];
				animate = animate !== false;
				
				//console.log("setActive, index %o, item %o, item.y %o", index, item, item.y);
				$items.removeClass('selected');
				item.el.addClass('selected');

				//console.log("handle", handle, handle.position(), handle.offset());
				
				var y = parseInt(item.el.position().top, 10),
					tweak = 8
				;
				
				if (animate) {
					handle.animate(
						{
							top : parseInt((y + tweak),10) + 'px'
						}, 
						{
							duration : 200, 
							easing : 'linear',
							queue : false
						}
					);
				} else {
					handle.css({
						top : parseInt((y + tweak),10) + 'px'
					});
				}
				
				// Update
				prepareUpdate();
			};
			/*
			,getActive = function(y) {
				var index = 0;
				items = items || getItems();
				return items.length-1;
			};
			*/
						

			/* DEBUG
			console.group("Slider " + i);
			console.log("items", items);
			console.log("sliderOffset", sliderOffset);
			console.groupEnd();
			*/
			
			setActive(currentIndex);
			
			handle.mousedown(function () {
				$(document).bind('selectstart', function() { return false; });
				
				$(document).bind('mousemove', function(e) {

					//slider.css('background', 'lime');
					
					var index = 0,					
						py = e.pageY - slider.offset().top;
					
					items = items || getItems();
					if (!items) {
						return false;
					}

					
					if (py >= 0 && py < slider.height()) {
						//slider.css('background', 'lime');
						$.each(items, function(i, item) {
							
							item.y = item.el.position().top;
							
							if (item.y < py) {
								index = i;
							} else {
								return false;
							}							
						});

					} else if (py < 0) {
						index = 0;
						//slider.css('background', 'red');						
					} else {
						index = items.length - 1;
					}
					
					//console.log("mousemove", py, '=', e.pageY, '-', slider.offset().top, 'index = ', index);
					setActive(index, false);
					
					return false;
				}).mouseup(function () {
					$(document).unbind('mousemove');
					$(document).unbind('selectstart');
					return false;
				});
				return false;
			});
			
		});
		
		$('#accordion').delegate( ".extra-need a", "click", function() {
			
			var $this = $(this),
				color = '#' + $this.attr('rel'),
				icon = $this.find('i');
			
			// Set selected/unselected and toggle icon-color
			$(this).toggleClass("selected");
			$this.hasClass("selected") ? icon.css('background',color) : icon.removeAttr('style');
			
			prepareUpdate();				
			return false;
		});
		
	}
	
	
	if (!$.browser.msie6) {
		// JSON data
		$.getJSON("/json/configurator-product-overview.json", render);
	} else {
		$('#intro-flashcontent-col').hide();
		$('#fallbackcontent').show();	
	}
		
		
	//$.uicornerfix('6px');
	DD_roundies.addRule('.handle', 4, true);
	DD_roundies.addRule('.slide-top', 4, true);
	DD_roundies.addRule('.slide-bottom', 4, true);
	
		
	var prepareUpdate = function() {
		
		var productFinder = $('#productFinder'),
			panels = $('.panel', productFinder),
			newSettings = [],
			category = {},
			needs = [];
		
		$.each(panels, function(i,panel){
		
			//console.log('highlight = ', $(panel).data().highlight);
		
			newSettings.push({
				application: $(panel).find('.application-type .selected').attr('data-application'),
				skinType : $(panel).find('.skin-type .selected').attr('data-skin'),
				category : $(panel).attr('data-category'),
				highlight : $(panel).data().highlight,
				enabled : $(panel).data().enabled,
				extraNeeds : function(){
					$(panel).find('.extra-need .selected').each(function(i) {
						needs.push($(this).attr('data-extra'));
					});
					return needs;
				}()
			});
		});

		// Update
		if (window.updateSelection) {
			//console.info('UPDATING now');
			updateSelection(newSettings);
			//console.info('UPDATE Finished');			
		}
		//console.log('newSetting following');
		//console.log('newSettings[0].highlight = ',newSettings[0].highlight);
		
	};
	
}); // ready
	
}(jQuery)); // closure