// JavaScript Document

var http_prefix     = 'https://';
var domain 			= window.location.hostname + '/';

document.onreadystatechange = function(e)
{
if(document.readyState=="interactive")
  {
    var all = document.getElementsByTagName("*");
    for (var i=0, max=all.length; i < max; i++) 
    {
      set_ele(all[i]);
    }
  }
}
function check_element(ele)
{
  var all = document.getElementsByTagName("*");
  var totalele=Math.floor(all.length / 12);
	////console.log(totalele);
  var per_inc=100/totalele;

  if($(ele).on())
  {
    var prog_width=per_inc+Number(document.getElementById("progress_width").value);
    document.getElementById("progress_width").value=prog_width;
    $("#bar1").animate({width:prog_width+"%"},10,function(){
      if(document.getElementById("bar1").style.width=="100%")
      {
        $("#progress_div").fadeOut("slow");
		$("#progress_div").fadeOut();
      }			
    });
  }

  else	
  {
    set_ele(ele);
  }
}

function set_ele(set_element)
{
  check_element(set_element);
}


var isInViewport = function (elem) {
    var elementTop = elem.offset().top;
    var elementBottom = elementTop + elem.outerHeight();
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();
    
	/*if(elem == 'het-kantoor'){
    console.log(viewportTop - elementTop);
    console.log(viewportBottom - elementBottom);
    }*/
    if(elementBottom > viewportTop && elementTop < viewportBottom && ((viewportTop - elementTop) > -250)){
        return(1);
    }else{
        return(0);   
    }
};
var loadTimer;
var triggerViewboxOn = false;
var fixed_h = 90;
function scrollAni(){
    
    fixed_h = 0;
    
	if ($(document).scrollTop() > fixed_h) {
		$('#theBody').addClass('shrink');
	}else {
		$('#theBody').removeClass('shrink');
	}
	
	triggerViewboxOn     = false
        
	var triggerBlocks    = $('.page-block').not("#pageBlock0");
	var active_el    	 = '';
	
	triggerBlocks.each(function (index, element) {
		var $currentElement = $(element);

		if(isInViewport($currentElement)){
			active_el       = $currentElement.attr('id');
			//console.log(active_el);
			//console.log('.intern-pagemenu .menu-'+active_el);
			
			$('#modelhashnav_ul li').removeClass('active');
            
			triggerViewboxOn    = true;
            if($('.menu-'+active_el).length > 0){
			$('.menu-link').removeClass('active');
			$('.menu-'+active_el).addClass('active');
            }
            if($('.hash-'+active_el).length > 0){
			$('#modelhashnav_ul li').removeClass('active');
			$('.hash-'+active_el).addClass('active');
            }
		}
	});
	
	//console.log(active_el);
	
	if(triggerViewboxOn == false || active_el == '' || active_el == 'pageBlock0'){
		$('.intern-pagemenu .page-hash-menu').removeClass('active');
		$('.intern-pagemenu .menu-pageBlock1').addClass('active');
	}
	
}

$( window ).load(function() {
	
    $(window).scroll(function(e) {
        scrollAni();
	});
    scrollAni();

	clearTimeout(loadTimer);
	
	loadTimer = setTimeout(function() {
		setTimeout(function() {
			
            LoaderOut();
            
            $("#progress_div").fadeOut();
            setTimeout(function() {  
                initHashScroll();
            },0); 
		},0);
        
        $('#theBody').addClass('fullyLoaded');
	},50);
    
    initLightboxes();
    initCarousels();
    initDraggables();
    initAutoPops();
    initForms();

    extOnLoad();
});


function LoaderOut(){
	$('#basicloadercontainer').addClass('loaded');
	$('#basicloadercontainer').removeClass('ajaxloading');
	$('#wrapper').removeClass('ajaxloading');
}
function LoaderIn(){
	$('#basicloadercontainer').removeClass('loaded');
	$('#basicloadercontainer').addClass('ajaxloading');
	$('#wrapper').addClass('ajaxloading');
}


var menuToggle;
var menuState = 0;

function toggleMenu(){
	if(menuState > 0){
		menuToggle.clear();
		byebyeMenu();
		menuToggle.play(0);
		menuState = 0;
	}else{

		hihiMenu();
		menuState = 1;
		menuToggle.play();
	}
}
function hoverMenu(){
	if($('#navbar_toggle').length > 0){
		hihiMenu();
	}
}

