// JavaScript Document
var mX; var mY; var selec = "";

(function ($) {
	$(document).ready(function(){
		if($("#smoelen").length){
			$(document).mousemove(function(e){
				mX = e.pageX;
				mY = e.pageY;
				setSmoelen(".smoel");
			});
			setDesign();
			selectedSmoel(selec);
			
			$(window).resize(function() { checkWidth();});
			$(".smoel").click(function(){ setInfo(this);}); 
		}
	});
	function checkWidth(){
		if ($("#wrapInfo").length){
			if ($("#containerSmoel").width() < 640){$("#wrapInfo").remove();$("#clearWrap").remove();setInfo("#"+selec); $(".infoBig").css('width', '420px');
			}else{$("#wrapInfo").remove();$("#clearWrap").remove();setInfo("#"+selec); $(".infoBig").css('width', '580px');};
		}
	};
	
	function setSmoelen(x){
		$(x).each(function(i){
			var boxX = $(this).offset().left; var boxY = $(this).offset().top;
			var boxW = $(this).width(); var boxH = $(this).height();
			
			cX = new Array(0,-144,-288); cY = new Array(0,-156,-312);
			(mX < boxX) ? dX = 0 : ( (mX > (boxX+boxW)) ? dX = 2 : dX = 1 );(mY < boxY) ? dY = 0: ( (mY > (boxY+boxH)) ? dY = 2: dY = 1);
			$(this).css('background-position', cX[dX]+'px '+cY[dY]+'px');
		});
			selectedSmoel(selec);
	};
	function selectedSmoel(x){
		var prevSelec = selec;
		selec = x;
		
		(prevSelec!=selec) && (prevSelec != "") ? setSmoelen("#"+prevSelec):("");
		(selec!="") ? $("#"+selec).css('background-position', '-144px', '-156px'):("");
	}
	
	function setDesign(){
		if ($("#containerSmoel").width() < 640){$(".infoBig").css('width', '420px');};
		$(".infoSmall").hide();
		
		$(".media").css("visibility","visible");
		$(".pcenter").remove();
		$(".breakSmall").remove();
		
		$(".smoel").css('margin-bottom', '12px');
	};
	
	
	
	
	function setInfo(t){
		$("#wrapInfo").remove();$("#clearWrap").remove();
		var smoelID = ($(t).attr('id'));
		var clickSmoelY = ($(t).offset().top);
		
		$(".smoel").css('border-color', '#FFFF33').not(t).css('border-color', '#FFF');	
			
		if(selec==""){
			// vult selec met de id van de geselecteerde smoel
			selectedSmoel($(t).attr('id'));
			setBox(); $("#wrapInfo").slideDown("normal");
		}else{ 
			var oldPos = $('#'+selec).offset().top; var newPos = $(t).offset().top;
			// vult selec met de id van de geselecteerde smoel
			selectedSmoel($(t).attr('id'));	
			setBox();
						
			if( oldPos == newPos){ $("#wrapInfo").show();}
			else{ $("#wrapInfo").slideDown("normal");};
		};
		
		
		
		//kijkt na welke rij met smoelen de informatie moet komen
		function setBox(){
			var infoSet = "<div class='breakFloat' id='clearWrap'></div><div id='wrapInfo'><div class='infoBig rond'>"+$("#iBox_"+selec).html()+"</div></div>";
						
			for (var i=0;i<=14;i++){
				if (i > smoelID && $("#"+i).offset().top > clickSmoelY){ $("#"+i).parents(".wrap").before(infoSet); break;}
				else if(i>11){ $("#"+12).parents(".wrap").after(infoSet); break;}
			}
			if ($("#containerSmoel").width() < 640){ $(".infoBig").css('width', '420px'); }else{ $(".infoBig").css('width', '580px'); };
			setPointer();
			$("#wrapInfo").hide();	
		}
		
		//verwijderd de uitleg als je op sluit knop drukt
		$(".sluiten").click(function(){ 
			$(".infoBig").slideUp("normal", function(){ $("#wrapInfo").remove();$("#clearWrap").remove();$(".smoel").css('border-color', '#FFF');selec="";});
		});	  
	};
	
	function setPointer(){
		//maakt een div met pointer achter de geselecteerde rij
		$(".infoBig").append("<div id='pointer'></div>");
		
		//bepaalt de x en y positie 
		var posX = (($("#"+selec).offset().left) - $("#content").offset().left )+(($("#"+selec).width()-($("#pointer").width()))/2);
		
		$("#pointer").css('marginLeft',+posX+'px');
	};
})(jQuery);