$(document).ready(function() {
	
	// take target from url or set to HPC
	target = window.location.hash ? window.location.hash : "#hpc";
	target_class = target.replace("#", ".")

	// hide inactive areas
	$("#home div.area").not(target).hide();
	
	// mark position in the menu
	$("ul.dropdown " + target_class).addClass("active");
	
	$("ul.dropdown a").click(function() { 
		
		$(".solutions_menu ." + $(this).attr("class") ).trigger("click");
		
		// mark position in the menu
		$("ul.dropdown a").removeClass("active");
		$("ul.dropdown ." + $(this).attr("class")).addClass("active");
		
		$(target_class).find("img").each(function() {
			this.src = $(this).attr("src").replace(/-off\.gif$/i,"-on.gif");
		});

		$(".solutions_menu " + target_class).each(function() {
			sel = this;
		});		
				
	});
			
	function runAnimation(target) {
		$(target + " .product img").stop().clearQueue().hide();
		$(target + " .product img").css("opacity", "1");
		$(target + " .txt-1").stop().clearQueue().hide();
		$(target + " .txt-1").css("left", "0").css("opacity", "1");
		$(target + " .txt-2").stop().clearQueue().hide();
		$(target + " .txt-2").css("left", "0").css("opacity", "1");
		$(target + " .txt-3").stop().clearQueue().hide();
		$(target + " .txt-3").css("left", "0").css("opacity", "1");
		$(target + " .learn-more").stop().clearQueue().hide();	
		
		$(target).show();
		$(target + " .product img").fadeIn(500);
	  $(target + " .txt-1").css("left", "150px").css("opacity", "0");
		$(target + " .txt-2").css("left", "150px").css("opacity", "0");
		$(target + " .txt-3").css("left", "150px").css("opacity", "0");
		
		$(target + " .txt-1").show().animate({ "left": "-=150px", "opacity": "1" }, 300, function() {
			$(target + " .txt-2").show().animate({ "left": "-=150px", "opacity": "1" }, 300, function() {
				$(target + " .txt-3").show().animate({ "left": "-=150px", "opacity": "1" }, 300, function() {
					$(target + " .learn-more").fadeIn(1000);
				});				
			});
	  });		
	}

	// rollover state
	var sel;
	
	$(target_class).find("img").each(function() {
		this.src = $(this).attr("src").replace(/-off\.gif$/i,"-on.gif");
	});

	$(".solutions_menu " + target_class).each(function() {
		sel = this;
	});

	$(".solutions_menu a").mouseover(function() {
		if ( $(this).data("clicked") ) {
			return;
		}
		$(this).children("img").each(function() {
			this.src = $(this).attr("src").replace(/-off\.gif$/i,"-over.gif");
		});

	}).mouseout(function() {
		if ( $(this).data("clicked") ) {
			return;
		}
		$(this).children("img").each(function() {
			this.src = $(this).attr("src").replace(/-over\.gif$/i,"-off.gif");
		});
	}).click(function() {   
		if (sel != this) {
			$(".solutions_menu").find("img").each(function() {
				this.src = this.src.replace(/-on\.gif$/i, "-off.gif");
			});
		}
		$(this).children("img").each(function() {
			this.src = $(this).attr("src").replace(/-over\.gif$/i, "-press.gif");
			ref = this;
			setTimeout(function(){
				ref.src = $(ref).attr("src").replace(/-press\.gif$/i,"-on.gif");
				}, 150);
			})

			sel = this;

			// switch area
			$(target).hide();
			
			target = $(this).attr("href");
			target_class = target.replace("#", ".")
			
			$(target).waitForImages(function() { 
				runAnimation(target);
			});

		});

});