$(document).ready(
	function(){
		//-----------------------------------------------------------------------------------------------------------------------//	
		//---- preload image css --//
		//-------------------------//	
		$.xLazyLoader({img: ['content/graphics/banner.png',
							'content/graphics/banner_demo_reel.png',
							'content/graphics/banner_portfolio.png',
							'content/graphics/banner_dev.png',
							'content/graphics/gradient.png', 
							'content/graphics/tile.png']
					});
		
		//-----------------------------------------------------------------------------------------------------------------------//	
		//-------------------------//
		//----- preload image -----//
		//-------------------------//
 		 $('img').each(
			function(){
				$.xLazyLoader({img: $(this).attr('src')});
			}
		);
		
		
		//-----------------------------------------------------------------------------------------------------------------------//	
		//-------------------------//
		//-- scrollto click event -//
		//-------------------------//
		$('a.scrollto').click(
			function(e){
				e.preventDefault();
				$.scrollTo($(this).attr('href'), {axis:'y', duration:1000, easing:'easeInOutSine'});
			}
		);
		
		
		//-----------------------------------------------------------------------------------------------------------------------//	
		//--------------------------//
		//----- breakdown init -----//
		//--------------------------//
		$('.breakdown>ul').hide();
		$('.breakdown>ul').data('visibility', 'hidden');
		$('.breakdown_button').css('cursor', 'pointer');
		
		//-------------------------//
		//- breakdown click event -//
		//-------------------------//
		$('.breakdown_button').click(
			function(){
				if($(this).next('ul').data('visibility') == 'hidden'){
					$(this).next('ul').fadeIn();
					$(this).next('ul').data('visibility', 'show');
				}
				else{
					$(this).next('ul').fadeOut();
					$(this).next('ul').data('visibility', 'hidden');
				}
			}
		);
		
		
		//-----------------------------------------------------------------------------------------------------------------------//	
		//-------------------------//
		//--- filter menus init ---//
		//-------------------------//
		//	show filter menus (>> make it unavailable if javascript disable)
		$('#filters_container').show();
		
		//	init #filters3 (>> set all active <a>, to inactive)
		$('#filters3 a[href]').removeAttr('href').toggleClass('inactive_filter');	
		
		//-------------------------//
		//-- filter menus events --//
		//-------------------------//	
		//	<a> click event
		$('#filters1 a').click(
			function(e){
				//disable href link
				e.preventDefault();
				
				//remove current_filter1 class and add it to <a> clicked
				$('#filters1 .current_filter1').removeClass('current_filter1');
				$(this).addClass('current_filter1');
				
				//remove current_filter2 class and proceed filter menu2
				$('#filters2 .current_filter2').removeClass('current_filter2');
				var sFilter1 = $(this).text();
				Filters2(sFilter1);
				
				//filter gallery
				Filter_Thumbnails();
			}
		);
		
		//	<a> click event
		$('#filters2 a').click(
			function(e){
				//disable href link
				e.preventDefault();
				
				//if <a> still got href attribute (>> inactive <a> must no be taking care of, since they are not available filter)
				if($(this).attr('href')){
					//remove current_filter2 class and add it to <a> clicked
					$('#filters2 .current_filter2').removeClass('current_filter2');
					$(this).addClass('current_filter2');
					
					//remove current_filter3 class and proceed filter menu3
					$('#filters3 .current_filter3').removeClass('current_filter3');
					var sFilter1 = $('#filters1 .current_filter1').text();
					var sFilter2 = $(this).text();
					Filters3(sFilter1, sFilter2);
					
					//filter gallery
					Filter_Thumbnails();
				}
			}
		);
			
		//	<a> click event
		$('#filters3 a').click(
			function(e){
				//disable href link
				e.preventDefault();
				
				//check if <a> clicked is the same than the <a> .current_filter3
				var bProceed = true;
				if($('#filters3 .current_filter3')){
					if($(this).text() == $('#filters3 .current_filter3').text()){
						bProceed = false; 
					}
				}
				
				//if different and <a> still got href attribute (>> inactive <a> must no be taking care of, since they are not available filter)
				if(bProceed && $(this).attr('href')){
					//remove current_filter3 class and add it to <a> clicked
					$('#filters3 .current_filter3').removeClass('current_filter3');
					$(this).addClass('current_filter3');
						
					//filter gallery
					Filter_Thumbnails();
				}
			}
		);
			
		//------------------------------------------------------
		//	Filters2
		//------------------------------------------------------
		//	filter #filters2 according to sFilter1
		//	(hide <a> without class 'sFilter1' and show <a> with)
		//------------------------------------------------------
		//	in 	: sFilter1 (string)
		// 	out : none
		//------------------------------------------------------
		function Filters2(sFilter1){
			//init #filters2 (>> set all inactive <a>, active again)
			$('#filters2 a:not([href])').attr('href', '#').toggleClass('inactive_filter').toggleClass('active_filter');
			
			//filter it
			if(sFilter1 != "all"){
				$('#filters2 li:not(.' + sFilter1 + ') a[href]').removeAttr('href').toggleClass('active_filter').toggleClass('inactive_filter');

			}
			
			//case only one filter remains available
			if($('#filters2 a[href]').length == 1){
				//add current_filter2 class to remaining <a>
				$('#filters2 a[href]').addClass('current_filter2');
				
				//remove current_filter3 class and proceed filter menu3
				$('#filters3 .current_filter3').removeClass('current_filter3');
				var sFilter2 = $('#filters2 .current_filter2').text();
				Filters3(sFilter1, sFilter2);
			}
			else{
				//remove current_filter3 class and desactive all #filters3 <a>
				$('#filters3 .current_filter3').removeClass('current_filter3');
				$('#filters3 a[href]').removeAttr('href').toggleClass('active_filter').toggleClass('inactive_filter');
			}
		}
			
		//------------------------------------------------------
		//	Filters3
		//------------------------------------------------------
		//	filter #filters3 according to sFilter1 and sFilter2
		//	(hide <a> without both classes 'sFilter1', 'sFilter2'
		//	and show <a> with)
		//------------------------------------------------------
		//	in 	: sFilter1 (string)
		//	 	: sFilter2 (string)
		// 	out : none
		//------------------------------------------------------
		function Filters3(sFilter1, sFilter2){
			//init #filters3 (>> set all inactive <a>, active again)
			$('#filters3 a:not([href])').attr('href', '#').toggleClass('inactive_filter').toggleClass('active_filter');
			
			//filter it
			if(sFilter1 != "all"){
				$('#filters3 li:not(.' + sFilter1 + '_' + sFilter2 + ') a[href]').removeAttr('href').toggleClass('active_filter').toggleClass('inactive_filter');
			}
			else{
				//list all combinaison of "keyword1 possible + keyword2 selected" possible
				var sFilterClass = "";
				$('#filters1 a[href]:not(.current_filter1)').each(
					function(){
						var sFilter = $(this).text();
						if(sFilter != ""){
							if(sFilterClass != ""){ sFilterClass += ','; }
							sFilterClass += "." + sFilter + '_' + sFilter2;
						}						
					}
				);
				
				//filter with list found
				$('#filters3 li:not(' + sFilterClass + ') a[href]').removeAttr('href').toggleClass('active_filter').toggleClass('inactive_filter');
			}
			
			
			//case only one filter remains available
			if($('#filters3 a[href]').length == 1){
				$('#filters3 a[href]').addClass('current_filter3');
			}
		}	
		 
		//------------------------------------------------------
		//	Filter_Thumbnails
		//------------------------------------------------------
		//	filter .thumbnail elements according to .current_filter1
		//	.current_filter2 and .current_filter3
		//------------------------------------------------------
		//	in 	: none
		// 	out : none
		//------------------------------------------------------
		function Filter_Thumbnails(){
			var sFilterClass = "";
			var sFilterNoClass = "";
			
			var iNbFiltersAll = 3;
			var iNbFilterSel = 0
			for(var i=1; i<=iNbFiltersAll; i++){
				var sFilter = $('#filters' + i + ' .current_filter' + i).text();
				
				//create filter string
				if(sFilter != ""){
					if(sFilter != "all"){
						sFilterClass += '.' + sFilter;
						if(sFilterNoClass != ""){ sFilterNoClass += ','; }
						sFilterNoClass += ':not(.' + sFilter + ')';
						iNbFilterSel++;
					}
				}
			} 
			
			//if no filter clicked (>> only 'all' filter is selected)
			if(iNbFilterSel == 0){
				//show all
				$('#portfolio>li').find(".thumbs, .infos").fadeTo("normal", 1);
			}
			else{
				//show hidden element(s) matching filters
				$('#portfolio>li').filter(sFilterClass).find(".thumbs, .infos").fadeTo("normal", 1);
			}
			
			//hide visible element(s) not matching filters
			$('#portfolio>li').filter(sFilterNoClass).find(".thumbs, .infos").fadeTo("normal", .25);
		}
		
		
		//-----------------------------------------------------------------------------------------------------------------------//	
		//--------------------------//
		//---- thumbnails init -----//
		//--------------------------//
		//hide all thumbs except the first one of each work
		$('#portfolio .thumbs').each(
			function(){
				$('.floatbox:gt(0)', this).hide();
			}
		);	
		
		
		//-----------------------------------------------------------------------------------------------------------------------//	
		//-------------------------//
		//- Google analytics init -//
		//-------------------------//
		$.trackPage('UA-9538808-1', {onload: false});
		$('#contact a').track({category : 'contact'});
		$('#navigation_menu a').track({category : 'navigation', skip_internal : false});
		$('#demo_reel a.floatbox').track({category : 'demo reel', skip_internal : false});
		$('#demo_reel .breakdown_button').track({category : 'demo reel breakdown', skip_internal : false});
		$('#portfolio a.floatbox').track({category : 'portfolio', skip_internal : false});
		$('#scripts_category a').track({category : 'scripts', skip_internal : false});
		$('#footer a').track({category : 'footer'});
		
	}
);