$(document).ready(function(){
	/* Navigation Links */
	$('#worklink').click(function(){
		$('#aboutbox').slideUp();
		$('#contactbox').slideUp();
		return false;
	});
	$('#aboutlink').click(function(){
		$('#contactbox').slideUp();
		$('#aboutbox').slideDown();
		
		return false;
	});
	$('#contactlink').click(function(){
		$('#aboutbox').slideUp();
		$('#contactbox').slideDown();
		return false;
	});
	
	/* Close buttons */
	$('#contactclose').click(function(){
		$('#contactbox').slideUp();
		return false;
	});
	$('#aboutclose').click(function(){
		$('#aboutbox').slideUp();
		return false;
	});
	$('#featureclose').click(function(){
		$('#feature *').fadeOut();
		window.setTimeout(function(){$('#feature').slideUp();}, 500);
		$('#currentImageIndex').val(-1);
		return false;
	});
	
	
	/* Feature box */
	$('.thumb').click(function(){


		var currentIndex = $('#currentImageIndex').val();
		var clickedIndex = $('input[name=index]',this).val();
		
		var height = $('input[name=height]',this).val();
		var width = $('input[name=width]',this).val();
		$('#currentImageIndex').val(clickedIndex);
		var newHeight = 76 + height * 1;
		clickedThumb = this;
		if(window.pageYOffset > $('#feature').offset().top)
			$.scrollTo('#feature', {duration: 1000});

		if(currentIndex == -1){
			changeFeatureImage();
			$('#feature').css('height', newHeight).css('width', width);
			$('#feature *').hide();
			$('#feature').slideDown();
			window.setTimeout(function(){
				$('#feature *').fadeIn();
				if(window.pageYOffset > $('#feature').offset().top)
					$.scrollTo('#feature', {duration: 1000});

			}, 500);
		}
		else if(currentIndex != clickedIndex){
			var currentHeight = $('#feature').css('height').match(/(\d+)px/)[1];
			$('#feature *').fadeOut();
			window.setTimeout(function(){
				$('#feature').animate({"height": newHeight}, {duration: "slow" });
				window.setTimeout(function(){
					if(window.pageYOffset > $('#feature').offset().top)
						$.scrollTo('#feature', {duration: 1000});
					changeFeatureImage();
					$('#feature *').fadeIn();
				}, 500);
			}, 500);
		}
		return false;
	});
	
	
	/* Filters */
	initializePortfolio();
	selectedNavItem = 0;
	currentlyFilteringPortfolio = 0;
	$('#allfilter').click(function(){filterPortfolioImages(''); return false;});
	$('#webfilter').click(function(){filterPortfolioImages('web'); return false;});
	$('#printfilter').click(function(){filterPortfolioImages('print'); return false;});
	$('#photofilter').click(function(){filterPortfolioImages('photo'); return false;});
	$('#allfilter,#webfilter,#printfilter,#photofilter').mouseover(function(tobj){
		flipNavButtonColor(typeToIndex($(tobj.currentTarget).attr('id').match(/(.+)filter/)[1]), 1);
	}).mouseleave(function(tobj){
		var bidx = typeToIndex($(tobj.currentTarget).attr('id').match(/(.+)filter/)[1]);
		if(bidx != selectedNavItem)
			flipNavButtonColor(bidx, 0);
	});
	
	/* Contact form */
	$('.contactinput').each(function(){
		$(this).attr('defaultText', $(this).val());
	}).focus(function(){
		if($(this).val() == $(this).attr('defaultText') || $(this).css('outline-style') == 'solid'){
			$(this).val('');
			$(this).css('color', '#000000');
			$(this).css('font-size', '12px');
			$('#emailinput').css('border', '0px').css('outline-color', 'red').css('outline-style', 'none');
		}
	}).blur(function(){
		if($(this).val() == '' && $(this).attr('defaultText') != ''){
			$(this).val($(this).attr('defaultText'));
			$(this).css('color', '#D8D8D8');
			$(this).css('font-size', '20.75px');
		}
	});
	$('#submitbutton').parent().click(function(){
		$('#emailinput').css('border', '0px').css('outline-color', 'red').css('outline-style', 'none');
		$.post($('#mailurl').val(), {
			name: $('#nameinput').val(),
			email: $('#emailinput').val(),
			phone: $('#phoneinput').val(),
			comments: $('#commentarea').val()
		}, function(response){
			if(response == '11'){
				$('.contactinput').each(function(){
					$(this).val('').blur();
				});
			}
			else if(response == '2'){
				$('#emailinput').css('border', '3px').css('outline-color', '#FF0000').css('outline-style', 'solid');
			}
		});
		return false;
	});
	
});
function typeToIndex(type){
	switch(type){
		case 'all':
			var bidx = 0;
			break;
		case 'web':
			var bidx = 1;
			break;
		case 'print':
			var bidx = 2;
			break;
		case 'photo':
			var bidx = 3;
			break;
	}
	return bidx;
}
function filterPortfolioImages(type){
	if(!currentlyFilteringPortfolio){
		currentlyFilteringPortfolio = 1;
		var rowHeight = 159;

		if(type == '')
			type = 'all';
		var bidx = typeToIndex(type);
		for(var i = 0; i < 4; i++)
			flipNavButtonColor(i, (i == bidx));
		selectedNavItem = bidx;
		$('.thumb').fadeOut(500);
		$('#featureclose').click();
		$('#portfolio').css('height', rowHeight * Math.ceil($('.thumb:visible').length / 4));
		window.setTimeout(function(){
			$('.space').remove();
			var itemCount = 0;
			for(var i = 0; i < NumItems; i++)
				if(type == 'all' || PortfolioCategories[i] == type)
					itemCount++;
			$('#portfolio').animate({"height": rowHeight * Math.ceil(itemCount / 4)}, {duration: "slow" });
			window.setTimeout(function(){
				var colCount = 0;
				for(var i = 0; i < NumItems; i++){
					if(type == 'all' || PortfolioCategories[i] == type){
						$(PortfolioItems[i]).fadeIn(500);
						if(colCount++ < 3)
							$(PortfolioItems[i]).after("<div class='space'></div>");
						else 
							colCount = 0;
					}
				}
				window.setTimeout(function(){currentlyFilteringPortfolio = 0;}, 500);
			}, 500);
		}, 500);
	}
}
function flipNavButtonColor(bidx, onoroff){
	var backgroundPositionsX = [0, -51, -107, -170];
	var backgroundPositionsY = [0, -27];
	var names = ['all', 'web', 'print', 'photo'];
	var newPosition = backgroundPositionsX[bidx] + 'px ' + ((onoroff)?'-27':'0') + 'px';
	$('#' + names[bidx] + 'filter').css('background-position', newPosition);
}

function initializePortfolio(){
	PortfolioItems = $('.thumb');
	NumItems = PortfolioItems.length;
	PortfolioCategories = [];
	for(var i = 0; i < NumItems; i++){
		PortfolioItems.eq(i).append("<input type='hidden' name='index' value='" + i + "' />");
		PortfolioCategories[i] = $('input[name=category]', PortfolioItems.eq(i)).val();
	}
}
function changeFeatureImage(){
	var object = clickedThumb;
	var fullImgSrc = $('input[name=url]',object).val();
	var title = $('input[name=title]', object).val();
	var cat = $('input[name=category]', object).val();
	var title_parts = title.match(/(.+)\/\/(.+)/);
	$('#featureimg').attr('src', fullImgSrc);
	$('#featuretitle').html(title_parts[1] + "<span id='greyslash'>//</span>" + title_parts[2]);
	$('#filtertitle').html(cat.toUpperCase());
	_typeface_js.renderDocument();
}