/*
	tabs

	file				: tabs.js
	parameters	: none
	use					: tabbed navigation
	comments		: based on jQuery

								behaviours :
								1. tabbed menu (no submenus)
								2. menu with one-level submenu
								3. tabbed content

								1. tabbed menu (no submenus)
									- englobing div element with id="menu"
									- ol element
									- li elements with zero or one has class="menuCurrent"
									- li elements with a element
									- (li elements with one having class="menuHover"; automatically affected)

									example :
										<div id="menu"
											<ol>
												<li><a href="url">Menu 1</a></li>
												<li><a href="url">Menu 2</a></li>
												<li><a href="url">Menu 3</a></li>
											</ol>
										</div>

								2. menu with one-level submenu
									- englobing div element with id="smenu"
									- ol element
									- ol li elements with zero or one has class="menuCurrent"
									- ol li elements with ol elements
									- (ol li elements with one having class="menuHover"; automatically affected)
									- ol li ol elements with li elements containing a element
									- ol li ol li elements with zero or one has class="smenuCurrent"
									- (ol li ol li elements with one having class="smenuHover"; automatically affected)

									example :
										<div id="smenu">
											<ol>
												<li>
													Menu 1

													<ol>
														<li><a href="url">Submenu 1</a></li>
														<li><a href="url">Submenu 2</a></li>
													</ol>
												</li>
												
												<li>
													Menu 2

													<ol>
														<li><a href="url">Submenu 1</a></li>
														<li><a href="url">Submenu 2</a></li>
														<li><a href="url">Submenu 3</a></li>
													</ol>
												</li>

												<li>
													Menu 3

													<ol>
														<li><a href="url">Submenu 1</a></li>
														<li><a href="url">Submenu 2</a></li>
													</ol>
												</li>
											</ol>
										</div>

								3. tabbed content
									- englobing div element with id="tabs"
									- ol element
									- li elements with a elements having href="#tab_<i>" (<i> from 1 to n)
									- (li elements with one having class="tabCurrent"; automatically affected)
									- div elements with class="tabContent" and id="tab_<i>">

									example :
										<div id="tabs"
											<ol>
												<li><a href="#tab_1">Page 1</a></li>
												<li><a href="#tab_2">Page 2</a></li>
												<li><a href="#tab_3">Page 3</a></li>
											</ol>

											<div class="tabContent" id="tab_1">
												<h2>Page 1</h2>
												<p>Text...</p>
											</div>
											<div class="tabContent" id="tab_2">
												<h2>Page 2</h2>
												<p>Text...</p>
											</div>
											<div class="tabContent" id="tab_3">
												<h2>Page 3</h2>
												<p>Text...</p>
											</div>
										</div>
*/


// inits with jQuery ready event binding
$(document).ready(function(){
	// 1. tabbed menu (no submenus)
	// hover
	// mouseover : li is highlighted
	// mouseout : li returns to previous state
	$("#menu ol a").hoverIntent(function(){
		$(this).parent("li").addClass("menuHover");
		return(false);
	},function(){
		$(this).parent("li").removeClass("menuHover");
		return(false);
	}); 


	// 2. menu with one-level submenu
	// hides all submenus
	$("#smenu > ol > li > ol").hide();

	// menu hover
	// mouseover : shows child ol 
	// mouseout : hide child ol
	$("#smenu > ol > li").hoverIntent(function(){
		$(this).addClass("menuHover");
		$(this).children("ol").show();
		return(false);
	},function(){
		$(this).removeClass("menuHover");
		$(this).children("ol").hide();
		return(false);
	});
	
	// submenu hover
	// mouseover : li is highlighted
	// mouseout : li returns to previous state
	$("#smenu > ol > li > ol > li > a").hoverIntent(function(){
		$(this).parent("li").addClass("smenuHover");
		return(false);
	},function(){
		$(this).parent("li").removeClass("smenuHover");
		return(false);
	});


	// 3. tabbed content
	// 3.1. initialization
	// hides all but first tab
	$("#tabs .tabContent").not(":first").hide();
	$("#tabs ol li:first").addClass("tabCurrent");

	// all tabContent div of the same height; maxHeight = 400
	var currentTallest = 0;
	var maxHeight = 400;
	$("#tabs .tabContent").each(function(){
		if ($(this).height() > currentTallest) {
			currentTallest = $(this).height();
		}
	});
	if (currentTallest > maxHeight)
		currentTallest = maxHeight;
	$("#tabs .tabContent").css({'height': currentTallest});

	// 3.2. hover
	// mouseover : corresponding div is displayed with no delay (hoverIntent has already one)
	// mouseout : current div stays visible
	$("#tabs ol a").hoverIntent(function(){
		$("#tabs .tabContent").hide();
		$(this.hash).show();
		$(this).parents("ol").children("li").removeClass("tabCurrent");
		$(this).parent("li").addClass("tabCurrent");
		return(false);
	},function(){
		return(false);
	});
});