$(document).ready(function() {

	
	//
	// HERE IS THE START OF THE FLORAL OBJECT ---------------------------------------------------------------------------//
	//
		
	var FloralObject =
	{
	
		init: function()
			{
				
				// hide the floral images
				$('#floral ul li').hide();
				
				// attach a function to each branch of it (it's a loop for each branch)
				$('.tree-section ul').each(FloralObject.startFloralBranches);
			},

				
		startFloralBranches: function()
			{
				// create a duration variable for the speed of the animation
				var duration = 50;
				
				// blend in the BRANCHES and SECTIONS ------------------------------------//
								
				// blend in the SECTIONS
				$('#web-intro').delay(650).fadeIn(1000);
				$('#photography-intro').delay(2300).fadeIn(2500);
				$('#digital-intro').delay(3050).fadeIn(1500);
				$('#lounge-intro').delay(5800).fadeIn(1500);
				$('#utilities-intro').delay(8000).fadeIn(1000);
				
				
				// blend in the BRANCHES
				
				// towards WEB
				//$("ul#branchWeb1").delay(0);
				$("ul#branchWeb2").delay(400);
				
				// towards PHOTOGRAPHY
				$("ul#branchWeb4").delay(1000);
				$("ul#branchWeb5").delay(1200);
				$("ul#branchWeb6").delay(1600);
				$("ul#branchWeb6a").delay(1700);
				$("ul#branchWeb6b").delay(1900);
				$("ul#branchWeb6c").delay(2000);
				$("ul#branchWeb7").delay(2150);
				
				// towards DIGITAL
				$("ul#branchWeb8").delay(2200);
				$("ul#branchWeb9").delay(2550);
				
				// towards LOUNGE
				$("ul#branchWeb10").delay(3100);
				$("ul#branchWeb11").delay(3500);	
				$("ul#branchWeb12").delay(4000); 	
				$("ul#branchWeb3").delay(5000); 	// 1900 after #branchWeb10
				
				// towards UTILITIES
				$("ul#branchWeb13").delay(5900);
				$("ul#branchWeb14").delay(6250);	
				$("ul#branchWeb15").delay(7000);
				$("ul#branchWeb15a").delay(7500);
				$("ul#branchWeb15b").delay(7500);
				
				// the final LOGO
				$("ul#branchWeb00").delay(8750);


				// start to ANIMATE the BRANCHES ------------------------------------------//
				
				$(".tree-section ul")
					.queue(function () 
					{
					FloralObject.animateBranch($("li",this).first(),duration);
					$(this).dequeue();
					});			


				// ... and fade them out to 1/4 opacity.
				$('.tree-section ul').delay(12000).animate( {opacity:"0.25"},"slow" );
				
				// end of the ANIMATION -----------------------------------------------//	
				
			},

		animateBranch: function(theItem,duration)
			{	
				var nextItem = $(theItem).next();

				if ($(nextItem).length>0)
				{
					theItem
						.fadeTo(duration,1.0,function()
							{
								FloralObject.animateBranch(nextItem,duration);
							})
						.addClass('visible');
				} 
				else 
				{
					theItem
						.fadeTo(duration,1.0)
						.addClass('done');
				}
			}
					
	};
	
	//
	// THIS IS THE END OF THE FLORAL OBJECT ---------------------------------------------------------------------------//
	//



	// when the mSTUDIOS LINK on the homepage gets clicked
	$('a#mstudios').click(function(event) {
		
		// don't go to the href link if javascript is enabled
		event.preventDefault();
		
		// ensure to remove any possible existing div#floral-container
		$('#floral-container').fadeOut('fast').remove('#floral-container');
		
		//create a new element on the page...
		$('<div id="floral-container" />')
		
			// ...load an external file into it
			.load('floral.php #floral', function() {
				
				// and  append this new element to the body
				$(this).appendTo('#home');	
				
				// now run the FLORAL ANIMATION
				FloralObject.init();			
			
			}); // #floral.load
					
	}); // #mstudios.click

	
});	// END document.ready