var switcher = 'all-projects-closed'; // Set a variable to say that no boxes are open
var firstClick = 'Yes'; // Set a variable to say that no boxes are open

var _sp = 1.1;  //Factor Speed Variable

var stageexist = document.getElementById("stage");
var PortfolioItemExists = document.getElementById("itemdiva1");

window.$my =
{
	positionArray: new Array(),
	heightArray: new Array(),
	heightAndPosArray: new Array(),
	leftArray: new Array(),
	widthArray: new Array(),
	currentItem: '0'
};


/*   ------ UPDATE MASONRY FUNCTIONALITY    ----------  */
function resetMasonry(){
	$('#container').masonry({itemSelector : '.item',  gutter : '.gutter-sizer', columnWidth : '.grid-sizer',stagger: 16,  percentPosition: true, transitionDuration: '1.4s',  isAnimated: true });
}


/*-----------------------------------------------------------------------------------*/
/* FANCY STICKY NAVI STUFF
/*-----------------------------------------------------------------------------------*/

var desktopSize = window.matchMedia( "(min-width: 1024px)" );

$(window).scroll(function(){
	if  ($(window).scrollTop() >= 107 ){ /* ETWAS RUNTER GESCROLLT */
			if(desktopSize.matches){
				$("div.logonav").css({position:'sticky',top:'-60px' });
				$("div.logo").css({opacity:'0' });

			} else{ /* BILDSCHIRMGRÖSSE TABLET ODER KLEINER */
				$("div.logonav").css({position:'relative'});
				$("div.logo").css({opacity:'1' });

			}
	} else { /* GANZ OBEN GESCROLLT */
		$("div.logo").css({opacity:'1' });
		if(desktopSize.matches){
			$("div.logonav").css({position:'absolute', top:'3.8em'});
		}
			$("div.logonav").css({position:'relative'});
	}
});



 

 /*-----------------------------------------------------------------------------------*/
 /*  get font-size for em-calculation
 /*-----------------------------------------------------------------------------------*/

 var renderedfontsize = parseFloat(getComputedStyle(document.body).fontSize);
 var positionfactor = renderedfontsize * 2.3;



/*-----------------------------------------------------------------------------------*/
/* Custom Swf Inject Sascha Gallinat
/*-----------------------------------------------------------------------------------*/

$('a.btnVideo').each(function(e){
 $(this).click(function(event){
	$(this).fadeOut(300*_sp);
	event.preventDefault();
	var videoValue = this.href;
	var lastChar = videoValue.substr(videoValue.length - 7);
	var fileSuffix = videoValue.substr(videoValue.length - 3);
	var videoName = videoValue.substr(0,videoValue.length-3 );
	var ogvName = eval('videoName + "ogg";');
	var videoBg = $(this).parent().parent().find('img:first').attr('src');

	var embedStringOld = "<div id=\"videodiv\"><video width=\"702\" height=\"auto\" controls=\"controls\"  poster=\""+videoBg+"\" autoplay=\"autoplay\"><source src=\""+videoValue+"\" type=\"video/mp4; codecs=avc1.42E01E,mp4a.40.2\" ><source src=\""+ogvName+"\" type=\"video/ogg\" ><object width=\"702\" height=\"auto\" classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\"><param value=\"true\" name=\"allowfullscreen\"><param value=\"always\" name=\"allowscriptaccess\"><param height=\"auto\" value=\""+videoValue+"\" name=\"movie\"><embed width=\"702\" height=\"auto\" wmode=\"transparent\" allowscriptaccess=\"always\" allowfullscreen=\"true\" type=\"application/x-shockwave-flash\" src=\""+videoValue+"\"></object></video></div>";
		var embedString = "<div id=\"videodiv\"><iframe class=\"youtube-video\" width=\"1920\" height=\"1080\" source src=\""+videoValue+"\" frameborder=\"0\" suggestedQuality=\"hd1080\"   allow=\"autoplay; encrypted-media\" allowFullScreen></iframe></video></div>";

	$(this).parent().prepend(embedString);
	TweenMax.to($(this).parent().parent().find('.largeport:first'), .6, {delay:.5, alpha:0, ease:Quad.easeInOut}) ;
	});
});






function populateArrays(){
	$("#container .item").each(function() {
		$my.positionArray.push($(this).offset().top);
		$my.heightArray.push($(this).find('.postphoto').height());
		$my.heightAndPosArray.push(    ( $(this).find('.postphoto').height()  )   + ( $(this).offset().top)   );
		$my.leftArray.push(this.offsetLeft);
		$my.widthArray.push($(this).find('.largeport').width());
	});
}



