(function()
{
	$(function()
	{
		/**
		 * Rotuines to transform the navigation
		 */
		var $categories = $('>li', 'ul#MainNavigationCategories')
							.css('visibility', 'hidden');
		var $table = $('<table id="MainNavigationCategories"><thead><tr/></thead><tbody><tr><td colspan="'+$categories.size()+'"/></tr></tbody></table>');
		$categories.
			each(function(i)
			{
				var imageSrc = 'static/racom/layout/shared/components/navigation/images/'+$(this).attr('class')+'.jpg';
				$('>thead>tr:first-child', $table).
					append($('<th/>').
						append($('>span:first-child', this).addClass('row'+i)));
				var $subCategories = $('ul.mainnavigation-subcategories>li', this);
				var half = Math.ceil($subCategories.size()/2);
				$subCategories.
					each(function(j)
					{
						$('>a',this)
							.appendTo($('>tbody>tr:first-child>td:first-child', $table))
							.wrap('<li />');
						if ( 3 < $subCategories.size() && 1+j === half ) {
							$('>tbody>tr:first-child>td:first-child>li', $table)
								.wrapAll('<ul class="ui-list-type-arrow" />');
						}
						if ( 1+j === $subCategories.size() ) {
							if ( 1 > $('>tbody>tr:first-child>td:first-child>ul', $table).size() ) {
								$('>tbody>tr:first-child>td:first-child', $table)
									.append('<span/>');
							}
							$('>tbody>tr:first-child>td:first-child>li', $table)
								.wrapAll('<ul class="ui-list-type-arrow" />');
							$('>tbody>tr:first-child>td:first-child', $table)
								.append('<img style="width:18em; height:5em;" src="'+imageSrc+'" alt="rechtsanwaelte" />');
						}
					});
				$('>tbody>tr:first-child>td:first-child>ul,>tbody>tr:first-child>td:first-child>span,>tbody>tr:first-child>td:first-child>img', $table)
					.wrapAll('<tr class="row'+i+'" />')
					.wrap('<td/>');
			});
			$('>tbody>tr:first-child>td:first-child img', $table)
				.parent()
				.addClass('image');
			$('>tbody>tr:first-child>td:first-child>tr', $table).
				wrapAll('<div/>').
				wrapAll('<table/>');
		$table.insertAfter('ul#MainNavigationCategories');
		$('ul#MainNavigationCategories').remove();

		// setting width's
		var fontSize = $('body').css('font-size').match(/^\d+/i);
		var width = $('table', $table).width();
		$table.width((width/fontSize)+'em');
		$('table', $table).width((width/fontSize)+'em');

		// $table.css('width', width+'em');
		// $table.width(width+"em");
		// $('table', $table).css('width', width+'em');

		// Dropdown - Effekt
		$('table tr', $table).hide();
		$('table', $table).hide();
		$('>thead>tr>th', $table)
			.mouseover(function()
			{
				$('table tr', $table).css('display', 'none');
				$('table tr.'+$('>span', this).attr('class'), $table)
					.show()
					.addClass('active');
				$('table', $table).show();
				$(this)
					.addClass('active')
					.siblings()
						.removeClass('active');
			})
			.mouseout(function()
			{
				$('>span', this)
					.removeClass('active');
			});
		$table.mouseenter(function()
		{
			$(this).addClass('active');
		});
		$table.mouseleave(function()
		{
			var self = this;
			$(self)
				.removeClass('active');
			setTimeout(function()
			{
				if ( $(self).hasClass('active') ) {
					return;
				}
				$('table', self).fadeOut('slow', function() {
					$('tr', $(this)).hide();
				});
				$('>thead>tr>th', $table)
					.removeClass('active');
			}, 2000);
		});
	});
})();