// JavaScript Document

$(document).ready(function(){
	
		// remove link background images since we're re-doing the hover interaction below 
		// (doing it this way retains the CSS default hover states for non-javascript-enabled browsers)
		// we also want to only remove the image on non-selected nav items, so this is a bit more complicated
		$(".nav").children("li").each(function() {
			var current = "nav current-" + ($(this).attr("class"));
			var parentClass = $(".nav").attr("class");
			if (parentClass != current) {
				$(this).children("a").css({backgroundImage:"none"});
			}
		});	


		// create events for each nav item
		attachNavEvents(".nav", "home");
		attachNavEvents(".nav", "branding");
		attachNavEvents(".nav", "technology");
		attachNavEvents(".nav", "signage");
		attachNavEvents(".nav", "onhold");
		attachNavEvents(".nav", "aroma");
		attachNavEvents(".nav", "company");
		attachNavEvents(".nav", "contact");
	

		function attachNavEvents(parent, myClass) {
			$(parent + " ." + myClass).mouseover(function() {
				$(this).append('<div class="nav-' + myClass + '"></div>');
				$("div.nav-" + myClass).css({display:"none"}).fadeIn(600);
			}).mouseout(function() {
				$("div.nav-" + myClass).fadeOut(600, function() {
					$(this).remove();
				});
			}).mousedown(function() {
				$("div.nav-" + myClass).attr("class", "nav-" + myClass + "-click");
			}).mouseup(function() {
				$("div.nav-" + myClass + "-click").attr("class", "nav-" + myClass);
			});
		}
		});




 $(document).ready(function() {  
// Add the class 'button' just like in CSS with a dot in front of it  
$('.button').append('<span class="hover"&gt</span&gt').each(function () {  
var $span = $('&gt span.hover', this).css('opacity', 0);  
$(this).hover(function () {  
$span.stop().fadeTo(500, 1); //Change the number 500 to change the speed of the Fade In  
}, function () {  
 $span.stop().fadeTo(500, 0); //Change the number 500 to change the speed of the Fade Out  
});  
});  
});