if (!$el.hasClass('current'))
    {

        // Animate other columns to smaller size
        $otherItems
        .removeClass('curCol')
        .stop(true)
        .animate({ 'width': $closedItemsWidth }, 500, 'linear')
        .css({"cursor":"pointer"});

        // Animate current column to larger size
        $el
        .addClass('curCol')
        .stop(true)
        .delay(50)
        .animate({ 'width' : $openItemWidth }, 500, 'linear')
        .css({'cursor' : 'default'});

    // Make sure the correct column is current
    $otherItems.removeClass('curCol');
    $el.addClass('curCol');


    }

// On click
$grid.delegate('#grid > .col', 'click', function () {
    // Settings
    var $el = $(this);
    var $allItems = $grid.children('.col');
    var $otherItems = $allItems.not($el);

    if (!$el.hasClass('current')) {
        // Animate other columns to smaller size
        $otherItems.stop(true)
        .removeClass('curCol')
        .animate({ 'width': $closedItemsWidth}, {step: function(prop, fx) {
            var cumWidth = 0;
            var item = this;
            $otherItems.each(function() {
                // haven't changed the width of this item yet, so use new width
                if (this == item) {
                    cumWidth += fx.now;
                } else {
                    cumWidth += parseFloat(this.style.width);
                }
            });
            $el.css({width: (100 - cumWidth) + '%'});
        }, duration: 500 }, 'linear')
        .css({"cursor":"pointer"});

        // Animate current column to larger size
        $el.addClass('curCol').css({'cursor' : 'default'});
    }
})​