var SCROLL_SPEED = 250;
var activeCategory = "";
var allCategories = [];
var navVisible = false;
var navExpanded = false;
var galleryLoaded = false;

var navDeselectCSS = {
	'color':'#ccc',
	'border-bottom-color':'#aaa',
	'background-image':'url("images/nav-item-ex.png")'
}
var navSelectCSS = {
	'color':'#f00',
	'border-bottom-color':'#f00',
	'background-image':'url("images/nav-item-arrow.png")'
}

$(document).ready(function(){
	
	
	
	/// -------- RESIZE HEADER -----------
	
	resizeHeader();
	
	$(window).scroll( function(){

		if ( $(window).scrollTop()+$(window).height() >= $(document).height()-25 ) {
			if ( !galleryLoaded ) {
				loadGallery();
			};
		};

	});
	
	$('.load-link').hide();
	
	// -------- HASH -----------
	if ( document.location.hash != "" && document.location.hash != "#" && document.location.hash != "#-" && document.location.hash != "# " ) {
		$(window).scrollTop( $(document).height() );
	};
	
});

function loadGallery() {
	galleryLoaded = true;
	$("#gallery-container").addClass( "gallery-load" );
	$("#gallery-container").load( "gallery.php #gallery", {rand:Math.random()*0xfff}, buildGallery );
	
}


function buildGallery() {
	
	// --- NAVIGATION ----
	
	$(window).scroll( function(){

		var headerHeight = $('.header-container').height() - 10;
		
		if ( $(window).scrollTop() > headerHeight ) {	
			if ( !navVisible ) {
				navVisible = true;
				$('#nav').animate( {height:'45px'}, 250 );
				addNavListeners();
			}				
		} else {
			if ( navVisible ) {
				navVisible = false;
				$('#nav').animate( {height:'0px'}, 250 );
				clearNavListeners();
			}
		}

	});
	
	$("#gallery-container").removeClass( "gallery-load" );
	
	$('.gallery-item').each( function(i) {
		
		var parHeight = $(this).innerHeight();
		var galleryName = $(this).attr( 'id' );
		var contentName = "#"+galleryName+"-content";
		
		$(this).children( ".gallery-item-nav" ).css( "margin-top", (parHeight/2-25) + "px" );
		$(this).children( ".gallery-item-nav" ).attr( "content", contentName );
		
		var maxScroll = $(contentName).children( 'div' ).length - 1;
		
		$(contentName).attr( 'scrollIndex', 0 );
		$(contentName).attr( 'maxScroll', maxScroll );
		
		$(this).children( ".gallery-item-nav-right" ).click( function(j){
			scrollGalleryContent( $(this).attr( 'content' ), 1 );
		});
		$(this).children( ".gallery-item-nav-left" ).click( function(j){
			scrollGalleryContent( $(this).attr( 'content' ), -1 );
		});
		
		updateGalleryNav( contentName, 0 );
		
	});
	
	$('.swf').each( function(i){
		swfDiv( $(this),$(this).attr("url"), $(this).attr("width"),$(this).attr("height") );
	} );
	
	/// -------- PARSE HASH -----------
	
	var removedHash = document.location.hash.replace( "#", "" );
	
	var contentIndex = removedHash.indexOf( "-content" );
	if ( contentIndex == -1 ) {
		if ( allCategories.indexOf( removedHash ) != -1 ) {
			selectCategory(removedHash, false );
		} else {
			selectCategory("", false);
		}
		
	} else {	
		selectCategory("", false);
		var itemName = removedHash.substring( 0, contentIndex );
		
		var scrollNum = parseInt( removedHash.substring( contentIndex+9 ) );
		
		scrollGalleryContent( "#" + itemName+"-content", scrollNum );
		
		var scrollPos = $("#" + itemName).offset().top - 40;
		$.scrollTo( scrollPos, 100 );
		//document.location.hash = "#" + itemName;
		
	}	
}


function resizeHeader() {
	var headerSize = Math.max( ($(window).height()-160), 300 );
	$('.header-container').css( {'height':headerSize+"px"} );
	$('.header-content').css( {'margin-top':($('.header-container').height()/2-$('#header').height()/2)+"px"} );
	
}


function selectCategory(catName, animate) {
	
	var scrollTime = 250;
	if( !animate ) scrollTime = 0;
	
	showCategory( catName, animate );
	if ( activeCategory=="" ) {
		activeCategory=" ";
		$("#nav-view-all").fadeOut();
		document.location.hash = " ";
		$("#gallery-header").html( "WORK" );
	} else {
		$("#nav-view-all").fadeIn();
		$.scrollTo( $('.header-container').height()-5, scrollTime );
		document.location.hash = activeCategory;
		$("#gallery-header").html( "WORK <span style='color:#888'>- " + activeCategory + "</span>" );
	}	
}




