$(function(){
/*
	if (screen.width < 500){
		document.location.href = 'mobile.php';
	}*/

	initPreloader();
	$('#top').hide();
	
// DISPLAYING
	displayLinks();
    displayExh();
	displayPub();
	
	// HEADER 
	headerNav();
	
	// DISPLAY PROJECT
	displayProject();
	
	// TESTING PROJECT RESIZING
	//resizeProject();
	
	projectNav();
	
	// IMAGE FULLSCREN
	fullscreen();
	
	$(window).scroll(topPicto);
	$('#scrollContent').live('mousewheel DOMMouseScroll', leftPicto);
	
	$(window).bind('resize load', reposElements);
			
});


/////////////////////////////////////
// DISPLAYING

function displayProjectsList(){
	var number = 1;
	$.each(projects, function(number, project){
		var article;
	
		var title 		=	project.title;
		var type 		=	project.type;
		var picture		= 	project.picture;
		var picto		=	project.picto;
		
		if (number < 10){
			number = '0'+number;
		}		
		
		article 	= 	'<article>'
					+	'	<span class="bar"></span>'
					+	'	<header>'
					+	'		<div class="fix">'
					+	'			<p class="name">' + title + '</p>'
					+	'			<p class="type">' + type + '</p>'
					+	'		</div>'
					+	'		<div class="headerHover">'
					+	'			<p class="name">View Project</p>'
					+	'			<p class="type">Click</p>'
					+	'		</div>'
					+	'	</header>'
					+	'	<img src="projects/thumbs/' + picture + '" alt=""style="padding: 10px 60px 0px 75px;"/>'
					+	'	<div class="hover">'
					+	'	</div>'
					+	'</article>';
		
		
		$('#projects .content').append(article);
		number++;
	})
	
	// HOVER
	$('.hover').show().hide();
	$('.headerHover').show().hide();
	
	$('#projects article')
		.live('mouseenter',function(){
			$(this).find('.hover, .headerHover').stop().fadeTo(300, 1);
		})
		.mouseleave(function(){
			$(this).find('.hover, .headerHover').stop().fadeTo(300, 0);
		});
		
	///////Scroll to Top
	$('#top').bind('click', function(){
		$("body,html").animate({'scrollTop':0},500);
	});
}

function displayExh() {
    $.each(exh, function (number, exh) {
        $("#list .left ul").append('<li><span class="year">' + exh.year + '</span><span class="exhibition">' + exh.exhibition + '</span><span class="place">' + exh.place + '</span><span class="location">' + exh.location + '</span></li>');
    });
}
function displayPub() {
    $.each(pub, function (number, Pub) {
       	 $("#list .right ul").append('<li><span class="pubyear">' + Pub.pubyear + '</span><span class="pub">' + Pub.pub + '</span></li>');
	});
}

function displayLinks(){
	$.each(links, function(number, link){
		$('#links .left ul').append('<li><a href="' + link.url + '" target="_blank"><span class="name">' + link.name + '</span></a></li>');
	});
}


// HEADER NAV