var color_bar_1 = '#F8EEEA';
var color_bar_2 = '#F8EEEA';
var color_toggle_1 = '#000000';
var color_toggle_2 = '#555555';
var color_logo_1 = '#000000';
var color_logo_2 = '#555555';

function hihiMenu(){
	if($('#navbar_toggle').length > 0){
		
        var color_var	= '#ffffff';
		
        $('#theBody').addClass('menuactive');
        $('#theBody').removeClass('menuinactive');
        
            $('.navbar-toggle').addClass('activate');
    //    $('#toggleNavTxt').html('close');
    //    SplitText.create($('#toggleNavTxt'), {type:"chars", tag:"span", charsClass:"baseChar"});
        
        $('#extraMenu .afterMenu.active').toggleClass('active');
        
		menuToggle 	= gsap.timeline({paused:true});
        
        
        var startH = 0;
        var startW = '100vw';
        var startL = 0;
        
        if(innerWidth < 768){
        startH = '100vh';
        startW = '100vw';
        startL = '-100vw';
        }
		menuToggle.set($('#mainmenu'), { left:startL, top:0, width:startW, height:startH, opacity:0, ease:Linear.ease},0)
        //.set($('#menu-search'), {opacity:1, ease:Linear.ease},0)
        .set($('#mainmenu .social-icons'), {opacity:0, ease:Linear.ease},0)
        .set($('#mainmenu #theMain a.menu-link , .mainmenu .navbar-nav ul.after-menu li.childmenu a , .menu-hamburger .mainmenu #extraMenu .navbar-nav li a, .headAddress p, .social-icon a'), {opacity:0, top: 0,  ease:Linear.ease},0)
        //.set($('#theMain'), {top:15,   ease:Linear.ease},0)
        //.to($('.page-block-name'), 0.3, {opacity:0, ease:Linear.easeOut},0.15)
        //.staggerTo($('#menu-search'), 0.4, {opacity:0, ease:Linear.ease},0.2)
        //.to($('#extraMenu'), 0.3, {opacity:0, ease:Linear.easeOut},0.15)
		.to($('.icon-bar-1'), 0.3, { background: color_bar_1,marginTop:3, marginLeft:-2, rotate: '45deg', ease:Linear.ease,transformOrigin:"center"},0.15)
		.to($('.icon-bar-3'), 0.3, { background: color_bar_1, rotate: '-45deg',  marginLeft:-2, marginTop:-8, ease:Linear.ease,transformOrigin:"center"},0.15)
		.to($('.icon-bar-2'), 0.3, {opacity:0, ease:Linear.ease,transformOrigin:"center"},0.15)
		.to($('#mainmenu'), 0.8, {height:'100vh', background:'#E00000', left:0 ,opacity:1,  ease:Power4.easeInOut},0)
		.staggerTo($('#mainmenu #theMain a.menu-link, .mainmenu .navbar-nav ul.after-menu li.childmenu a, .menu-hamburger .mainmenu #extraMenu .navbar-nav li a, .headAddress p, .social-icon a'), 0.3,{ opacity:1, top:0,  ease:Power4.easeInOut},0.03)
        .staggerTo($('#mainmenu .social-icons'), 0.3, {opacity:1, ease:Linear.ease},0.1)
        //.to($('#theMain'), 1.0,{top:0, height:'100vh',   ease:Power4.easeInOut},0)
		

		menuToggle.eventCallback("onComplete", function() {
            $('.navbar-toggle').addClass('activate');
        });	
        
        if($('#menuvideo').length > 0){
            //var player = new Vimeo.Player(document.getElementById('menuvideo'));
            //player.play();
            
        }
	
	}
}


function hihiMenuQuick(){
	hihiMenu();
}




