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

	$("#backpage4pixel").hide();
	$(".vision").hide();

	// GLASSE
	if ($.browser.msie != true){
		$(".pixel4vision").hover(function() {
			$(".vision").show();
			$(this).find("img.glasse").attr("src","img/glasse-pixel.png");
			$("img.vision").stop().animate({'opacity': "1", 'top' : "150"}, {duration:'fast'});
		},function(){
			$(this).find("img.glasse").attr("src","img/glasse.png");
			$("img.vision").stop().animate({'opacity': "0", 'top' : "200"}, {duration:'fast'});
		});
		
		$(".pixel4visionpixel").hover(function() {
			$(this).find("img.glasse").attr("src","img/glasse.png");
			$("img.vision").stop().animate({'opacity': "1", 'top' : "150"}, {duration:'fast'});
		},function(){
			$(this).find("img.glasse").attr("src","img/glasse.png");
			$("img.vision").stop().animate({'opacity': "0", 'top' : "200"}, {duration:'fast'});
		});
	}else{
		$(".pixel4vision").hover(function() {
			$(".vision").show().css('top','150');
			$(this).find("img.glasse").attr("src","img/glasse-pixel.png");

		},function(){
			$(".vision").hide();
			$(this).find("img.glasse").attr("src","img/glasse.png");

		});
		
		$(".pixel4visionpixel").hover(function() {
			$(".vision").show().css('top','150');;
			$(this).find("img.glasse").attr("src","img/glasse.png");
		},function(){
			$(".vision").hide();
			$(this).find("img.glasse").attr("src","img/glasse.png");
		});
	}

	$("a.pixel4vision").click(function(){
		$("#backpage4").hide();
		$("#backpage4pixel").show();
		$("#next").find("a").attr("href","#contactpixel");
		$(".menu1").find("a.hrefcontact").attr("href","#contactpixel");
		$(".menu2").find("a.hrefcontact").attr("href","#contactpixel");
	});

	$("a.pixel4visionpixel").click(function(){
		$("#backpage4").show();
		$("#backpage4pixel").hide(); 
		$("#next").find("a").attr("href","#contact");
		$(".menu1").find("a.hrefcontact").attr("href","#contact");
		$(".menu2").find("a.hrefcontact").attr("href","#contact");
	});

	// FOLLOW SOURIS
	$("#follower").hide();

	$("#backpage4pixel").mousemove(function(e){
		$("#follower").show();
		$("#follower").css({
			top: (e.pageY-3970) + "px",
			left: (e.pageX + 1 ) + "px"
		});
		
	});
	
	if ($.browser.msie != true){
		$("#backpage4pixel a.hand").mouseenter(function(e){
			$("#follower img").attr("src","img/cursorhand.png");
		}).mouseleave(function(e){
			$("#follower img").attr("src","img/cursor.png");
		});
	}
	
	
	
	// COMPETENCES
	$("ul#competences").find('li').each(function () {

		var colorcompetence = $(this).find('span').attr("class");
		var newwidthcompetence = $(this).css('width');
		var widthcompetence = parseInt(newwidthcompetence) + 10;
		
		$(this).find("div.pourc").css('opacity', 0);
		
		$(this).append("<div class='colorcomp'></div>");
		
		$(this).hover(function() {
			$(this).find("div.colorcomp").css('background-color','#' + colorcompetence).animate({'width':widthcompetence ,'easing':"easeOutBounce"},200);
			$(this).find("div.pourc").stop().animate({'opacity': "1", 'bottom' : "10"}, {duration:'fast'});

		},function(){
			$(this).find("div.colorcomp").css('background-color','#' + colorcompetence).animate({'width':'0' ,'easing':"easeOutBounce"},500);
			$(this).find("div.pourc").stop().animate({'opacity': "0", 'bottom' : "0"}, {duration:'fast'});
		})
	})

	// RESEAUX SOCIAUX
	$("ul#reseauxsociaux li").hover(function() {
		var cheminimg = $(this).find("img").attr("src");
		$(this).css({'background' : 'url(' + cheminimg + ') no-repeat center bottom'});
		$(this).find("img").stop().animate({'opacity': "0"}, 500);
	},function(){
		$(this).find("img").stop().animate({'opacity': "1"}, 500);
	})

	// PREV & NEXT
	/*$("ul#prevnext li#next").hover(function() {
		$(this).stop().animate({'bottom': "-10"}, 200);
	},function(){
		$(this).stop().animate({'bottom': "0"}, 200);
	})
	$("ul#prevnext li#prev").hover(function() {
		$(this).stop().animate({'bottom': "+10"}, 200);
	},function(){
		$(this).stop().animate({'bottom': "0"}, 200);
	})*/

	// PORTFOLIO B&W TO COLOR
	$("ul#portfolio-list li").hover(function() { //On hover...
		var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'

		//Set a background image(thumbOver) on the <a> tag - Set position to bottom
		$(this).find("a.project").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});

		//Animate the image to 0 opacity (fade it out)
		$(this).find("span.roll").stop().fadeTo('normal', 0 , function() {
			$(this).hide() //Hide the image after fade
		});
	} , function() { //on hover out...
			//Fade the image to full opacity 
			$(this).find("span.roll").stop().fadeTo('normal', 1).show();
	});

	$("#portfolio-list li")
		.mouseenter(function(){$(this).find(".projectstudy").fadeIn("fast")})
		.mouseleave(function(){$(this).find("img").stop().animate({opacity:1},150).end().find(".projectstudy").fadeOut("fast")});



	$('#send').click(function() {

		$('.error').hide();
		
		//Get the data from all the fields
		var name = $('input[name=nom]');
		var email = $('input[name=email]');
		var comment = $('textarea[name=message]');

		//Simple validation to make sure user entered something
		//If error found, add hightlight class to the text field

		
		//organize the data properly
		var data = 'nom=' + name.val() + '&email=' + email.val() + '&message='  + encodeURIComponent(comment.val());
		
		//disabled all the text fields
		//$('.text').attr('disabled','true');
		
		//show the loading sign
		$('.loading').show();
		$('.loading').css('visibility','visible');

		//start the ajax
		$.ajax({
			//this is the php file that processes the data and send mail
			url: "mail.php",	
			
			//GET method is used
			type: "GET",

			//pass the data			
			data: data,		
			
			//Do not cache the page
			cache: false,
			
			//success
			success: function (html) {				
				//if process.php returned 1/true (send mail success)
				if (html==1) {	
					$('.error').hide();
					$('.loading').hide();
					$('#send').attr('disabled','true');
					$('.done').stop().fadeIn('slow'); //show the success message
				//if process.php returned 0/false (send mail failed)
				} else {
					$('.loading').hide();
					if(html==0){
						$('.error').fadeIn('slow').html('Désolé mais votre mail n\'a pas pu arriver à destination. Voici mon adresse <a href="mailto:contact@nl2br.fr">contact@nl2br.fr</a>. Utilisez votre messagerie personnel. Désolé pour cet inconvénient.');
					}else{
						$('.error').fadeIn('slow').html(html);
					}
				}
			}		
		});
		
		//cancel the submit button default behaviours
		return false;
	});

	$('#sendpixel').click(function() {

		$('.error').hide();
		
		//Get the data from all the fields
		var name = $('input[name=nompixel]');
		var email = $('input[name=emailpixel]');
		var comment = $('textarea[name=messagepixel]');

		//Simple validation to make sure user entered something
		//If error found, add hightlight class to the text field

		
		//organize the data properly
		var data = 'nom=' + name.val() + '&email=' + email.val() + '&message='  + encodeURIComponent(comment.val());
		
		//disabled all the text fields
		//$('.text').attr('disabled','true');
		
		//show the loading sign
		$('.loading').show();
		$('.loading').css('visibility','visible');

		//start the ajax
		$.ajax({
			//this is the php file that processes the data and send mail
			url: "mail.php",	
			
			//GET method is used
			type: "GET",

			//pass the data			
			data: data,		
			
			//Do not cache the page
			cache: false,
			
			//success
			success: function (html) {				
				//if process.php returned 1/true (send mail success)
				if (html==1) {	
					$('.error').hide();
					$('.loading').hide();
					$('#sendpixel').attr('disabled','true');
					$('.done').stop().fadeIn('slow'); //show the success message
				//if process.php returned 0/false (send mail failed)
				} else {
					$('.loading').hide();
					if(html==0){
						$('.error').fadeIn('slow').html('Désolé mais votre mail n\'a pas pu arriver à destination. Voici mon adresse <a href="mailto:contact@nl2br.fr">contact@nl2br.fr</a>. Utilisez votre messagerie personnel. Désolé pour cet inconvénient.');
					}else{
						$('.error').fadeIn('slow').html(html);
					}
				}
			}		
		});
		
		//cancel the submit button default behaviours
		return false;
	});


