//var running;
//var direction;

$(function() {
	$("#strook").load('/grafiek/collage.htm'); 
});
		
function collage(){
	$('<div id="labeltje"></div>').appendTo("body");
	
	algedaan = false;
	algedaanButLinks = false;
	algedaanButRechts = false;

    var Ttop,Tleft,ClientWidth,ClientHeight,ScrollTop;
    var TipWidth,TipHeight;

	$("#strook").jMyCarousel({
		visible: '100%',
		auto : true, 
		speed : 1200				
	});
	
	$("area").mousemove(function(e){
		running = false; direction = null; algedaan = false;
		$('#labeltje').css('display','block');
		var Xpos = e.pageX + 'px';
		var Ypos = e.pageY + 'px';
		
		///////////////////////////////////////////////////		
		Tleft = e.pageX;  // offsetLeft;
		Ttop = e.pageY;  //offsetTop;
		
		TipWidth  = $('#labeltje')[0].offsetWidth;
		TipHeight = $('#labeltje')[0].offsetHeight;
		
		ClientWidth = $(document).width();
		ClientHeight = $(document).height();
		ScrollTop = $(document).scrollTop();
	
		if ((Tleft + (TipWidth + 15)) > ClientWidth) { 
			$('#labeltje').css('marginLeft', '-'+TipWidth+'px');	
		} else {
			$('#labeltje').css('marginLeft', '15px');		
		}
		///////////////////////////////////////////////////	

		var myString = this.getAttribute('rel');
		//var mySplitResult = myString.split("|");
		$('#labeltje').css('top', Ypos);
		$('#labeltje').css('left', Xpos);
		//$('#labeltje').html("<b>" + mySplitResult[0] +"</b><br />" +mySplitResult[1]);
		$('#labeltje').html("<b>" + myString + "</b><img src='grafiek/pijltje_w.gif' />");

   	}); 

	$("area").mouseout(function(e){
		$('#labeltje').css('display','none');
		//running = true; direction = 'forward';
   	});

	$( '#strook' ).mouseover(
	  function(){
		$( "#strook .prev, #strook .next" ).show();
	  }
	);
	$( '#balk' ).mouseover(
	  function(){
		$( "#strook .prev, #strook .next" ).hide();	
	  }
	);	
}