function headerNav(){
	var header 	= 	$('#extendedNav');
	var nav		=	$('#mainNav');
	var openMenu=	$('#openMenu');
	header.find('article').hide();
	header.hide();
	
	setTimeout(function(){
		nav.animate({'height':0},200);
		openMenu.removeClass('up down').addClass('up');
	}, 1000);
	
	$('#mainHeader')
		.bind('mouseenter', function(){
			openMenu.removeClass('up down').addClass('down');
			if (!nav.hasClass('opened')){
				nav.addClass('opened');
			}
			nav.stop().animate({'height':30},200);
		})
		.bind('mouseleave', function(){
			nav.removeClass('opened');
			setTimeout(function(){
				if (!nav.hasClass('opened') && !nav.hasClass('forced')){
					openMenu.removeClass('up down').addClass('up');
					nav.stop().animate({'height':0},200);
			$('#share').stop().animate({'top':370},200);
				}
			}, 1000);
		});
		
	nav
		.bind('mouseenter', function(){
			if (!nav.hasClass('opened')){
				openMenu.removeClass('up down').addClass('down');
				nav.addClass('opened');
			}
			nav.stop().animate({'height':30},200);
		})
		.bind('mouseleave', function(){
			nav.removeClass('opened');
			setTimeout(function(){
				if (!nav.hasClass('opened') && !nav.hasClass('forced')){
					openMenu.removeClass('up down').addClass('up');
					nav.stop().animate({'height':0},200);
				}
			}, 1000);
		});
	
	nav.find('li').click(function(){
		var link = $(this).attr('data-link');
		if (header.is(':hidden')){
			header.slideDown(300, function(){	
				$('#'+link).show().fadeTo(300, 1);
				if (!nav.hasClass('forced')){
					nav.addClass('forced');
				}
			});
		}
		else {
			header.find('article:visible').stop().fadeTo(300, 0, function(){
				$(this).hide();
				$('#'+link).stop().show().fadeTo(300, 1);
			});
			setTimeout(function(){
				header.find('article').hide();
			},300);
		}
	});
	
	header.find('.closeButton').click(function(){
		header.find('article:visible').stop().fadeTo(300, 0, function(){
			header.slideUp(300);
			nav.removeClass('forced');
		});
		setTimeout(function(){
			header.find('article').hide();
		},300);
	});
}

// DISPLAY PROJECT

function displayProject(){
	$('#projects article').live('click',function(){
		var index = $(this).index();
		$('#ajaxContainer').load('project.php' + ' .openedProject', function(response){
			resizeProject(index);
		});
	});
}

function resizeProject(index){
	var container 		= 	$('#projectContainer');
	var ajaxContainer 	=	$('#ajaxContainer');
	var projectList 	= 	$('#projectList');
	var ww 				= 	$(window).width();
	var hh 				= 	$(window).height();
	var contentLength;
	var contentWidth;
	var contentHeight 	=	container.height() + 28;
	var realHeight		= 	hh - $('header').height() - 60;
	var projectsWidth	=	0;
		
	ajaxContainer.height(hh);
	$('.openedProject').height(hh);
	
	// ADD DATA
	
	fillProject(0, index, function(dims){
		ajaxContainer.attr('data-project', index);
	
		// --> DONE
		
		$.each(dims, function(numbere, image){
			projectsWidth += (image.width/image.height * 300) + 2;
		});
		
		contentLength 	= 	container.find('article li').length;
		contentWidth 	= 	488 + projectsWidth + 50;
		container.width(contentWidth);
		
		$('footer').addClass('opened');
		
		container.parent('.viewport').css('padding-top',(realHeight/2 - contentHeight/2));
		

		
		$('body, html').scrollTop(0);
		
		projectList.animate({'left':-ww}, 500, function(){
			$('body').css('overflow','hidden');
			$('body').width($(window).width()).height(hh);
			$(this).hide();
			
			fillNav(index);
			
			ajaxContainer.show().css('left',ww).show().animate({'left':0},500, function(){		
				$('#scrollContent').tinyscrollbar({
					axis:'x',
					sizethumb:'282'
				});
			});
			
			$('#mainHeader').stop().animate({'padding-left':50,'padding-right':50},200);
			$('#return, #closeFullscreen').hide();
			
			setTimeout(function(){
			$('#goHome img').fadeOut();
			},4000);
			
			container.find('aside .name').css('margin-top',74 - (container.find('aside .name').height() + container.find('aside .type').height()) / 2);
		
		});
	});
	
	
	
}