function byebyeMenu(){
	if($('#navbar_toggle').length > 0){
		
            $('.navbar-toggle').removeClass('activate');
        
        var marTop = 4; 
        if(innerWidth > 768){
           marTop = 4
           }
		
		menuToggle 	= gsap.timeline({paused:true, onComplete:function(){ enableScroll(); $('#theBody').removeClass('menuactive'); $('#menuvideo').get(0).pause(); }});
		menuToggle.to($('#navbar_toggle'), 0.05, {rotation:0, marginTop:0, ease:Linear.easeOut},0.05)
        .staggerTo($('#mainmenu .social-icons'), 0.2, {opacity:0, ease:Linear.ease},0)
        //.staggerTo($('#menu-search'), 0.2, {opacity:0, ease:Linear.ease},0)
		.staggerTo($('#mainmenu #theMain a.menu-link, .social-icon a'), 0.2,{ opacity:0, top:0,  ease:Power4.easeInOut},0.03)
		.staggerTo($('#mainmenu'), 0.3, {opacity:'0', background:'#5E5E5E', ease: Linear.easeOut},0.3)
        .staggerTo($('#extraMenu'), 0.3, {opacity:1,ease:Linear.easeOut},0.15)
        //.staggerTo($('#menu-search'), 0.2, {opacity:1, ease:Linear.ease},0)
		.to($('.icon-bar-1'), 0.4, {background: color_bar_2,marginTop:0,marginLeft:0,rotate: '0deg', ease:Linear.ease,transformOrigin:"center"},0.15)
		.to($('.icon-bar-3'), 0.4, {opacity:1, background: color_bar_2, rotate: '0deg',marginLeft:0, marginTop:marTop, ease:Linear.ease,transformOrigin:"center"},0.15)
		.to($('.icon-bar-2'), 0.4, {opacity:1, ease:Linear.ease,transformOrigin:"center"},0.15)
       // .staggerTo($('.page-block-name'), 0.1, {opacity:1, ease:Linear.easeOut},0)
		//.to($('#mainmenu a'), 0.3, {opacity:0, ease:Linear.ease},0.3)
		//.to($('#mainmenu .social-icon'), 0.3, {opacity:0, ease:Linear.ease},0)
		//.to($('#menuvideo'),0.3, {opacity:0 ,ease: Linear.easeOut},0.3)
		
		menuToggle.eventCallback("onComplete", function() {
            $('#theBody').removeClass('menuactive');
            //$('#theBody').addClass('menuinactive');
            //$('#toggleNavTxt').html('menu');
            //SplitText.create($('#toggleNavTxt'), {type:"chars", tag:"span", charsClass:"baseChar"});
            /*if($('#models_container').length > 0){
                var SearchBack = setTimeout(function() {
                    $('#mainmenu #menu-search').css('opacity',1);
                },500);
            }*/
        });		

        if($('#menuvideo').length > 0){
            //var player = new Vimeo.Player(document.getElementById('menuvideo'));
            //player.pause();
            // $('#menuvideo').get(0).play();
        }

		
	}
}

var quickAjax = false;
function ajaxLoad(urltoload, target, page) {
	$.ajax({
	url: urltoload,
	beforeSend: function() {
        if(!quickAjax){
            ajaxShowLoader();
        }else{
            quickAjax = false;
        }
    }
	}).done(function(content) {
		switch(page){
			case 'SocialReachLink':
			case 'deleteFile':
                allowClick 	= true;
			break;
			case 'modelSearchResults':
				$('#'+target).html(content);
				$('#'+target).ready(function() {
                    if($('#models_container').length > 0){
                        initModelList();
                    }
				})
			break;
			case 'contact_container':
				$('#contact_container').html(content);
				$('#contact_container').ready(function() {
					
					$('#modalContact').modal({
						backdrop: 'static',
						keyboard: false
					})
					$('#modalContact').modal('show'); 

					$("#modalContact").on('hidden.bs.modal', function(){

					});
					
					allowClick 	= true;
                    if($('#form_user_login').length > 0){
                        readyForm_Basic('#form_user_login');
                    }
                    if($('#form_contact-terugbel').length > 0){
                        initFancyForm('form_contact-terugbel');
                        readyForm_Basic('#form_contact-terugbel');
                        
                        grecaptcha.render('recaptcha', {
                            sitekey: '6LfzZ-cpAAAAANLlMQFnO4On8rLrQWkOENNBztQC',
                            callback: function(response) {
                                
                                var form = '#form_contact-terugbel';
	                           var url 	= $(form).attr( "action");
                                var posting = $.post(url,$(form).serialize());
                                posting.done(function( data ) {

                                    var content = data;
                                    $(form+"_container").empty().append( content );

                                    window.dataLayer = window.dataLayer || [];
                                    window.dataLayer.push({'event': 'formSubmission','formID': '1'});
                                    if($(form).length > 0){
                                        allowClick 	= true;
                                        readyForm_Basic(form);
                                    }

                                    ajaxKillLoader();

                                    if($(form).length > 0){
                                        readyForm_Basic(form);
                                    }

                                    allowClick 	= true;
                                });	
                            }
                        });
                    }
                    
				})
			break;
			default:
                //alert(content);
				$('#'+target).html(content);
				$('#'+target).ready(function() {
					allowClick 	= true;
				})
			break;
		}
			
		ajaxKillLoader();
	});
}