/* COLORBOX */

	$('.projectstudy').colorbox({
		href: function(){ var href = $(this).attr('href')+ ' #popup'; return href; },
		initialWidth: '16px',
		initialHeight: '16px',
		innerWidth: '940px',
		innerHeight: '535px',
		opacity: 0.9,
		transition: function(){if($.browser.msie) { return 'none'; } else { return 'fade'; } },
		onLoad: 
			function(){
				$('#cboxClose').hide();
			},
		onComplete: 
			function(){
				$("#bt").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400);
			
				$('#cboxClose').show();
				
				$('#projectcaption').addClass('invisible');

				$('#popup #bt').click( function(){
					if( $('#projectcaption').hasClass('invisible') ) {
						$('#projectcaption').animate({'width':"350", 'easing':"easeOutBounce"}, {duration:'slow'});
						$(this).animate({right:"350px", 'easing':"easeOutBounce"}, {duration:'slow'});
						$('#projectcaption').removeClass('invisible');
					}else{
						$('#projectcaption').animate({'width':"0", 'easing':"easeOutBounce"}, {duration:'slow'});
						$(this).animate({right:"0px", 'easing':"easeOutBounce"}, {duration:'slow'});
						$('#projectcaption').addClass('invisible');
					}
				});
			}
	});
	$('.project').colorbox({
		href: function(){ var href = $(this).attr('href')+ ' #popup'; return href; },
		initialWidth: '16px',
		initialHeight: '16px',
		innerWidth: '940px',
		innerHeight: '535px',
		opacity: 0.9,
		transition: function(){if($.browser.msie) { return 'none'; } else { return 'fade'; } },
		onLoad: 
			function(){
				$('#cboxClose').hide();
				
			},
		onComplete: 
			function(){
				$("#bt").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400);
			
				$('#cboxClose').show();
				
				$('#projectcaption').addClass('invisible');

				$('#popup #bt').click( function(){
					if( $('#projectcaption').hasClass('invisible') ) {
						$('#projectcaption').animate({'width':"350", 'easing':"easeOutBounce"}, {duration:'slow'});
						$(this).animate({right:"350px", 'easing':"easeOutBounce"}, {duration:'slow'});
						$('#projectcaption').removeClass('invisible');
					}else{
						$('#projectcaption').animate({'width':"0", 'easing':"easeOutBounce"}, {duration:'slow'});
						$(this).animate({right:"1px", 'easing':"easeOutBounce"}, {duration:'slow'});
						$('#projectcaption').addClass('invisible');
					}
				});
			}
	});

	$(document).bind('cbox_complete', function(){
		// Slider 
		$('#project_slider').nivoSlider({
			effect:'random', //sliceDownRight,sliceDownLeft,sliceUpRight,sliceUpLeft,sliceUpDown,sliceUpDownLeft,fold,fade
			slices:15,								//number of slices
			animSpeed:500,							//speed of animation
			pauseTime:2500,							//Time for which slides remain visible
			startSlide:0, 							//Set starting Slide (0 index)
			directionNav:false, 						//Next & Prev
			directionNavHide:false,					//Only show on hover
			controlNav:true, 						//1,2,3...
			controlNavThumbs:false, 				//Use thumbnails for Control Nav
			controlNavThumbsSearch: '.jpg', 		//Replace this with...
			controlNavThumbsReplace: '_thumb.jpg', 	//...this in thumb Image src
			keyboardNav:false, 						//Use left & right arrows
			pauseOnHover:false, 						//Stop animation while hovering
			manualAdvance:false, 					//Force manual transitions
			captionOpacity:0 						//Universal caption opacity
		});
	});


	// PIXEL VERSION
	$("a.pixelversion").toggle(
		function(){
			$("ul#portfolio-list li").find('img').each(function () {
				var thumbOver = $(this).attr("src");
				var temp = thumbOver.substring(0,thumbOver.indexOf('.'));
				var newsrc = temp + '-pixel.jpg';
				$(this).attr("src",newsrc);
			});
			$(this).attr("class",'normalversion');
		},	
		function(){
			$("ul#portfolio-list li").find('img').each(function () {
				var thumbOver = $(this).attr("src");
				var temp = thumbOver.substring(0,thumbOver.indexOf('-'));
				var newsrc = temp + '.jpg';
				$(this).attr("src",newsrc);
			});
			$(this).attr("class",'pixelversion');
		}
	);
	
	// CUFON
	Cufon.replace('h1', { fontFamily: 'Nilland' });
	Cufon.replace('h1.logopixel', { fontFamily: 'Alterebro Pixel Font' });
	Cufon.replace('.menupixel', { fontFamily: 'Alterebro Pixel Font' });
	Cufon.replace('.footer', { fontFamily: 'Nilland' });
	Cufon.replace('.footerpixel', { fontFamily: 'Alterebro Pixel Font' });
	Cufon.replace('#txtnompixel', { fontFamily: 'Alterebro Pixel Font' });
	Cufon.replace('#txtemailpixel', { fontFamily: 'Alterebro Pixel Font' });
	Cufon.replace('#txtmessagepixel', { fontFamily: 'Alterebro Pixel Font' });
	Cufon.replace('.intropixel', { fontFamily: 'Alterebro Pixel Font' });
	Cufon.replace('#portfolio-filter a', { fontFamily: 'Sketch Rockwell' });

});