jQuery Help

[Cyber Axe]

What I am attempting to do is when the appropriate DIV is clicked it adds a class that the CSS tells it how to display that bit works fine.

What doesn't work is the fadeout that is supposed to occur after that #HeaderFade is the parent of #Header, what should happen is that the #HeaderFade's class is changed to the class that will display the appropriate background then #Header should be set to the same class afterwards so that it displays the same image after the fadeout occurs, then #Header is "invisibly" faded back in so that the next time it is clicked it will work for the next set of images.

I've also been unable to figure out how to stop the previous delayed action from the previous click to stop if you click on another one so that it doesn't result in sporadic time changing.

I know the following code is rather inefficient since I'm manually setting an event per ID instead of creating one function that can dynamically do it for each div but I've yet to figure out the best way to do stuff like that in jQuery.

<div id="HeaderFade"><div id="Header" class="HeaderOffer1"><div id="Header-Overlay"><div id="Logo"><a href="#"><img src="m/t.png" title="Stephen Clark Fitness: Perthshire and Tayside personal training." alt="Stephen Clarke Fitness Logo" /></a></div><div id="OffersContainer">
    <div id="Offers">
      <div id="OfferContent">
        <p id="Offer1Text" class="OfferText"><a href="#">Stephen Clarke fitness are now the health and fitness experts for Radio Tay and Perthshire online TV.</a></p>

        <p id="Offer2Text" class="OfferText Inactive"><a href="#">Read more about our Dundee Personal Training here.</a></p>
        <p id="Offer3Text" class="OfferText Inactive"><a href="#">The route to success begins with a KICKSTART, Full consultation, health check, nutrition review and exercise programme for just £80.</a></p>
        <div id="OffersBox">
          <div id="Offer1" class="Offer OfferActive"></div>
          <div id="Offer2" class="Offer"></div>
          <div id="Offer3" class="Offer"></div>
        </div>

      </div>
    </div>
  <script type="text/javascript">
   $('#Offer1').click(function(){
     $('.OfferText').addClass('Inactive');
     $('.Offer').removeClass('OfferActive');    	
     $(this).addClass('OfferActive');
     $('#Offer1Text').removeClass('Inactive');
     $('#HeaderFade').removeClass('HeaderOffer2');
     $('#HeaderFade').removeClass('HeaderOffer3');
     $('#HeaderFade').addClass('HeaderOffer1');

     $('#Header').fadeout(400, function() {
       $('#Header').removeClass('HeaderOffer2');
       $('#Header').removeClass('HeaderOffer3');
       $('#Header').addClass('HeaderOffer1');
       $('#Header').fadein('fast');
     });

     $('#Offer1').clearQueue();
     $('#Offer2').clearQueue();
     $('#Offer3').clearQueue();

     $(this).delay(7000).queue(function(){ 
       $('#Offer2').trigger("click"); 
       $(this).dequeue();
     });
   });
   $('#Offer2').click(function(){
     $('.OfferText').addClass('Inactive');
     $('.Offer').removeClass('OfferActive');    	
     $(this).addClass('OfferActive');
     $('#Offer2Text').removeClass('Inactive');
     $('#HeaderFade').removeClass('HeaderOffer1');
     $('#HeaderFade').removeClass('HeaderOffer3');
     $('#HeaderFade').addClass('HeaderOffer2');

     $('#Header').fadeout(400, function() {
       $('#Header').removeClass('HeaderOffer1');
       $('#Header').removeClass('HeaderOffer3');
       $('#Header').addClass('HeaderOffer2');
       $('#Header').fadein('fast');
     });

     $('#Offer1').clearQueue();
     $('#Offer2').clearQueue();
     $('#Offer3').clearQueue();

     $(this).delay(7000).queue(function(){ 
       $('#Offer3').trigger("click"); 
       $(this).dequeue();
     });
   });
   $('#Offer3').click(function(){
     $('.OfferText').addClass('Inactive');
     $('.Offer').removeClass('OfferActive');    	
     $(this).addClass('OfferActive');
     $('#Offer3Text').removeClass('Inactive');
     $('#HeaderFade').removeClass('HeaderOffer1');
     $('#HeaderFade').removeClass('HeaderOffer2');
     $('#HeaderFade').addClass('HeaderOffer3');

     $('#Header').fadeout(400, function() {
       $('#Header').removeClass('HeaderOffer1');
       $('#Header').removeClass('HeaderOffer2');
       $('#Header').addClass('HeaderOffer3');
       $('#Header').fadein('fast');
     });

     $('#Offer1').clearQueue();
     $('#Offer2').clearQueue();
     $('#Offer3').clearQueue();

     $(this).delay(7000).queue(function(){ 
       $('#Offer1').trigger("click"); 
       $(this).dequeue();
     });
   });
   $(document).ready(function() {
     $('#Offer2').delay(7000).queue(function(){ 
       $('#Offer2').trigger("click"); 
       $(this).dequeue();
     });
   });
  </script>
</div>

Thanks