$(function()
{
	$('body').addClass('has-js');
	$('body').removeClass('no-js');
	$(".post").fitVids();	
    // fade in ye olde icons
    $('#social-sites a').delay(200).each(function(i, elem)
    {
        var d = 100 * Math.random() * i;
        $(elem).delay(d).fadeIn(200);
    });
    
    // social media iconages
    
    $('#social-sites a').each(function()
    {
        $(this).mousemove(function(e)
        {
            
            var baseExp = 1;    // 2 ^ 1 == 2
            
            // element proportions
            var w = this.offsetWidth;
            var h = this.offsetHeight;
            var hw = w/2;
            var hh = h/2;
            
            var offsets = $(this).offset(); // element position relative to page
            var pos = // mouse position relative to element
            {
                x : e.pageX - offsets.left,
                y : e.pageY - offsets.top
            };
            
            // mouse position offset from center of element
            var cx = pos.x - hw;
            var cy = pos.y - hh;
            
            // percentage from center to edge
            var px = Math.abs(cx/hw);
            var py = Math.abs(cy/hh);

            // new top/left positions
            var nx = Math.round(Math.pow(2, px * baseExp)) * (cx < 0 ? -1 : 1);
            var ny = Math.round(Math.pow(2, py * baseExp)) * (cy < 0 ? -1 : 1);
            
            $(this).css('left', nx + 'px');
            $(this).css('top',  ny + 'px');

            
        });
        
        $(this).hover(function(e) // over
        {
            $(this).addClass('hover');
            
            $('#contact a').each(function(i,elem)
            {
                if (elem.className.match(/\bhover\b/)) return;
                
                $(elem).animate({opacity:.33},{queue:false,duration:100},'swing');
            });
            
            $(this).css('z-index', 9999);
            $('#' + this.parentNode.id + ' img.logo').fadeIn(200);
        },
        function(e) // and out
        {
            $(this).removeClass('hover');
            $('#' + this.parentNode.id + ' img.logo').fadeOut(200);
            
            $('#contact a').each(function(i,elem)
            {
                $(elem).animate({opacity:1.0},100,'swing');
            });
            
            var pos = 
            {
                x: parseInt($(this).css('left')),
                y: parseInt($(this).css('top'))
            };
            $(this).css('z-index', 1);

            $(this).animate
            ({
                top     : pos.y * -1,
                left    : pos.x * -1
            }, 50, 'swing').animate
            ({
                top     : pos.y * .75,
                left    : pos.x * .75
            }, 75, 'swing').animate
            ({
                top     : pos.y * -.5,
                left    : pos.x * -.5
            }, 50, 'swing').animate
            ({
                top     : pos.y * .25,
                left    : pos.x * .25
            }, 100, 'swing').animate
            ({
                top     : 0,
                left    : 0
            }, 100, 'swing', function()
            {
                $(this).css('z-index', 0);
            });
        });
        /**/
    }); 
    
		$(document).scroll(function() {
		    if($(document).scrollTop() > 50){
		    	$("#header-container").addClass('pinned');
		    }
		    else{
		    	$("#header-container").removeClass('pinned');
		    }
		})    
    
    
/*
    var supportsCanvas = !!document.createElement('canvas').getContext;   
    supportsCanvas && (window.onload = greyImages)
*/
    
    function greyImages(){
    	var ctx = document.getElementsByTagName('canvas')[0].getContext('2d'),
    	img = document.getElementById('latest-project'),
    	imageData, img, length, i = 0,
    	red, green, blue, grey;
    	
    	ctx.drawImage(img,0,0);
    	
    	imageData = ctx.getImageData(0,0, 412, 122);
    	px = imageData.data;
    	length = px.length;
    	
    	for( ; i < length; i+=4 ){
    		//rgba
    		//px[i]
    		grey = 0.4*px[i] + 0.6*px[i+1] + 0.09*px[i+2];
    		px[i] = px[i+1] = px[i+2] = grey;
    	}
    	
    	ctx.putImageData(imageData, 0, 0);
    	
    }  
});