// JavaScript Document
$(document).ready(function(){

    //Build the menus
    //$(' <div id="header"> <div id="home"><a href="index.html">Steve & Glo&#146;s travel pics</a></div> <ul class="topnav"> <li> <a href="asia.html">Asia</a> <ul class="subnav"> <li><a href="south_east_asia.html">South-east Asia</a></li> <li><a href="japan.html">Japan</a></li> <li><a href="china.html">China</a></li> <li><a href="hongkong.html">Hong Kong</a></li> <li><a href="bali_lombok.html">Bali & Lombok</a></li> </ul> </li> <li> <a href="europe.html">Europe</a> <ul class="subnav"> <li><a href="eastern_europe.html">Eastern Europe</a></li> <li><a href="italy.html">Italy</a></li> <li><a href="glastonbury.html">Glastonbury</a></li> </ul> </li> <li> <a href="north_america.html">America</a> <ul class="subnav"> <li><a href="united_states.html">United States</a></li> <li><a href="joshua_tree.html">Joshua Tree</a></li> <li><a href="central_america.html">Central America</a></li> </ul> </li> <li> <a href="australia.html">Australia</a> <ul class="subnav"> <li><a href="blue_mountains.html">Blue Mountains</a></li> <li><a href="hunter_valley.html">Hunter Valley</a></li> <li><a href="mardi_gras.html">Mardi Gras</a></li> <li><a href="perth.html">Perth</a></li> <li><a href="royal_national_park.html">Royal National Park</a></li> <li><a href="uluru.html">Uluru</a></li> </ul> </li> <li> <a href="weddings.html">Weddings</a> <ul class="subnav"> <li><a href="andrew_helen.html">Andrew & Helen</a></li> <li><a href="scott_cheryl.html">Scott & Cheryl</a></li> <li><a href="rob_louise.html">Rob & Louise</a></li> <li><a href="adam_laura.html">Adam & Laura</a></li> <li><a href="cam_lisa.html">Cam & Lisa</a></li> <li><a href="jon_susi.html">Jon & Susi</a></li> </ul> </li> <li><a href="mailto:steveandglo@gmail.com">Contact</a></li> <li><a href="http://steveandglo.tumblr.com">Blog</a></li> </ul> </div>').appendTo('.container');

 
	$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
	
	$("ul.topnav li span").click(function() { //When trigger is clicked...
		
		//Following events are applied to the subnav itself (moving subnav up and down)
		$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
 
		$(this).parent().hover(function() {
		}, function(){	
			$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
		});
 
		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() { 
			$(this).addClass("subhover"); //On hover over, add class "subhover"
		}, function(){	//On Hover Out
			$(this).removeClass("subhover"); //On hover out, remove class "subhover"
	});
 
});

