/**
 *  @author T. Keur <tom@phyxsius.nl>
 */
jQuery().ready(function(){
	// Standaard het groene balkje op ontzichtbaar zetten.
    var visibleState = false;
     
	// Als we er met de muis overheen gaan moet het groene balkje zichtbaar worden.
	$('#topnavigation a').mouseover(function(){ 
        visibleState = true;

        $('#topnavgreen').css("width",$(this).width());
  		
  		// Eerst de positie van de container ophalen.
		var container = $('#container').offset(); 		   
        var position = $(this).offset();
        $('#topnavgreen').css("margin-left",position.left-container.left);
	});
	
	// Als de muis van het item afgaat moet  het item weer ontzichtbaar worden.
	$('#topnavigation a').mouseout(function(){ 
        visibleState = false;
        toggleVisability();
	});
	
	function toggleVisability() {
        $('#topnavgreen').css("visibility",(visibleState ? "visible" : "hidden"));	
		$('#topnavigation a').each(function(index){
			if($(this).attr('class') == 'selected') {
		        var visibleState = true;
		        $('#topnavgreen').css("visibility",(visibleState ? "visible" : "hidden"));
		        $('#topnavgreen').css("width",$(this).width());		
				var container = $('#container').offset(); 		   
		        var position = $(this).offset();
		        $('#topnavgreen').css("margin-left",position.left-container.left);
			}
			
		});	        
	}
	
	toggleVisability();
});