function ajaxShowLoader () {
    LoaderIn();
}

function ajaxKillLoader() {
    LoaderOut();
}

function initHashScroll(){
    $('a[href*="#"]')
    .not('.gallery a')
    .not('#measLink')
    // Remove links that don't actually link to anything
    /*.not('[href="#"]')
    .not('[href="#0"]')
    .not('.panellink')
    .not('.collapsed')
    .not('.carousel-control')
    .not('.carousel-control-prev')
    .not('.carousel-control-next')
    .not('.lbox')
    .not('.light-prev-btn')
    .not('.light-next-btn')
    .not('#close-lightbox')*/
    .click(function(event) {
    event.preventDefault();
    console.log(1);
    // On-page links
    if(location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname){
        // Figure out element to scroll to
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        // Does a scroll target exist?
        goToHash(target);

        if(menuState > 0){
            toggleMenu();
        }
    }
    });
}

function topFunction(){
    
    gsap.registerPlugin(ScrollToPlugin);
    gsap.to(window, {duration: 1, scrollTo: {y: 0, autoKill: true, offsetY: 0}});
}
function goToHash(target){
    if (target.length) {
        gsap.registerPlugin(ScrollToPlugin);
        gsap.to(window, {duration: 1, scrollTo: {y: target, autoKill: true, offsetY: 250}});
    }
}

function initAutoPops(target){
     if($(".auto-modal").length > 0){
       $(".auto-modal").modal({
        backdrop: 'static',
        keyboard: false
       })
       $(".auto-modal").modal('show');
    }
}

function openCTApop(target){
     if($("#"+target).length > 0){
       $('#'+target).modal({
        backdrop: 'static',
        keyboard: false
       })
       $('#'+target).modal('show');
    }
}
var activeAfterMenu = '';
function openAfterMenu(target){
    
   if(activeAfterMenu != ''){
       $('#extraMenu #after'+ activeAfterMenu).removeClass('active');
       $('#extraMenu #arrow_menu_'+ activeAfterMenu).removeClass('active');
   }
    
   if(activeAfterMenu == target){
       activeAfterMenu = '';
       $('#menu-search').removeClass('afterOpen');
   }else{
       activeAfterMenu = target;
       //just close
       $('#extraMenu #after'+ target).addClass('active');
       $('#extraMenu #arrow_menu_'+ target).addClass('active');
       $('#menu-search').addClass('afterOpen');
   }
    
   
}

function initLightboxes(){
    $(document).on('click', '[data-toggle="lightbox"]', function(event) {
        event.preventDefault();
        $(this).ekkoLightbox();
    });
}

function initCarousels(){
	
	$(".carousel"). swipe({ swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
        
        if (direction == 'left') $(this).carousel('next');
        if (direction == 'right') $(this).carousel('prev');
    }});
    
    
    $('.carousel').find('.carouselTotal').html('/'+ $(".carousel .carousel-item").length +'');
    
    
    currentIndex = $('.carousel').find('div.active').index() + 1;
    $('.carousel').find('.carouselCurrent').html(''+currentIndex+'');
    
    
    $('.carousel').on('slid.bs.carousel', function() {
        currentIndex = $( this ).find('div.active').index() + 1;
        $( this ).find('.carouselCurrent').html(''+currentIndex+'');
    });
}
function initDraggables(){
    
    if($('.grapCarousel').length > 0){
        var dd = Draggable.create(".grapCarousel", {type:"x", minimumMovement : 2, inertia: true, edgeResistance:1, bounds:".grapWrapper",


        onDragStart: function() {
            $('.grapCarousel').addClass('dragging');
        },
        onDragEnd: function() {
            $('.grapCarousel').removeClass('dragging');
        }});
    }
    
    if($('.grapListing').length > 0){
        var dd = Draggable.create(".grapListing", {
            type:"x",
            inertia: true,
            minimumMovement : 2,
            /*allowNativeTouchScrolling: false,*/
            edgeResistance:1,
            bounds:".grapWrapper",


        onDragStart: function() {
            $('.grapListing').addClass('dragging');
        },
        onDragEnd: function() {
            $('.grapListing').removeClass('dragging');
        }});

            
        var dd_check_w              = $(".grapListing").width();
        var dd_check_w_container    = $(".grapWrapper").width();

        /*if(dd_check_w <= dd_check_w_container){
           dd[0].disable();
        }
        
        //console.log(1);
        TweenMax.set("body", {overflowY:'scroll'});

        var scrollSpeed = 0.5; // half of user scroll
        var scrollHeight = 10000;

        //TweenMax.set(".grapListing", {height:scrollHeight, overflowY:'scroll'});

        $('.grapWrapper').on("scroll", function (){
          const pixels = $(document).scrollTop();
          TweenMax.to('.grapListing',1,{x:-0.5 * pixels})

          //  '0.5' = half speed of user scroll
          console.log(pixels);
        })*/
    }
    
    
}

