https://helgafanderl.com/wp-content/themes/helgafanderl/js/scripts.js?ver=1.0.0

1(function ($, root, undefined) {
2	
3	
4	
5	
6	
7var hdH; 	// Header height 
8var li;		// <li> element
9var thres;	// Thershold for <li> display from the bottom 
10var wdH; 	// Window height 
11var ftH; 	// Footer height 
12var wdS; 	// Window scroll top value 
13var liS; 	// Element value to scroll to
14
15
16$(function () {
17	
18	'use strict';
19	
20	/* This is a simple JS fallback */
21	/* Without JS .fix class messes up the layout */
22	//$("header").addClass("fix");
23	$("#fields").removeClass("hidden");
24	hdH = $("header.fix").outerHeight(); 
25	li = $("#film li");
26	thres = 0;
27
28	/* ------------------------- */
29	/* Home Video Stuff */
30	/* ------------------------- */
31	
32	// 1. Set poster for YouTube video
33	$("#logo").css("background","url('/wp-content/themes/helgafanderl/video/" + thumbs[film] + ".jpg') no-repeat");
34	$("#logo").css("background-size","100%");
35	
36	// 2. Load okvideo.js on the #home div
37	$("#home").okvideo({ source: films[film],
38		volume: 0,
39		loop: false,
40		hd:true,
41		adproof: true,
42		annotations: false,
43		controls: false,
44		onFinished: function() { 
45		//	window.location.href = "http://helgafanderl.com/archive/title/";	
46			window.location.href = "/archive/title/";	
47		}, 
48		onPlay: function() { 
49			$("#logo").css('background-image', 'none');
50			console.log('onplay') 
51		},
52	 });
53	 
54	// 3. Click event on the #home div
55	$('#logo').click(function() {
56		$("#home").fadeOut();
57		$(this).fadeOut();
58		//setTimeout(function() { window.location.href = "http://helgafanderl.com/archive/title/";}, 500);
59		setTimeout(function() { window.location.href = "/archive/title/";}, 500);
60	});
61
62	/* ------------------------- */
63	/* Navigation for Text and About */
64	/* ------------------------- */
65	
66	$('aside ul a.pageLink').click(function(){
67		$('html, body').animate({
68			scrollTop: $( $.attr(this, 'href') ).offset().top
69		}, 500);
70		return false;
71	});
72	
73	$('a.backLink').click(function(){
74		$('html, body').animate({
75			scrollTop: 0
76		}, 500);
77		return false;
78	});
79	
80	/* ------------------------- */
81	/* Animation Stuff			 */
82	/* ------------------------- */
83	
84	setTimeout(function() {$("#main > section").removeClass("hidden"); $("#main > aside").removeClass("hidden");}, 100);	
85	setTimeout(function() {$("#main header").removeClass("hidden"); $("#main footer").removeClass("hidden");}, 500);	
86	setTimeout(function() {$("#film ul").removeClass("hidden");}, 1000);
87
88
89	/* ------------------------- */
90	/* Scroll fix				 */
91	/* ------------------------- */
92
93	fixDisplay("resize");
94	$(window).on('resize', function(e) { fixDisplay("resize"); });
95	$(window).on("scrollstop", {latency: 600}, function(e) { fixDisplay("scroll"); });
96	
97	
98	/* ------------------------- */
99	/* Light box stuff			 */
100	/* ------------------------- */
101	
102	$("#film figure a").click(function() {
103		$("#overlay").hide();
104		$("#lightbox").fadeIn();
105		/* Pick the url from the data-video attribute */
106		var file = $(this).data("video");
107		file = file.toLowerCase()
108		console.log("Going to play " + file);
109		/* Set up Vide.js */
110		$("#lightbox #canvas").vide(file + ".mp4", {loop: false});
111    	var video = $("#lightbox #canvas").data("vide").getVideoObject();
112	
113		video.play();
114	
115		video.onended = function() {
116   			console.log("The video has ended");
117			$("#overlay").removeClass("load");
118			$("#overlay").removeClass("pause");
119			$("#overlay").addClass("play");
120			$("#overlay").fadeIn();
121		}
122		
123		video.oncanplay = function() {
124			console.log("Can play the video!");
125			$("#overlay").hide();
126		}
127		
128		video.onloadstart = function() {
129			console.log("Loading started of " + file);
130 			$("#overlay").removeClass("pause");
131			$("#overlay").removeClass("play");
132			$("#overlay").addClass("load");
133			$("#overlay").fadeIn(); 
134		}
135	
136	/*
137video.on('loadstart', function() {
138	console.log("Loading started of " + file);
139 $("#overlay").removeClass("pause");
140$("#overlay").removeClass("play");
141$("#overlay").addClass("load");
142$("#overlay").fadeIn(); 
143}); 
144$('#lightbox #canvas video').on('canplay', function() {
145		console.log("Loading done!");
146
147
148$("#overlay").hide();
149
150}); 
151$('#lightbox #canvas video').on('ended',function(){

152			console.log("Ended");
153
154	
155$("#overlay").removeClass("load");
156$("#overlay").removeClass("pause");
157$("#overlay").addClass("play");
158$("#overlay").fadeIn();
159
160});  
161*/
162return false;
163});
164	
165	
166	
167	$("#lightbox #canvas").click(function() {
168		var video = $("#lightbox #canvas").data('vide').getVideoObject();
169		if (video.paused == true) {
170			$(this).find("#overlay").fadeOut();
171			video.play(); 
172		} else {
173			video.pause();
174			$(this).find("#overlay").removeClass("load");
175			$(this).find("#overlay").removeClass("play");
176			$(this).find("#overlay").addClass("pause");
177			$(this).find("#overlay").fadeIn();
178		}
179		return false;
180	});
181		
182	$("#lightbox").click(function() {
183		$(this).fadeOut();
184	});
185	
186	
187	
188	
189	$("#about .videoWrap").click(function() {
190		console.log("Video clicked!");
191		var video = $(this).find("video")[0];
192		if (video.paused == true) {
193			$(this).find(".overlay").fadeOut();
194			video.play(); 
195		} else {
196			video.pause();
197			$(this).find(".overlay").removeClass("play");
198			$(this).find(".overlay").addClass("pause");
199			$(this).find(".overlay").fadeIn();
200		}
201		
202		
203		
204		
205	});
206	
207	li.click(function() {
208		var el = $(this);
209		if (!$(this).hasClass("closed")) {
210			// If open
211			el = $(this);
212			var elH = el.outerHeight()*0.5;
213			el.find("figure").addClass("hidden"); 
214			el.find("p").addClass("hidden"); 
215			setTimeout(function() { el.animate({height: elH}, 250).addClass("closed") }, 350);
216		} else {
217			// If closed
218			el = $(this);
219			var elH = el.outerHeight();
220			// Find all open <li>
221			var oEl = $("#film li").not(".closed");
222			if (oEl.length) {
223				// There is at least one open <li>
224				oEl.find("figure").addClass("hidden"); 
225				oEl.find("p").addClass("hidden"); 
226				setTimeout(function() { 
227					oEl.animate({height: elH}, 250).addClass("closed"); 
228					el.animate({height: elH * 2}, 250).removeClass("closed"); 
229				}, 350);
230				setTimeout(function() {
231					el.find("figure").removeClass("hidden"); 
232					el.find("p").removeClass("hidden"); 
233				}, 550);
234			} else {
235				// All <li> are closed
236				el.animate({height: elH * 2}, 250).removeClass("closed");
237				setTimeout(function() {
238					el.find("figure").removeClass("hidden"); 
239					el.find("p").removeClass("hidden"); 
240				}, 250);	
241			}
242		} 
243	}); 
244	
245	function fixDisplay(type) {
246		
247		/* Find scroll top value, crossbrowser */
248		wdS = $("body").scrollTop() ? $("body").scrollTop() : $("html").scrollTop();
249		
250		if (type == "resize") {
251			hdH = $("header.fix").outerHeight(); 
252			/* Window height */
253			wdH = $(window).height();
254			/* Set film section margin from header height */
255			$("#film").css({ "margin-top": hdH });
256			/* Find the last <li> element visible */
257			for (var i=0;i<li.length; i++) {	
258				// For should be better than .each() for perfomance
259				var el = li.eq(i);
260				if ((el.offset().top + el.height()) > (wdH - hdH + wdS)) { ftH = el.offset().top; break; }
261			}
262			/* Set footer height via last <li> top value */
263			$("#main > footer").css({ "height": wdH - ftH + wdS - 4 });
264			
265		} else if (type == "scroll") {
266			/* Find the first <li> element visible */
267			for (var i=0;i<li.length; i++) {	
268				// For should be better than .each() for perfomance
269				var el = li.eq(i);
270				if ((el.offset().top + el.height()) > (hdH + wdS)) { liS = el.offset().top - hdH; break; }
271			}
272			/* Scroll to element */
273			$('html, body').animate({ scrollTop: liS }, 100);
274		}
275	}
276	
277}); // /dom ready
278	
279	
280	
281	
282	
283})(jQuery, this);