window.addEvent('domready', function() {
    // scroll presets
    var scroll = new Fx.Scroll(window, {duration: 100});
    ;
    // canvas + show hop
    var pixels = $$('div.pixel');
    document.addEvents({
        'mousemove': function(e) {
            pixels.setStyle('background-position', e.client.x + 'px' + ' ' + e.client.y + 'px');
        },
        'scroll': function(e) {
            if (this.getScroll().y > 250) {
                $('hop').removeClass('hide');
            } else {
                $('hop').addClass('hide');
            }
        }
    });
    // accordion
    var toggles = $$('div.name');
    var drawers = $$('div.bio');
    toggles.each(function(toggle, i) {
        var stop = 0;
        toggle.addEvents({
            'mouseenter': function(e) {
                stop = toggle.getFirst('span').getSize().x - 350;
                toggle.setStyle('cursor', 'pointer');
                if (drawers[i].hasClass('hide')) {
                    toggle.set('tween', {duration: 200});
                    toggle.tween('background-position', [-400, stop]);
                }
            },
            'mouseleave': function(e) {
                if (drawers[i].hasClass('hide')) {
                    toggle.set('tween', {duration: 100});
                    toggle.tween('background-position', [stop, -400]);
                }
            },
            'click': function(e) {
                drawers.each(function(drawer, j) {
                    if(i == j) {
                        drawer.removeClass('hide');
                        drawer.addClass('block');
                    } else {
                        //soundManager.stopAll();
                        toggles[j].setStyle('background-position', -400);
                        drawer.removeClass('block');
                        drawer.addClass('hide');
                    }
                });
                scroll.start(0, this.getPosition().y - 60);
            }            
        });
    });
    // logo
    $('logo').addEvents({
        'mouseenter': function(e) {
            this.setStyle('cursor', 'pointer');
        },
        'mouseleave': function(e) {
            this.setStyle('cursor', 'default');
        },
        'click': function(e) {
            location.reload();
        }
    });
    // hop top
    $('hop').addEvent('click', function(e) {
        e.stop();
        scroll.toTop();
    });
    // when
    var when = $('when');
    var funkd = new Fx.Morph(when, {duration: 1000, 'transition': Fx.Transitions.Elastic.easeOut});
    new Drag.Move(when, {
        onComplete: function(){
            funkd.start({'top': 10, 'left': 925});
        }
    });
    // map
    function loadMap(x, y, z) {
        if (GBrowserIsCompatible()) {
            var mapID = $('map');
            var map = new GMap2(mapID);
            map.setCenter(new GLatLng(x, y), z);
            var placeMark = new GMarker(new GLatLng(x, y));
            map.addOverlay(placeMark);
        }
    }
    var mapHeight = window.getHeight() / 2;
    var mapWidth = window.getWidth();
    // size, position, show + hide map
    $('overlay').addEvent('click', function(e) {
        e.stop();
        $('map').setStyle('display', 'none')
        $('overlay').setStyle('display', 'none');
    });
    $('mapr').addEvent('click', function(e) {
        e.stop();
        $('overlay').setStyles({
            'display': 'block',
            'width': window.getWidth(),
            'height': window.getScrollSize().y,
            'opacity': 0.8
        });
        $('map').setStyles({
            'top': window.getScroll().y + 125,
            'display': 'block',
            'height': mapHeight,
            'width': mapWidth
        });
        loadMap(37.978152, 23.731842, 15);
    });
});