$(document).ready(function(){
	positionBox();
	//on désactive les liens utile pour le non js
	$("a.boxes").click(function(event){event.preventDefault();});
	$("a.thumb").click(function(event){
		event.preventDefault();
		openPict(this);
	});
	//listeners sur le menu
   	$("li").bind("mouseover", function(){highlight(this, 'in');});
   	$("li").bind("mouseout", function(){highlight(this, 'out');});
   	$("li").bind("click", function(){highlightStay(this);});
   	
   	$("li#Inge").bind("click", function(){
   		closeContent();
   		$('#IngeContent').css({ display: "block"});});
   	$("li#Kontakt").bind("click", function(){
   		closeContent();
   		$('#KontaktContent').css({ display: "block"});});
   	$("li#Live").bind("click", function(){
   		closeContent();
   		$('#LiveContent').css({ display: "block"});});
   	$("li#Links").bind("click", function(){
   		closeContent();
   		$('#LinksContent').css({ display: "block"});
   		});
   	//listeners sur les box
   	$("div.smallBox").bind("mouseover", function(){highlight(this, 'in');});
   	$("div.smallBox").bind("mouseout", function(){highlight(this, 'out');});
	$("div.smallBox").bind("click", function(){openContent(this);});
	$("a.close").bind("click", function(){closeContent();});
	$("li#list").bind("click", function(){listBox(this);});
	$("li#Lukk").bind("click", function(){
   		closeContent();
   		$('#LukkContent').css({ display: "block"});});
});

positionBox = function(){
	//on position les divs de manière aléatoire 
	var windowHeight = window.innerHeight || document.documentElement.clientHeight || 0;
	var windowWidth = window.innerWidth || document.documentElement.clientWidth || 0;
	$('div.smallBox').css({ position: "absolute"});
	$('div.smallBox').each(function(i){
		//recuperer la hauteur de la box, pour pas depasser
		var heightMax = windowHeight - $(this).height();
		var heightMin = 100;
		var widthMax = windowWidth - $(this).width();
		var widthMin = 1;
		var topPosition = Math.floor(Math.random() * (heightMax - heightMin + 1) + heightMin);
		var leftPosition = Math.floor(Math.random() * (widthMax - widthMin + 1) + widthMin);
		$(this).css({top: topPosition, left: leftPosition}); 
		$(this).css('cursor', 'pointer');
	});
}

listBox = function(e){
	elmClass = e.className;
	//enleve le positionnement aléatoire
	if(elmClass == 'default static'){
		$('#list').removeClass("static");
		$('div.smallBox').css({ position: "absolute"});
	}else{
		$('#list').addClass("static");
		$('div.smallBox').css({ position: "static"});
	}
}

highlight = function(e, ev){
	elmTag = e.nodeName;
	elmClass = e.className;
	if(elmTag == 'li' || elmTag == 'LI'){
		$('div.smallBox').each(function(i){
			if($(this).is("."+elmClass) && ev == 'in'){
				$(this).addClass("sel_"+elmClass);
			}else if($(this).is("."+elmClass) && ev == 'out'){
				$(this).removeClass("sel_"+elmClass);
			}
		});
	}else if(elmTag == 'div' || elmTag == 'DIV'){
		var elmClasses = elmClass.split(' ');
		for (i=0;i<elmClasses.length;i++) {
			if(elmClasses[i] == 'de' || elmClasses[i] == 'ko' || elmClasses[i] == 'ws' || elmClasses[i] == 'ku'){
				$('li').each(function(j){
					if($(this).is("."+elmClasses[i]) && ev == 'in'){
						$(this).addClass("sel_"+elmClasses[i]);
					}else if($(this).is("."+elmClass) && ev == 'out'){
						$(this).removeClass("sel_"+elmClasses[i]);
					}
				});
			}
		}
	}
}

highlightStay = function(e){
	elmClass = e.className;
	$('div.smallBox').each(function(i){
		$(this).removeClass("select_de");
		$(this).removeClass("select_ko");
		$(this).removeClass("select_ws");
		$(this).removeClass("select_ku");
		if($(this).is("."+elmClass)){
			$(this).addClass("select_"+elmClass);
		}
	});
}

openContent = function(e){
	closeContent();
	elmId = e.id;
	contentId = elmId.replace(/div/g, 'divText');
	contentBox = document.getElementById(contentId);
	contentBox.style.display = "block";
}

openPict = function(e){
	elmLnk = e.href;
	elmTitle = e.title;
	$("div.contentBox:visible").find('.picts').remove();
	$("div.contentBox:visible").find('p').not('.close').hide();
	$("div.contentBox:visible").find('span.local').after('<p class="picts"><img src="'+elmLnk+'" /><br />'+elmTitle+'</p><a href="#" class="picts back"><span>zur&uuml;ck zum Text</span></a>');
	$("a.back").click(function(){openText();});
}

openText = function(){
	$("div.contentBox:visible").find('.picts').remove();
	$("div.contentBox:visible").find('p').not('.close').show();
}

closeContent = function(){
	$('div.contentBox').css({ display: "none"});
}