function projectNav(){
	var ajaxContainer 	=	$('#ajaxContainer');
	var ww 				= 	$(window).width();
	var hh 				= 	$(window).height();

	$('#goHome').live('click', goHome);
	$('#return').live('click', returnTo);
	$('#nextProject')
		.live('click', nextProject)
		.live('hover', projectInfo)
		.live('mouseout', hideProjectInfo);
	$('#previousProject')
		.live('click', previousProject)
		.live('hover', projectInfo)
		.live('mouseout', hideProjectInfo);
	
	
	function goHome(){
			$('.scrollbar .thumb').animate({'left':ww + 50},500);
			$('#ajaxContainer').animate({'left':ww + 50},500,function(){
				$(this).hide();
				$('body').width('auto').height('auto').css('overflow','auto');
				$('#projectList').show().animate({'left':0},500);
				setTimeout(function(){
					reposElements();
				},500);
				reLive();
		});
		unbindAll();
	};
	
	function nextProject(){
		var container;
		var content 	= 	ajaxContainer.html();
		var acHeight	=	ajaxContainer.height();
		var num 		=	parseInt(ajaxContainer.attr('data-project'));
		var projectsWidth	=	0;
		
		ajaxContainer.append(content);
		
		container		=	$('.openedProject:eq(1)');
		ajaxContainer.height(acHeight * 2);
		
		fillProject(1, num + 1, function(dims){
		
			$.each(dims, function(number, image){
				projectsWidth += image.width + 2;
			});
			contentWidth 	= 	488 + projectsWidth + 50;
			container.find('#projectContainer').width(contentWidth);
			
			ajaxContainer.animate({'top':-container.height()}, 500,function(){
			
				$('.openedProject:eq(0)').remove();
				ajaxContainer.css('top',0).height(acHeight);
				
				fillNav(num + 1);
				
				$('#scrollContent').tinyscrollbar({
					axis:'x',
					sizethumb:'282'
				});
				
				container.find('aside .name').css('margin-top',74 - (container.find('aside .name').height() + container.find('aside .type').height()) / 2);
				$('#goHome img').fadeTo(200, 0);
				$('#return').fadeTo(200, 0);
				reLive();
			});
			unbindAll();
		});
		
	};
	
	function previousProject(){
		var container;
		var content 	= 	ajaxContainer.html();
		var acHeight	=	ajaxContainer.height();
		var num 		=	parseInt(ajaxContainer.attr('data-project'));
		var projectsWidth	=	0;
		
		ajaxContainer.prepend(content);
		
		container		=	$('.openedProject:eq(0)');
		ajaxContainer.height(container.height() * 2).css('top',-container.height());
		
		fillProject(0, num - 1, function(dims){
		
			$.each(dims, function(number, image){
				projectsWidth += image.width + 2;
			});
			
			contentWidth 	= 	488 + projectsWidth + 50;
			container.find('#projectContainer').width(contentWidth);
			
			ajaxContainer.animate({'top':0}, 500,function(){
				$('.openedProject:eq(1)').remove();
				ajaxContainer.height(acHeight);
				
				fillNav(num - 1);
				
				$('#scrollContent').tinyscrollbar({
					axis:'x',
					sizethumb:'282'
				});
				
				container.find('aside .name').css('margin-top',74 - (container.find('aside .name').height() + container.find('aside .type').height()) / 2);
				$('#goHome img').fadeTo(200, 0);
				$('#return').fadeTo(200, 0);
				
				reLive();
			});
			unbindAll();
		});
	};
	
	function returnTo(){
		$('#projectContainer').animate({'left':0},500);
		$('.scrollbar .thumb').animate({'left':0},500,function(){
			$('#scrollContent').tinyscrollbar_update(0);
			reLive();
		});
		unbindAll();
	}
	
	function projectInfo(){
		var $this 		= 	$(this);
		var thisId 		=	$this.attr('id');
		$('#'+thisId+'Info').show();
	}
	
	function hideProjectInfo(){
		var $this 		= 	$(this);
		var thisId 		=	$this.attr('id');
		$('#'+thisId+'Info').hide();
	}
	
	/////////////////////
	
	function unbindAll(){
		$('#previousProject').die('click');
		$('#nextProject').die('click');
		$('#goHome').die('click');
		$('#return').die('click');
	}
	
	function reLive(){
		$('#goHome').live('click', goHome);
		$('#nextProject').live('click', nextProject);
		$('#previousProject').live('click', previousProject);
		$('#return').live('click', returnTo);
	};
}

