// JavaScript Document
// Use log() instead of console.log()
function log() {
 if( window.console && console.log )
 console.log.apply( console, arguments );
}

$(document).ready(function(){	
	//font replacement
	Cufon.replace('h2');
	Cufon.replace('h3');
	Cufon.replace('#primary-nav li a');
	
	
	
	function initFolio()
	{
		var index = 0;
		if( !$('#folioHolder')[0])
			return;
			
		$('#folioHolder').css({ height:300, overflow:'hidden'}).append("<div id='folioNav'></div><div id='gradTop'></div><div id='gradBottom'></div>");
		
		$('#folioNav').css({
				width:100,
				height: $('#folioHolder').height()
		});
		
		var navlets ='<div id="scrollUp"></div><div id="scrollDown"></div>';
		var navletPadding = 6;//px
		var navletHeight = ( $('#folioNav').height() - ( ( $('#portfolio li').length - 1 ) * navletPadding ) ) / $('#portfolio li').length;
		$('img.header').each(function( i, header )
		  {
		  	$(this).attr('src', 'images/portfolio/'+i+'/header.png');
		  })
		$('#portfolio li').each(function( i, folioElement ){
				navlets += '<a href="folio_'+i+'_0" class="modal"><div id="navlet_'+i+'" class="navlet" title="'+ $(this).find('img').attr('title')+'"></div></a>';
				$(this).hover(function(){
										showDescription( i );
									   },
									   function(){
										   
									   });
				$(this).find('img').each(function( x ){
						$(this).wrap('<a href="images/portfolio/'+i+'/'+x+'.png" class="modal" rel="gal_'+i+'" title="\<a target=\'_blank\' href=\'images\/portfolio\/'+i+'\/'+x+'.png\'\>view full image\<\/a\>"></a>');
				})
				
				$(this).find('.thumb').each(function( b ){
							$(this).attr('src','images/portfolio/'+i+'/thumb_'+b+'.png');
				});
				var numImages = Number($(this).attr('class').slice($(this).attr('class').indexOf('_')+1, $(this).attr('class').length));
				if(numImages > 2)
				{
					for(var a=2; a<numImages; a++)
					{	
						$(this).append('<a href="images/portfolio/'+i+'/'+(a+1)+'.png" rel="gal_'+i+'" style="display:none" title="\<a target=\'_blank\' href=\'images\/portfolio\/'+i+'\/'+(a+1)+'.png\'\>view full image\<\/a\>">></a>');
					}
				}
				
		});
		$('#folioNav').append(navlets).find('.navlet').each( function ( i, navlet )
		{
			$(this).css({
						width:$('#folioNav').width() - (navletPadding * 2),
						height: navletHeight,
						margin: '0 auto ' + navletPadding + 'px auto'
						});
			$(this).hover(function(){
				index = Number($(this).attr('id').slice( $(this).attr('id').indexOf('_')+1, $(this).attr('id').length ));
				$('#portfolio li a').css({ borderBottom: 'none'});
				$( $('#portfolio li')[index] ).find('a').css({ borderBottom: '1px solid #dd22aa'});
				$('.navlet').css({ backgroundColor: '#e3e3e3' });
				$(this).css({
							backgroundColor: '#dd22aa',
							cursor: 'pointer'
							})
				animateFolio();
				showDescription( index );
			},
			function(){
				
			});
			$(this).click(function(){
				index = Number($(this).attr('id').slice( $(this).attr('id').indexOf('_')+1, $(this).attr('id').length ));
				$( $( $('#portfolio li')[index] ).find('a')[0]).click();
			})
		})
		$('#scrollUp').hover(function(){
			$(this).css({ backgroundPosition:"0 -14px", cursor:"pointer" });							  
		},
		function(){
			$(this).css({ backgroundPosition:"0 0" });
		}).click(function(){
			index -= 1;
			if( index < 0 )index = 0;
			animateFolio();
			$('.navlet').css({ backgroundColor: '#e3e3e3' });
			$('.navlet:eq('+index+')').css({ backgroundColor: '#dd22aa' });
			
		})
		
		$('#scrollDown').hover(function(){
			$(this).css({ backgroundPosition:"0 0", cursor:"pointer" });							  
		},
		function(){
			$(this).css({ backgroundPosition:"0 -14px" });
		}).click(function(){
			index += 1;
			if( index > $('#portfolio li').length - 1 )index = $('#portfolio li').length;
			animateFolio();
			$('.navlet').css({ backgroundColor: '#e3e3e3' });
			$('.navlet:eq('+index+')').css({ backgroundColor: '#dd22aa' });
		})
		
		$('#sidebar #description li').hide();
		
		$($('.navlet')[0]).css({
							backgroundColor: '#dd22aa'
						});
		$('#scrollUp').hide();
		
		$($('#sidebar #description li')[0]).show();
		
		$('div#main').css({ width: '46%' });
		$('#listLink').data('state', 'closed');
		$('#listLink').click(function(){
			if( $('#listLink').data('state') == 'closed')
			{
				$('#folioHolder').animate({
									  height: $('#portfolio').height()
									  })
				$('#listLink').text('show sliding list').data('state', 'open');
				$('#folioNav').hide();
				$('#gradTop').hide();
				$('#gradBottom').hide();
				$('#sidebar').css({
								  position:'fixed', 
								  margin:"0 0 0 3em"
								  })
			}else{
				$('#folioHolder').animate({
									  height: 300
									  })
				$('#listLink').text('show list view').data('state', 'closed');
				$('#folioNav').show();
				$('#gradTop').show();
				$('#gradBottom').show();
				$('#sidebar').css({
								  position:'relative',
								  margin:"0"
								  })
			}
			return false;
		})
		function getOffset()
		{
			var offset = ($( $('#portfolio li')[index] ).outerHeight({ margins:true }) * index) - (($('#folioHolder').height()/2) - $( $('#portfolio li')[index] ).height()/2);
				if( index == 0 )offset = -50;
				checkArrows( index );
			return offset;
		}
		function animateFolio()
		{
			$('#portfolio').animate({
					marginTop: - getOffset()
			})
		}
		function checkArrows( index )
		{
			if ( index == 0 )
			{
				$('#scrollUp').hide();
			}else if ( index == $('#portfolio li').length-1 )
			{
				$('#scrollDown').hide();
			}else{
				$('#scrollUp').show();
				$('#scrollDown').show();
			}
		}
	}
	
	function showDescription( index )
	{
		$('#sidebar #description li').hide();
		$($('#sidebar #description li')[index]).show();
	}
		
	function initForm()
	{
		//contact form modifications
		if( !$('div.feedbacktable')[0] )
			return;

		$('div.feedbacktable p.required').each(function()
		{
			var newRequiredLabel = $(this).text();
			newRequiredLabel = newRequiredLabel.replace(/\*/, '<span>*</span>');
			//log(newRequiredLabel);
			$(this).html( newRequiredLabel );
		})
		
		$('div.feedbacktable p').each(function( i )
		{
			$(this).append( '<img src="images/focusField.png" class="focusField"/>' ).attr('id','label_'+i);
		})
		
		$('div.feedbacktable input').each(function( i ){
			$(this).focus(function( ){
				$(this).parent().find('#label_'+i).addClass('focused');											
			})
		})
		
		$('div.feedbacktable input').each(function( i ){
			$(this).blur(function( ){
				$(this).parent().find('#label_'+i).removeClass('focused');											
			})
		})
		
		
	}
	
		
	initFolio();
	initForm();
	$('.modal').nyroModal();
	
});