/****************************************
*
Bosch Productfinder JS
Kittelberger media | 2011-02 dsp 
*
*****************************************/

( function( $ ) 
{
	/**
	 * 
	 */
    var Prodfinder = function( element, options )
    {
    	/**
    	 * 	The element this productfinder gets attached to
    	 */
    	var __element = element;
				
    	
    	/**
    	 * 	The options for the productfinder
    	 */
    	var __options = $.extend( { 
			loadMethod: 		'sync',
			loadData: 			[],
			arrowUrlDark: 		'arrowDark',
			arrowUrlLight: 		'arrowLight',
			initClick:			false			
		}, options || {} );
    	
		
		
		
		
			/***********************************************
				--- > Default Vars
			***********************************************/
			var __createPfContent = '';
			
						
			
			var __addPfEvents = function () {
				// START e1 
				__element.find('h5').bind ('mouseover', function () {
					$(this).addClass('hover');
				});
				__element.find('h5').bind ('mouseout', function () {
					$(this).removeClass('hover');
				});
				__element.find('h5').bind ('click', function () {
					$(this).toggleClass('active');
					$(this).next('ul.first').slideToggle(100);
				});
				// END e1
				
				// START e2 
					__element.find('ul li a.arrow').bind ('mouseenter', function () {
						if ($(this).closest('li').hasClass('active')) {return};
						
						
						$(this).closest('li').addClass('hover');
						
						// change the arrow
						if ( $(this).closest('ul').hasClass('dark')) {
							$(this).find('div.bpfa').addClass('arrowLight');
							$(this).find('div.bpfa').removeClass('arrowDark');
						} else {
							$(this).find('div.bpfa').addClass('arrowDark');	
							$(this).find('div.bpfa').removeClass('arrowLight');				
						};
						
					});
					__element.find('ul li a.arrow').bind ('mouseleave', function () {
						if ($(this).closest('li').hasClass('active')) {return};
						$(this).closest('li').removeClass('hover');
						// change the arrow
						if ( $(this).closest('ul').hasClass('dark')) {
							$(this).find('div.bpfa').addClass('arrowDark');
						} else {
							$(this).find('div.bpfa').addClass('arrowLight');
							$(this).find('div.bpfa').removeClass('arrowDark');					
						};
						
					});
				// END e2
				
				// START e3 
					__element.find('ul li').bind ('mouseenter', function () {
						
						if ($(this).hasClass('active')) {return};
						
						window.clearTimeout( $(this).closest('li').data('delayOut') );
						
						window.clearTimeout( __element.data('delayClose') );
						
						
						$(this).find('> span.brdTop').addClass('visible');
						$(this).find('> ul').addClass('visible');
					});					
					
					__element.find('ul li').bind ('mouseleave', function () {
						
						if ($(this).hasClass('active')) {return};
						var elm = $(this);
						
						
						var delayOut = window.setTimeout(function () {
							elm.find('> span.brdTop').removeClass('visible');
							elm.find('> ul').removeClass('visible');
						}, 200);
						elm.data('delayOut', delayOut);
					});
					
					
					__element.bind('mouseleave', function () {
						var elm = $(this);
						var delayClose = window.setTimeout(function () {
							elm.find('h5').removeClass('active');
							elm.find('h5').next('ul.first').slideUp(100);
						}, 400);
						elm.data( 'delayClose', delayClose );
					});
			
				// END e3	
				
				// START e4
				__element.find('ul li').each (function () {
					if ($(this).find('> ul').length > 0) {
						$(this).closest('ul').addClass('sub');		
					};									  
				});
				// END e4	
				
				/*
				__element.find('ul').each (function () {
					$(this).addClass('light');	
				});
				__element.find('ul:odd').each (function () {
					$(this).removeClass('light');
					$(this).addClass('dark');	
				});
				*/
			
				/* if pFinder should bei initialized via click */
				if(__options.initClick) {
					__element.find('h5').toggleClass('active');
					__element.find('h5').next('ul.first').slideToggle(100);
				}							
							
				
			};	
			
			/***********************************************
				--- > Build ProductfinderContent
			***********************************************/
			
			var __buildNaviLevel = function ( data, level )
			{
				var html = '';
				html += '		<ul class="' + ( level === 0 ? 'first' : 'child' ) + ( level%2 ? ' dark' : ' light' ) + '">';
				html += '			<span class="brdTop">&nbsp;</span>';
				for ( var i=0; i < data.length; i++ )
				{
					
					html += '	<li><a href="' + data[i].pfUrl + '" target="' + data[i].pfTarget + '" class="arrow"><span class="brd"><span class="brdRight"><div class="bpfa '+ ( level%2 ? __options.arrowUrlDark : __options.arrowUrlLight ) +'"></div><span class="foLink">' + data[i].pfLabel + '</span></span></span><span class="brdEnd"><span class="brdREnd"></span></span></a>';
					if ( data[i].pfChilds.length )
					{
						html += __buildNaviLevel( data[i].pfChilds, level+1 );	
					}
					html += '</li>';
				}
				html += '</ul>';
				return html;				
			}
			
			
			var _ajaxHandle_Error = function () {
				var html = '';
				html += '<p class="error">Error loading data</p>';
				$(html).appendTo(__element);
			}
			
			var __buildProdFinderContent = function () {
				var html = '';
				
				switch (__options.loadMethod) {
					
					
					case "async":
					
					
						$.ajax({
							dataType: "json",
							type: "GET",
							url: __options.loadData,
							success: function(jsonData) {
								html += __buildNaviLevel( jsonData, 0);
								$(html).appendTo(__element);
								__addPfEvents();
							},
							error: function(XMLHttpRequest, textStatus, errorThrown) {
								_ajaxHandle_Error(XMLHttpRequest, textStatus, errorThrown);
							}
						 });
						
						break;
					
					
					
				  	case "static":
					
						__addPfEvents(); //add click/hover/out events
						break;
				 	
					
					
					default:				
					
						html += __buildNaviLevel( __options.loadData, 0);
						$(html).appendTo(__element);	
						__addPfEvents(); //add click/hover/out events
						break;
				}
			
									
			};
			
			
			
			
			
			
			
		this.init = function() {
			__buildProdFinderContent(); //build up the DOM
    	};
		
			
		this.init();
	}
		
				
		
	
    $.fn.pFinder = function ( options )  {		
		return this.each( function()  {
			var element = $( this );
			if ( element.data( 'pFinder' ) ) return;
			var finder = new Prodfinder( element, options );
			element.data( 'pFinder', finder );
		});  
    };
		
})( jQuery );