function fillProject(index, num, callback){
	
	var ajaxContainer 	=	$('#ajaxContainer');
	var project			=	ajaxContainer.find('.openedProject:eq('+index+')');
	var i				=	0;
	var images			=	new Array();
	
	ajaxContainer.attr('data-project',num);
	
	// SEND TO ANALYTICS
	
	_gaq.push(['_trackPageview', projects[num].title]);
	
	// FILL OPEN PROJECT
	project.find('aside .name').html(projects[num].title);
	project.find('aside .type').html(projects[num].type);
	project.find('aside .text').html(projects[num].more.description);
	project.find('aside .extra').html(projects[num].more.extra);
	$.each(projects[num].more.medias.images, function(number, image){
		if (number == 0){
			project.find('article ul').html('');
		}
		project.find('article ul').append('<li data-type="'+image.type+'"><img src="projects/images/'+image.url+'" alt="" /><span class="fullscreen"></span></li>');
		images[i] = 'projects/images/'+image.url;
		i++;
	});
	
	preloader(images,function(dims){
		if (typeof callback == 'function') { 
			callback.call(this, dims);
		}
	});

}

function fillNav(num){

	var ajaxContainer 	=	$('#ajaxContainer');
	var project			=	ajaxContainer.find('.openedProject');
	var projectsLength	=	projects.length;
	var previousNav		=	$('#previousProjectInfo');
	var nextNav			=	$('#nextProjectInfo');

	if (num > 0){
		if (num - 1 < 10){
			var prevNum = '0'+(num);
		}
		else {
			var prevNum = num;
		}
		previousNav.find('.number').text(prevNum);
		previousNav.find('.name').text(projects[num-1].title);
		previousNav.find('.type').text(projects[num-1].type);
	}
	if (num < projectsLength - 1){
		if (num + 1 < 10){
			var nextNum = '0'+(num-(-2));
		}
		else {
			var nextNum = num + 2;
		}
		nextNav.find('.number').text(nextNum);
		nextNav.find('.name').text(projects[num+1].title);
		nextNav.find('.type').text(projects[num+1].type);
	}
	
	// HIDDEN NAV
	if (num == 0){
		project.find('#previousProject').hide();
		previousNav.hide();
	}
	else {
		project.find('#previousProject').show();
	}
	if (num == projectsLength - 1){
		nextNav.hide();
		project.find('#nextProject').hide();
	}
	else {
		project.find('#nextProject').show();
	}
	
}

////////////////////////////////////////////////////////

function fullscreen(){
	var container 		= 	$('#projectContainer');
	var hh				=	$(window).height();
	
	container.find('article li')
		.live('mouseenter', function(){
			$(this).find('.fullscreen').show();
		})
		.live('mouseleave', function(){
			$(this).find('.fullscreen').hide();
		})
		.live('click', function(){
			if ($(this).attr('data-type') == 'image'){
				var url = $(this).children('img').attr('src').replace('/images/','/fullscreen/full-');
				preloader(url, function(dims){
					var popin 				=	'';
					if (hh < 100){
						var imgHeight			=	hh - 50;
						var imgWidth			=	dims[0].width/dims[0].height*imgHeight;
					}
					else {
						var imgHeight			=	dims[0].height;
						var imgWidth			=	dims[0].width;
					}
					
					popin			=	'<div id="popinBackground" style="display:none;"></div>'
									+	'<div id="popinContainer" style="display:none;">'
									+	'	<img src="'+url+'" width="'+imgWidth+'" height="'+imgHeight+'" style="margin:'+(-imgHeight/2)+'px 0 0 '+(-imgWidth/2)+'px"/>'
									+	'	<span id="closeFullscreen"></span>'
									+	'</div>';
					
					$('body').append(popin);
					$('#popinBackground, #popinContainer').fadeIn(function(){
						var top = $('#closeFullscreen').position();
						$('#closeFullscreen').css('margin-top', -36);
					});
					
				});
			} 
			else {
				var url = $(this).children('img').attr('src').replace('.jpg','.flv').replace('/images/','/video/');
				popin			=	'<div id="popinBackground" style="display:none;"></div>'
								+	'<div id="popinContainer" style="display:none;">'
								+	'	<div id="videoContainer" style="margin:-181px 0 0 -310px;">'
								+	'		<div id="video"></div>'
								+	'	</div>'
								+	'	<span id="closeFullscreen"></span>'
								+	'</div>';
				
				$('body').append(popin);
				swfobject.embedSWF("swf/adevbyPlayer.swf", "video", "620", "363", "9.0.0");
				$('#popinBackground, #popinContainer, #closeFullscreen').fadeIn(function(){
					setTimeout(function(){
						document.getElementById("video").getDatasFromJs(document.location.href+url);
					},4000);
					var top = $('#closeFullscreen').position();
					$('#closeFullscreen').css('margin-top', -36);
				});	
							
			}
		});
	
	$('#popinBackground, #popinContainer,#closeFullscreen').live('click', function(){
		$('#popinBackground, #popinContainer, #closeFullscreen').fadeOut(function(){
			$(this).remove();
		});
	});
}


