$(document).ready(function(){
	// PAGE ROOT
	$('#services').hide();
	$('#profile').hide();
	$('#works').hide();
	
	// NAVIGATION ROOT
	$('a#nav_home').addClass('selected');
	
	// NAVIGATION BUTTONS : HOME
	$("#nav_home").click(function() {
		$("#home").show(200);
		$("#profile").hide(200);
		$("#services").hide(200);
		$("#works").hide(200);
		$('a#nav_home').addClass('selected');
		$('a#nav_profile').removeClass('selected');
		$('a#nav_services').removeClass('selected');
		$('a#nav_works').removeClass('selected');
	});
	
	// NAVIGATION BUTTONS : PROFILE
	$("#nav_profile").click(function() {
		$("#profile").show(200);
		$("#services").hide(200);
		$("#works").hide(200);
		$("#home").hide(200);
		$('a#nav_profile').addClass('selected');
		$('a#nav_services').removeClass('selected');
		$('a#nav_works').removeClass('selected');
		$('a#nav_home').removeClass('selected');
	});
	
	// NAVIGATION BUTTONS : SERVICES
	$("#nav_services").click(function() {
		$("#profile").hide(200);
		$("#services").show(200);
		$("#works").hide(200);
		$("#home").hide(200);
		$('a#nav_profile').removeClass('selected');
		$('a#nav_services').addClass('selected');
		$('a#nav_works').removeClass('selected');
		$('a#nav_home').removeClass('selected');
	});
	
	// NAVIGATION BUTTONS : WORKS
	$("#nav_works").click(function() {
		$("#profile").hide(200);
		$("#services").hide(200);
		$("#home").hide(200);
		$("#works").show(200);
		$('a#nav_profile').removeClass('selected');
		$('a#nav_services').removeClass('selected');
		$('a#nav_home').removeClass('selected');
		$('a#nav_works').addClass('selected');
	});
	
	 //  RELATED LINKS FADING :: JQUERY  
	$("img.fade ").fadeTo(0, 0.4); // This sets the opacity of the thumbs to fade down to 60% when the page loads
	$("img.fade ").hover(function(){
		$(this).fadeTo(200, 1.0); // This should set the opacity to 100% on hover
	},function(){
		$(this).fadeTo(200, 0.4); // This should set the opacity back to 60% on mouseout
	});
	
	// ACCESSIBILITY / NAVIGATION ANIMATION  (Thx @ WebDesignerWall)
	$('a[href^=#]').click(function() {
		cible = $(this).attr('href');
		if($(cible).length>=1){ hauteur=$(cible).offset().top;  }
		else { hauteur=$("a[name="+cible.substr(1,cible.length-1)+"]").offset().top; }
		$('html,body').animate({scrollTop: hauteur}, 1000);
		return false;
	});
	
	// TWEETS 
	$(".tweet").tweet({
		username: "johannborgia",
		join_text: "auto",
		avatar_size: 50,
		count: 4,
		loading_text: "loading tweets..."
	});
	
	// IMG BORDER ROUNDED - WEBDESIGNERWALL
	$("img.rounded").load(function() {
	    $(this).wrap(function(){
	      return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
	    });
	    $(this).css("opacity","0");
	});
	
	// IMG - HTML5 - GRAYSCALE - WEBDESIGNERWALL
	$(window).load(function(){ // On window load. This waits until images have loaded which is essential
		$(".post img.grayscale").animate({opacity:1},160); // Fade in images so there isn't a color "pop" document load and then on window load
		$('.post img.grayscale').each(function(){ // clone image
			var el = $(this);
			el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display:inline-block; float:right;'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
				var el = $(this);
				el.parent().css({"width":this.width,"height":this.height});
				el.dequeue();
			});
			this.src = grayscale(this.src);
		});
		$('.post img.grayscale').mouseover(function(){ // Fade image 
			$(this).parent().find('img:first').stop().animate({opacity:1}, 160);
		})
		$('.img_grayscale').mouseout(function(){
			$(this).stop().animate({opacity:0}, 160);
		});		
	});
	function grayscale(src){ // Grayscale w canvas method
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		var imgObj = new Image();
		imgObj.src = src;
		canvas.width = imgObj.width;
		canvas.height = imgObj.height; 
		ctx.drawImage(imgObj, 0, 0); 
		var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
		for(var y = 0; y < imgPixels.height; y++){
			for(var x = 0; x < imgPixels.width; x++){
				var i = (y * 4) * imgPixels.width + x * 4;
				var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
				imgPixels.data[i] = avg; 
				imgPixels.data[i + 1] = avg; 
				imgPixels.data[i + 2] = avg;
			}
		}
		ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
		return canvas.toDataURL();
    }
	
	
	// BOTTOMLINE : BACK TO THE TOP LINK
	$("#back-top").hide(); // hide #back-top first
	$(function () { // fade in #back-top
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) { $('#back-top').fadeIn(); } 
			else { $('#back-top').fadeOut(); }
		});
		$('#back-top a').click(function () { // scroll body to 0px on click
			$('body,html').animate({ scrollTop: 0 }, 160);
			return false;
		});
	});
	
	
	
});