/*
* jQuery goes here
*/
$(function() {

	// ***
	// Scrolling background
	// ***

	// height of background image in pixels
	var backgroundheight = 1000;

	// get the current minute/hour of the day
	var now = new Date();
	var hour = now.getHours();
	var minute = now.getMinutes();

	// work out how far through the day we are as a percentage - e.g. 6pm = 75%
	var hourpercent = hour / 24 * 100;
	var minutepercent = minute / 60 / 24 * 100;
	var percentofday = Math.round(hourpercent + minutepercent);

	// calculate which pixel row to start graphic from based
	// on how far through the day we are
	var offset = backgroundheight / 100 * percentofday;

	// graphic starts at approx 6am, so adjust offset by 1/4
	var offset = offset - (backgroundheight / 4);

	function scrollbackground() {
		// decrease the offset by 1, or if its less than 1 increase it by
		// the background height minus 1
   		offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
		// apply the background position
   		$('body').css("background-position", "50% " + offset + "px");
   		// call self to continue animation
   		setTimeout(function() {
			scrollbackground();
			}, 100
		);
   	}

	// Start the animation
	//scrollbackground();
});

$(document).ready(function() {
/* BEGIN
==================================================== */
	
	$('img.logo.inactive').click(function(){
		$(this).removeClass('inactive').addClass('active');
		$(this).next('h1').removeClass('inactive').addClass('active').fadeIn(1000);	
		$(this).next('h1').next('nav').removeClass('inactive').addClass('active').delay(800).fadeIn(180);		
	});
		
	$('a.contact.inactive').click(function() {
		$(this).removeClass('inactive').addClass('active');
		$('div.about.active').removeClass('active').addClass('inactive').fadeOut( function() {
			$('div.main.up div.contact').removeClass('inactive').addClass('active').fadeIn();		
			$('div.main.up a.contact.active').addClass('highlight');
			});
		$('a.about.active').removeClass('active').removeClass('highlight').addClass('inactive');
		$('div.main.down').animate({
    			marginTop: '10%'
  				}, 1000, function() {
    				$(this).removeClass('down').addClass('up');
						$('div.contact').removeClass('inactive').addClass('active').fadeIn();
						$('a.contact.active').addClass('highlight');
						// Animation complete.
  		});
	});
	
	
	$('a.about.inactive').click(function() {
		$(this).removeClass('inactive').addClass('active');
		$('div.contact.active').removeClass('active').addClass('inactive').fadeOut( function() {
			$('div.main.up div.about').removeClass('inactive').addClass('active').fadeIn();	
			$('div.main.up a.about.active').addClass('highlight');
		});
		$('a.contact.active').removeClass('active').removeClass('highlight').addClass('inactive');
		$('div.main.down').animate({
    			marginTop: '10%'
  				}, 1000, function() {
						$(this).removeClass('down').addClass('up');
    				$('div.about.inactive').removeClass('inactive').addClass('active').fadeIn();
						$('a.about.active').addClass('highlight');
						// Animation complete.
  		});
	});
	
	
	$('a.close').click(function() {
		$(this).parent('div').fadeOut();
		$('a.active').removeClass('active').removeClass('highlight').addClass('inactive');
		$('div.main.up').delay(600).animate({
    			marginTop: '30%'
  				}, 1000, function() {
					$(this).removeClass('up').addClass('down');
					// Animation complete.
  		});
		
	});
	




	
/* END
==================================================== */
});