var image_path = "/templates/asmc/image/background/";
var max_width = 980;
var ul_width = 205;
var spacing = 12;
var margin = 21;
var subcolor = '';

function getSubname(object) {
	return "[data-navi=" + object.attr('data-navi') + "]"	;
}

function show2Layer (subname, categoriename) {
	
	// 3. Ebene bei Wechsel ausblenden, falls noch angezeigt wird
	$("div.categories").css('display', 'none');
	
	// Kategorie Farbe speichern
	subcolor = $('.' + categoriename + ' a').css("color")
	
	// Hover Effekt - Schrift				
	$("ul.main-categories li").removeClass('main-categories-hover');
	$("ul.main-categories li" + subname).addClass('main-categories-hover');
	
	// Hover Effekt Hintergrund
	$("ul.main-categories li").css('background-image' , 'none');
	$("ul.main-categories li" + subname).css('background-image', 'url(' + image_path + categoriename + '.png)');
	
	// Aktuelle Unter Kategorie ausblenden
	$("ul.sub-categories").css('display', 'none');
	// Farbe zur Kategorie anpassen
	$("ul.sub-categories").css('background-color', subcolor);
	$("ul.sub-categories").css('border-color', subcolor);
	$(".categories").css('border-color', subcolor);
	
	// Neue Kategorie einblenden
	$("ul.sub-categories" + subname).css('display', 'inline-block');
}

function layer2Hover (subname, hover) {
	
	// Hover Effekt
	$(".sub-categories-hover a.head").css('color', '#fff');
	$("ul.sub-categories li").css('border-left', 'none').removeClass('sub-categories-hover');
	$(hover).addClass('sub-categories-hover');
	
	// Kategorie Farbe	
	$(".sub-categories-hover").css('border-left', '1px solid '+ subcolor);
	$(".sub-categories-hover a.head").css('color', subcolor);
	
}

function show3Layer(subname, hover) {

	// Div mit Kategorien ausrichten falls kein Platz mehr
	// Position den Navigationspunkt ermitteln
	var position_subnav = $(".sub-categories-hover").position().left;
	// Anzahl Spalten ermitteln
	var number_of_ul = $(hover).children("div").children("ul").length;
	// Position errechnen
	var margin_left = max_width - (position_subnav + (number_of_ul * ul_width) + spacing + margin);
	// CSS Wert setzen und Div nach links verschieben
	if(margin_left > -margin) {
		margin_left = -margin;
	}
	$("div.categories" + subname).css('margin-left', margin_left);
	
	$("div.categories").css('display', 'none');
	$("div.categories" + subname).fadeIn(400);
	
	return hover;
}

function movePosition2Layer(subname, position_left) {
	
	var li_sum_width = 0;

	$("ul.sub-categories" + subname + " > li").each(function(index) {
		li_sum_width = li_sum_width + $(this).width();
	});

	$("ul.sub-categories" + subname).css("padding-left", position_left);

	
}


// Click Events
function initializeNavigation() {

	var locked = true;
	var timeoutID3in = 0;
	var timeoutID3out = 0;
	var timeout = 100;

	
	// Click 1. Ebene
	$("ul.main-categories li").click(function() {
		window.location.href =  $(this).attr('data-href');
		return false;
	});
	
	// Mouseover 1. Ebene
	$("ul.main-categories li").mouseenter(function() {
		if(locked == true && $(this).css('background-image') == 'none') {
			var subname = getSubname($(this));
			var categoriename = $(this).attr('class');
			show2Layer(subname, categoriename);
		} else {
			locked = true;
		}
	});

	
	// Mouseover 2. Ebene
	$("ul.sub-categories li").mouseenter(function() {
		window.clearTimeout(timeoutID3out);
		var subname = getSubname($(this));
		var hover = this;
		// Element wird bereits angezeigt, dann nichts machen
		if( $("div.categories" + subname).css('display') == 'none' ) {
			// Hover Effekt ohne Verzoegerung
			layer2Hover(subname, hover);
			// Einblende Effekt mit Verzoegerung
			timeoutID3in = window.setTimeout(function() {				
				active = show3Layer(subname, hover);
				hover = '';
			}, timeout);
		}
	});
	
	
	// Mouseout 2. Ebene
	$("ul.sub-categories li").mouseleave(function(){
		// 3. Ebene - Einblenden unterbrechen
		window.clearTimeout(timeoutID3in);
		var subname = getSubname($(this));
		$("div.categories" + subname).css('display', 'none');
	});

	var selected_main_category = $("ul.main-categories li[data-selected=true]");
	// Kategorien sind vorausgewählt
	if (selected_main_category.size() > 0) {
		// Kategorie Vorauswahl 1. Ebene
		selected_main_category.each(function() {
			show2Layer(getSubname($(this)), $(this).attr('class'));
		});

		// Kategorie Vorauswahl 2. Ebene
		$("ul.sub-categories li[data-selected=true]").each(function() {
			$(this).addClass('sub-categories-hover');
			$(this).css('border-left', '1px solid '+ subcolor);
			$(this).find('a.head').css('color', subcolor);
		});
	} else {
		// Wenn nichts ausgewählt, Bekleidung anzeigen
		show2Layer('[data-navi=Nav1]', 'clothing');
	}
}