pandotdoslashra/js/pandora.js

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

        var $body = $('body'),
            $icon = $('#icon'),
            $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>')
                    .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(
                            $('<div>')
                                .addClass('tour')
                                .append(
                                    $('<img>')
                                        .addClass('tour')
                                        .attr({
                                            src: pandora.pages.tour[tourIndex][0]
                                        })
                                )
                                .bind({
                                    click: function(e) {
                                        var $this = $(this), timeout;
                                        if (!$this.hasClass('zoom')) {
                                            $($this.children()[0]).stop().animate({
                                                width: '1280px',
                                                height: '800px',
                                                marginLeft: Math.round(
                                                    (384 - window.scrollX - e.clientX) * 11/9
                                                ) + 'px',
                                                marginTop: Math.round(
                                                    (113 - window.scrollY - e.clientY) * 11/9
                                                ) + 'px'
                                            }, 250, function() {
                                                var event;
                                                $this.addClass('zoom').bind({
                                                    mouseenter: function(e) {
                                                        timeout && clearTimeout(timeout);
                                                        $this.bind({
                                                            mousemove: function(e) {
                                                                event = e;
                                                            }
                                                        })
                                                        $($this.children()[0]).animate({
                                                            width: '1280px',
                                                            height: '800px',
                                                            marginLeft: Math.round(
                                                                (384 - window.scrollX - e.clientX) * 11/9
                                                            ) + 'px',
                                                            marginTop: Math.round(
                                                                (113 - window.scrollY - e.clientY) * 11/9
                                                            ) + 'px'
                                                        }, 250, function() {
                                                            $($this.children()[0]).animate({
                                                                marginLeft: Math.round(
                                                                    (384 - window.scrollX - (event || e).clientX) * 11/9
                                                                ) + 'px',
                                                                marginTop: Math.round(
                                                                    (113 - window.scrollY - (event || e).clientY) * 11/9
                                                                ) + 'px'
                                                            }, 250, function() {
                                                                $this.unbind('mousemove').bind({
                                                                    mousemove: function(e) {
                                                                        $($this.children()[0]).stop().css({
                                                                            width: '1280px',
                                                                            height: '800px',
                                                                            marginLeft: Math.round(
                                                                                (384 - window.scrollX - e.clientX) * 11/9
                                                                            ) + 'px',
                                                                            marginTop: Math.round(
                                                                                (113 - window.scrollY - e.clientY) * 11/9
                                                                            ) + 'px'
                                                                        });
                                                                    }
                                                                });
                                                            });
                                                        });
                                                    },
                                                    mousemove: function(e) {
                                                        $($this.children()[0]).stop().css({
                                                            width: '1280px',
                                                            height: '800px',
                                                            marginLeft: Math.round(
                                                                (384 - window.scrollX - e.clientX) * 11/9
                                                            ) + 'px',
                                                            marginTop: Math.round(
                                                                (113 - window.scrollY - e.clientY) * 11/9
                                                            ) + 'px'
                                                        });
                                                    },
                                                    mouseleave: function() {
                                                        timeout = setTimeout(function() {
                                                            $($this.children()[0]).stop().animate({
                                                                width: '576px',
                                                                height: '360px',
                                                                marginLeft: 0,
                                                                marginTop: 0
                                                            }, 250, function() {
                                                                $this.unbind('mousemove');
                                                            });
                                                            timeout = 0;
                                                        }, 500);
                                                    }
                                                });
                                            });
                                        } else {
                                            $this.unbind('mouseenter').unbind('mousemove').unbind('mouseleave');
                                            $($this.children()[0]).stop().animate({
                                                width: '576px',
                                                height: '360px',
                                                marginLeft: 0,
                                                marginTop: 0
                                            }, 250, function() {
                                                $this.removeClass('zoom');
                                            });
                                        }
                                    }
                                })
                        )
                        .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.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});
        }

        function zoomIn($element, event) {
            
        }

        function zoomOut($element, e) {
            
        }

    });
});