function scrollGalleryContent( contentName, scrollDir ){
	var parWidth = $(contentName).parent().innerWidth();
	var scrollIndex = parseInt( $(contentName).attr( 'scrollIndex' ) );
	var newIndex = scrollIndex+scrollDir;
	
	if (newIndex < 0) newIndex = 0;
	if (newIndex > $(contentName).attr( 'maxScroll' ) ) newIndex = $(contentName).attr( 'maxScroll' );
	
	$(contentName).attr( 'scrollIndex', newIndex );
	
	var goX = -(newIndex * parWidth) + 'px';
	$(contentName).animate( {marginLeft:goX}, SCROLL_SPEED );
	
	updateGalleryNav( contentName, newIndex );
	
	var hash = (contentName.replace( "content-", "" )) + '-' + newIndex;
	document.location.hash = hash;
	$(contentName).parent().parent().children(".gallery-link").attr( "href", hash );
	
}

function updateGalleryNav( contentName, scrollIndex ){					
	$( ".gallery-item-nav-left" ).each(
		function(i) {
			if ($(this).attr( 'content' ) == contentName) {
				if ( scrollIndex == 0 ) {
					$(this).hide();
				} else {
					$(this).show();
				}
			}
		}
	);
	$( ".gallery-item-nav-right" ).each(
		function(i) {
			if ($(this).attr( 'content' ) == contentName) {
				if ( scrollIndex == $(contentName).attr('maxScroll') ) {
					$(this).hide();
				} else {
					$(this).show();
				}
			}
		}
	);					
}

function showCategory( catName, animate ){
	var categoryName = catName.replace( "#", "" );
	
	if ( categoryName != activeCategory && categoryName != "" ) {
		$( ".item-holder" ).each( function(i){
			var cats = $(this).attr("category");		
			if ( cats.indexOf(categoryName)  == -1  ) {
				if ( animate ) {
					$( this ).slideUp();					
				} else {
					$( this ).hide();
				}
			} else {
				if ( animate ) {
					$( this ).slideDown();					
				} else {
					$( this ).show();
				}
			}
		});
		
		activeCategory = categoryName;
		
	} else {
		$( ".item-holder" ).each( function(i){
			if ( animate ) {
				$( this ).slideDown();					
			} else {
				$( this ).show();
			}
		});
		
		activeCategory = "";
	}
	
	$('.nav-item').each( function(i){
		if ( activeCategory == "" || $(this).attr("category") == activeCategory ) {
			$( this ).css( navSelectCSS );
		} else {
			$( this ).css( navDeselectCSS );			
		}
	});
	
	
	
}


function addNavListeners(){
	$('#nav').mouseenter(
		function(){
			if ( !navExpanded ) {
				$('#nav').stop();
				$('#nav').animate( {height:"100%"}, 250 );		
				navExpanded = true;
			};
		}
	);
	$('#nav').mouseleave(
		function(){
			if ( navExpanded ) {
				$('#nav').stop();
				$('#nav').animate( {height:'45px'}, 250 );
				navExpanded = false;
			};
		}
	);
}

function clearNavListeners(){
	navExpanded = false;
	$('#nav').mouseenter(
		function(){}
	);
	$('#nav').mouseleave(
		function(){}
	);
}

function swfDiv(flashDiv, swfURL, width, height) {
	
	flashDiv.css( { 'width':width+'px','height':height+'px','background':'url("images/flash-bg.png")','margin-top':'10px' } );
	flashDiv.append( '<div id="flash-holder"></div>' );
	flashDiv.append( '<div class="flash-button" id="flash-button"></div>' );
	flashDiv.children("#flash-button").css( {'margin-left':(width/2-20)+'px','margin-top':(height/2-45)+'px'} );
	flashDiv.one( "click",
		function(){
			$(this).children( "#flash-holder" ).flash( {src:swfURL, width:width, height:height } );
			$(this).append( '<div class="flash-close" id="flash-close"></div>' );
			$(this).children("#flash-close").css( {'margin-left':'-5px','margin-top':-height-10+'px'} );
			$(this).children("#flash-close").one( "mousedown", 
			function(){
				$(this.parentNode).html("");				
				swfDiv(flashDiv,swfURL,width,height);	
			});
			$(this).children("#flash-close").hide();
			$(this).children("#flash-close").fadeIn("slow");
									
		}
	);
}