jQuery.fn.outerHTML = function(s) {
    return (s)
	? this.before(s).remove()
	: jQuery("<p>").append(this.eq(0).clone()).html();
}

$(document).ready(function() {

    var i = 0;

    $(".hiddenBoxes").after('<div class="hiddenBoxes-container"></div>').appendTo(".hiddenBoxes-container");

    $(".hiddenBoxes li").each(function() {
        i++;
        var html = $(this).html(); $(this).html('');
        $(this).append('<div class="hiddenBoxes-box">' + html + '</div>');
        $(this).attr('id', 'hiddenBoxes-box_' + i);
    });

    $(".hiddenBoxes li:first-child").addClass('visible');

    $(".hiddenBoxes .hiddenBoxes-box-column:last-child").addClass('lastChild');

    $(".hiddenBoxes .hiddenBoxes-box-column").each(function() {
        var html = $(this).html(); $(this).html('');
        $(this).append('<div class="hiddenBoxes-table-column">' + html + '</div>');
    });

    $(".hiddenBoxes .hiddenBoxes-box-column").hover(function() {
        $(".hiddenBoxes .hiddenBoxes-alter").remove();
        var note = $(this).find('.alter img').attr('alt');
        if (note != undefined && note != '')
            $(this).find('.alter').after('<div class="hiddenBoxes-alter">' + note + '</div>');
    }, function() {
        $(".hiddenBoxes .hiddenBoxes-alter").remove();
    });

});