Hi

I'm still new to jQuery, and even newer to javascript, and need some help please.

The page I'm working on: http://www.stereofx.net/test/itrain

This page shows 4 icons/blocks, if you hover over 1 of them and click in it, the arrow slide down and a box associated with that category appears, then clouds move.

Problem: If you click another box the previous animated arrow stays where it is, and I need it to move back or, even better, reverse it back to where it was.

It would also be nice to have a 1 or 2 second delay before the clouds start moving after the click triggers the animations.

Here is my code:

$(document).ready(function(){

$("#block1").click(function(){
var $this = $(this);
$("#intro, #info2, #info3, #info4").hide();
$("#info1" + $this.attr("class").replace(/switch/, "")).show(".active");
$("#blueArrowhead").animate({top: "265"}, 1000);
$("#blueCloud").animate({left: "220"}, 9900)
$("#block1");
});

$("#block2").click(function(){
var $this = $(this);
$("#intro, #info1, #info3, #info4").hide();
$("#info2" + $this.attr("class").replace(/switch/, "")).show(".active");
$("#yellowArrowhead").animate({top: "234"}, 1000);
$("#yellowClouds").animate({right: "170"}, 7000);
$("#block2");
});

$("#block3").click(function(){
var $this = $(this);
$("#intro, #info1, #info2, #info4").hide();
$("#info3" + $this.attr("class").replace(/switch/, "")).show(".active");
$("#redArrowhead").animate({top: "220"}, 1500);
$("#redClouds").animate({left: "30"}, 9000);
$("#block3");
});

$("#block4").click(function(){
var $this = $(this);
$("#intro, #info1, #info2, #info3").hide();
$("#info4" + $this.attr("class").replace(/switch/, "")).show(".active");
$("#block4");
$("#greenArrowhead").animate({top: "240"}, 1000);
$("#greenClouds").animate({left: "109"}, 8000);
});
});

Thanks in advance.