function makeGray() {
	if (stageexist){
		$('#stage').addClass("greyscale");
	}
	$('.portfoliopreload').addClass("greyscale");
}


function makeColor() {
	if (stageexist){
		$('#stage').removeClass("greyscale");
	}
	$('.portfoliopreload').removeClass("greyscale");
}





/*-----------------------------------------------------------------------------------*/
/*  Changer Function
/*-----------------------------------------------------------------------------------*/
function changer(letter, postid, height, gridSize){
	if(PortfolioItemExists){
		$my.currentItem = letter.substr(1);
		var lettStr = letter.toString();
		var computedDiv = 'itemdiv'+lettStr;

		if (firstClick == 'Yes') {
			firstClick = 'No'
			populateArrays();
		}

		var imgEl = document.getElementById(computedDiv).getElementsByTagName('img').length;
		var images_loaded = 0;

		$("#"+computedDiv).find('img').each(function() {
			if(this.getAttribute('data-src') && this.getAttribute('data-src')!==this.getAttribute('src')) {
				this.src = $(this).data('src');
				TweenMax.to($("#"+computedDiv).children('.loader'),.2, {autoAlpha:1, zIndex:5,display:'block', ease:Quad.easeInOut	});
			}
			var fakeSrc = this.src;

			$("<img/>").attr("src", fakeSrc).css('display', 'none').load(function() {
				images_loaded++;

				/* ---------------   Portfolio Images loaded, fade Out loader animation and and start change function ----*/
				if (images_loaded >= imgEl) {
					TweenMax.to($("#"+computedDiv).children('.thumbnailContainer'),.3, {autoAlpha:0, ease:Quad.easeInOut	});
					TweenMax.to($("#"+computedDiv).children('.loader'),.1, {autoAlpha:0,scale:0, zIndex:0,display:'none', ease:Quad.easeIn});
					change(letter, postid, height, gridSize);
				}
			});
		});
	}
}

function change(letter, postid, height, gridSize){
	stopAllYouTubeVideos();
	TweenMax.to($('#'+switcher).closest(".thumbnailContainer"), 1, {delay:.2, autoAlpha:1, zIndex:0, ease:Quad.easeInOut});  // fade In old before opened Thumbnail
	if (switcher == 'all-projects-closed') {
		makeGray();
		setTimeout(function(){changeHelper(letter);}, 200);
	}
	else {  // ANOTHER ITEM WAS OPEN NOW THE OLD PORTFOLIO ITEM GETS CLOSED AND SCALED BACK TO ICON SIZE
		$('#arrow' + switcher).fadeOut(330, function(){
			$('#itemdiv' +switcher).removeClass("projectfullwidth");
		});
		setTimeout(function(){changeHelper(letter);}, 350);
	}
}

function changeHelper(letter){
	$('#itemdiv' +letter).addClass("projectfullwidth");
	document.getElementById('arrow'+letter).style.display ='inline';
	resetMasonry();
	scrollWindowToPosition("scrolltocurrentrow");

	/* -------------------------  FADE IN BIG DETAIL IMAGES OR VIDEO     -------------------   */
	TweenMax.fromTo($('#arrow' +letter), 1.2, {alpha:0}, {delay:1.1, alpha:1, ease:Quad.easeInOut});
	switcher = letter;
}



/*-----------------------------------------------------------------------------------*/
/*  Close Button
/*-----------------------------------------------------------------------------------*/
function xout(letter, postid) {
	makeColor();
	stopAllYouTubeVideos();

	// fade In again thumbnail
	TweenMax.to($('#'+switcher).closest(".thumbnailContainer"), .9, {delay: .4, autoAlpha:1,  zIndex:0, ease:Quad.easeInOut})

	$('#arrow' + letter).fadeOut(400, function() {
		switcher = 'all-projects-closed'; //Let the function know that no windows are open
		scrollWindowToPosition("closeAndScrollTop");
		$('#itemdiv'+letter).removeClass("projectfullwidth");
	});
	setTimeout(resetMasonry, 600);

}



/*-----------------------------------------------------------------------------------*/
/*  SCROLL WINDOW TO POSITION
/*-----------------------------------------------------------------------------------*/