////////////////////////////////////////////////////////
////////////////////////////////////////////////////////

function reposElements(){
	var ww 					= 	$(window).width();
	var hh 					= 	$(window).height();
/*	var shareNav			=	$('#share ul');*/
	
	
	var container 		= 	$('#projectContainer');
	var ajaxContainer 	=	$('#ajaxContainer');
	var projects		=	$('#projects');
	var projectsPos 	=	0;
	var contentHeight 	=	container.height() + 28;
	var realHeight		= 	hh - $('header').height() - 60;
	var projectsWidth	=	0;
	
	// CENTER CONTENT
	
	if (projects.is(':visible')){
		var projectsWidth = parseInt((ww - 100) / 255);
	
		projects.width(projectsWidth * 255);
		setTimeout(function(){
			projectsPos = projects.offset();
			$('#mainHeader').stop().animate({'padding-left':projectsPos.left,'padding-right':projectsPos.left},200);
		},100);
	
	}
	// RESIZE OPENED PROJECT
	
	else {
		ajaxContainer.height(hh);
		$('.openedProject').height(hh);
		container.parent('.viewport').css('padding-top',(realHeight/2 - contentHeight/2)).width(ww);
		$('body').width(ww).height(hh);
		$('#scrollContent').tinyscrollbar_update();
	}			

}

function topPicto(){
	var pos = $(document).scrollTop();
	
	if (pos > 50){
		$('#top').stop().fadeTo(100, 1);
	}
	else {
		$('#top').stop().fadeTo(100, 0);
	}
}

function leftPicto(){
	if (parseInt($('#projectContainer').css('left').split('px')) < -100){
		$('#return').stop().fadeTo(200, 1);
	}
	else {
		$('#return').stop().fadeTo(200, 0);
	}
}




////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////


function preloader(images, callback){
	$('#loader')
		.animate({'right':'0px'}, 500)
		.loadJ({  
			datas : images
		},
		function(dims){
			var dims = dims;
			if (typeof callback == 'function') { 
				callback.call(this, dims);
			}
			$('#loader').animate({'right':'-36px'},500);
		});
			
}

function initPreloader() {
	$('body').css('overflow','hidden');
	var key = 0;
	var images = [];
	$.each(projects, function (number, project){
		images[key] = 'projects/thumbs/' + project.picture;
		key++;
	});

	$('body').loadJ({  
		datas :images,
		loader:{
			background:'#f5f5f5',
			width:'100%',
			height:'100%',
			top:'0px',
			left:'0px'
		},
		bar :{
		width:'100%',
		height:'30px',
		top:'0px',
		left:'0px',
		background:'#232220'
		},	
		number :{
		top:'6px',
		left:'6px',
		color:'#EEE',
		font:'DinRound,Sans-Serif'
		}	
},
	function(){
		$('#initialCache').remove();
		$('body').css('overflow','auto');
		window.scrollTo(0,1);
		displayProjectsList();
	});
}