function openLightBox(gallery,index){
    
    /*if(gallery == 'portfolio'){
       if(index%2 == 0){
           index--;
       }
       }*/
    
	var url			= http_prefix + domain + 'engine/modules/gallery/lightbox.php?i=456';
	ajaxShowLoader();
	
	if (window.XMLHttpRequest) {
		xmlhttp=new XMLHttpRequest();
	} else {
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
  
	xmlhttp.onreadystatechange=function() {
		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
	  		
            var content = xmlhttp.responseText;
            
            $('#theBody').append(content);
            
            $('#theBody').ready(function() {

                if($("#lightbox-modal").length > 0){
                    
                    
                    
                    var targets         = $('#targets_'+gallery).val();
                    var targets_array   = targets.split(',');
                    
                    createCarousel(gallery,targets_array,index) 
                    
                    $('#lightbox-modal').modal({
                        backdrop: 'static',
                        keyboard: false
                    })
                    
                    var lightBoxToggle 	= gsap.timeline({paused:true});
                    lightBoxToggle.to($('#lightbox-modal'),  {top: '0', opacity: 1, scale: 1, ease:Power4.easeInOut, duration: 1.0},0)
                    lightBoxToggle.eventCallback("onComplete", function() {
                        //console.log('on');
                        lightBox = 'on';
	                    $('#basicloadercontainer').addClass('loaded');
	                    $('#lightbox-modal').addClass('loaded');
                    });	
                    lightBoxToggle.play();
                    

                    if($('.lightbox-modal .carousel-item .deckInformation').length > 0){
                        $('.lightbox-modal .carousel-item .deckInformation').on('click', function(event) {
                            $(this).toggleClass('showMe');
                        });
                    }
                    
                }
                
                //ajaxKillLoader(); 
            })
			
		}
	};

	xmlhttp.open("GET",url,true);
	xmlhttp.send();
	//ajaxLoad(url, 'SocialReachLink', 'SocialReachLink');
}

var lightBox = 'off';

