var image_mode = 0;
var normal_dom, table_dom;

function add_panel(after)
{
    var nav_top = $(after);
    if (nav_top.length === 0) return;
    nav_top = nav_top[0];

    var tab_bar = $('<div class="image-mode-tab" role="radiogroup" aria-label="Image mode"></div>');

    var tab;

    tab = $('<input type="radio" class="image-mode-normal" name="image-mode" value="0" checked="checked"/>');
    tab.on("change", tab_handler);
    tab = $('<label>Normal</label>').prepend(tab);
    tab_bar.append(tab);

    tab = $('<input type="radio" class="image-mode-table" name="image-mode" value="1"/>');
    tab.on("change", tab_handler);
    tab = $('<label>Gallery</label>').prepend(tab);
    tab_bar.append(tab);

    tab_bar.insertAfter(nav_top);
}

function tab_handler(ev)
{
    var current_el = $(this);

    if (!current_el.prop('checked')) return;

    var new_mode = parseInt(current_el.val(), 10);
    if (new_mode === image_mode) return;
    image_mode = new_mode;

    make_normal_dom();
    make_table_dom();

    switch(new_mode) {
        case 0:
            $('#posts-table').replaceWith(normal_dom);
            break;
        case 1:
            $('#posts').replaceWith(table_dom);
            break;
    }
}

function make_normal_dom()
{
    if (typeof normal_dom === 'undefined') {
        normal_dom = $('#posts').clone(true);
    }
}

function make_table_dom()
{
    if (typeof table_dom !== 'undefined') return;

    table_dom = $('<div id="posts-table"></div>');
    $('#posts > .post > .image > a').each(
        function(){
            table_dom.append(
                $(this).clone().attr('target', '_blank')
            );
        }
    );
}

$(document).ready(function(){
    add_panel('.navigation_panel');
});