$(document).ready(function(){

// !COLOR TOGGLE
    $(".product_colors a").click(function(){
    
        var myImg = $(this).attr("rel");
        var oldImg = $("img#photo");

        switchPhoto(myImg, oldImg);
        return false;
    
    });

// !Q AND A TOGGLE

    hideAnswers();

    $(".question").click(function(){
        $(this).next(".answer").slideToggle("fast");
    });

// !TROUBLESHOOTING STEPS

    $(".trouble dl dd").hide();
    $(".trouble dl").hide();
    
    $(".trouble h4").add(".trouble dt").toggle(function(){
        $(this).addClass("on").next().slideDown();
    }, function(){
        $(this).removeClass("on").next().slideUp();
    });

// !HOTSPOTS and POPUPS

    hidePopups();
    addHotspotControls();
    
    $("#hotspot_controls a").click(function(){
    
        var myStatus = $(this).attr("class");

        if (myStatus == "on") {
            $(this).removeClass().addClass("off").fadeOut("normal",function(){
                $(this).html("Turn on hotspots").fadeIn("normal");
            });
            $("#hotspots").fadeOut("normal");
        } else {
            $(this).removeClass().addClass("on").fadeOut("normal",function(){
                $(this).html("Turn off hotspots").fadeIn("normal");
            });
            $("#hotspots").fadeIn("normal");
        }

        return false;
        
    });
        
    $("a.spot").click(function(){
        return false;
    });

    $("a.spot").hover(function(){
        
        var myPopup = $(this).attr("rel");
        
        $("#" + myPopup).show().animate({ opacity: "1", left: "30px" }, "fast");
        
    }, function(){

        var myPopup = $(this).attr("rel");
        
        $("#" + myPopup).animate({ opacity: "0", left: "18px" }, "fast",function(){
            $(this).hide();
        });

    });
    

// !ROW HIGHLIGHT

    $("table.specs tbody tr").not(".current").hover(function() {
        $(this).addClass('hover');
    }, function () {
        $(this).removeClass('hover');
    });


});

function switchPhoto(myImg, oldImg)
{
    $(oldImg).attr("src", myImg);
}

function hideAnswers()
{
    $(".answer").hide();
    $(".question").addClass("toggler");
}

function hidePopups()
{
    $(".popup").hide().css("opacity","0");
}

function addHotspotControls()
{
    $(".door_detail").append("<div id='hotspot_controls'><a href='#' class='on'>Turn off hotspots</a></div>");
}