/**
 * HTML-navigation controls
 */
var html_nav = {
	current_page	: {
		id				: 0,
		colNavHeight	: 0,
		siblings		: [],
		children		: []
	},
	
	init: function() {

		this.current_page.id = $('#html-nav ul.breadcrumb .current:first').attr('index');
		this.current_page.siblings = $('#html-nav div.ColumnNav.Siblings a, .ColumnNav.Siblings .current');
		this.current_page.children = $('#html-nav div.ColumnNav.Children a');
		
		// create instance hook
		var inst = this;
		$('#html-nav div.ColumnNav').each(function(index, el){
			inst.current_page.colNavHeight = Math.max(inst.current_page.colNavHeight, $(el).height());
		});
		$('#html-nav div.ColumnContainer').height(this.current_page.colNavHeight);
		
		// MouseOver events for siblings
		this.current_page.siblings.each(function(index, el){
			$(el).bind('mouseover',function(e){	
				inst.showSiblingChildren($(el).attr('index'));
			})
		});
		
		// MouseOver events for children and their children and ...
		this.current_page.children.each(function(index, el){
			$(el).bind('mouseover',function(e){	
				inst.showChildsChildren($(el).attr('index'), $(el).attr('rel'));
			})
		});
		
		// MouseOut event for container
		$('#html-nav .ColumnContainer').bind('mouseout',function(e){
//			console.log(e.pageX + ':' + e.pageY);
			var jQthis = $(this);
			var pos = jQthis.position();
			var bounds = {
				left	: pos.left,
				right	: pos.left + jQthis.width(),
				top		: pos.top,
				bottom	: pos.top + jQthis.height()
			};
//			console.log(bounds);
			if( e.pageX < bounds.left || e.pageX > bounds.right || e.pageY < bounds.top || e.pageY > bounds.bottom ){
				inst.showSiblingChildren(inst.current_page.id);
//			}else{
//				console.log(e.relatedTarget);
			}
		});
		// show current
		inst.showSiblingChildren(inst.current_page.id);
	},
	
	showChildsChildren: function(index, rel){
		$("#html-nav div.ColumnNav.Children a").each(function(index, el){
			if($(el).attr('rel') <= rel){
				$(el).removeClass('hover');
			}
		});
		var t = $("#html-nav div.ColumnNav.Children a[index='"+index+"']:first");
		$(t).addClass('hover');
		var t_li = $(t[0]).parents('li:first');
		var t_ul = $(t[0]).parents('ul:first');
		var col = $("#html-nav div.ColumnNav.Children[index='"+index+"'] ul.children:first");
		$("#html-nav div.ColumnNav.Children").each(function(index, el){
			if($(el).attr('rel') < rel){
				$(el).addClass('hide');
			}
		});
		$("#html-nav div.ColumnNav.Children[index='"+index+"']:first").removeClass('hide');
		if(col.length) {
			var top 		= $(t_li[0]).position().top + $(t_ul[0]).position().top;
			var correction 	= Math.min($($('#html-nav div.ColumnContainer')[0]).height() - ( top + $(col[0]).height() ), 0);
			$(col[0]).css('top', (top+correction) + 'px');
//			console.log($($('#html-nav div.ColumnContainer')[0]).height()+'-('+top+'+'+$(col[0]).height()+')');
		}
	},
	
	showSiblingChildren: function(index){
		$("#html-nav div.ColumnNav.Siblings a, #html-nav div.ColumnNav.Children a").removeClass('hover');
		$("#html-nav div.ColumnNav.Siblings a[index='"+index+"']").addClass('hover');
		$("#html-nav div.ColumnNav.Children").addClass('hide');
		$("#html-nav div.ColumnNav.Children[index='"+index+"']").removeClass('hide');
	}
}
// kick-off
$(document).ready( function(){
	html_nav.init();
});