jQuery(document).ready(function() {
	
	
	
	// -- ADJUST FONT SIZE DEPEND ON IFRAME WIDTH
	if ( $(window).width() < 400 ) {
		$('#wrapper').addClass('font-little') ;
	}
	
	// -- Build general wrappers
	var _viewport = jQuery('#wrapper') ;
	var videoItems = _viewport.find('ul li') ;
	var messages = _viewport.find('.message p') ;
	var messageHeight = _viewport.find('.message').height() ;
	var videoPlayer = jQuery('#wrapper .videoPlayer') ;
	var doc = {
		w: $(window).width(),
		h: $(window).height() - messageHeight,
		rows: 4,
		rowRatio: 16/11
	} ;

	// -- Build Image size
	var _img = {} ;
	_img.extraMargin = 8*2 ;
	_img.h = Math.floor(doc.h / doc.rows) - _img.extraMargin ;
	_img.w = Math.floor(_img.h*doc.rowRatio) ;
	
	// -- Build Video Layer size
	var videoLayer = {
		w: doc.w-(_img.extraMargin+_img.extraMargin/2),
		h: doc.h - (10+6),
		top: messageHeight + _img.extraMargin/2,
		left: (_img.extraMargin/2) + 4
	} ;
	
	// -- Set messages defaults
	messages.parent().height(messageHeight); 
	messages.css({position:'absolute', width: doc.w});
	
	// -- Change rows size
	for ( var i = 0 ; i < videoItems.length ; i++) {
		
		// -- Get DOM's
		var self = jQuery(videoItems.get(i)) ;
		var thumb = self.find('img.thumb') ;
		
		// -- Adjust thumb image
		thumb.width(_img.w).height(_img.h) ;
		
		// -- Adjust paragraph height
		var paragraph = self.find('p') ;
		paragraph.css({paddingTop: (_img.h-paragraph.height()+_img.extraMargin)/2 }) ;
		
		// -- Adjust li height
		self.find('div.infos').css({height: Math.floor(doc.h / doc.rows)}) ;
		
		// -- Adjust display
		self.css({opacity:0, visibility: 'visible'}).stop().animate({opacity:1}, 1000+500*i) ;
		
		// -- EVENTS ROW :: Hover
		self.hover(function() { 
			if ( ! jQuery(this).is('.active') ) jQuery(this).toggleClass('hover'); 	
		}) ;
	} 
	
	
	// ***************************************************************    CLICK ON ITEM       
	videoItems.bind('click', function(e, callback) {
		var _self = jQuery(this) ;
		var _viewport = _self.parent() ;
		var _thumb = jQuery(this).find('img.thumb') ;
		var _infos = jQuery(this).find('div.infos') ;
		var marginTop = _self.index()*Math.floor(doc.h / doc.rows) ;
		
		if ( ! _self.is('.active') ) {
		
			_self.addClass('active').removeClass('hover') ;
			
			// -- Cache video Load
			videoPlayer.trigger('set', _self) ;
			
			// -- Move Viewport to focus on clicked item
			_viewport.stop().animate({
				marginTop: -1*marginTop								
			}, 1000) ;
			
			// -- Extend thumb to simulate video load and render flash video
			_thumb.stop().animate({
				opacity: 0.75,
				width: doc.w - 25,
				height: doc.h - _img.extraMargin
			}, 1000, 
			function() { videoPlayer.trigger('render') ; });
			
			// -- Hide infos 
			_infos.stop().animate({
				opacity: 0
			}, 400) ;
			
		} else {
			
			// -- Reinit viewport top
			_viewport.stop().animate({
				marginTop: 0							
			}, 1000) ;
			
			// -- Set state to initial state
			_self.removeClass('active') ;
			_thumb.stop().animate({
				opacity: 1,
				width: _img.w,
				height: _img.h
			}, 1000, function() {
				_infos.stop().animate({opacity: 1}, 400) ;
			});
		}
	}) ;
	
	
	// **********************************************************     VIDEO PLAYER
	
	// -- Init Video Player Layer
	videoPlayer.css({
		width: videoLayer.w,
		height: videoLayer.h,
		top: videoLayer.top,
		left: -10000,
		opacity:0
	}) ;
	
	// -- Render Video Player
	videoPlayer.bind('render', function() {
	
		// -- Hide welcome message
		messages.filter('.welcome').fadeOut();
		
		// -- Show advice message
		messages.filter('.ask-advice').fadeIn();
		
		// -- Hide others message
		messages.filter('.given-advice').css({display:'none'});
		
		// -- Show video player
		videoPlayer.css({
			left: videoLayer.left, 
			visibility: 'visible'
		}).animate({opacity:1}, 1000) ;
		
	}) ;
	
	// -- Set Embed in Video Player
	videoPlayer.bind('set', function(e, _self) {
		_self = jQuery(_self) ;
		var embed = jQuery(_self.find('.code_embed').html()) ;
		embed.attr('width', videoLayer.w).attr('height', videoLayer.h);
		videoPlayer.css({visibility: 'hidden'}).html('').append(embed) ;
		
		// log de l'ouverture de la vidéo 
		 // voir pour le placer ailleurs ?
		var logUrl = jQuery('#logUrl').attr('value')
				.replace('[item_id]', videoItems.filter('.active').attr('video-id'))
				.replace('[context_var]', 'clic')
				.replace('[vote_var]', 'none');
		$.get(logUrl);
	}); 
	
	
	
	// **********************************************************     VIDEO CHOOSE
	var buttonsChoose = jQuery('#wrapper .message p.ask-advice span.button') ;
	buttonsChoose.hover(function() {
		$(this).toggleClass('hover') ;
	}) ;
	
	buttonsChoose.filter('#confirmVideo').click(function() {
	
		// -- Track Vote
		_viewport.trigger('trackVote', 'yes') ;
		
		// -- Hide welcome message
		messages.filter('.given-advice').fadeIn();
		
		// -- Show advice message
		messages.filter('.ask-advice').fadeOut();
		
		
	}) ;
	
	buttonsChoose.filter('#denyVideo').bind('click', function() {
	
		// -- Track Vote
		_viewport.trigger('trackVote', 'no') ;
		
		// -- Renormalize display &&  Declass active video
		var div = videoItems.filter('.active') ;
		jQuery('#wrapper #comeBack').trigger('click', function() {
				div.appendTo(videoItems.parent()) ;
		}) ;
			
	}) ;
	
	_viewport.find('#comeBack').bind('click', function(e, callback) {
	
		// -- Hide videoplayer layer
		videoPlayer.html('').css({
			left: -10000, 
			visibility: 'hidden'
		}) ;
		
		// -- Unzoom list
		videoItems.filter('.active').trigger('click', callback) ;
		
		// -- Hide welcome message
		messages.filter('.welcome').fadeIn();
		
		// -- Show advice message
		messages.filter('.ask-advice').fadeOut();
		
	}).hover(function() {
		$(this).toggleClass('hover');
	}) ;
	
	
	// **********************************************************     TRACK VOTE
	_viewport.bind('trackVote', function(e, vote) {
		var trackUrl = jQuery('#trackUrl').attr('value')
						.replace('[item_id]', videoItems.filter('.active').attr('video-id'))
						.replace('[vote_var]',vote) ;		
		$.get(trackUrl) ;
		
		// log du vote
		var logUrl = jQuery('#logUrl').attr('value')
						.replace('[item_id]', videoItems.filter('.active').attr('video-id'))
						.replace('[vote_var]',vote)
						.replace('[context_var]', 'vote');
		$.get(logUrl);
	}) ;
	
	// **********************************************************     DEBUG
	setTimeout(function() {
		var random = Math.floor(Math.random()*(videoItems.length-1)) ;
		//console.log(random) ;
		//jQuery(videoItems.get(random)).click() ;
	}, 0);
	
	
	//console.log('Iframe dimensions : '+doc.w+'x'+doc.h ) ;
	
	
	
	/* Prendre en compte la largeur de l'iframe pour définir la taille de police */
	
	
	
}) ;