//<script>
	// <Picture animations>
	MyPicture = function(id, ratio, w, h) {
		this.element = $(id);
		this.w = (w == 0) ? this.element.getSize().x : w;
		this.h = (h == 0) ? this.element.getSize().y : h;
		this.ratio = ratio;
		this.zoomW = this.w * this.ratio;
		this.zoomH = this.h * this.ratio;
		this.zoomFx = null;

		this.element.addEvents({
            mouseenter: function() {
                this.zoom('in');
            }.bind(this),
            mouseleave: function() {
                this.zoom('out');
            }.bind(this)
        });
	}

	MyPicture.prototype.initialize = function() {
		this.x = (window.getWidth() - this.w) / 2;
		this.y = (window.getHeight() - this.h) / 2;
		this.zoomX = this.x - ((this.zoomW - this.w) / 2);
		this.zoomY = this.y - ((this.zoomH - this.y) / 2);
	}

	MyPicture.prototype.display = function() {
		this.initialize();

		this.element.setStyle('left', this.x + 'px');
		this.element.setStyle('top', this.y + 'px');
		this.element.setStyle('width', this.w + 'px');
		this.element.setStyle('height', this.h + 'px');
		this.element.setStyle('visibility', 'visible');
	}

	MyPicture.prototype.center = function() {
		var oldX = this.x;
		var oldY = this.y;

		this.initialize();	// get new (x,y)

        if ( this.zoomFx ) {
			this.zoomFx.cancel();
		}

		this.zoomFx = new Fx.Morph(this.element, {duration: 1000, transition: Fx.Transitions.Elastic.easeOut}).start({
			'left': [oldX, this.x],
			'top': [oldY, this.y]
		});
	}

	MyPicture.prototype.zoom = function(what) {
		if ( this.zoomFx ) {
			this.zoomFx.cancel();
		}

		switch ( what ) {
			case 'out':
				this.zoomFx = new Fx.Morph(this.element, {duration: 2000, transition: Fx.Transitions.Elastic.easeOut}).start({
                    'left': [this.zoomX, this.x],
				    'top': [this.zoomY, this.y],
				    'width': [this.zoomW, this.w],
				    'height': [this.zoomH, this.h]
				});
			break;

			default:
				this.zoomFx = new Fx.Morph(this.element, {duration: 500, transition: Fx.Transitions.Expo.easeOut}).start({
                    'left': [this.x, this.zoomX],
					'top': [this.y, this.zoomY],
					'width': [this.w, this.zoomW],
					'height': [this.h, this.zoomH]
				});
		}
	}
	// </Picture animations>

	// <w3c animation>
	MyW3c = function() {
		this.element = $('w3c');
		this.height = this.element.getSize().y;
	}

	MyW3c.prototype.display = function() {
		this.element.setStyle('top', (window.getHeight() - this.height) + 'px');
		this.element.setStyle('visibility', 'visible');
	}

	MyW3c.prototype.move = function() {
		this.display();
	}
	// </w3c animation>

	// <contact animation>
	MyContact = function() {
		this.element = $('contact');
		this.height = this.element.getSize().y;

		(this.element.getChildren('a')).each(function(el) {
			el.setProperty('href', 'mailto:' + el.getProperty('href').replace('|','@').replace('/', ''));
		});
	}

	MyContact.prototype.display = function() {
		this.element.setStyle('top', (window.getHeight() - this.height) + 'px');
		this.element.setStyle('visibility', 'visible');
	}

	MyContact.prototype.move = function() {
		var newY = (window.getHeight() - this.height) + 'px';
		var oldY = this.element.getStyle('top');

		if ( newY > oldY ) {
			new Fx.Morph(this.element, {duration: 2000, transition: Fx.Transitions.Bounce.easeOut}).start({'top': [oldY, newY]});
		} else {
			new Fx.Morph(this.element, {duration: 1500, transition: Fx.Transitions.Elastic.easeOut}).start({'top': [oldY, newY]});
		}
	}
	// </contact animation>

	// <title animation>
	MyTitle = function() {
		this.element = $('title');
		this.elementFade = $('titleFade');
		this.elementSubtitle = $('subtitle');

        this.elementX = 10;
        this.elementY = 0;
        this.elementSubtitleOpacity = .2;

        var domain = 'gloubi';

		if ( document.domain ) {
			var startPos = document.domain.search(/\./) + 1;
			domain = document.domain.substr(startPos);
		}

        this.element.set('text', domain);
		this.elementFade.set('text', domain);
	}

	MyTitle.prototype.display = function() {
        this.elementFade.setStyle('opacity', this.elementSubtitleOpacity);
		this.elementSubtitle.setStyle('opacity', '0');
		this.elementSubtitle.setStyle('visibility', 'visible');

		new Fx.Morph(this.element, {duration: 2500, transition: Fx.Transitions.Elastic.easeOut, onComplete: function() {
            this.element.setStyle('cursor', 'move');
            this.elementFade.setStyle('visibility', 'hidden');

            new Drag.Move(this.element, {
                onStart: function(el) {
                        new Fx.Morph(this.elementSubtitle, {duration: 500, transition: Fx.Transitions.Expo.easeOut}).start({'opacity': [this.elementSubtitleOpacity, 0]});
                }.bind(this),
                onComplete: function(el) {
                    new Fx.Morph(this.element, {duration: 'long', transition: Fx.Transitions.Elastic.easeOut}).start({'left': this.elementX + 'px', 'top': this.elementY + 'px'});
                    new Fx.Morph(this.elementSubtitle, {duration: 500, transition: Fx.Transitions.Expo.easeOut}).start({'opacity': [0, this.elementSubtitleOpacity]});
                }.bind(this)
            })
        }.bind(this)}).start({'left': [-280, this.elementX]});

        new Fx.Morph(this.elementFade, {duration: 2500, transition: Fx.Transitions.Elastic.easeOut}).start({'left': [-200, this.elementX]});
        new Fx.Morph(this.elementSubtitle, {duration: 2000, transition: Fx.Transitions.Quad.easeOut}).start({'opacity': [0, this.elementSubtitleOpacity]});
	}
	// </title animation>