function closeLightBoxModal(){
    
    //$('#theBody').removeClass('noscroll');
    $('#theBody').removeClass('modal-open');
    
    var lightBoxToggle 	= gsap.timeline({paused:true});
    lightBoxToggle.to($('#lightbox-modal'), {opacity: 0, scale: 0.9, ease:Power4.easeInOut, duration: 0.7},0)
    lightBoxToggle.eventCallback("onComplete", function() {
        console.log('off');
        lightBox = 'off';
        $('#lightbox-modal').remove();
        $('.modal-backdrop').remove();
    });	
    lightBoxToggle.play();
    var comeBack = setTimeout(ajaxKillLoader,400);
    
}
function createCarousel(gallery,targets,index) {
  const modalBody = document.querySelector(".modal-body .container-fluid");
    
    const markup = `
    <div id="lightboxCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="false">
      <div class="carousel-inner">
        ${createSlides(gallery,targets,index)}
      </div> 
        <a class="carousel-control-prev" href="#lightboxCarousel" role="button" data-slide="prev"><i class="arrow fa-light fa-arrow-left-long" aria-hidden="true"></i></a>
        <a class="carousel-control-next" href="#lightboxCarousel" role="button" data-slide="next"><i class="arrow fa-light fa-arrow-right-long" aria-hidden="true"></i></a>
        <div class="carouselState"><span class="carouselCurrent">1 </span> <span class="carouselTotal">/ 1999</span></div>
    </div>
    `;
    
    /*
    <a class="carousel-control-prev" href="#lightboxCarousel" role="button" data-slide="prev"><i class="arrow fa-light fa-arrow-left-long"></i></a>
    <a class="carousel-control-next" href="#lightboxCarousel" role="button" data-slide="next"><i class="arrow fa-light fa-arrow-right-long"></i></a>
    */
    
    modalBody.innerHTML = markup;
    
    

    $("#lightboxCarousel .carousel"). swipe({ swipe: function(event, direction, distance, duration, fingerCount, fingerData) {

        if (direction == 'left') $(this).carousel('next');
        if (direction == 'right') $(this).carousel('prev');
    }});


    $('#lightboxCarousel .carousell').find('.carouselTotal').html('/ '+ $(".carousel .carousel-item").length +'');


    currentIndex = $('#lightboxCarousel .carousel').find('div.active').index() + 1;
    $('#lightboxCarousel .carousel').find('.carouselCurrent').html(''+currentIndex+'');


    $('#lightboxCarousel .carousel').on('slid.bs.carousel', function() {
        currentIndex = $( this ).find('div.active').index() + 1;
        $( this ).find('#lightboxCarousel .carousel .carouselCurrent').html(''+currentIndex+'');
    });
    
/*    
    
    (".carousel").on('slid.bs.carousel', function() {
        currentIndex = $( this ).find('div.active').index() + 1;
        $( this ).find('.carouselCurrent').html(''+currentIndex+'');
    });*/

    
    
	$("#lightboxCarousel").swipe({ swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
        if (direction == 'left') $(this).carousel('next');
        if (direction == 'right') $(this).carousel('prev');
        if (direction == 'down') closeLightBoxModal();
    }});
    
    
    $("#lightboxCarousel").mousemove(function(e){
        
        //console.log('move');
        var relativeXPosition = (e.pageX - this.offsetLeft); //offset -> method allows you to retrieve the current position of an element 'relative' to the document
        var relativeYPosition = (e.clientY - this.offsetTop);
        
        if(e.clientY < 50 || e.clientY > (innerHeight - 50)){
            /*$( this ).find('.carousel-control-prev').addClass('hide');
            $( this ).find('.carousel-control-next').addClass('hide');*/
        }else{
            //console.log(this.offsetLeft);
            //console.log(this.offsetLeft);
            //console.log("<p><strong>X-Position: </strong>"+relativeXPosition+" | <strong>Y-Position: </strong>"+relativeYPosition+"</p>");
            
            
            
            if(e.clientX > $( window ).width() / 2){
            $( this ).find('.carousel-control-prev').addClass('hide');
            $( this ).find('.carousel-control-next').removeClass('hide');
            }else{
            $( this ).find('.carousel-control-next').addClass('hide');
            $( this ).find('.carousel-control-prev').removeClass('hide');
            }

            $( this ).find('.carousel-control-prev').css('left',relativeXPosition);
            $( this ).find('.carousel-control-prev').css('top',relativeYPosition);
            $( this ).find('.carousel-control-next').css('left',relativeXPosition);
            $( this ).find('.carousel-control-next').css('top',relativeYPosition);
            
           /* */
        }
    })
}

function createSlidesDuo(gallery,targets,index) {
  let markup            = "";
  var i                 = 0;
  var lighboxCounter        = 0;
  var lighboxInnerCounter   = 0;
    
  var openMe                = false;
  var closeME               = false;
    
  console.log(targets);
    
  for (const img of targets) {
      
    i++
    
      
    const imgSrc        = img;
    const imgAlt        = $('#img_'+gallery+'_'+i).attr("alt");
    const imgCaption    = $('#img_'+gallery+'_'+i).attr("data-caption");
    const imgCredits    = $('#credits_'+gallery+'_'+i).html();
    const imgLayout     = $('#img_'+gallery+'_'+i).attr("data-layout");
    
    
        
         
    if(lighboxInnerCounter == 0){
        lighboxCounter++; //nieuwe lightbox slide
        openMe = true;
        lighboxInnerCounter++;  //we stoppen er 1 image in!

        if(imgLayout == 'landscape' || i ==1){
            //we sluiten de lightbox slide direct, door $lighboxInnerCounter op 0 te zetten... dan wordt er de volgende lus een nieuwe slide aangemaakt!
            lighboxInnerCounter = 0;
            closeME = true;
        }
    }else{
        //we zitten dan in een bestaande lightblox slide.
        if(imgLayout == 'landscape'){ // dit MAG eigenlijk niet. want dit zou betekenen dat de 2e image een landscape is. Om gezeik te voorkomen... Sluiten we de open lighboxslide door een nieuw
            
            markup += `</div>`;
            
            lighboxCounter++; //nieuwe lightbox slidee aan te maken!
            openMe = true;
            lighboxInnerCounter = 0; //we sluiten de lightbox slide direct, door $lighboxInnerCounter op 0 te zetten... dan wordt er de volgende lus een nieuwe slide aangemaakt!
            closeME = true;
        }else{
            lighboxInnerCounter = 0; //we sluiten de lightbox slide direct, door $lighboxInnerCounter op 0 te zetten... dan wordt er de volgende lus een nieuwe slide aangemaakt!
            closeME = true;
        }
    }   
    
    if(openMe){
        markup += `<div id="slide${lighboxCounter}" class="carousel-item${lighboxCounter === index ? " active" : ""} ${imgLayout}">`;
        openMe = false;
    }
      
    markup += `<img src="${imgSrc}" class="${imgLayout}" alt="${imgAlt}">
      ${imgAlt ? createCreditsCaption(imgCredits) : ""}`;
        
    
    if(closeME){
        markup += `</div>`;
        closeME = false;
    }
       
    //createCaption(imgAlt,imgCaption)
  }

  return markup;
}

