$(function(){
	primaryNavigation.init();
	secondaryNavigation.init();
});
primaryNavigation = function(){
	var self = this;
	function init(){
		self.selectedNav = $( $('#SelectedNavId').html() );
		self.navItems  	 = $('.top-navigation ul li');
		render();
		events();
	}
	function render(){
		self.selectedNav.next('li').addClass('hide-pipe');
		self.navItems.append('<div class="pipe pipe-left"></div>');
		self.navItems.eq(0).remove('.pipe-left');
		self.navItems.each(function(i){
			if(self.navItems.eq(i).hasClass('active')){
				self.activeNavIndex = i;
			}
		});
	}
	function events(){
		self.navItems.each(function(i){
			self.navItems.eq(i).hover(
				function(){ self.hoverNavIndex = i; if ($(this).hasClass('active') === false ) { hoverIn($(this)); } },
				function(){ if ($(this).hasClass('active') === false ) { hoverOut($(this)); } }
			);
		});
	}
	function hoverIn($e){
		$e.addClass('hover');
		$e.addClass('hide-pipe');
		$e.next('li').addClass('hide-pipe');
	}
	function hoverOut($e){
		$e.removeClass('hover');
		$e.next('li').removeClass('hide-pipe');
		//Check if nav item is adjacent to active item and don't show a pipe
		if (self.activeNavIndex !== (self.hoverNavIndex - 1)){
	 		$e.removeClass('hide-pipe');
		}
	}
	return { init:init }
}();

secondaryNavigation = function(){
	var self = this;
	function init(){
		self.navItems = $('.left-navigation ul li');
		render();
		events();
	}
	function render(){
		self.navItems.append('<div class="block"></div>');
	}
	function events(){
		self.navItems.hover(
			function(){ $(this).addClass('hover'); },
			function(){ $(this).removeClass('hover'); }
		);
	}
	return { init:init }
}();