$(document).ready(function() {
	$('#mask').css("height",$('#home').height());
	$('.navlink').click(function() {
		$('.wielink').parent().removeClass("bullet");
		/*$('#indexslideshow').cycle('pause');*/ 
		var number = $(this).attr("name");
		var element = "#" + ttl[number];
		$('#mask').animate({
			height: $(element).height()
		}, 1500, function() {
			$('.wiearticle').hide();
			$('#wiehome').show();
		});
		$('#inner').animate({
			marginLeft: '-955' * number
		}, 1500, "easeInOutSine");
		/*$('#innerheader').animate({
			marginLeft: '-955' * number
		}, 1500, "easeInOutSine");*/
		$('#line').animate({
			marginLeft: mrgn[number],
			width: wdth[number]
		}, 1500, "easeInOutSine");
		/*$('#indexslideshow').cycle('resume');*/
	});
	$('.wielink').click(function() {
		$('.wielink').parent().removeClass("bullet");
		var wienumber = $(this).attr("rel");
		var wieshow = "#" + wiemahla[$(this).attr("rel")];
		$('.wiearticle').hide();
		$(wieshow).show();
		$('.wie-list > li a[rel="' + wienumber + '"]').parent().addClass("bullet");
		$('#mask').animate({
			height: $('#wie-is-mahla').height()
		}, 500);
	});
	$('.specialwielink').click(function() {
		/*$('#indexslideshow').cycle('pause');*/
		var number = $(this).attr("name");
		var element = "#" + ttl[number];
		$('#mask').animate({
			height: $(element).height()
		}, 1500);
		$('#inner').animate({
			marginLeft: '-955' * number
		}, 1500, "easeInOutSine");
		/*$('#innerheader').animate({
			marginLeft: '-955' * number
		}, 1500, "easeInOutSine");*/
		$('#line').animate({
			marginLeft: mrgn[number],
			width: wdth[number]
		}, 1500, "easeInOutSine");
		$('.wielink').parent().removeClass("bullet");
		var wienumber = $(this).attr("rel");
		var wieshow = "#" + wiemahla[$(this).attr("rel")];
		$('.wiearticle').hide();
		$(wieshow).show();
		$('.wie-list > li a[rel="' + wienumber + '"]').parent().addClass("bullet");
		$('#mask').animate({
			height: $('#wie-is-mahla').height()
		}, 500);
		/*$('#indexslideshow').cycle('resume');*/
	});
	$('.rechtlink').click(function() {
		var rechttak = "#" + recht[$(this).attr("name")];
		$('.box').hide();
		$(rechttak).show();
		$('#mask').animate({
			height: $('#rechtstakken').height()
		}, 500);
	});
	$('.rechtclose').click(function() {
		$('.box').hide();
		$('#mask').animate({
			height: $('#rechtstakken').height()
		}, 500);
	});
	$('.werklink').click(function() {
		$('.werkblock').toggle();
		$('.kostblock').toggle();
		$('#mask').animate({
			height: $('#hoe-werkt-mahla').height()
		}, 500);
	});
	$('.verwachtlink').click(function() {
		$('.doetblock').toggle();
		$('.verwachtblock').toggle();
		$('#mask').animate({
			height: $('#strategie-en-visie').height()
		}, 500);
	});
	
	$('#indexslideshow').cycle({ 
        fx:      'fade', 
        timeout:  6000,
		requeueOnImageNotLoaded: true,
        before:   onBefore 
    }); 
 
    var slidesAdded = false; 
     
    function onBefore(curr, next, opts) { 
        // make sure we don't call addSlide before it is defined 
        if (!opts.addSlide || slidesAdded) 
            return; 
         
        // add slides for images 3 - 8 
        // slides can be a DOM element, a jQuery object, or a string 
        for (var i=3; i < 18; i++) 
            opts.addSlide('<img src="img/headers/header'+i+'.jpg" width="955" height="245" border="0" />'); 
        slidesAdded = true; 
    }; 
});
// JavaScript Document
var ttl = new Array("home","wie-is-mahla", "strategie-en-visie", "rechtstakken", "bemiddeling", "hoe-werkt-mahla", "contact");

var mrgn = new Array("365","422", "508", "608", "696", "782", "889");

var wdth = new Array("57","86", "100", "88", "86", "107", "66");

var recht = new Array("bouw","verzekering", "sociaal", "financieel", "economisch", "handelshuur", "itip", "jeugd","milieu", "vermogen", "familie", "milieu","sport","vennootschap");

var wiemahla = new Array("wiehome","francois", "ann", "marc", "ilse", "francine", "philip", "nathalie","katleen", "kristien", "karlijne", "extra");