//from http://paulirish.com/2009/fighting-the-font-face-fout/#defeatthefout
(function(){
  // if firefox 3.5+, hide content till load (or 3 seconds) to prevent FOUT
  var d = document, e = d.documentElement, s = d.createElement('style');
  if (e.style.MozTransform === ''){ // gecko 1.9.1 inference
    s.textContent = 'body{visibility:hidden}';
    e.firstChild.appendChild(s);
    function f(){ s.parentNode && s.parentNode.removeChild(s); }
    addEventListener('load',f,false);
    setTimeout(f,3000); 
  }
})();



$(document).ready(function(){

	var main = $('#Main');
	
	layout( main, false ); //initial layout - run masonry, center the div
	
	var all_items = main.clone(); //clone the initial layout

	$(window).resize( function() { layout(main, true); }); //when the window is resized, call layout

	//reset the cookie
	$.cookie('area', null);

	//run masonry, center the columns
	function layout(el, animate) {
	
		//reset the margin
		$('#MainHolder').css('margin-left', 0);

		//todo: would be good to
		//expand the area to accomodate for any previous margin
		//console.log( $('#MainHolder').css('margin-left') );
		//el.width( el.width() + el.css('margin-left'));
		//but this doesn't work either
	
		//make a nice layout
		el.masonry({
			singleMode: true,
			animate: animate,
			columnWidth: 312 // 272px wide, plus 2*20px margin
		});

		var maindata = el.data('masonry');
		var mainwidth;
	
		if( maindata.$bricks.length <= maindata.colCount )
			mainwidth = maindata.$bricks.length * maindata.colW
		else		
			mainwidth = maindata.colCount * maindata.colW;

		var marginleft = ($(window).width() - mainwidth)/2;

		if( animate )
			$('#MainHolder').animate({marginLeft: marginleft});
		else
			$('#MainHolder').css('margin-left', marginleft);
	

	} //layout()


	//job hover effects
	$('.job').live( 'mouseenter', jobIn);
	$('.job').live( 'mouseleave', jobOut);
	
	function jobIn() {
		$('.description', $(this)).fadeIn('fast');
		return false;
	}
	
	function jobOut() {
		$('.description', $(this)).fadeOut('fast');
		return false;
	}




	//when the user clicks one of the filters
	$('#Nav li a').live( 'click', function() {
		
		//if we're already looking at this filter, do nothing
		if( $(this).hasClass('active') )
			return;

		//$(this).removeClass('active');  //remove active class so we're just left with the filter name

		var filter = $(this).attr('class'); //get the filter/category name
		
		//set a cookie, when we look at the details we want to show other jobs from that area
		$.cookie('area', filter);
		
		if( filter == 'filter_home' ) {
			$.cookie('area', null); //reset the cookie
			window.location.hash  = '';
		}
		else
			window.location.hash = filter.split('filter_')[1]; //set the hash for 'deep' linking


		//highlight this nav item
		$('#Nav .active').removeClass('active'); //remove from the previously clicked filter
		$(this).addClass('active'); //add to this filter

		dest = all_items.clone(); //make a clone of all items, process the clone then quicksand morph to the clone

		//remove the jobs from the destination layout that don't match this type
		if( filter != 'filter_home' ) {
			dest.children().each( function() {
				if( ! $(this).hasClass(filter) )
					$(this).remove();
			});
		}

		//if there's a description for this job type, show it
		if( $('#Descriptions .'+filter).length )
			dest.prepend( $('#Descriptions .'+filter).clone() );

		//apply quicksand effect - this morphs main into dest
		main.quicksand( $('.job', dest),{
			duration: 500,
			attribute: 'id'
		}, function() {
			layout(main, true); //run masonry on the new main
		});

		dest.remove(); //delete the copy
		
		return false;
	
	});


	//load the filter
	var deeplink = window.location.toString().split('#')[1];
	
	console.log( deeplink );

	if( typeof(deeplink) == 'string' ) {
		if( deeplink == '360%C2%B0-photography' )
			$('#Nav li a.filter_360°-photography').click() //manual url decode
		else
			$('#Nav li a.filter_'+deeplink).click();
	}
	else
		$('#Nav .filter_home').addClass('active');





}); //doc ready