$(document).ready(function() 
{
  $(document).pngFix();
  
  var ie = $.browser.msie;
  
  $("#chooseDeck p a").click(function() 
  { 
    $("#loadingOverlay").fadeIn();
    
    $("#chooseDeck p a").removeClass("current"); 
    
    $(this).addClass("current"); 
    
    $("#deckOverlay").fadeOut();    
    $("#railOverlay").fadeOut();
    $("#postOverlay").fadeOut();     
    $("#capOverlay").fadeOut();
    $("#balusterOverlay").fadeOut();
    $("#deckAccentOverlay").fadeOut();
    
    var currrentImage = "images/" + $(this).parent().attr("id") + ".jpg";
    
    if(currrentImage == "images/deck1.jpg" || currrentImage == "images/deck2.jpg")
    {
      $("#deckAccent").hide();
      $("#rail").show();
      $("#cap").show();
      $("#baluster").show();
    }
    else if(currrentImage == "images/deck4.jpg")
    {
      $("#rail").hide();
      $("#cap").hide();
      $("#baluster").hide();
      $("#deckAccent").show();
    }
    else if(currrentImage == "images/deck5.jpg")
    {
      $("#rail").hide();
      $("#baluster").hide();
      $("#deckAccent").show();
      $("#cap").show();
    }
    else if(currrentImage == "images/deck6.jpg")
    {
      $("#baluster").show();
      $("#cap").show();
      $("#rail").show();      
      $("#deckAccent").hide();      
    }
    
    $("#components p a").removeClass("current");
    
    $("#components #deck a").addClass("current");
    
    if(ie)
    {
      currrentImage += "?id=" + Math.random()*99999;
    }
    
    var imageObj = new Image();
    
    $(imageObj).attr("src", currrentImage).load(function(){ $("#image").replaceWith("<div id=\"image\"><img src=\"" + currrentImage + "\" width=\"700\" height=\"400\" alt=\"\" /></div>"); $("#loadingOverlay").fadeOut(); $(document).pngFix(); });
    
    return false; 
  });
  
  $("#components p a").click(function()
  { 
    $("#components p a").removeClass("current"); $(this).addClass("current"); return false;
  });
  
  $("#colors p a").click(function()
  {
    $("#colors p a").removeClass("current"); $(this).addClass("current"); return false;
  });
  
  $("#colors p a").click(function() 
  { 
    $("#loadingOverlay").fadeIn();
    
    $("#" + $("#components p a.current").parent().attr("id") + "Overlay").hide(); 
    
    $(document).pngFix();
    
    var currentOverlay = 'images/' + $("#chooseDeck p a.current").parent().attr("id") + '_' + $("#components p a.current").parent().attr("id") + '_' +     $("#colors p a.current").parent().attr("id") + '.png';
    
    if(ie)
    {
      currentOverlay += "?id=" + Math.random()*99999;
    }
    
    var imageObj = new Image();
    
    $(imageObj).attr("src", currentOverlay).load(function(){ $("#" + $("#components p a.current").parent().attr("id") + "Overlay").css({'background-image': 'url(' + currentOverlay + ')'}).fadeIn("slow"); $("#loadingOverlay").fadeOut(); $(document).pngFix(); }); 
    
    return false; 
  });
  
  $("#colors p#seasonedMahogany a").hoverIntent(function()
  {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "116"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "126"}, "fast");
  });
  
  $("#colors p#rusticCedar a").hoverIntent(function()
  {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "130"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "140"}, "fast");
  });
  
  $("#colors p#capeCodGray a").hoverIntent(function()
  {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "178"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "188"}, "fast");
  });
  
  $("#colors p#earthtone a").hoverIntent(function()
  {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "192"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "202"}, "fast");
  });
  
  $("#colors p#terracotta a").hoverIntent(function()
  {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "254"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "264"}, "fast");
  });
  
  $("#colors p#desertSand a").hoverIntent(function()
  {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "254"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "264"}, "fast");
  });
  
  $("#colors p#juniper a").hoverIntent(function()
  {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "316"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "326"}, "fast");
  });
  
  $("#colors p#tigerwood a").hoverIntent(function()
  {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "316"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "326"}, "fast");
  });
  
  $("#colors p#walnut a").hoverIntent(function()
  {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "378"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "388"}, "fast");
  });
  
});