jQuery(document).ready(function(){
	$('#mainnavi > li').click(openSubnavi);

	$('#mainnavi > li.active').trigger('click');
	
	$('#servicenavi a').hover(function(){
									$('#sn_name').html( $(this).data('name') );
								},
							function(){$('#sn_name').html('');});
});
function openSubnavi() {
	var $this = $(this);
	if(!$this.is('.activated'))
	{
		var $sub = $this.children('ul');
		
		setActive($this);									// element in Hauptnavi aktiv setzen
		
		var $subnavholder = $('#subnavholder');
		
		var speed = 0;
		if($subnavholder.is('.up')) {
			speed = 500;
		}
		
		$subnavholder.stop().animate({top: '115px'}, speed, function(){
			$subnavholder.html('').removeClass('up');
			if($sub.length != 0) {
				var left = $this.position().left;
				var width = $this.outerWidth();
				var right = 908-left-width;
				
				var $listitems = $sub.find('li');
				var block = $('<ul>',{className: 'navigation'});
				var counter = 0;
				$.each($listitems, function(i, el){
					counter++;
					$(el).clone(false).appendTo($(block));
					if(counter == 6) {
						block.appendTo($subnavholder);
						block = $('<ul>',{className: 'navigation'});
						counter = 0;
					}
				});
				
				if (block) {
					block.appendTo($subnavholder);
				}
				
				if( (left+(width/2)) > (908/2))
				{
					$subnavholder.css({right:right+'px',left:''}).removeClass('left').addClass('right');
				}
				else
				{
					$subnavholder.css({left:left+'px', right: ''}).removeClass('right').addClass('left');
				}
				
				$subnavholder.animate({top: '13px'}, 500, function(){$subnavholder.addClass('up')});
			}
		});
	}
}

function setActive(el) {
	$('#mainnavi .activated').removeClass('activated').find('.pointup').remove();
	el.addClass('activated');
	el.has('ul').append($('<div>',{className:'pointup'}));

}