/* jQuery */

// we are doing out CSS for effects in here so that the site still works without Javascript 

$(function() {   
	// add in the overlay and fadeout, works a little better than fading in the whole page
	$('#main').append('<div id="overlay"></div>');							
	$('#overlay').fadeOut(2000, function() { $('#overlay').remove(); }); // remove overlay when done
});

function mainHome() {			
	$('div#homeleft2 > #layer').css( {visibility:'visible'} );			// reveals, avoids avoid image popping
	$('#webServices').css( {left:'-25px',opacity:'0'} ).animate( {left:'0px', opacity:'1.0'}, 3000);	// slides in the big button from the left
	$('#webPortfolio').css( {left:'25px',opacity:'0'} ).animate( {left:'0px', opacity:'1.0'}, 3000);	// slides in the big button from the right
}

function mainPortfolio() {
	$('.did').css( {zIndex:'10', top:'-15px', visibility: 'visible', opacity: '0.0'} ).animate( {top: '0px', opacity: '1.0'}, 2000 );			// set up CSS and slide down
	$('.did_spacer').css( {zIndex:'10', top:'-15px', visibility: 'visible', opacity: '0.0'} ).animate( {top: '0px', opacity: '1.0'}, 2000 );
	$('img').css( {opacity: '0.70'} );
	
	// mouseover the images
	$('img').hover( function() {
									$(this).stop().animate( {opacity: '1.0'}, 750 );	// stop and fade up
							   },
					function() {
									$(this).stop().animate( {opacity: '0.70'}, 750 );	// stop and fade down
	});		

	// next and prev buttons

	// first we will move it offscreen to right (because the button faces right)
	// next it loads the #content box with the next page info
	// then moves it back over the left (from offscreen)
	// finally it animates the portfolio page
	$('#nextPortfolio').click(function() {					   
		$('#content').animate( {left:'700px'}, 1000, function() { $(this).load("portfolio2.php #content", function() { $(this).animate( {left:'0'}, 1000, mainPortfolio()) }) });
		return false;	// to maintain compatibility with JS disabled
	});
	
	// same as above to the left (because the prev arrow faces the left)
	$('#prevPortfolio').click(function() {					   
		$('#content').animate( {left:'-700px'}, 1000, function() { $(this).load("portfolio.php #content", function() { $(this).animate( {left:'0'}, 1000, mainPortfolio()) }) });
		return false;	// to maintain compatibility with JS disabled
	});	
			
}

function mainAbout()	// form on the about page
{
	$('#contactform').submit(function() {
		if( validateText($n('visitor'), 'Please enter your name') )
		{
			if(	validateEmail($n('visitormail'), 'Please enter your email') )
			{
				if( validateText($n('notes'), 'Please enter a message') )
				{
					val = new Array( $n('visitor').value, $n('visitormail').value, $n('notes').value );
					
					$.post('sendemail.php', 
						{ visitor:val[0], visitormail:val[1], notes:val[2] },
						function(data) { $('body').html(data); }
					);  
				}
			}
		}
	
		return false;
	});
}

/* normal Javascript */

function preloadImages()
{
	if(preloadImages.arguments.length == 0)
		return;
		
	i = new Array();
	
	if(document.images)
	{
		for(x=0; x<preloadImages.arguments.length; x++)
		{
			i[x] = new Image();
			i[x].src = preloadImages.arguments[x];
		}
	}
}

function swapImage(name, image)
{
	$n(name).src = image;
}

/* helpers */

// get element by name 
function $n(name)
{
	return document.getElementsByName(name)[0];
}

// validates email address
function validateEmail(e, warning)
{
	var expression = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
	if(e.value.match(expression))
	{
		return true; 
	}
	else
	{
		alert(warning);
		e.focus();
		return false;
	}
}

// validate if there is something in the form at all
function validateText(e, warning)
{
	if(e.value.length != 0)
	{
		return true; 
	}
	else
	{
		alert(warning);
		e.focus();
		return false;
	}
}