$(document).ready(function(){
            Shadowbox.init({
                // skip the automatic setup again, we do this later manually
                skipSetup: true
            });

			// Tekst en videos replacen. KAARTJES
			$('.sitetopic').mouseenter(function() {
				$("#placeholder").html($(this).find('p').html());
				$("#items").html($(this).find('div.items').html());
				// set up all anchor elements with a "movie" class to work with Shadowbox
			    Shadowbox.setup("div#items a", {
			        autoplayMovies:     true
			    });
			}).mouseleave(function() {
				// $("#placeholder").html($("p#fallback").html());
				//$("#items").html($('div#defaultitems').html());
			});
		
			// Tekst en videos replacen. LINKS BOVENAAN
			$('.menu li').mouseenter(function() {
				$("#placeholder").html($('div.sitetopic.' +  $(this).attr('class') + ' p').html());
				$("#items").html($('div.sitetopic.' +  $(this).attr('class') + ' div.items').html());
					Shadowbox.setup("div#items a", {
					    autoplayMovies:     true
					});
			}).mouseleave(function() {
				//$("#placeholder").html($("p#fallback").html());
				//$("#items").html($('div#defaultitems').html());
			});

	        
	        $('.sitetopic img.back').hide().css('left', 0);
	        $('#eyecontainer img.back').hide().css('left', 0);
	        $("#placeholder").html($("p#fallback").html());
	        $("#items").html($("div#defaultitems").html());
    		// IE: Geen 3D effect, gewoon rotate    
	        if ($.browser.msie) {
				
				
				$(".sitetopic.praktijksimulaties img.back").prepareToFlip($(".sitetopic.praktijksimulaties img.front"));
				$(".sitetopic.bedrijfstheater img.back").prepareToFlip($(".sitetopic.bedrijfstheater img.front"));
				$(".sitetopic.training img.back").prepareToFlip($(".sitetopic.training img.front"));
				$(".sitetopic.video img.back").prepareToFlip($(".sitetopic.video img.front"));
				
		    	$('.sitetopic').hover(
		    	    function () {
						var currentactive = $(this).parent().children('*[active=true]');
						if(currentactive.attr('class') != $(this).attr('class')) {

					        $(this).find('h3 .front').flipOver( { toElement: $(this).find('h3 .back') } );
					        currentactive.find('h3 .back').flipOver( { toElement: currentactive.find('h3 .front') } );
							currentactive.attr('active','false');
						}

		    	        $(this).attr('active', 'true');		    	        
		    	    },
		    	    function () {
		    	    }
				);
				
				setEyeInterval();
    	    } else {
    	    // Heavy 3D ;-)
		    	function mySideChange(front) {

		    	    if (front) {
		    	        $(this).parent().find('img.front').show();
		    	        $(this).parent().find('img.back').hide();
		    	    } else {
		    	        $(this).parent().find('img.front').hide();
		    	        $(this).parent().find('img.back').show();
		    	    }
		    	}
		    	
		    	$('.sitetopic').hover(
		    	    function () {
						var currentactive = $(this).parent().children('*[active=true]');
						if(currentactive.attr('class') != $(this).attr('class')) {
					        $(this).find('h3 img').stop().rotate3Di('flip', 250, {direction: 'clockwise', sideChange: mySideChange});
							currentactive.find('h3 img').stop().rotate3Di('unflip', 500, {direction: 'anticlockwise', sideChange: mySideChange});
							currentactive.attr('active','false');
						}

		    	        $(this).attr('active', 'true');		    	        
		    	    },
		    	    function () {
		    	    }
		    	);
		    	
		    	function setEyeInterval3D() {
		 	  		var i = 1;
		    		$.fn.flipImages3D = function(){
		    			// Bij i = 1 moet de eerste image animeren, anders de 2e
		    			if( i == 1 ) {
			    	        $(this).find('img').stop().rotate3Di('toggle', 250, {direction: 'clockwise', sideChange: mySideChange});
		    				i = 2;
		    			} else {
		    	        	$(this).find('img').stop().rotate3Di('toggle', 500, {direction: 'anticlockwise', sideChange: mySideChange});
		     				i = 1;
		    			}
		    		};
		    	
		    		setInterval('$("#eyecontainer").flipImages3D()', 3000);//change the time interval acc. to your needs
		    	}
    			    
    			setEyeInterval3D();
    	    }
        });


jQuery.fn.flipOver = function() {
	var args = arguments[0] || {};
	var fromElement = $(this[0]);
	
	var toWidth = args.toElement.attr('toWidth');
	var toHeight = args.toElement.attr('toHeight');
	
	fromElement.stop()
		.animate({
					width		: '0px',
					height		: '' + fromElement.attr("toHeight") + 'px',
					marginLeft	: '' + fromElement.attr("toWidth") / 2 + 'px'
					
				}, { duration: 150 });

	window.setTimeout(function() {
		args.toElement.stop()
			.animate({
					width		: '' + toWidth + 'px',
					height		: '' + toHeight + 'px',
					marginLeft	: '0px'

			} , { duration:200 });
	} , 250);	
}

jQuery.fn.prepareToFlip = function(referenceElement) {
	$(this).stop().css(
		{
			width:'0px',
			height:'' + referenceElement.height() + 'px',
			marginLeft:'' + referenceElement.width() / 2 +'px'
		});
		
		$(this).attr("toWidth", referenceElement.width());
		$(this).attr("toHeight", referenceElement.height());
		
		referenceElement.attr("toWidth", referenceElement.width());
		referenceElement.attr("toHeight", referenceElement.height());
		
}

function setEyeInterval() {
	
	$("#image2_eye").prepareToFlip($("#image1_eye"));
	
	var i = 1;
	$.fn.flipImages = function(){
		// Bij i = 1 moet de eerste image animeren, anders de 2e
		if( i == 1 ) {
			$("#image1_eye").flipOver( { toElement: $("#image2_eye") } );
			i = 2;
		} else {
			$("#image2_eye").flipOver( { toElement: $("#image1_eye") } );	
			i = 1;
		}
	};

	setInterval('$("#eyecontainer").flipImages()', 5000);//change the time interval acc. to your needs
}