(function ($) {
$(document).ready( function(){

var $burger= $('#burger img');
var $menu= $('#menu');
var $credit= $('#credit');
var $cred= $('#cred');
var $burgerScroll;
var $creditScroll;
var currenTimeInt;
var currenTimeAudioInt;
var video;
var videoPlaying;
var progress;
var progressAudio;
var audio;//5
var cuRRaudio;//5
var audioPlaying;
var portrait;
var keyFrameArr;
var data;

var keyFrameDom = '<div class="frame"><img src="img/puces.png" alt="puces" class="puceactive" height="" width=""></div>';
var bubbleTimeOut;

	
	checkScrollBurgerCredit = function(){
	
		$hwin= $(window).height();			
		$hburger= $('#burger').height();
		$winscroll= $(window).scrollTop()+$hburger;
		//alert($winscroll)
		if($hwin < $winscroll){
			$('#burger').find('img').attr('src','img/burgernav_black.png');$burgerScroll=true
		}else{
			$('#burger').find('img').attr('src','img/burgernav.png');$burgerScroll=false;
		}
		
		//
		
		$bottomcredit = Number($('#credit').css('bottom').replace("px", ""));
		$hcredit= $('#credit').height();	
		$winscrolll= $(window).scrollTop();
		if($winscrolll>Number($hcredit+$bottomcredit)){
			$('#credit').css('color','black');$creditScroll=true;
		}else{
			$('#credit').css('color','white');$creditScroll=false;
		}
	
	}
	
	checkScrollBurgerCredit();
	
	$(window).scroll(function(){		
		
		if(!$burger.hasClass('opnav') && !$credit.hasClass('opnav')){
		
			checkScrollBurgerCredit();
			
		}		
	});
	
	$('#burger').click(function(){
		if($burger.hasClass('opnav')){			
			$burger.removeClass('opnav');
			TweenLite.to($burger, .3, {rotation:0});
			TweenLite.to($menu, .3, {height:"0%",onComplete:function(){					
					if($burgerScroll)$('#burger').find('img').attr('src','img/burgernav_black.png');
					
					//play video
					console.log('video paused: '+video.paused)
					if(videoPlaying)video.play();
			
				}				
			});
			
			if($creditScroll)$('#credit').css('color','black');
			checkScrollBurgerCredit();		
			
			
			
			
			
		}else{
			
			if($credit.hasClass('opnav')){
				$credit.removeClass('opnav');				
				TweenLite.to($cred, .3, {opacity:0,onComplete:function(){
						TweenLite.to($cred, 0, {height:"0%"});						
					}
				});
			}
			$burger.addClass('opnav');
			TweenLite.to($burger, .3, {rotation:-90});
			TweenLite.to($menu, .3, {height:"100%"});
			TweenLite.to($menu, .3, {opacity:1,onComplete:function(){					
					if($creditScroll)$('#credit').css('color','white');
				}
			});
			if($burgerScroll)$('#burger').find('img').attr('src','img/burgernav.png');
			
			
			//pause video
			console.log('video paused: '+video.paused)
			if(videoPlaying)video.pause();
			
			//checkScrollBurgerCredit();
		}
	});
	
	$('#credit').click(function(){
		if($credit.hasClass('opnav')){
			$credit.removeClass('opnav');
			TweenLite.to($cred, .3, {height:"0%",onComplete:function(){					
					if($burgerScroll)$('#burger').find('img').attr('src','img/burgernav_black.png');
					
					//play video
					console.log('video paused: '+video.paused)
					if(videoPlaying)video.play();
					
				}				
			});
			if($creditScroll)$('#credit').css('color','black');
			
			checkScrollBurgerCredit();
			
		}else{
			if($burger.hasClass('opnav')){
				$burger.removeClass('opnav');
				TweenLite.to($burger, .3, {rotation:0});
				TweenLite.to($menu, .3, {opacity:0,onComplete:function(){
						TweenLite.to($menu, 0, {height:"0%"});
					}
				});
			}			
			$credit.addClass('opnav');			
			TweenLite.to($cred, .3, {height:"100%"});
			TweenLite.to($cred, .3, {opacity:1,onComplete:function(){					
					if($creditScroll)$('#credit').css('color','white');
					
				}
			});
			if($burgerScroll)$('#burger').find('img').attr('src','img/burgernav.png');
			
			//pause video
			console.log('video paused: '+video.paused)
			if(videoPlaying)video.pause();
			
			//alert($burgerScroll)
			//checkScrollBurgerCredit();
		}
	});

	
	
	

	initPlayer = function(){

		currenTimeInt = setInterval(updateVideo,50)
		setKeyFrames();
		setVideoTime(true);
		
		
	}
	
	
	initAudioPlayer = function(){

		currenTimeAudioInt = setInterval(updateAudio,50)
		//setKeyFrames();
		setAudioTime();
		
		
	}
	
		resizeKeyFrames = function(){

			//console.log()
			for(var i=0;i<keyFrameArr.length;i++){

				var timeInSec = keyFrameArr[i].keypoint;

				timeInSec *= $('.currentline .baseline').width() / (video.duration) 	//*100
				//console.log(timeInSec)
				//$('.currentline frame').eq(i).css('left',timeInSec+'px');
			}

		}

		setKeyFrames = function(){

		//console.log()
		for(var i=0;i<keyFrameArr.length;i++){

			var timeInSec = keyFrameArr[i].keypoint;

			//timeInSec *= $('.currentline .baseline').width() / (video.duration) 	//*100
			timeInSec = timeInSec / video.duration * 100;
			$('.currentline').append('<div class="frame" rel="'+i+'" style=left:'+timeInSec+'%;><img src="img/puces.png" alt="puces" class="" height="" width=""></div>')

		}

		setVideoTime = function(init){

			if(init){
			var tTime = video.duration;
			var minutes = Math.floor(tTime / 60);
			var seconds = Math.floor(tTime - minutes * 60);
			seconds = seconds < 10 ? '0'+ seconds : seconds;

			$('.timeline .totalTime').html(minutes +' : '+ seconds);
			}

			var cTime = video.currentTime;
			var minutes = Math.floor(cTime / 60);
			var seconds = Math.floor(cTime % 60);
			seconds = seconds < 10 ? '0'+ seconds : seconds;

			$('.timeline .currentTime').html(minutes +' : '+ seconds);

		}
		
		


		$('.currentline .frame').click(function(e){

				var pos = $(this).position();
				video.currentTime = pos.left / $('.currentline .baseline').width() * video.duration;

		});
		
		showBubbles = function(kf){
			
			clearTimeout(bubbleTimeOut);
			$('.bulle').unbind('click',bubbleGetAnnexe);
			
			var pos = $('.currentline .frame').eq(kf).position();
				
			$('.bulle').css('left',pos.left+'px');
			$('.bulle .annextt').html(keyFrameArr[kf].titre);
			$('.bulle .annexdesc').html(''/*keyFrameArr[kf].texte*/);
			$('.bulle .anneximg').attr('src',keyFrameArr[kf].image);
			TweenLite.fromTo($('.bulle'), .5, {css:{display:'none',opacity:0}}, {css:{display:'block',opacity:1},delay:.4, ease:Sine.easeOut});
			
			$('.bulle').bind('click',function () {
				document.location = keyFrameArr[kf].url;
			});
			
			// FadeOut Bubble after X time.
			bubbleTimeOut = setTimeout(function(){
				TweenLite.to($('.bulle'), .3, {css:{display:'none',opacity:0}, ease:Sine.easeOut});
			},5000);
			
		}
		
		$('.diapo').click(function(){
			
			
			if (!video.paused) {
				$('.timeline img.play').attr('src','img/pause.png');
				videoPlaying = false;
				video.pause();	
			}else{
				$('.timeline img.play').attr('src','img/play.png');
				videoPlaying = true;
				video.play();
			}
			
		});
		

		bubbleGetAnnexe = function(e){

			console.log(e.data.url);

		}

	}
	
	updateAudio = function(){		
		progressAudio = audio.currentTime * 100 / audio.duration
		$(audio).parent().find('.currentline.audio .line').css('width',progressAudio+'%');
		setAudioTime();				
		

	}
	
	setAudioTime = function(init,aa){

		if(init){
		//alert(audio)
		var tTime = aa.duration;
		var minutes = Math.floor(tTime / 60);
		var seconds = Math.floor(tTime - minutes * 60);
		seconds = seconds < 10 ? '0'+ seconds : seconds;

		$(aa).parent().find('.totalTime').html(minutes +':'+ seconds);
		$(aa).parent().find('.currentTime').html('0:00');
		}

		var cTime = audio.currentTime;
		var minutes = Math.floor(cTime / 60);
		var seconds = Math.floor(cTime % 60);
		seconds = seconds < 10 ? '0'+ seconds : seconds;

		$(audio).parent().find('.currentTime').html(minutes +':'+ seconds);
		//alert($(audio).parent().attr('rel'))
		//alert(audio.duration)
	}
	

	updateVideo = function(){		
		progress = video.currentTime * 100 / video.duration
		$('.currentline .line').css('width',progress+'%');
		setVideoTime();
				
		var idx=$.map(keyFrameArr, function(item,i){
		//console.log(video.currentTime);
		if(item.keypoint==Math.round(video.currentTime)){
			//console.log(i);
				showBubbles(i);
			}
		});

	}

	
	$('.player').each(function(i) {
		
		
		var refId = i
		audio = document.getElementsByTagName("audio")[refId];	
		audio.addEventListener('loadedmetadata', function(i) {
			//console.log("Playing " + audio.src + ", for: " + audio.duration + "seconds.");
			setAudioTime(true,this);
		});
		$(audio).parent().find('.currentline.audio .line').css('width',0+'%');
		
		$(this).find('.play').click(function (i) {
						
			cuRRaudio = audio;
			audio = document.getElementsByTagName("audio")[refId];			
			
			if(cuRRaudio == audio){				
				
				if (!audio.paused){
				//alert('wew')
				$(this).attr('src','img/play.png');
					audioPlaying = false;
					audio.pause();	
				
				}else{
					$(this).attr('src','img/pause.png');
					audioPlaying = true;
					audio.play();
				}
				
			}else{
				
				cuRRaudio.pause();
				cuRRaudio.currentTime = 0;
				$(cuRRaudio).parent().find('img.play').attr('src','img/play.png');
				$(cuRRaudio).parent().find('.currentline.audio .line').css('width',0+'%');
				$(cuRRaudio).parent().find('.currentTime').html('0:00');
				
				if (!audio.paused){
				
					$(this).attr('src','img/play.png');
					audioPlaying = false;
					audio.pause();	
					
				}else{
					$(this).attr('src','img/pause.png');
					audioPlaying = true;
					audio.play();
				}
			
			}			
			
			initAudioPlayer();
			
		});
		
		
		
	});
	
	
	
	onloaddDiapo = function( pos ){
		
		video = document.getElementsByTagName("video")[parseInt(pos) - 1];
		$(video).show();
		
		video.play();
		videoPlaying = true;
		
		var winH = $(window).height();
		TweenLite.fromTo($('#test'), .7, {css:{top:0,position:'relative'}}, {css:{top:-winH,position:'absolute'}, ease:Sine.easeOut});
		
		$('.timeline').css('display','block')
		initPlayer();

		console.log(video.duration);
		
		$('#burger').show();

	};

	$('.btn').click(function () {
			var oo = this;
			$.get('/diapo.php?id=' + $(this).attr('idportrait'), function (data) {
				console.log(data);
				keyFrameArr = data.annexes;
				portrait = data;
				onloaddDiapo($(oo).attr('pos'));
			});

	});


	homeOver = function(){
		//console.log('home over')
		var elm = $(this).attr('id');
		$('#home li').each(function(e){

			if(elm == $(this).attr('id')){
				TweenLite.to($(this), .5, {width:'50%',opacity:1, ease:Sine.easeOut});
			}else{
				TweenLite.to($(this), .5, {width:'25%',opacity:.4, ease:Sine.easeOut});
			}
		})

	}


	homeOut = function(){
		//console.log('home over')
		$('#home li').each(function(e){
			TweenLite.to($(this), .5, {width:'33.3333%',opacity:1, ease:Sine.easeOut});
		})

	}

	$('#home li').bind('mouseover',homeOver);
	$('#home li').bind('mouseout',homeOut);	
	$('#home li').mouseout(function(){
		
	})

	timelineDone = function(elm){

		$(elm).css('display','none')

	}

	displayChar = function(pos, idx){

		TweenLite.to($('#pres'),.5, {css:{opacity:0},ease:Sine.easeOut,onComplete:function(){


				$('#pres').css('display','none');
				if(pos=='right'){
					$('#portrait' + idx + ' .introtitre ').css('left','30%');
					$('#portrait' + idx + ' .introsstitre ').css('left','30%');
					$('#portrait' + idx + ' .introcontent ').css('left','30%');
				}
				TweenLite.fromTo($('#portrait' + idx + '.portrait'),1.5, {css:{opacity:0,display:'none'}},{css:{opacity:1,display:'block'},ease:Sine.easeOut});
				TweenLite.fromTo($('#footer' + idx + '.footer'),1.5, {css:{opacity:0,display:'none'}},{css:{opacity:1,display:'block'},ease:Sine.easeOut});


			}
		});

	}

	timelineDoneBis = function(elm){


		switch(elm){

			case 'img1':
			console.log('img1');
			$('#home ul').css({'left':'0','width':'50%','position':'absolute'})
			$('#home ul li').css({'width':'100%'});
			displayChar('right', 1);

			break;

			case 'img2':
			console.log('img2');
			TweenLite.fromTo($('#home ul'), 1, {css:{left:'25%',width:'100%',position:'relative'}},
				{
					css:{
						left:'50%',
						width:'50%',
						position:'absolute'
					},
					ease:Sine.easeOut,
					onComplete:function () { displayChar(0, 2); }
				}
			);
			TweenLite.to($('#home ul li'), 1, {css:{width:'100%'},ease:Sine.easeOut});
			break;

			case 'img3':
			console.log('img3');
			$('#home ul').css({'left':'50%','width':'50%','position':'absolute'})
			$('#home ul li').css({'width':'100%'});
			displayChar(0, 3);
			break;

			default:
			console.log("zef")
			break;

		}

	}

	var homeClick = function(){

		$('#home li').unbind('mouseover',homeOver);
		$('#home li').unbind('mouseout',homeOut);
		$('#home li').unbind('click',homeClick);
		var elm = $(this).attr('id');

		$('#home li').each(function(e){

			if(elm == $(this).attr('id')){
				TweenLite.to($(this), .5, {width:'50%',opacity:1, ease:Sine.easeOut,onComplete:timelineDoneBis, onCompleteParams:[elm]});

			}else{
				TweenLite.to($(this), .5, {width:'25%',opacity:0, ease:Sine.easeOut,onComplete:timelineDone, onCompleteParams:[$(this)]});

			}
		})

	}
	
	
	$('.descvideo').css('height',$('.descvideo').find('iframe').height()+$('.descvideo').find('span').height())
	
	$('#home li').bind('click',homeClick);

	$(window).resize(function(){
		var winH = $(window).height();
		$('#home li').find('img').css('height',winH)
		//resizeKeyFrames();
	})

});




})(jQuery);