/*
	JavaScript for the demo: Recreating the Nikebetterworld.com Parallax Demo
	Demo: Recreating the Nikebetterworld.com Parallax Demo
	Author: Ian Lunn
	Author URL: http://www.ianlunn.co.uk/
	License: http://creativecommons.org/licenses/by-sa/3.0/ (Attribution Share Alike). Please attribute work to Ian Lunn simply by leaving these comments in the source code or if you'd prefer, place a link on your website to http://www.ianlunn.co.uk/.
*/
$(document).ready(function() {
	//selectorok mentése, így gyorsabb
	var $window = $(window);
	var $intro = $('#intro');
	var $markcon = $('#markcon');
	var $creative = $('#creative');
	var $technology = $('#technology');
	var $priorProjects = $('#priorProjects');
	var $clients = $('#clients');
	var $snake = $("#technology .snake");
	var $clientLogos = $("#clients .logos");
	var $hat = $("#markcon .hat");
	
	var windowWidth = $window.width(); //ablak szélességének kiszámolása
	var windowHeight = $window.height(); //ablak magasságának kiszámolása
	
	if (windowWidth <= 1280 && windowHeight <= 720) {
		imageFolder = "small";
		pageDivHeight = 720;
	}
	else if (windowWidth <= 1600 && windowHeight <= 900) {
		imageFolder = "medium";
		pageDivHeight = 900;
	}
	else {
		imageFolder = "large";
		pageDivHeight = 1080;
	}
	
	$('.pageDiv').css({'height': pageDivHeight + 'px'});
	$('.movingElement').css({'height': pageDivHeight + 'px'});
	$intro.css({'backgroundImage': 'url("photo/'+imageFolder+'/intro.jpg")'});
	
	$markcon.css({'backgroundImage': 'url("photo/'+imageFolder+'/markcon.jpg")'});
	$hat.css({'backgroundImage': 'url("photo/'+imageFolder+'/markcon_hat.png")'});
	
	$creative.css({'backgroundImage': 'url("photo/'+imageFolder+'/kreativ.jpg")'});
	
	$technology.css({'backgroundImage': 'url("photo/'+imageFolder+'/technologia.jpg")'});
	$snake.css({'backgroundImage': 'url("photo/'+imageFolder+'/snake.png")'});
	
	$priorProjects.css({'backgroundImage': 'url("photo/'+imageFolder+'/kiemelt_projektek.jpg")'});
		
	$clients.css({'backgroundImage': 'url("photo/'+imageFolder+'/ugyfelek.jpg")'});
	$clientLogos.css({'backgroundImage': 'url("photo/'+imageFolder+'/clientlogos.png")'});
	
	//console.log('windowWidth:'+windowWidth+'windowHeight:'+windowHeight+'imageFolder:'+imageFolder+'pageDivHeight'+pageDivHeight);
	
	// inview class hozzáadása ahhoz a div-hez, amelyiket éppen látjuk
	// ide hozzá kell adni mindegyik div-et az oldalról
	$('#intro,#markcon,#creative,#technology,#priorProjects,#clients').bind('inview', function (event, visible) {
		if (visible == true) {
			$(this).addClass("inview");
		} else {
			$(this).removeClass("inview");
		}
	});
			
	//ez helyezi el a navigációs sávot a képernyő közepére függőlegesen
	function RepositionNav(){
		var windowHeight = $window.height(); //ablak magassága
		var navHeight = $('#nav').height() / 2;
		var windowCenter = (windowHeight / 2); 
		var newtop = windowCenter - navHeight;
		$('#nav').css({"top": newtop}); //hely beállítása
	}
	
	/*
	 * Ez hívódik meg, akárhányszor ha a felhasználó scroll-oz
	 * paraméterek: 
		x = a vízszintes poziciója a háttérnek
		windowHeight = a látómező magassága
		pos = a scroll aktuális helyzete
		adjuster = háttér függőleges helyzetének a korrekciója 
		inertia = hogy milyen gyorsan mozogjon a háttér a scroll-ozáshoz képest
	*/
	function newPos(x, windowHeight, pos, adjuster, inertia){
		return x + "% " + (-((windowHeight + pos) - adjuster) * inertia)  + "px";
	}
	
	//mozgatás közben hívódik meg
	function Move(){ 
		var pos = $window.scrollTop(); //a scrollbar poziciója 
		if($intro.hasClass("inview") && !$markcon.hasClass("inview")){
			if($("#mclogo").css('opacity') == 1 || $("#mclogo").css('display') == "block;") {
				$("#mclogo").fadeOut();
				$("#openCloseWrap").fadeOut();
				$("#nav").fadeOut();
			}
		} else {
			$("#mclogo").fadeIn();
			$("#nav").fadeIn();
			$("#openCloseWrap").fadeIn();
		}
		
		if($intro.hasClass("inview")){
			var intro_faktor = 0.3;
			var intro_eltolas = windowHeight * 1.2;
			$intro.css({'backgroundPosition': newPos(50, windowHeight, pos, intro_eltolas, intro_faktor)});
		}
		if($markcon.hasClass("inview")){
			//meghívjuk a newPos-t, hogy kiszámolja az új háttér pozicióját
			var markcon_faktor = 0.3;
			var markcon_eltolas = windowHeight * 2;
			$markcon.css({'backgroundPosition': newPos(50, windowHeight, pos, markcon_eltolas, markcon_faktor)});
			$hat.css({'backgroundPosition': newPos(50, windowHeight, pos, windowHeight * 2, 0.5)});
		}
		//ha a második div kerül a látótérbe
		if($creative.hasClass("inview")){
			var creative_faktor = 0.3;
			var creative_eltolas = windowHeight * 3;
			//meghívjuk a newPos-t, hogy kiszámolja az új háttér pozicióját
			$creative.css({'backgroundPosition': newPos(50, windowHeight, pos, creative_eltolas, creative_faktor)});
		}
		//ha a harmadik div kerül a látótérbe
		if($technology.hasClass("inview")){
			var technology_faktor = 0.2;
			//var technology_eltolas = 3850;	
			var technology_eltolas = windowHeight * 4;	
			var snake_faktor = 0.5;
			var snake_eltolas = windowHeight * 4+300;
			
			if(imageFolder == "large"){
				snake_eltolas = windowHeight *4 +550;
			}
			
			//meghívjuk a newPos-t, hogy kiszámolja az új háttér pozicióját
			$technology.css({'backgroundPosition': newPos(50, windowHeight, pos, technology_eltolas, technology_faktor)});
			$snake.css({'backgroundPosition': newPos(50, windowHeight, pos, snake_eltolas, snake_faktor)});
		}
		//ha a negyedik div kerül a látótérbe
		if($priorProjects.hasClass("inview")){
			var priorProjects_faktor = 0.1;
			var priorProjects_eltolas = windowHeight * 5;	
			//meghívjuk a newPos-t, hogy kiszámolja az új háttér pozicióját
			$priorProjects.css({'backgroundPosition': newPos(50, windowHeight, pos, priorProjects_eltolas, priorProjects_faktor)});
		}
		if($clients.hasClass("inview")){
			var clients_faktor = 0.05;
			var clients_eltolas = windowHeight * 6;
			var logo_eltolas = windowHeight * 6.2;
			var logo_faktor = 0.5;
			
			if(imageFolder == "large") {
				logo_eltolas = pageDivHeight * 5.8;
			}
			
			//meghívjuk a newPos-t, hogy kiszámolja az új háttér pozicióját
			$clients.css({'backgroundPosition': newPos(50, windowHeight, pos, clients_eltolas, clients_faktor)});
			$clientLogos.css({'backgroundPosition': newPos(50, windowHeight, pos, logo_eltolas, logo_faktor)});
		}
	}
		
	RepositionNav(); 		   //navigáció középre rendezése, ha betölt a site
	
	$window.resize(function(){ // ha a felhasználó átméretezi az ablakot
		Move(); 		 	   // mozgassa a háttereket a scrollhoz képest
		RepositionNav();       // átpozicionálja a navigációs sávot, hogy középen legyen
	});		
	
	$window.bind('scroll', function(){ // ha a felhasználó scrolloz
		Move(); 					   // mozgassa a háttereket a scrollhoz képest
	});
});