Event.observe(window, 'load', function(e) {
    var captionMaxHeight = 28;
    var iconMaxSize = 93;
    var effectDuration = 0.8;
    var effectDelay = 0;
    var reactionTime = 100;

    $$('.homeImage').each(function(target) {
        target
        .observe('mouseover', function(e) {
            var timer = this.retrieve('timer');
            if (timer) {
                window.clearTimeout(timer);
                this.store('timer', null);
            } else {
                var effect = this.retrieve('effect');
                if (effect) {
                    var c = effect.effects.length;
                    for (var i = 0; i < c; i++) {
                        effect.effects[i].cancel();
                    }
                    effect.cancel();
                    this.store('effect', null);
                }
            }
            timer = window.setTimeout((function() {
                this.store('timer', null);
                var caption = this.down('.homeimage-caption');
                var icon = this.down('.homeimage-icon');
                if (!(caption && icon)) return;

                var captionHeight = caption.getHeight();
                var iconHeight = icon.getHeight();
                var effect = new Effect.Parallel([
                    new Effect.Appear(caption),
                    new Effect.Appear(icon),
                    new Effect.Tween(caption, 0, 1, {}, function(pos) {
                        caption.setStyle({ height: (captionHeight + (captionMaxHeight - captionHeight) * pos) + 'px' });
                    }),
                    new Effect.Tween(icon, 0, 1, {}, function(pos) {
                        icon.setStyle({ width: (iconHeight + (iconMaxSize - iconHeight) * pos) + 'px', height: (iconHeight + (iconMaxSize - iconHeight) * pos) + 'px' });
                    })
                ], {
                    duration: effectDuration,
                    delay: effectDelay,
                    afterFinish: (function() {
                        this.store('effect', null);
                    }).bind(this)
                });
                this.store('effect', effect);
            }).bind(this), reactionTime);
            this.store('timer', timer);
        })
        .observe('mouseout', function(e) {
            var timer = this.retrieve('timer');
            if (timer) {
                window.clearTimeout(timer);
                this.store('timer', null);
            } else {
                var effect = this.retrieve('effect');
                if (effect) {
                    var c = effect.effects.length;
                    for (var i = 0; i < c; i++) {
                        effect.effects[i].cancel();
                    }
                    effect.cancel();
                    this.store('effect', null);
                }
            }
            timer = window.setTimeout((function() {
                this.store('timer', null);
                var caption = this.down('.homeimage-caption');
                var icon = this.down('.homeimage-icon');
                if (!(caption && icon)) return;
                var captionHeight = caption.getHeight();
                var iconHeight = icon.getHeight();
                var effect = new Effect.Parallel([
                    new Effect.Fade(caption),
                    new Effect.Fade(icon),
                    new Effect.Tween(caption, 1, 0, {}, function(pos) {
                        caption.setStyle({ height: (captionHeight * pos) + 'px' });
                    }),
                    new Effect.Tween(icon, 1, 0, {}, function(pos) {
                        icon.setStyle({ width: (iconHeight * pos) + 'px', height: (iconHeight * pos) + 'px' });
                    })
                ], {
                    duration: effectDuration,
                    delay: effectDelay,
                    afterFinish: (function() {
                        this.store('effect', null);
                    }).bind(this)
                });
                this.store('effect', effect);
            }).bind(this), reactionTime);
            this.store('timer', timer);

        });
    });
});