$(document).ready(function(){
				
//////// Fade menu items
// 
// definieer het te hoveren element als volgt:
//
//
// <parent class='fade'>
//		<img>
//	 	<img class='hover' style='width: 100px; height: 100px'>
// </parent>


// definieer de style van de elementen
$(".fade").children('.hover').css("opacity",0);
$(".fade").children('.hover').css('marginTop',function() { return "-"+$(this).css('height'); });
$(".fade").css('width',function() { return $(this).children('.hover').css('width'); });
$(".fade").css('height',function() { return $(this).children('.hover').css('height'); });

	
// de daadwerkelijke hover	
$(".fade").hover(function() {
	$(this).children('.hover').stop().animate({"opacity": "1"}, "slow");
}, function() {
	$(this).children('.hover').stop().animate({"opacity": "0"}, "slow");
});


// laat de agenda items faden.
$(".eventBox").children().hide();
$(".eventBox").children('.visible').show();
			
$("#agendaRightArrow").click(function() {
	$(".eventBox").children('.visible').fadeOut(400,function(){
		$(this).next().fadeIn(400);
	});
	
					
	if($(".eventBox").children('.visible').next().hasClass('last'))
		$("#agendaRightArrow").fadeOut();
					
	$("#agendaLeftArrow").fadeIn();
	$(".eventBox").children('.visible').next().addClass('visible');
	$(".eventBox").children('.visible').first().removeClass('visible');
	
	return false;
});	
				
$("#agendaLeftArrow").css('display','none');
if($(".eventBox").children('.visible').hasClass('last'))
	$("#agendaRightArrow").css('display','none');
				
$("#agendaLeftArrow").click(function() {
	$(".eventBox").children('.visible').fadeOut(400,function(){
		$(this).prev().fadeIn(400);
	});

	
	if($(".eventBox").children('.visible').prev().hasClass('first'))
		$("#agendaLeftArrow").fadeOut();
					
	$("#agendaRightArrow").fadeIn();
	$(".eventBox").children('.visible').prev().addClass('visible');
	$(".eventBox").children('.visible').last().removeClass('visible');
	return false;
});	


// agenda telefoon icon
$('#agendaFoon img').hover(function() {
  $(this).stop().animate({'marginTop':0}, 200);
}, function() {
  $(this).stop().animate({'marginTop':20}, 200);
});

$('#agendaFoon').tipsy({delayIn: 200, gravity:'s'});
$('#agendaFoon').fancyZoom({width:450, height:150});




// we proberen de afbeeldingen de sliden op de achtergrond.
$('.fotoBox').mousemove(function(e){
	 var position = $(this).offset();
      var size = $(this).attr('rel').split(";");
      // var top = -(((e.pageY-position.top)/100)*size[1])/2;
      var top =   (100-size[1])*((e.pageY-position.top)/100);
      var right = (150-size[0])*((e.pageX-position.left)/150);
      
      // $(this).html(top + ", " + right);
      $(this).stop().animate({backgroundPosition:  Math.floor(right) + 'px ' + Math.floor(top) + 'px '},300);
});

$('.fotoBox').mouseleave(function(){
	var size = $(this).attr('rel').split(";");
	$(this).stop().animate({backgroundPosition:  Math.floor((150-size[0])/2) + 'px ' + Math.floor((100-size[1])/2) + 'px '},300);
});

/// dropdown menu
var timeout    = 0;
var closetimer = 0;
var ddmenuitem = 0;

function menu_open()
{  menu_canceltimer();
   menu_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');
}

function menu_close(){
  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
}

function menu_timer(){
  closetimer = window.setTimeout(menu_close, timeout);
}

function menu_canceltimer(){
  if(closetimer){  
  	window.clearTimeout(closetimer);
    closetimer = null;
  }
}

$('.menu > li').bind('mouseover', menu_open)
$('.menu > li').bind('mouseout',  menu_timer)
document.onclick = menu_close;


// end document ready
});