//DN 11:35 17/05/2011
//verb-home.js

/*
  There are Jobs, each held in a DIV. We use JS and filtering to show/hide the jobs for each Job Area.
  For the Welcome job area we don't want to show any jobs, we want to show a
  video.
  We keep track of the current Job Area by setting class="active" on the 
  LI>A in the nav.
*/


//Stop flash of unstyled content.
//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
$(document).ready(function(){
	
	// DN 12:19 17/05/2011 - allow deep linking
	// see end of Ready function for click
	var deeplink = window.location.toString().split('#')[1];
	if( typeof(deeplink) == 'string' && deeplink != '' ) {
		if( deeplink == '360%C2%B0-photography' )
			deeplink = '360°-photography'; //manual URL decoding
	}
	else
		deeplink ='home';

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

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

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

	//run masonry, center the columns
	function layout(el, animate) {

		//reset the margin
		$('#MainHolder').css('margin-left', 0);

		//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 false;

		var filter = $(this).attr('class'); //get the filter/category name
		//if no filter_ class, this is a real link, follow it
		if( filter == '' ) {
			window.location = $(this).attr('href');
			return;
		}


		// DN 11:45 19/05/2011 - show main if hidden (because of video)
		$('#HomeContent').hide();
		main.show();

		//highlight nav item
		$('#Nav .active').removeClass('active'); //remove from the previously clicked filter
		$(this).addClass('active'); //add to this filter
		
		//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

		
		var 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
		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

		// DN 14:50 17/05/2011 - play the video on home
		if( $(this).hasClass('filter_home') ) {
			play_video();
		}
		
		return false;
	
	});


	// DN 12:21 17/05/2011 - 'click' the active filter
	if( deeplink != 'home' )
		$('#Nav li a.filter_'+deeplink).click();
	else {
		$('#Nav li a.filter_home').addClass('active');
		main.hide();
	}

}); //end document ready