Ox.getJSON('json/pandora.json', function(pandora) {
    $(function() {

        var $body = $('body'),
            $icon = $('#icon')
                .bind({
                    click: function() {
                        $('#menu > div').removeClass('selected');
                        $page.empty()
                            .append($('<div>').html('pan.do/ra'))
                            .append(
                                $('<img>').attr({
                                    src: 'http://0x2620.org/jpg/jpg/0xDB/Screenshots/IMG_0009.jpg'
                                })
                            )
                    }
                }),
            $menu = $('<div>').attr({id: 'menu'}).appendTo($body),
            $page = $('<div>').attr({id: 'page'}).appendTo($body),
            $head = $('<div>').appendTo($page);
            $text = $('<div>').appendTo($page);
            $prevButton = $('<span>')
                .addClass('button')
                .attr({id: 'prevButton', title: 'previous'})
                .html('&lt;='),
            $nextButton = $('<span>')
                .addClass('button')
                .attr({id: 'nextButton', title: 'next'})
                .html('=&gt;'),
            tourIndex = 0;

        Ox.forEach(pandora.pages, function(data, page) {
            var $element, text;
            if (page == '') {
                $element = $('<img>')
                    .attr({id: 'icon', src: 'png/icon256.png'})
                    .appendTo($body);
            } else {
                $element = $('<div>')
                    .addClass(page)
                    .html(page)
                    .appendTo($menu);
            }
            $element.bind({
                click: function() {
                    window.location.hash = page;
                }
            });            
        });

        window.onhashchange = loadPage;

        loadPage();

        function loadPage() {
            var page = window.location.hash.substr(1),
                text;
            if (pandora.pages[page]) {
                $('#menu > div').removeClass('selected');
                page != '' && $('#menu > .' + page).addClass('selected');
                if (page == 'news') {
                    text = pandora.pages.news.map(function(item) {
                        return '<div class="title">' + item[0] + '</div>'
                            + '<div class="date">' + Ox.formatDate(item[1], '%A, %B %e, %Y') + '</div>'
                            + '<div class="text">' + item[2] + '</div>';
                    }).join('');
                } else if (page == 'faq') {
                    text = pandora.pages.faq.map(function(item) {
                        return '<div class="title"><b>' + item[0] + '</b></div>'
                            + '<div class="text">' + item[1] + '</div>';
                    }).join('');
                } else if (page == 'tour') {
                    text = $('<div>')
                        .append(
                            $('<img>').attr({src: pandora.pages.tour[tourIndex][0]})
                        )
                        .append($('<br>'))
                        .append($('<br>'))
                        .append(
                            $('<p>').html(pandora.pages.tour[tourIndex][1])
                        );
                } else {
                    text = pandora.pages[page];
                }
                $head.empty().append(
                    page == '' ? 'pan.do/ra &mdash; open media archive'
                    : page == 'tour' ? $('<span>')
                        .addClass('button disabled')
                        .attr({title: 'first'})
                        .html('tour')
                        .click(function() {
                            loadTour(0);
                        })
                    : page
                );
                $text.addClass(page).empty().append(text);
                if (page == 'tour') {
                    $prevButton
                        .click(function() {
                            loadTour(-1);
                        })
                        .appendTo($head);
                    $nextButton
                        .click(function() {
                            loadTour(1);
                        })
                        .appendTo($head);
                    if (tourIndex == 0) {
                        $prevButton.addClass('disabled');
                    } else if (tourIndex == pandora.pages.tour.length - 1) {
                        $nextButton.addClass('disabled');
                    }                    
                }
            }            
        }

        function loadTour(delta) {
            tourIndex = delta == 0 ? 0
                : Ox.mod(tourIndex + delta, pandora.pages.tour.length);
            $('.button').removeClass('disabled');
            if (tourIndex == 0) {
                $prevButton.addClass('disabled');
            } else if (tourIndex == pandora.pages.tour.length - 1) {
                $nextButton.addClass('disabled');
            }
            var $img = $text.find('img'),
                $p = $text.find('p'),
                src = pandora.pages.tour[tourIndex][0]
            $('<img>')
                .load(function() {
                    $img.css({opacity: 1}).attr({src: src});
                    $p.css({opacity: 1}).html(pandora.pages.tour[tourIndex][1]);
                })
                .attr({
                    src: src
                });
            $img.css({opacity: 0.25});
            $p.css({opacity: 0.25});
            
        }

    });
});