/**
 * Unobtrusive ocado drop down navigation solution using jQ.
 * 
 * Usage: $('ol#subNavigation').dropDown();
 * 
 * @author rob.lloyd
 */

		
//variables	
var maxHeight = 0;
var menuHeight = 0
var navIndex = 0;
var navCols = 0;
var anchorWidth = 0;
var pos = 0;
var posRounded = 0;
var subNavWidth = 0;
var ddRightWidth = 0;
var diff = 0;	
var ddCols;
var dd1ColWidth = 375;
var dd2ColWidth = 575;
var dd3ColWidth = 775;
var thisPosition;


jQ(document).ready(function() {
	jQ('#subNavigation').addClass('subNavJS');
    setHeight('div.dropdown');
    showJsNav();
	//jQ('.dropdown:first').css('top','25px')
});


//Set height of each dropdown
function setHeight(dropdown) {
	//Loop all the dropdowns
    jQ(dropdown).each(function(el) {      
		var navCol = jQ('li.navCol',this);
		var ddMenu = jQ('ol.ddMenu',this);
		//Store the height of the dropDown level 1 menu
		menuHeight = ddMenu.outerHeight();	
		//Store the tallest of the drop down level 2 ol's
		navCol.each(
			function(){
				if(jQ(this).outerHeight() > maxHeight) {
		            maxHeight = jQ(this).outerHeight();
		        }
			}
		)
		//Check whether level 1 height is greater than level 2 height
		if(menuHeight > maxHeight){
			jQ(this).css('height',menuHeight);
		}
		else{
			jQ(this).css('height',maxHeight);	
		}		
			
		//Reset vars for next loop
		maxHeight = 0;
		menuHeight = 0;
    });
	
}

function showJsNav(){
	rightJsNav = jQ('#subNavigation li.rightDD ol.jsNav');
	ddMenuLi = jQ('#subNavigation ol.ddMenu li')	
	rightDD = jQ('#subNavigation li.rightDD');
	rightDDMenuLi = jQ('#subNavigation li.rightDD .ddMenu li');
	dropDown = jQ('#subNavigation .dropdown');
	
	/* Don't like this too much
	jQ('#subNavigation li.subNav').hoverIntent({
		timeout: 200,
		over: function(){jQ('div.dropdown',this).css('top','25px');},
		out: function(){jQ('div.dropdown',this).css('top','-10000px');},
	});
	*/
	
	rightDD.each(
		function(){			
			pos = jQ(this).position();  
			posRounded = Math.floor(pos.left);
			subNavWidth = jQ(this).outerWidth();
			ddRightWidth = jQ('div.dropdown',this).outerWidth();
			diff = ddRightWidth - subNavWidth;
			jQ('div.dropdown',this).css({ "left": (posRounded - diff)});		
		}	
	);			
		
	rightJsNav.each(
		function(){
			ddCols = jQ('li.navCol', this).length;
			if((ddCols) == 1){
				jQ(this).addClass('col1Width');
			}
			if((ddCols) == 2){
				jQ(this).addClass('col2Width');
			}
			if((ddCols) == 3){
				jQ(this).addClass('col3Width');
			}					
		}
	)	
	
	ddMenuLi.hover(
		function(){
			highlightH5 = jQ('ol.ddMenu h5.highlightH5');
			showDD = jQ('ol.showDD');
			//Get index of li being hovered on
			navIndex = jQ(this).index();
			//Set context for index matching
			ddLoc = jQ(this).parent().siblings();
			jsNav = jQ('ol.jsNav', ddLoc);
			//Remove any outstanding showDD classes
			jQ(showDD).removeClass('showDD');
			//Match Index of .jsNav to show with h5 hovered
			navMatch = jQ('ol.jsNav', ddLoc).eq(navIndex);
			navMatch.addClass('showDD');
			//Remove highlightH5 class
			jQ(highlightH5).removeClass('highlightH5');
			//Add highlightH5 class
			jQ('h5',this).addClass('highlightH5');		
			//Fix for webkit browsers leaving ddBox wide
			jQ(this).parent().siblings().show();	 
		}	
	);
	
	rightDDMenuLi.hover(
		function(){	
			ddBoxWidth = jQ(this).parent().siblings().outerWidth();
			var col1 = jQ(navMatch).hasClass('col1Width');
			var col2 = jQ(navMatch).hasClass('col2Width');
			var col3 = jQ(navMatch).hasClass('col3Width');
			if(col1){
				jQ(this).parents('.dropdown').css('margin-left', "-188px");
			}
			if(col2){
				jQ(this).parents('.dropdown').css('margin-left', "-363px" );
			}
			if(col3){
				jQ(this).parents('.dropdown').css('margin-left', "538px");
			}					
		}
	);
	
	dropDown.mouseleave(
		function(){
			//to reset the margin otherwise it jumps over to the left
			jQ(this).css('margin-left', "0");
			//Fix for webkit browsers leaving ddBox wide
			jQ('.ddBox').hide();
		}
	);
}