$(document).ready(function(){
  TopNavigation.init();
  MainNavigation.init();
  BreadcrumbNavigation();
});

var navTimer;
var delayTimer;

var TopNavigation = {
	
	// ids and classnames
  topNavElement: '#topNav',
  serviceNavElement: '#serviceNav',
  languagesElement: '#languageNav',
  languageListClass: 'dropdown',
  languageAnchor: '#languageAnchor',
  currentLanguageElement: '#currentLanguage',
  
  init: function() {
  	// stop if TopNav is not present
  	if (! document.getElementById(TopNavigation.topNavElement.substring(1)) ) return;
  	
  	// put the menu in the right place
    TopNavigation.positionLanguageMenu();
  	
  	// add the classes that make the languageNav look like a dropdown menu
    $(TopNavigation.languagesElement).addClass(TopNavigation.languageListClass);
    $(TopNavigation.topNavElement).addClass(TopNavigation.languageListClass);
    
    // hide the menu
    $(TopNavigation.currentLanguageElement + ' ~ li').hide();
    
    //add the onclick handler to open the menu
    $(TopNavigation.currentLanguageElement + ', ' + TopNavigation.languageAnchor).click(TopNavigation.toggleLanguageMenu);
    
    //add a focus and blur handlders to make the focussing visible
    $(TopNavigation.languageAnchor).focus(languageFocus);
    $(TopNavigation.languageAnchor).blur(languageBlur);
    $(TopNavigation.currentLanguageElement).hover(languageFocus, languageBlur);
    
    function languageFocus() {
      $('#currentLanguage').css({
        backgroundColor: '#DDDDDB',
        backgroundPosition: 'right -1600px'
      }).children('span').css('textDecoration', 'underline');
    }
    
    function languageBlur () {
     $('#currentLanguage').css({
        backgroundColor: 'transparent',
        backgroundPosition: 'right -1500px'
      }).children('span').css('textDecoration', 'none');
    }
    
    // add a blur handler to the last element in the list that hides the menu
    $(TopNavigation.languagesElement + ' ul a:last').blur(function(e) {
	    $(TopNavigation.currentLanguageElement + ' ~ li').hide();
	    $(TopNavigation.languagesElement+' ul').removeClass('open');
	    e.stopPropagation();
    });
  },
  
  positionLanguageMenu: function() {  	
  	// the width of '1em'
  	var oneEmString = $(TopNavigation.languageAnchor).css('width');
  	var oneEm = oneEmString.substring(0, oneEmString.length-2);
  	//var oneEm = $(TopNavigation.languageAnchor).width();
  	
  	// the width of the Service Navigation
  	var serviceNavWidth = MainNavigation.calculateListWidth($(TopNavigation.serviceNavElement));
  	
  	// the width of the Service Navigation in 'em'
  	var emWidth = parseInt(serviceNavWidth/oneEm, 10);

  	// the width of the widest language <li> to set the languagesElement to that width
  	/******* we probably won't be using it ********
  	var widestPixels = 0;
    $(TopNavigation.languagesElement + ' > ul li').each(function(){
       if ( $(this).width() > widestPixels ) widestPixels = $(this).width(); 
    });
		var widestEm = parseInt(widestPixels/oneEm);
		
		$(TopNavigation.languagesElement).css('width', widestEm + 'em');
		***************/
  	
  	$(TopNavigation.languagesElement).css(lang['right'], emWidth + 'em').css('visibility', 'visible');
  },
  
  toggleLanguageMenu: function(e) {
  	// prevent following the link and stop the event propagation
  	e.preventDefault();
  	e.stopPropagation();
  	
  	// if the menu is open
  	if ( $(TopNavigation.languagesElement+' ul').hasClass('open') ) {
    	$(TopNavigation.currentLanguageElement + ' ~ li').hide();
   		$(TopNavigation.languagesElement+' ul').removeClass('open');
   	// if the menu is closed
 		} else {
 			$(TopNavigation.currentLanguageElement + ' ~ li').show();
   		$(TopNavigation.languagesElement+' ul').addClass('open');
   		
   		// click handler on the body to close the menu
    	$('body').click(function(event) {
    		$(TopNavigation.currentLanguageElement + ' ~ li').hide();
   			$(TopNavigation.languagesElement+' ul').removeClass('open');
   			$(this).unbind('click');
    	});
    }
  }
};