function showSlideshow(gallery){
	if($('#pageBlockCarousel'+gallery).length > 0){
		$('#pageBlockCarousel'+gallery).toggleClass('showSlider');
	}
    if(gallery == 'video'){
        $('#video').addClass('videoOpen'); 
    }
}
function hideSlideshow(gallery){
    
    var lightBoxToggle 	= gsap.timeline({paused:true});
    lightBoxToggle.to($('#pageBlockCarousel'+gallery), {opacity: 0, scale: 0.9, ease:Power4.easeInOut, duration: 0.7},0)
    lightBoxToggle.eventCallback("onComplete", function() {
	   showSlideshow(gallery);
    });	
    lightBoxToggle.play();
   
    if(gallery == 'video'){
        $('#video').removeClass('videoOpen'); 
    }
}

function createSlides(gallery,targets,index) {
    
    if(gallery == 'portfolio' && innerWidth > 767){
        return createSlidesDuo(gallery,targets,index);
    }else{
      let markup            = "";
      var i                 = 0;


      for (const img of targets) {
        i++
        const imgSrc        = img;
        const imgAlt        = $('#img_'+gallery+'_'+i).attr("alt");
        const imgCaption    = $('#img_'+gallery+'_'+i).attr("data-caption");
        const imgCredits    = $('#credits_'+gallery+'_'+i).html();
        const imgLayout     = $('#img_'+gallery+'_'+i).attr("data-layout");
        //console.log(imgCredits);

        markup += `
        <div class="carousel-item${i === index ? " active" : ""} ${imgLayout}">
          <img src="${imgSrc}" alt="${imgAlt}">
          ${imgAlt ? createCreditsCaption(imgCredits) : ""}
        </div>
        `;
        createCaption(imgAlt,imgCaption)
      }

      return markup;
    }
}

function createCreditsCaption(imgCredits) {
  return `<div class="deckInformation"><div class="deckDESC">
     ${imgCredits}
    </div></div>`;
}
function createCaption(alt,caption) {
  return `<div class="carousel-caption">
     <h3>${alt}<span>${caption}</span></h3>
    </div>`;
}

