function shiftRight(id, panelName)
{
    var onDiv = $("#"+id).children(".products.on");
    var nextDiv = onDiv.next();
    
    onDiv.animate({left: '-598px'},1000,function(){
        $(this).removeClass("on").addClass("left");
    });
    nextDiv.animate({left: '0px'},1000,function(){
       $(this).removeClass("right").addClass("on");
    });

    //Get length of next/previous divs
    var hasNext = nextDiv.next().length;
    var hasPrev = nextDiv.prev().length;
    
    //Show/hide arrows
    showArrows(hasPrev, hasNext, panelName);
}

function shiftLeft(id, panelName)
{
    var onDiv = $("#"+id).children(".products.on");
    var prevDiv = onDiv.prev();
    
    onDiv.animate({left: '598px'},1000,function(){
        $(this).removeClass("on").addClass("right");
    });
    prevDiv.animate({left: '0px'},1000,function(){
       $(this).removeClass("left").addClass("on");
    });

    //Get length of next/previous divs
    
    //For shiftLeft only, check that the previous div is -not- the right arrow div
    var hasPrev = prevDiv.prev().length;
    if(prevDiv.prev().attr("id").indexOf("RightArrow") != -1)
    {
        hasPrev = 0;
    }
    
    //Next is normal
    var hasNext = prevDiv.next().length;
    
    //Show/hide arrows
    showArrows(hasPrev, hasNext, panelName);
}

function showArrows(prevLength, nextLength, panelName)
{
    //Panel name is used to determine which panel we are on to turn on/off the appropriate arrow
    if(prevLength > 0){
        $("#"+panelName+"LeftArrow").removeClass("off");
    }
    else{
        $("#"+panelName+"LeftArrow").addClass("off");
    }
    
    if(nextLength > 0){
        $("#"+panelName+"RightArrow").removeClass("off");
    }
    else{
        $("#"+panelName+"RightArrow").addClass("off");
    }
}

function showCallout(callout, showCallout)
{
    var thisCallout = $("#"+callout);
    
    if(showCallout)
    {
        thisCallout.attr("style", "display:block");
    }
    else{
        thisCallout.attr("style", "display:none");
    }
}