function scrollWindowToPosition(var_scroll){
	var allValuesBeforeIcon = $my.heightAndPosArray.slice(0, ($my.currentItem-1));
	var largestValueBefore = Math.max.apply(Math, allValuesBeforeIcon);

	/*   scroll offset to ALL ICONS EXCEPT THE FIRST ICON   */
	var scrollPos = largestValueBefore - positionfactor + 32;
	if(scrollPos == "-Infinity"){
		if (stageexist == null){
			scrollPos = 0;

		}else{
			/*   scroll offset to ONLY THE FIRST ICON  */
			scrollPos = firstIconYPos - positionfactor - 4;
		}
	}
	if (var_scroll == "closeAndScrollTop"){
		// CLOSE PROJECT AND SCROLL TO TOP
		scrollToPos = 0;
	}else{
		scrollToPos = scrollPos;
	}
	TweenMax.to(window, 1.3, {scrollTo:scrollToPos, ease:Quad.easeInOut});
}



function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var firstIconYPos = getOffset( document.getElementById('itemdiva1') ).top;





/* --------------------------------------------------------  SET EVERYTHING IN MOTION   --------------------------------------------------------------------------------------*/




window.addEventListener('load',
function() {
	resetMasonry();
	TweenMax.staggerFromTo('#menu-custommenu li', .5*_sp,{alpha:0, y:"-=20", rotation:-0},{alpha:1, y:"+=20", ease:Quad.easeOut}, -0.05*_sp) ;
	TweenMax.fromTo("#container", .5*_sp, {alpha:0,  y:"-=20"}, {alpha:1,  y:"+=20", ease:Quad.easeOut});
	TweenMax.fromTo(".nav", .1*_sp, {alpha:0,  y:"-=0"}, {delay:.1, alpha:1,  y:"+=0", ease:Quad.easeOut});
	TweenMax.fromTo(".logo", .5*_sp, {alpha:0,  y:"-=20"}, {delay:.25, alpha:1, y:"+=20",  ease:Quad.easeOut});
	TweenMax.fromTo(".description", .5*_sp, {alpha:0,  y:"-=20"}, {delay:.3, alpha:1,  y:"+=20", ease:Quad.easeOut});
	TweenMax.fromTo(".burger", .5*_sp, {alpha:0,  y:"-=20"}, {delay:.3, alpha:1,  y:"+=20", ease:Quad.easeOut});
	TweenMax.fromTo("#footer", .5*_sp, {alpha:0,  y:"+=20"}, {delay:.7, alpha:1,  y:"-=20", ease:Quad.easeOut});

	TweenMax.fromTo("#stage img", .5*_sp, {alpha:0,  y:"-=50"}, { alpha:1,  y:"+=50", ease:Quad.easeOut});
	TweenMax.staggerFromTo('.thumbnailContainer', .5,{alpha:0, y:"-=25"},{delay:.2, alpha:1, y:"+=25", ease:Quad.easeInOut}, 0.04*_sp);
	TweenMax.fromTo(".subcontainer", .5*_sp, {alpha:0,  y:"-=20"}, {delay:.15, alpha:1,  y:"+=20", ease:Quad.easeOut});


	/* ---------- load first portfolio Item automatically ------------*/
	setTimeout(function(){
		if (stageexist == null){changer('a1','#itemdiva1', '500', '1006');}
		return false;
	}, 1000);


}, false);



/* Custom Video Player Functionality    */
function onPlayerReady(event) {
	event.target.setPlaybackQuality('hd1080');
}
function onPlayerStateChange(event) {
	if (event.data == YT.PlayerState.BUFFERING) {
		event.target.setPlaybackQuality('hd1080');
	}
}

/*  Start small banner videos   */

$('.videoGif').parent().click(function () {
	if($(this).children(".videoGif").get(0).paused){
		$('video').each(function () {
			this.pause();
			//this.currentTime = 0;
		});
		$('.playstopped').fadeIn();
		$(this).children(".videoGif").get(0).play();
		//	TweenMax.set($(this).children(".videoGif"), {delay:1, onComplete:function(){$(this).children(".videoGif").get(0).play();}	})
		$(this).children(".playstopped").fadeOut();
		$(this).children(".playstopped-small").fadeOut();
	}else{
		$(this).children(".videoGif").get(0).pause();
		$(this).children(".playstopped").fadeIn();
		$(this).children(".playstopped-small").fadeIn();
	}
});



/* ---------- STOP ALL VIDEOS ------------*/
var stopAllYouTubeVideos = () => {
	var iframes = document.querySelectorAll('iframe');
	Array.prototype.forEach.call(iframes, iframe => {
		iframe.contentWindow.postMessage(JSON.stringify({ event: 'command',
		func: 'pauseVideo' }), '*');
	});
}