function initForms(){
	if($('#form_contact').length > 0){
		initFancyForm('form_contact');
		readyForm_Basic('#form_contact');
	}
}
function buildPlayers(extraClass){
    
    var videoWrapper = '.player';
    if(extraClass != ''){
       videoWrapper = extraClass + ' .player';
    }
    
    $(videoWrapper).each(function(i, obj) {

        var player              = $(this).get(0);
        var myVid               = player.querySelector('.player__video');
        var controlProgress     = player.querySelector('.progress');
        var progressBar         = player.querySelector('.progress__filled');
        var controlPlay         = player.querySelector('.player__toggle');
        var controlSound        = player.querySelector('.player__sound');
        var controlFullScreen   = player.querySelector('.player__fullscreen');
        
        var progression;

        function toggleVideo() {
          if (myVid.paused) {
            myVid.play();
            controlPlay.classList.toggle('playing'); 
            //updateProgress();
          } else {
            myVid.pause();
            controlPlay.classList.toggle('playing'); 
            clearInterval(progression);
          };
        }
        function toggleSound() {
          if (myVid.muted) {
            myVid.muted = false;
            controlSound.classList.toggle('muted'); 
          } else {
            myVid.muted = true;
            controlSound.classList.toggle('muted'); 
          };
        }
        
        function updateProgress() {
          var progress = myVid.currentTime / myVid.duration;
          progressBar.style.width = Math.floor(progress * 1000) / 10 + '%';
        }
        
        function goFullScreen(){
            if(myVid.webkitSupportsFullscreen) myVid.webkitEnterFullScreen();
        }
        
        
        var progression = window.setInterval(updateProgress, 200);
        controlPlay.addEventListener('click', toggleVideo);
        controlSound.addEventListener('click', toggleSound);
        controlFullScreen.addEventListener('click', goFullScreen);
        

        function scrub(e) {
            const scrubTime = (e.offsetX / controlProgress.offsetWidth) * myVid.duration;
            myVid.currentTime = scrubTime;
        }
        
        let mousedown = false;
        controlProgress.addEventListener('click', scrub);
        /*controlProgress.addEventListener('mousemove', (e) => mousedown && scrub(e));
        controlProgress.addEventListener('mousedown', () => mousedown = true);
        controlProgress.addEventListener('mouseup', () => mousedown = false);*/
        
    });
    
    
    
}
function getTranslate3d (el) {
    var values = el.style.transform.split(/\w+\(|\);?/);
    if (!values[1] || !values[1].length) {
        return [];
    }
    return values[1].split(/,\s?/g);
}
function indexInClass(className,uniqueClassName) {
    var foundIndex = 0;
    
    $(className).each(function(i, obj) {
        if($(this).hasClass(uniqueClassName)){
            //console.log(i);  
            foundIndex = i;
        }       
    });
    return foundIndex;    
}
var fontsize = 100;
function resize_to_fit() {
  fontsize -= 1;
  $('#modelheader-simple .page-block-name h1').css('fontSize', (fontsize));

  if ($('#modelheader-simple .page-block-name h1').height() > fontsize) {
    resize_to_fit();
  }
}
function reset_resize_to_fit() {
    fontsize = 100;
    resize_to_fit();
}
function scrollInAnimationSubtle(target,scroller){
    
    if(scroller == ''){
        scroller = '#theBody';
    }
     
    var imageitems = gsap.utils.toArray(target);

    imageitems.forEach((imageitem) => {

        gsap.from(imageitem, { autoAlpha: 0.5,
        scrollTrigger: {
            scroller:scroller,
            trigger:imageitem,
            start: 'top bottom-=150px',
            onEnter() {
                gsap.fromTo(imageitem, {opacity: 0.5, top: 15}, {duration: 0.6, opacity: 1, top: 0});
            },
            onEnterBack() {
                //gsap.fromTo(imageitem, {opacity: 0, top: 90}, {duration: 0.6, opacity: 1, top: 0});
            },
            onLeave() {
                //gsap.fromTo(imageitem, {opacity: 1, top: 0}, {duration: 0.6, opacity: 0, top: 90});
            },
            onLeaveBack() {
                gsap.fromTo(imageitem, {opacity: 1, top: 0}, {duration: 0.6, opacity: 0.5, top: 15});
            }
        }
        })

    });
    
}
function scrollInAnimation(target,scroller){
    
    if(scroller == ''){
        scroller = '#theBody';
    }
     
    var imageitems = gsap.utils.toArray(target);

    imageitems.forEach((imageitem) => {

        gsap.from(imageitem, { autoAlpha: 0,
        scrollTrigger: {
            scroller:scroller,
            trigger:imageitem,
            start: 'top bottom-=150px',
            onEnter() {
                gsap.fromTo(imageitem, {opacity: 0, top: 90}, {duration: 0.6, opacity: 1, top: 0});
            },
            onEnterBack() {
                //gsap.fromTo(imageitem, {opacity: 0, top: 90}, {duration: 0.6, opacity: 1, top: 0});
            },
            onLeave() {
                //gsap.fromTo(imageitem, {opacity: 1, top: 0}, {duration: 0.6, opacity: 0, top: 90});
            },
            onLeaveBack() {
                gsap.fromTo(imageitem, {opacity: 1, top: 0}, {duration: 0.6, opacity: 0, top: 90});
            }
        }
        })

    });
    
}