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

var $burger= $('#burger img');
var $menu= $('#menu');
var $credit= $('#credit');
var $cred= $('#cred');
var $burgerScroll;
var $creditScroll;
var currenTimeInt;
var video;
var audio;//5
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');
				}				
			});
			
			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');
			
			//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');
				}				
			});
			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');
			//alert($burgerScroll)
			//checkScrollBurgerCredit();
		}
	});

	
	
	

	initPlayer = function(){

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

		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){

				clearTimeout(bubbleTimeOut);
				$('.bulle').unbind('click',bubbleGetAnnexe);

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

				var kf = $(this).attr('rel');
				$('.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'), .3, {css:{display:'none',opacity:0}}, {css:{display:'block',opacity:1},delay:.4, ease:Sine.easeOut});

				// Bind Bubble Click
				//$('.bulle').bind('click',{url:keyFrameArr[kf].url},bubbleGetAnnexe);
				$('.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);


		});

		bubbleGetAnnexe = function(e){

			console.log(e.data.url);

		}

	}


	updateVideo = function(){
		//console.log(video.currentTime);
		var progress = video.currentTime * 100 / video.duration
		$('.currentline .line').css('width',progress+'%');
		setVideoTime();

	}


onloaddDiapo = function( pos ){

		video = document.getElementsByTagName("video")[parseInt(pos) - 1];
		$(video).show();
		
		//video.src = portrait.video;
		//video.load();


		//~ setTimeout(function() {

		video.play();

		//var audio = document.getElementById("audio");
		//audio.play();
		//audio.volume = 0.4;

		//$('.timeline').fadeIn(300);
		var winH = $(window).height();
		TweenLite.fromTo($('#test'), .7, {css:{top:0,position:'relative'}}, {css:{top:-winH,position:'absolute'}, ease:Sine.easeOut});
		//TweenLite.fromTo($('.timeline'), .5, {css:{top:winH,position:'relative',display:'none',opacity:0}}, {css:{top:0,position:'absolute',display:'block',opacity:1}, ease:Sine.easeOut});
		$('.timeline').css('display','block')
		initPlayer();

		//var vid = document.getElementById("video1");
		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(){
		//alert('zef')
		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(){

		$('#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)]});

			}
		})

	}

	$('#home li').bind('click',homeClick);

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

});




})(jQuery);