var clouds = [];

var width;
var height;
var page;

var running = false;

var activeContent;

window.addEvent('domready', function () {
    width = document.documentElement.clientWidth;
    height = document.documentElement.clientHeight;

    $$('body')[0].setStyle('height', height);

    page = $('page');

    var num = (width + height) / 300;

    for (var type = 0; type < 5; type++) {
        for (var i = 0; i < num; i++) {
            clouds[clouds.length] = new Cloud(type);
        }
    }

    setInterval('tic()', 10);

    $$('.nav a').each(function (link) {
        var content = $(link.hash.substring(1));
        content.setStyle('left', (width / 2) - (content.getSize().x / 2));
        content.setStyle('bottom', -1 * content.getSize().y);

        link.addEvent('click', linkClicked);
    });
});

function linkClicked(e)
{
    new Event(e).stop();

    if (running == false) {
        running = true;
        
        var content = $(this.hash.substring(1));
        
        if ($defined(activeContent)) {
            hideContent(content);
        }
        else {
            showContent(content);
        }
    }
}

function tic() {
    clouds.each(function (c) { c.shift(); });
}

function done() {
    running = false;
}

function showContent(content) {
    activeContent = content;
    activeContent.setStyle('bottom', -1 * activeContent.getSize().y);
    var tween = new Fx.Tween(activeContent, { unit: 'px', transition: 'elastic:out', fps: 200, duration: 1000 });
    tween.addEvent('complete', done);
    tween.start('bottom', (height - activeContent.getSize().y) / 2);
}

function hideContent(content) {
    var temp = activeContent;
    activeContent = null;

    var tween = new Fx.Tween(temp, { unit: 'px', transition: 'sine:in', fps: 200, duration: 500 });
    tween.addEvent('complete', function () { showContent(content); });
    tween.start('bottom', height + temp.getSize().y);
}

var Cloud = new Class({
    initialize: function (type) {
        this._type = type;

        switch (this._type) {
            case 0:
                this._img = 'img/cloud0.png';
                this._dx = 1.25;
                break;
            case 1:
                this._img = 'img/cloud1.png';
                this._dx = 1;
                break;
            case 2:
                this._img = 'img/cloud2.png';
                this._dx = 0.75;
                break;
            case 3:
                this._img = 'img/cloud3.png';
                this._dx = 0.5
                break;
            case 4:
                this._img = 'img/cloud4.png';
                this._dx = 0.25
                break;
        }


        this._elem = new Element('img', {
            'src': this._img,
            'class': 'cloud',
            'styles': {
                'z-index': 10 - this._type,
                'top': Math.floor(Math.random() * height)
            }
        });
        
        this._elem.inject(page, 'top');

        var w = this._elem.getSize().x;

        this._x = Math.floor(Math.random() * (width + w)) - w;

        this.shift();
    },

    shift: function () {
        this._x = this._x - this._dx;

        if (this._x < -1 * this._elem.width) {
            this._x = width + this._elem.width;

            this._elem.setStyle('top', Math.floor(Math.random() * (height - this._elem.height)));
        }

        this._elem.setStyle('left', Math.floor(this._x));
    }
});