$(document).ready(function() {

    var iAccordionHeight = $(".Accordion").eq(0).height();
    var iAccordionItemHeight = $(".Shelve").eq(0).height(); // Assume all headers are same height
    var iAccordionItemCount = $(".AccordionItem").length;
        
    $(".Shelve").mouseover(function() {
        var oThis = $(this).parent();
    
        $(".Shelve").addClass("ShelveOff").removeClass("ShelveOn");
        oThis.children(".Shelve").removeClass("ShelveOff").addClass("ShelveOn");
        
        var iItemTopCurrent = parseInt(oThis.css("top").replace(/px/,''));
        var iItemID = parseInt(oThis.attr("ItemID"));
        var iItemTop = parseInt(oThis.attr("ItemTop"));
        var iItemBottom = parseInt(oThis.attr("ItemBottom"));
        
        // Is accordion item at the top of the accordion?
        if(iItemTopCurrent == iItemTop)
        {
            // Move this and all preceeding accordion items down
            for(i = (iItemID); i < iAccordionItemCount; i++)
            {
                var oAccordionItem = $(".AccordionItem").eq(i);
                oAccordionItem.animate({ top: oAccordionItem.attr("ItemBottom") + "px" }, 500);
            }
        }
        else
        {
            // Move this and all preceeding accordion items up
            for(i = 0; i < iItemID; i++)
            {
                var oAccordionItem = $(".AccordionItem").eq(i);
                oAccordionItem.animate({ top: oAccordionItem.attr("ItemTop") + "px" }, 500);
            }
        }
    });
    
    $(".AccordionItem").each(function(i) {
        var iItemID = (i + 1);
        
        // Calculate top and bottom positions for this accordion item
        var iItemTop = i * iAccordionItemHeight;
        var iItemBottom = iAccordionHeight - (((iAccordionItemCount + 1) - iItemID) * iAccordionItemHeight);
    
        // Attribute this accordion item
        $(this).attr("ItemID", iItemID);
        $(this).attr("ItemTop", iItemTop);
        $(this).attr("ItemBottom", iItemBottom);
                        
        // Set the start position and layer ordinal
        $(this).css({ zindex: (100 + iItemID), top: ((i == 0) ? iItemTop : iItemBottom) });
    });
    
});