$(document).ready(function() {
    
    $(".end").hide();
    $("#merch1 .start").hide();
    $("#merch1 .end").show();
    
    largeWidth = "508px";
    smallWidth = "220px";
    fadeSpeed = 150;

    $("#merch1").hover(function() {
        animateMerch(1, 2, 3);
    });
    
    $("#merch2").hover(function() {
        animateMerch(2, 1, 3); 
    });
    
    $("#merch3").hover(function() {
        animateMerch(3, 1, 2);
    });
    
    function animateMerch(show, hide1, hide2) {
        $("#merch" + hide1).animate({width:smallWidth}, fadeSpeed);
        $("#merch" + hide2).animate({width:smallWidth}, fadeSpeed);
        $("#merch" + hide1 + " .merch-text").fadeOut("slow");
        $("#merch" + hide2 + " .merch-text").fadeOut("slow");

        $("#merch" + show).animate({ width: largeWidth }, fadeSpeed);
        $("#merch" + show + " .merch-text").fadeIn(fadeSpeed);
        
        //Class stuff so styles/margin sticks
        $("#merch" + show).addClass("large");
        $("#merch" + hide1).removeClass("large");
        $("#merch" + hide2).removeClass("large");
        
        $("#merch" + show + " .end").fadeIn(fadeSpeed);
        $("#merch" + show + " .start").fadeOut(fadeSpeed);
        $("#merch" + hide1 + " .start").fadeIn(fadeSpeed);
        $("#merch" + hide1 + " .end").fadeOut(fadeSpeed);
        $("#merch" + hide2 + " .start").fadeIn(fadeSpeed);
        $("#merch" + hide2 + " .end").fadeOut(fadeSpeed);
    }
    
});