$(function() {

    // Set showcase height
    var $showcaseElements = $('#showcase div.image li');
    $showcaseElements.eq(0).addClass('active');
    if ($showcaseElements.length > 1) {
        var $active = $showcaseElements.filter('.active');
        $showcaseElements.not($active).fadeOut(0);
        setInterval(function() {
            $active = $showcaseElements.filter('.active');
            $active.removeClass('active').next().addClass('active').fadeIn(500, function() {
               $active.fadeOut(0).appendTo($showcaseElements.parent());
            });
        }, 6350);
    }


    // Add close button to showcase articles
    $('#boxes li .header').append('<p class="close"><a href="#">X</a></p>');


    $('#boxes li .header').click(function() {
        var $li = $(this).closest('li');

        var margin = [0, -80, -158];

        // Open
        if (!$li.hasClass('active')) {
            $li.closest('ul').animate({ marginLeft: margin[$li.index()] + 'px' }, 500);
            $li.siblings().animate({ width: '314px', top: 0 }, 500, function(){
                $(this).removeClass('active');
            });

            $li.animate({ top: '-300px', width: '470px' }, 500, function(){
                $li.addClass('active');
            });
        // Close
        } else {
            $li.closest('ul').animate({ marginLeft: 0 }, 500);
            $li.animate({ top: '0', width: '314px' }, 500, function(){
                $li.removeClass('active');
            });
        }

        return false;
    });
});