/*
 * /a/main.js
 */
Event.observe(document, 'loaded:lib', function()
{
    // add IE hack
    if (Prototype.Browser.IE)
    {
        $('main').down('.content').insert({bottom: new Element('div', {'class': 'ih_spacer'})});
    }

    // add custom scrollbars
    $$('.page .content').each(function(el)
    {
        var id = el.up('.page').id;

        var container = new Element('div',
        {
            'id'    : 'container_' + id,
            'class' : 'scroll container'
        }).insert(new Element('div',
            {
                'id'    : 'track_' + id,
                'class' : 'track'
            }).insert(new Element('div',
                {
                    'id'    : 'handle_' + id,
                    'class' : 'handle'
                })
            )
        );

        // replace id
        el.id = 'content_' + id;

        // set container
        // TODO: Assume the scollable element the only (or last) child of it's parent
        el.up().insert(container);

        // move content
        container.appendChild(el);

        // {{{ add some style to content
        el.setStyle(
        {
            'overflow': 'hidden'
        });
        // }}}

        // add scrollbar
        var scrollbar = new Control.ScrollBar('content_' + id, 'track_' + id);

        el.up('.page').store('scrollbar', scrollbar);
    });

    // update canvas size
    canvasUpdate();

    // show loader
    $('body').insert(new Element('div', {id: 'loader'}));

    // hide it when document is fully loaded
    Event.observe(window, 'load', function()
    {
        $('loader').fade();
    });

    // convert css hidden elements into js hidden ones
    $$('.hidden').each(function(el)
    {
        el.hide();
        el.removeClassName('hidden');
    });

    Event.observe(window, 'resize', function()
    {
        canvasUpdate();
    });

    // do mouseovers
    $('body').observe('mouseover', function(e)
    {
        var action = Event.findElement(e, '.action, .mover');

        if (action && action != document)
        {
            // add some fancy
            $$(action.tagName+'.'+$w(action.className).toArray().join('.')).invoke('addClassName', 'hover');

            action.addClassName('hover');

            action.observe('mouseout', backObserve.bind(action, backObserve));
        }
    });

    // do clicks
    $('body').observe('click', function(e)
    {
        var page;

        var action = Event.findElement(e, '.action');

        if (action && action != document)
        {
            // check if we have page action
            page = $w(action.className).find(function(cl) { return (cl.substr(0, 5) == 'page_'); });

            if (page)
            {
                changePage(page.substr(5));
            }
        }
    });

    // add some juice to the splash page
    $('splash').observe('mouseover', function(e)
    {
        var el = Event.findElement(e, '#splash');

        // show mover
        if (el.up('#canvas').hasClassName('initial') && el.down('.mover'))
        {
//            el.up('#canvas').removeClassName('initial');

            el.down('.mover').appear({transition: Effect.Transitions.pulse, duration: 4, delay: 0.5});
        }
    });

    $('splash').observe('mouseup', function(e)
    {
        if (Event.findElement(e, '.being_dragged'))
        {
            return false;
        }

        var next = Event.findElement(e, '.mover.next');
        if (next && next != document)
        {
            changePage('main');
            $('menu').appear();
        }
    });

    // main page "click back"
    $('main').observe('click', function(e)
    {
        var next = Event.findElement(e, '.header h1');
        if (next && next != document)
        {
            changePage('splash');
            $('menu').fade();
        }
    });

    // add some juice to the maps
    $$('.page').each(function(el)
    {
        el.observe('mouseover', function(e)
        {
            var el = Event.findElement(e, '.map.container');
            if (el)
            {
                el.addClassName('hover');
                el.observe('mouseout', backObserve.bind(el, backObserve));
            }
        });
    });

    // {{{ iStuff effect
    var canvas = new Draggable('canvas',
    {
        revert: false,
        constraint: 'vertical',
        zindex: 200,
        starteffect: function(){},
        endeffect: function(){},
        onStart: function(effect, event)
        {
            // set original position
            // TODO: Make it as part of Draggable itself
            effect.posOriginal = $('canvas').cumulativeOffset();

            var beingMoved = $('canvas').retrieve('being_moved', false);

            if (beingMoved)
            {
                beingMoved.cancel();
            }

            // add marker
            $('canvas').addClassName('being_dragged');
        },
        onEnd: function (effect, event)
        {
            // reset original
            // TODO: Make it as part of Draggable itself
            effect.posOriginal = [0,0];

            var posX, posY, page;

            var delta = Element.positionedOffset($('canvas'));

            var viewSize = document.viewport.getDimensions();

            var matrix = $('canvas').retrieve('matrix', []); // we should have something at this point, I believe :)

            // get current page, by default it's splash page
            var current = $('canvas').retrieve('current', 'splash');

            // get page position
            posX = Math.round(delta[0]*-1 / viewSize.width);
            posY = Math.round(delta[1]*-1 / viewSize.height);

            // don't allow go subzero
            posX = (posX > 0) ? posX : 0;
            posY = (posY > 0) ? posY : 0;

            // check overflow X
            matrix = (matrix[posX]) ? matrix[posX] : matrix[matrix.size()-1];

            // check overflow Y
            page = (matrix[posY]) ? matrix[posY] : matrix[matrix.size()-1];

            // do something only if we chnaged the page
            if (page != current)
            {
                if (current == 'splash') // if we came from 'splash' show menu
                {
                    $('menu').appear();
                }
                else if (page == 'splash') // if we arrived to 'splash' hide menu
                {
                    $('menu').fade();
                }
            }

            // remove marker
            $('canvas').removeClassName('being_dragged');

            // change the page
            changePage(page);
        }
    });

    // store canvas
    $('canvas').store('canvas', canvas);

    // }}} iStuff effect

    // done with library load
    // let others to do their job
    Event.fire(document, 'loaded:main');
});