https://www.atterwasch.net/js/core.js

1var _skrollr; // the instance of skrollr
2var DEBUG_SCROLL = false; // toggle to (un)set the console.logs of the current scroll position
3var DEBUG = true; // toggle to (un)set all the other console.logs
4
5var langObj; // object with all translations
6//var individualDivHeight; // not used
7var subtitles = [];
8var playSubtitles; //interval
9var autoplay = false;
10var playSounds = true; // toggle to (un)set the sound
11var cur; // current loading progress
12var currentSound;
13var currentPanel;
14var previousPanel;
15var totalScroll;
16var autoplayDuration = 90000;
17var timers = new Array();
18var currentPosition = 0;
19var _data;
20var volume = 1;
21var loadingSound = new buzz.sound( 'chapters/load', { formats: [ 'ogg', 'mp3' ], preload:true, autoplay:false,loop:true } );
22function closeMenu () {
23	
24	if ( $('#menu').hasClass("active")  && !autoplay && !$('#sb-container').is(":visible")) {
25			
26		$('#menu').animate({
27			right: "25px"
28		}, 500, function() {
29			//animation complete
30		});
31			
32		// animate drawer
33		$("ul#settings").animate({
34			right: "-275px"
35		}, 500, function() {
36			//animation complete
37		});
38						
39		$('#menu').removeClass("active");
40
41	} 
42}
43
44function menuEvents () {
45	
46	
47
48//	if (DEBUG) console.log("MENU EVENTS");
49	$('#menu #title').click(function() {
50//		allSounds[0].sound.play();
51		// close drawer
52		if ( $('#menu').hasClass("active")) {
53			
54			$('#menu').animate({
55				right: "25px"
56			}, 500, function() {
57				//animation complete
58			});
59			
60			// animate drawer
61			$("ul#settings").animate({
62				right: "-275px"
63			}, 500, function() {
64				//animation complete
65			});
66						
67			$('#menu').removeClass("active");
68		// open drawer	
69		} else {
70			
71			//animate menu button
72			$('#menu').animate({
73				right: "275px"
74			}, 500, function() {
75				//animation complete
76			});
77			
78			// animate drawer
79			$("ul#settings").animate({
80				right: "0px"
81			}, 500, function() {
82				//animation complete
83			});
84
85
86			$('#menu').addClass('active');	
87			
88		};
89		
90	}) // end menu title click
91	
92	
93	// click on logo 
94
95	$('#logo').click(function() {
96		location.hash = "#zukunft";
97		changeChapter("chapters/c1/index.php", _skrollr, allSounds);
98	})
99	
100	
101	
102	// sound toggle button
103	$('li#sound').click(function() {
104		if (playSounds == false) {
105			playSounds = true;
106			for(var i in buzz.sounds) {
107				buzz.sounds[i].unmute();
108				volume = 1;
109			}
110			$("ul#settings li#sound").html(langObj.soundOffBtn);
111			$(this).addClass('off');
112			$(this).removeClass("on");	
113		} else {
114			playSounds = false;
115			for(var i in buzz.sounds) {
116				buzz.sounds[i].mute();
117				volume = 0;
118			}
119			$("ul#settings li#sound").html(langObj.soundOnBtn);
120			$(this).addClass('on');	
121			$(this).removeClass("off");	
122		}
123	}) // end sound toggle button
124	
125	
126	// fullscreen toggle button
127	$('li#fullscreen').click(function(){
128		//$(this).addClass('expand');
129		if (DEBUG) console.log("CLICK");
130		var docElement, request;
131		
132		// enter full screen
133		if ( $(this).hasClass("expand") ) {
134			$(this).removeClass("expand");
135			$(this).addClass("reduce");
136			
137			
138	    docElement = document.documentElement;
139			request = docElement.requestFullScreen || docElement.webkitRequestFullScreen || docElement.mozRequestFullScreen || docElement.msRequestFullScreen;
140	
141			if(typeof request!="undefined" && request){
142	        	request.call(docElement);
143			}
144
145	    
146		// exit fullscreen			
147		} else if ( $(this).hasClass("reduce") ) {
148			$(this).removeClass("reduce");
149			$(this).addClass('expand');
150			
151			docElement = document;
152			request = docElement.cancelFullScreen|| docElement.webkitCancelFullScreen || docElement.mozCancelFullScreen || docElement.msCancelFullScreen || docElement.exitFullscreen;
153			if(typeof request!="undefined" && request){
154	        	request.call(docElement);
155			}
156			
157		}	
158	}) // end fullscreen toggle button
159	
160	// autoplay function
161	$('li#autoplay').click (function() {
162	
163	
164		if ( $('#menu').hasClass("active")) {
165			
166			$('#menu').animate({
167				right: "25px"
168			}, 500, function() {
169				//animation complete
170			});
171			
172			// animate drawer
173			$("ul#settings").animate({
174				right: "-275px"
175			}, 500, function() {
176				//animation complete
177			});
178						
179			$('#menu').removeClass("active");
180		// open drawer	
181		}
182	
183	
184	
185	
186	
187		if ( $(this).hasClass("stop") ) {
188			// if it's autoplaying
189			_skrollr.stopAnimateTo();
190			$("ul#settings li#autoplay").html(langObj.autoplayOnBtn);
191			$(this).addClass('start');
192			$(this).removeClass("stop");
193			autoplay = false;

194		} else {
195		
196			
197			b = totalScroll-currentPosition;
198			x = Number ( b * autoplayDuration / totalScroll);
199		
200			if (DEBUG) console.log("NEW DURATION: " + x);
201			if (DEBUG) console.log("totalScroll: " + totalScroll);
202			if (DEBUG) console.log("B: " + b);
203			if (DEBUG) console.log("currentPosition: " + currentPosition);
204			if (DEBUG) console.log("AUTOPLAY DURATION: " + autoplayDuration);
205		
206			_skrollr.animateTo(totalScroll, {
207            	duration: x
208			});
209			$("ul#settings li#autoplay").html(langObj.autoplayOffBtn);
210			$(this).addClass('stop');
211			$(this).removeClass("start");
212			autoplay = true;
213		}
214		 
215	})
216	//end autoplay function
217	
218	
219	// about function
220	$('li#info').click(function() {
221		    var content = $('#sbdiv').html();
222		    Shadowbox.open({
223		        content: content,
224		        player: 'html',
225		        displayNav: false,
226		        height: 1000,
227		        width: 1000,
228		        overlayOpacity: 1
229		    });
230		});
231	// end about function	
232	
233// LANGUAGES	
234	$('#settings li#lang p#de').click(function() {
235		//switchLanguage ("de");
236		window.open("de.php", "_self", false);
237	});
238	$('#settings li#lang p#en').click(function() {
239		//switchLanguage ("en");
240		window.open("index.php", "_self", false);
241	})
242	$('#settings li#lang p#pl').click(function() {
243		//switchLanguage ("pl");
244		window.open("pl.php",  "_self", false);
245	})
246	$('#settings li#lang p#fr').click(function() {
247		//switchLanguage ("fr");
248		window.open("fr.php", "_self", false);
249	})
250	
251	
252	
253// CHAPTER TIMELINE CLICKS
254	$("#chapter-overview .chapter").each (function (i) {
255		
256		$(this).hover(
257			// hover in
258			function(){
259				$(this).css('color', '#FFF');
260				$(this).siblings('.line').animate({width:'20px'}, 500);
261			},
262			// hover out
263			function() {
264				$(this).css('color', '#CCC');
265				$(this).siblings('.line').animate({width:'15px'}, 500);
266			}
267		)
268		
269		$(this).click( function() {
270			if (DEBUG) console.log("CLICK. GO TO: " + "chapters/"+this.id+"/index.php");
271			location.hash = "#" + this.id;
272			changeChapter ("chapters/"+this.id+"/index.php", _skrollr, allSounds);
273		})
274	});
275			
276// CHAPTER HOVER			
277	$('#chapter-overview').hover( 
278		// HOVER IN
279		function() {
280			if (DEBUG) console.log("HOVER IN");
281			
282			$("#chapter-overview .chapter").each (function (i) {
283				$(this).animate({ marginLeft: "25px", opacity: "1" }, 250+(i*50), function() {});
284//				$(this).filter(':not(:animated)').animate({ marginLeft: "25px", opacity: "1" }, 500+(i*50), function() {});
285			})
286			
287		},
288		// HOVER OUT
289		function() {
290			if (DEBUG) console.log("HOVER OUT");
291			$("#chapter-overview .chapter").each (function (i) {
292				 $(this).animate({ marginLeft: "-100px", opacity:"0" }, 150+(i*50), function() {} );
293			})
294		}
295	); // END CHAPTER
296
297// TWITTER SHARE	

298	$("#twitter").click(function(e) {
299		e.preventDefault();
300		
301		
302		/*
303		https://twitter.com/intent/tweet?
304		url=<url to tweet>
305		text=<text to tweet>
306		hashtags=<comma separated list of hashtags, with no # on them>
307		*/
308		window.open('https://twitter.com/intent/tweet?url=' + encodeURIComponent(document.URL) + '&text=' + encodeURIComponent(langObj.twitterShare) + "&hashtags=" + langObj.hashtags, 'twitterwindow', 'height=450, width=550, top='+($(window).height()/2 - 225) +', left='+$(window).width()/2 +', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
309 
310	});
311	
312// FACEBOOK SHARE
313	$('#facebook').click(function(e) {
314		e.preventDefault();
315		
316		var leftPosition, topPosition;
317		leftPosition = (window.screen.width / 2) - ((600 / 2) + 10);
318		topPosition = (window.screen.height / 2) - ((600 / 2) + 50);
319    
320		var windowFeatures = "status=no,height=600" + ",width=600"  + ",resizable=yes,left=" + leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY=" + topPosition + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no";
321	 window.open('http://www.facebook.com/sharer.php?u=' + document.URL +'&t='+langObj.facebookShare,'sharer', windowFeatures);
322    return false;
323	});
324	
325// GOOGLE SHARE
326	$('#google').click(function(e) {
327		e.preventDefault();
328		
329		window.open('https://plus.google.com/share?url=' + document.URL,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');
330	})	
331	
332	
333	
334}
335
336
337
338
339
340$(window).resize(function(){
341	resize_bg();
342})
343function resize_bg(){
344 
345    $(".bg").css("left","0");
346	var doc_width = $(window).innerWidth();
347    var doc_height = $(window).innerHeight();
348    var image_width = $(".bg").width();
349    var image_height = $(".bg").height();
350    var image_ratio = image_width/image_height;      
351    var new_width = doc_width;
352    var new_height = Math.round(new_width/image_ratio);
353 
354    if(new_height<doc_height){
355    	new_height = doc_height;
356        new_width = Math.round(new_height*image_ratio);
357        var width_offset = Math.round((new_width-doc_width)/2);
358        $("img").css("left","-"+width_offset+"px");
359	}
360    $(".bg").width(new_width);
361	$(".bg").height(new_height);    
362	
363	$("body").css("min-height", function(){ 
364		return $(window).height();
365	});
366}
367     
368
369function changeChapter (URL, _allSounds) {
370// CLEAN UP
371
372	
373	
374	if (_skrollr != undefined) _skrollr.setScrollTop(1);
375	if (_skrollr != undefined) _skrollr.destroy();
376	buzz.all().stop();
377	allSounds = [];
378
379	for (var i = 0; i < timers.length; i++)
380	{
381    	clearInterval(timers[i]);
382    	if (DEBUG) console.log("CLEAR INTERVAL");
383	}
384
385	
386	//clearInterval(playSubtitles);
387
388	$('#preload').show();
389	$("#subtitles").hide();
390	$("#logo").hide();
391	$("#menu").hide();
392	$('#main-container').hide();
393	$('#chapter-overview').hide();
394	$('#description').removeClass('active');
395	$('#timeline').removeClass('active');
396	$('#topline').width("0%");	
397	$('#rightline').height("0%");	
398	$('#bottomline').width("0%");	
399	$('#leftline').height("0%");
400	$("section#audio-progress").css('width', "0%");
401	
402	$("body").css("min-height", function(){ 
403		return $(window).height();
404	});
405	
406	switchLanguage (language);
407
408// READ HASH
409
410	if (window.location.hash == "#zukunft" || window.location.hash == "") {
411		location.hash = "#zukunft";
412		URL = "chapters/zukunft/index.php";
413		
414		preloader = langObj.preloader_c1 + "<section id='fullscreen' class='intro expand_w'><span>" + langObj.fullscreenBtn + "</span></section>";
415	}
416	if (window.location.hash == "#gegenwart" || window.location.hash == "#folge-01") {
417		location.hash ="#folge-01";
418		URL = "chapters/folge-01/index.php";
419		preloader = "<h1>" + langObj.chapter2Navigation + ", " + langObj.episode1Navigation + "</h1>" + "<h2>" + langObj.chapter2Subtitle;
420
421	}
422	if (window.location.hash == "#vergangenheit") {
423		location.hash = "#vergangenheit";
424		URL = "chapters/vergangenheit/index.php";
425		preloader = "<h1>" + langObj.chapter3Navigation + "</h1>" + "<h2>" + langObj.chapter3Subtitle;
426
427	}
428	
429	if (window.location.hash == "#folge-02") {
430		location.hash = "#folge-02";
431		URL = "chapters/folge-02/index.php";
432		preloader = "<h1>

432" + langObj.chapter2Navigation + ", " + langObj.episode2Navigation + "</h1>" + "<h2>" + langObj.episode2Subtitle;
433
434	}
435	if (window.location.hash == "#folge-03") {
436		location.hash = "#folge-03";
437		URL = "chapters/folge-03/index.php";
438		preloader = "<h1>" + langObj.chapter2Navigation + ", " + langObj.episode3Navigation + "</h1>" + "<h2>" + langObj.episode3Subtitle;
439
440	}
441	if (window.location.hash == "#folge-04") {
442		location.hash = "#folge-04";
443		URL = "chapters/folge-04/index.php";
444		preloader = "<h1>" + langObj.chapter2Navigation + ", " + langObj.episode4Navigation + "</h1>" + "<h2>" + langObj.episode4Subtitle;
445
446	}
447	if (window.location.hash == "#folge-05") {
448		location.hash = "#folge-05";
449		URL = "chapters/folge-05/index.php";
450		preloader = "<h1>" + langObj.chapter2Navigation + ", " + langObj.episode5Navigation + "</h1>" + "<h2>" + langObj.episode5Subtitle;
451	}
452
453
454// LOAD CHAPTER
455	
456	$( "#main-container" ).empty();
457	$('#preload').html(preloader);
458	$('#preload').show();
459	loadingSound.play();
460	loadingSound.fadeIn(500);
461	
462	$( "#main-container" ).load( URL, function( response, status, xhr ) {
463		if (DEBUG) console.log("STATUS: " + status);
464		cur = 0;
465		var imgLoad = imagesLoaded( $('#main-container') );
466		
467		if (!Modernizr.fullscreen) {
468			$('#fullscreen').hide();
469			$('#fullscreen.intro').hide();
470		}
471	
472		$('#fullscreen.intro').click(function(){
473		//$(this).addClass('expand');
474			if (DEBUG) console.log("CLICK");
475			var docElement, request;
476			
477			// enter full screen
478			if ( $(this).hasClass("expand_w") ) {
479				$(this).removeClass("expand_w");
480				$(this).addClass("reduce_w");
481				
482				
483		    docElement = document.documentElement;
484				request = docElement.requestFullScreen || docElement.webkitRequestFullScreen || docElement.mozRequestFullScreen || docElement.msRequestFullScreen;
485		
486				if(typeof request!="undefined" && request){
487		        	request.call(docElement);
488				}
489	
490		    
491			// exit fullscreen			
492			} else if ( $(this).hasClass("reduce_w") ) {
493				$(this).removeClass("reduce_w");
494				$(this).addClass('expand_w');
495				
496				docElement = document;
497				request = docElement.cancelFullScreen|| docElement.webkitCancelFullScreen || docElement.mozCancelFullScreen || docElement.msCancelFullScreen || docElement.exitFullscreen;
498				if(typeof request!="undefined" && request){
499		        	request.call(docElement);
500				}
501				
502			}	
503		}) // end fullscreen toggle button
504		
505		
506		
507		imgLoad.on( 'done', function( instance ) {
508			loadingSound.fadeOut(4000);
509			$("#preload").animate({
510				opacity:0
511			}, 4000, function() {
512				
513				$('#preload').hide();
514				$('#preload').css({opacity:1, top:"50%"});
515				$("#preload").html("");
516				init();	
517				$('#main-container').fadeIn();
518				$("#menu").fadeIn();
519				$("#logo").fadeIn();
520				$('#chapter-overview').fadeIn();
521				resize_bg();
522				loadingSound.stop();
523			
524				checkMovement();
525				
526				// SHOW THE NAVIGATION SHORTLY
527				//if (location.hash == "#zukunft" || location.hash == "#vergangenheit") {
528					console.log("OUT");
529					$("#chapter-overview .chapter").each (function (i) {
530						$(this).animate({ marginLeft: "25px", opacity: "1" }, 250+(i*50), function() {
531								
532							setTimeout(function() {
533								$("#chapter-overview .chapter").each (function (i) {
534									$(this).animate({ marginLeft: "-100px", opacity:"0" }, 150+(i*50), function() {} );
535									})}, 4000);
536							
537						});
538					})
539				//} // END SHOW NAVIGATION SHORTLY	
540			})
541			
542		}); // END ON DONE
543		
544		imgLoad.on( 'fail', function( instance ) {
545			if (DEBUG) console.log('FAIL - all images loaded, at least one is broken');
546		});
547		
548		imgLoad.on( 'progress', function( instance, image ) {
549			var result = image.isLoaded ? 'loaded' : 'broken';
550			//if (DEBUG) console.log( 'image is ' + result + ' for ' + image.img.src );
551			
552			loadingProgress (instance.images.length);
553		});
554		
555	}); // END LOAD
556	
557	
558}
559
560
561function loadingProgress (allImg) {
562	cur = cur + 1;
563	var n = Math.round(allImg / 4);
564
565	var rightProgress = n;
566	var bottomProgress = n*2;
567	var leftProgress = n*3;
568	
569	if (cur >= 0 && cur <= rightProgress ) {
570//		if (DEBUG) console.log("LOADING TOP BORDER: " + Number(cur/rightProgress) * 100 );	
571		p1 = Math.round ( (cur/rightProgress) * 100 );
572		$('#topline').width(p1 +"%");
573	}
574	
575	if (cur >= rightProgress && cur <= bottomProgress) {
576//		if (DEBUG) console.log("LOADING RIGHT BORDER: " + Number(cur/bottomProgress) * 100 );	
577		p2 = Math.round ( (cur/bottomProgress) * 100 );
578		$('#rightline').height(p2 +"%");
579	}
580	
581	if (cur >= bottomProgress && cur <= leftProgress) {
582//		if (DEBUG) console.log("LOADING BOTTOM BORDER: " + Number(cur/leftProgress) * 100 );	
583		p3 = Math.round ( (cur/leftProgress) * 100 );
584		$('#bottomline').width(p3+"%");
585	}
586	
587	if (cur >= leftProgress && cur <= allImg) {
588//		if (DEBUG) console.log("LOADING LEFT BORDER: " + Number(cur/allImg) * 100 );	
589		p4 = Math.round ( (cur/allImg) * 100 );
590		$('#leftline').height(p4+"%");
591	}
592}
593
594
595/** 
596** SOUNDS & SUBTITLES
597
598**/
599var p = 0;
600// check which panel is onscreen and play its sound
601function playSound(data) {
602
603	if (data == 0) {
604		data.curTop = 0;
605	}
606	for (i = 0; i < allSounds.length; i++) {
607		
608		if ( allSounds[i].position <= data.curTop && allSounds[i+1].position >= data.curTop ) {
609			currentPanel = i;
610			// check that we are changing panel
611			if ( currentPanel != previousPanel) {  // if we changed panel, play the sound	
612				if (DEBUG) console.log ("PLAY ONCE: " + currentPanel);
613				soundTransition(currentPanel);
614				p = previousPanel;				
615				previousPanel = currentPanel;
616			}			
617		}			
618	} // end for loop
619
620}
621
622// create the sound transitions
623function soundTransition(c) {
624	if (allSounds[previousPanel] != undefined ) {
625		 if (DEBUG) console.log("START FADE OUT OF : " + allSounds[previousPanel].id);
626		if (DEBUG) console.log("FADE OUT THIS SOUND: " + allSounds[previousPanel].id + " " + allSounds[previousPanel].fadeOutDuration);
627		 allSounds[previousPanel].sound.fadeOut( allSounds[previousPanel].fadeOutDuration, function() {
628			//if (DEBUG) console.log("FINISHED FADE OUT, PAUSE: " + allSounds[p].id);
629			if (DEBUG) console.log("P: " + p);
630			
631			if (p != -1) allSounds[p].sound.pause();
632		 });
633		
634	}
635	
636	if (allSounds[currentPanel].hasSubs) {
637		subs_file = allSounds[currentPanel].subfile + language +".srt";
638		if (DEBUG) console.log("GET SUBTITLES FILE: " + subs_file);
639		getSubtitles (subs_file);
640	} else {
641		//if (DEBUG) console.log("DOESN'T HAVE SUBTITLES");
642		clearInterval(playSubtitles);
643	}
644	//console.log("CURRENT PANEL: " + currentPanel);
645	//console.log("PREVIOUS PANEL: " + previousPanel);
646	if (DEBUG_SCROLL) console.log("PLAY THIS SOUND: " + allSounds[currentPanel].id);
647	if (DEBUG_SCROLL) console.log("FADE IN THIS SOUND: " + allSounds[currentPanel].id + " " + allSounds[currentPanel].fadeInDuration);
648	allSounds[currentPanel].sound.play().fadeIn (allSounds[currentPanel].fadeInDuration);
649	currentSound = allSounds[currentPanel].sound;
650}
651
652
653function getSubtitles (srtFile) {
654	subtitles = [];
655	$.ajax({
656			url: srtFile,
657			success: function(data) {
658				if (DEBUG) console.log("subsfile: " + srtFile);
659				var sections = data.split("\r\n\r\n");
660				
661				if (DEBUG) console.log(JSON.stringify(data));
662				if (DEBUG) console.log(sections);
663				$.each(sections, function(index, value) {
664					var lines = value.split("\r\n");
665					if (DEBUG) console.log(lines);
666					var subtitle_data = { 
667						"st": to_seconds(lines[1].split(" --> ")[0]), // start time
668						"et": to_seconds(lines[1].split(" --> ")[1]), // end time
669						"da": lines.slice(2)
670					};
671					
672					subtitles.push(subtitle_data);
673					
674					if (DEBUG) console.log("LOADED SUBTITLES FOR " + language) ;
675					if (DEBUG) console.log(subtitle_data);
676				});
677				if (DEBUG) console.log("INIT SUBS INT 2");
678				playSubtitles = setInterval(subtitlesInterval, 100);
679				timers.push(playSubtitles);
680			},
681			async: false
682		});
683}
684
685function switchLanguage (lang) {
686	if (lang == "en") {
687		language = "en";
688		langObj = english;
689	}
690	if (lang == "de") {
691		language = "de";
692		langObj = german;
693	}
694	if (lang == "fr") {
695		language = "fr";
696		langObj = french;
697	}
698	if (lang == "pl") {
699		language = "pl";
700		langObj = polish;
701	}
702	$("section#zukunft span#zukunft.chapter").html(langObj.chapter1Navigation);
703	$("section#gegenwart span#gegenwart.chapter").html(langObj.chapter2Navigation);
704	$("section#vergangenheit span#vergangenheit.chapter").html(langObj.chapter3Navigation);
705	
706	$("section#folge-01 span#folge-01.chapter").html(langObj.episode1Navigation);
707	$("section#folge-02 span#folge-02.chapter").html(langObj.episode2Navigation);
708	$("section#folge-03 span#folge-03.chapter").html(langObj.episode3Navigation);
709	$("section#folge-04 span#folge-04.chapter").html(langObj.episode4Navigation);
710	$("section#folge-05 span#folge-05.chapter").html(langObj.episode5Navigation);
711	
712	$("#menu section#title").html(langObj.menuBtn);
713	$("ul#settings li#autoplay").html(langObj.autoplayOnBtn);
714	if (playSounds) {
715		$("ul#settings li#sound").html(langObj.soundOffBtn);
716	} else {
717		$("ul#settings li#sound").html(langObj.soundOnBtn);
718	}
719	$("ul#settings li#fullscreen").html(langObj.fullscreenBtn);
720	$("ul#settings li#info").html(langObj.aboutBtn);
721	$("section #box").html(langObj.aboutText);
722	
723	// if we are at the first chapter
724	if (location.hash == "#zukunft") {
725		$(".title h1").html(langObj.introTitleText);
726		$(".title h2").html(langObj.introSubtitleText);
727		$("p#scroll-down-text").html(langObj.scrolldownInfoText);
728		$(".copy-1").html(langObj.introCopy2);
729		$(".copy-2").html(langObj.introCopy3);
730	}
731}
732
733
734function subtitlesInterval () {
735	//if (DEBUG) console.log("cur tim: " + p12_13s.getTime());
736//	if (DEBUG) console.log("END TIME: " + subtitles[subtitles.length-1].et);
737
738	if (currentSound.getTime() >= subtitles[subtitles.length-1].et ) {
739		if (playSubtitles != undefined) clearInterval(playSubtitles);	
740	//	if (DEBUG) console.log("clear int: " + playSubtitles);
741	}
742	var current_subtitle = 0;
743	
744	
745	
746// RUN PRELOADER
747	time     = currentSound.getTime();
748	duration = currentSound.getDuration();
749	var show_sub = true;
750	  percent  = buzz.toPercent( time, duration, 2 );
751	 if (DEBUG) console.log ("TIME / DURATION: " + time + " / " + duration);
752	 if (DEBUG) console.log("PERCENT: " + percent);
753
754	if (Math.round(duration-time) > 2) {
755		$("#exit").html(langObj.endOfEpisode + " " + secondsToTime( Math.round(duration-time) ) );
756		

757	} else {
758		console.log("REMOVE");
759		$("#exit").animate({
760				opacity:0
761			}, 2000, function() {
762				$("#exit").html("");	
763			})
764
765		show_sub = false;
766		//$("#subtitles").empty();
767		//$("#subtitles").hide();	
768	}
769	
770//	if (DEBUG) console.log("PERCENT: " + percent);
771	$("section#audio-progress").css('width', percent+"%");
772	$.each(subtitles, function(index, subtitle) {
773		
774		
775	
776//		if (DEBUG) console.log("cur time: " + time );
777		
778		
779		if(subtitle.st > currentSound.getTime()) {
780		//	return false;
781		}
782	
783		else if(subtitle.st < currentSound.getTime() && subtitle.et >= currentSound.getTime()) {
784			if (DEBUG) console.log("index: " + index);
785			if (DEBUG) console.log("current_subtitle: " + current_subtitle);
786			if (DEBUG) console.log("sub.st: " + subtitle.st);
787			if (DEBUG) console.log("sub.et: " + subtitle.et);
788			if(index == current_subtitle) {
789				//if (DEBUG) console.log ("INDEX = CUR SUB");
790				$("#subtitles").empty();
791				$("#subtitles").hide();
792		//		return false;
793			
794			} else {
795				current_subtitle = index;
796				//if (DEBUG) console.log ("SHOW SUB");
797				$.each(subtitle.da, function(index, value) {
798//					if (DEBUG) console.log("cur sub: " + value);
799					if (language != "de") $("#subtitles").show();
800					if (!show_sub) $("#subtitles").hide();
801					if (value == " ") $("#subtitles").hide(); 
802					if (language != "de") $("#subtitles").append(value + "<br />");
803				});
804			}
805		}
806		
807		
808
809	
810	if(currentSound.getTime() > subtitles[current_subtitle].et) {
811		$("#subtitles").empty();
812		$("#subtitles").hide();
813	}
814	});
815}
816
817function to_seconds(time_string) {
818	// Break the hh:mm:ss,ms string into an array
819	var chunks = time_string.split(":");
820	// Calculate the seconds
821	var seconds = 
822		3600 * parseInt(chunks[0]) // hours
823		+ 60 * parseInt(chunks[1]) // minutes
824		+ parseInt(chunks[2].split(",")[0]) // seconds
825		+ parseInt(chunks[2].split(",")[1]) / 1000;
826	return seconds;
827}
828
829
830function checkMovement () {	
831	
832	if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
833		$(window).on('scroll mousewheel DOMMouseScroll touchmove',function(){
834			//soundTransition(currentPanel);
835	//		if (allSounds[previousPanel].sound != undefined) allSounds[currentPanel].sound.pause();
836			if (allSounds[currentPanel].sound != undefined) allSounds[currentPanel].sound.play();
837//			if (DEBUG) console.log(_data);
838//			if (playSounds) playSound(_data);
839 			clearTimeout($.data(this, 'scrollTimer'));
840			runOnce = false;
841			if ( $("#chapter-overview .chapter").css("margin-left").replace("px", "") == 25 && runOnce == false)  {
842				runOnce = true;
843
844				$("#chapter-overview .chapter").animate({ marginLeft: "-100px", opacity:"0" }, 250, function() {runOnce = false; console.log("DON2");} );	
845			}
846			
847			
848			$.data(this, 'scrollTimer', setTimeout(function() {
849				// do something
850				$("#chapter-overview .chapter").animate({ marginLeft: "25px", opacity: "1" }, 500, function() {console.log("DONE"); });
851			}, 2000));
852		});
853		if (DEBUG) console.log('You are using a mobile device!');
854	} else {		
855	  if (DEBUG) console.log('You are not using a mobile device!');	
856	}	
857}
858
859$(window).on('beforeunload', function() {
860    $(window).scrollTop(0);
861    if (DEBUG) console.log ("BEFORE UNLOAD");
862});
863
864function secondsToTime(secs)
865{
866	var hours = Math.floor(secs / (60 * 60));
867	
868	var divisor_for_minutes = secs % (60 * 60);
869	var minutes = Math.floor(divisor_for_minutes / 60);
870	if (minutes < 10) {minutes = "0"+minutes;}
871	
872	var divisor_for_seconds = divisor_for_minutes % 60;
873	var seconds = Math.ceil(divisor_for_seconds);
874	if (seconds < 10) {seconds = "0"+seconds;}
875	
876	var obj = {
877		"h": hours,
878		"m": minutes,
879		"s": seconds
880	};
881	return minutes + ":" + seconds;
882}