$(document).ready(function() {
    // Add resource center tab
    // alert($("#resourceCenterTabContainer li").length);
    if ($("#resource_center").length > 0) {
        $("<li><a href='#resource_center'><span>Resource Center</span></a></li>").appendTo("#ovenTabs ul:first");
        $("#resource_center").appendTo("#ovenTabs");
    }

    $("#ovenTabs > ul").tabs({ fx: { opacity: "toggle", duration: "fast"} });
    if ($("#productGalleryCarousel > li").length < 2) {
        // If zero or one thumbnails, hide the carousel
        $("#productGalleryCarousel").hide();
        $("#ovenMainImageFrame").addClass("withoutCarousel");
    }
    else {
        $("#productGalleryCarousel").jcarousel();
    }
    showImage($(".productGalleryThumb:first").attr("id"));

    // Wire up hotspots to show callouts on hover
    $(".hotspotButton").mouseover(function() {
        // Get the ID of the appropriate callout
        //var chunks = $(this).attr("id").split("_");
        //var id = chunks[1];
        var id = $(this).attr("id").substring(14)
        var calloutID = "#hotspotCallout_" + id;
        // Calculate where to show the callout
        var left = parseInt($(this).css("left")) - 179;
        var top = parseInt($(this).css("top")) - 79;

        // Show the callout
        $(calloutID).css("top", top).css("left", left);
        // IE sucks
        if ($.browser.msie) {
            $(calloutID).show();
        }
        else {
            $(calloutID).fadeIn("slow");
        }
    });
    // Automatically hide the callout when the mouse leaves its area
    $(".hotspotCallout").hoverIntent({
        over: function() { },
        out: function() {
            // IE sucks
            if ($.browser.msie) {
                $(this).hide();
            }
            else {
                $(this).fadeOut("fast");
            }
        },
        timeout: 300
    });
});

// Function to nicely transition image and text out and back in when a thumbnail is clicked
// Also transition hotspot buttons and callouts
// in the product gallery
function showImage(thumbId) {
    if (thumbId != null) {
        var chunks = thumbId.toString().split("_");
        var id = chunks[1];
        // IE sucks
        if ($.browser.msie) {
            $(".hotspotButton").hide();
        }
        else {
            $(".hotspotButton").fadeOut("fast");
        }
        $("#ovenSelectedImage").fadeOut("fast", function() {
            $(this).html($("#productGalleryImage_" + id).html()).fadeIn("fast");
            // Fade in the new hotspots
            var hotspotsContainerID = "#hotspots_" + id;
            if ($(hotspotsContainerID).length > 0) {
                $("#ovenMainImageFrame").append($(hotspotsContainerID + " > div"));
                // IE sucks
                if ($.browser.msie) {
                    $("#ovenMainImageFrame .hotspotButton").show();
                }
                else {
                    $("#ovenMainImageFrame .hotspotButton").fadeIn("slow");
                }
            }
        });
        $("#ovenSelectedText").fadeOut("fast", function() {
            $(this).html($("#productGalleryText_" + id).html()).fadeIn("fast");
        });
    }
}