var MainNavigation = {
  
  mainNavElement: '#mainNav',
  secondLevelElement: '.secondLevelList',
  firstLevelElement: '#firstLevelList',
  
  actualElement: new Object(),
  mainNavWidth: 0,
  
  init: function() {
  	// stop if MainNav is not present
  	if (! document.getElementById(MainNavigation.mainNavElement.substring(1)) ) return;
  	
  	MainNavigation.mainNavWidth = $(MainNavigation.mainNavElement).width();
  	MainNavigation.actualElement = $(MainNavigation.firstLevelElement + '>li.open');
  	
  	var firstLevelElements = $(MainNavigation.firstLevelElement + '>li');
  	  
  	firstLevelElements.each(function() {
  	  MainNavigation.updateSecondLevelWidth($(this));
  	});
  	
  	MainNavigation.actualElement.addClass('open');
  	
	  firstLevelElements.hover(
	    function() {
	      clearTimeout(navTimer);
	      MainNavigation.actualElement = $(this);
        delayTimer = setTimeout(MainNavigation.showSecondLevel, 100);
	    },
	    
	    function() {
	      clearTimeout(delayTimer);
        navTimer = setTimeout(MainNavigation.hideSecondLevel, 2000);
	    }
	  );
  },
  
  showSecondLevel: function() {
    MainNavigation.hideSecondLevel();
    $(MainNavigation.firstLevelElement + '>li.open').removeClass('open').addClass('opened');
    clearTimeout(navTimer);
    MainNavigation.actualElement.addClass('over');
    
    if (MainNavigation.actualElement.hasClass('first')) {
      MainNavigation.actualElement.addClass('firstover');
    }
  },
  
  hideSecondLevel: function() {
    $(MainNavigation.firstLevelElement + '>li').removeClass('over firstover');
    $(MainNavigation.firstLevelElement + '>li.opened').removeClass('opened').addClass('open');
  },
  
  updateSecondLevelWidth: function (element) {
    element.addClass('open');
    element.get(0).secondLevelListWidth = MainNavigation.calculateListWidth(element);

	  element.removeClass('open');
	  // do something if we are too long
	  if ( element.get(0).secondLevelListWidth > MainNavigation.mainNavWidth ) { 
	    MainNavigation.secondLevelOverflow(element);
	  }
  },
  
  secondLevelOverflow: function(element) {
    var lastLi = element.find('ul li:last');
    var moreLi = element.find('ul li.more');
    
    if ( moreLi.length )
    { // we already have the "more" list
      var moreUl = moreLi.find('ul');
      moreLi.prev('li').prependTo(moreUl);
      moreUl.hide();
    }
    else 
    { // create the "more" list
      $('a', lastLi).wrap('<ul><li></li></ul>');
      lastLi.addClass('more');
      lastLi.prepend('<a href="#">'+lang['more']+'</a>');
      $('ul', lastLi).hide();
      lastLi.children('a').click(function() {
        lastLi.find('ul').toggle();
        return false;
      });
    }
    
    // let's see if we are not too long anymore
    MainNavigation.updateSecondLevelWidth(element);
  },
  
  calculateListWidth: function(element) {
    var listWidth = 0;
    element.find('ul:first > li').each(function(){
      listWidth += $(this).width();
    });
    return listWidth;
  }
};

function BreadcrumbNavigation() {
  if (!$('#breadcrumbs').length) return;
  
  var bc = $('#breadcrumbs');
  var links = bc.find('a');
  links.focus(function() {
	bc.removeClass('hidden');
  });
  links.blur(function() {
	bc.addClass('hidden');
  });
  
}