var FXHelper = new Class(
    {
        getFXStyles : function(FX)
        {
            return $H(FX).getKeys();
        }
    });


var LetterFX = new Class(
{
    Implements: [Options,Events,FXHelper],

    options :
    {
        hoverFX : {
            'color' : '#e7a34e'
        },
        clickFX : {
            'color' : '#fbef87'
        },
        hoverOptions : {
            duration: 2000,
            transition: 'expo:out',
            'link': 'cancel'
        },
        clickOptions: {
            duration: 1500,
            transition: 'expo:out',
            'link': 'cancel'
        },
        hoverDelay : 1000,
        onClick : $empty,
        onMouseenter : $empty
    },

    initialize : function(elements,options)
    {
        this.fastFX = {
            duration: 10,
            transition: 'expo:out',
            'link' : 'cancel'
        };
        this.elements = ($defined(elements)) ? $$($pick($(elements),$$(elements))) : $$('.emphasis');

        if(this.elements.length > 0)
        {
            if($defined(options))
            {
                if($defined(options.hoverFX))
                {
                    this.options.hoverFX = options.hoverFX;
                }

                if($defined(options.clickFX))
                {
                    this.options.clickFX = options.clickFX;
                }
            }

            this.setOptions(options);

            this.initElements();
            this.initHoverEffect();
        }

    },

    initElements : function()
    {
        var that = this;

        this.elements.each(function(element)
        {
            var elementText = element.get('html').replace(/([^\s])/g,'<span>$1</span>');
            element.set('html',elementText);
        });

        this.origStyles = this.elements.getElement('span')[0].getStyles(this.getFXStyles(this.options.hoverFX));

        this.elements.addEvents(
        {
            'mouseenter' : function()
            {
                this.setStyle('cursor','pointer');
                that.fireEvent('mouseenter');
            },

            'click' : function()
            {
                that.clickFX();
            }
        });
    },

    initHoverEffect : function()
    {
        var that = this,
        opt = this.options;

        $$(this.elements.getElements('span')).addEvents(
        {
            'mouseenter':function()
            {
                var fxDelay = this.retrieve('fxDelay');

                if($defined(fxDelay))
                {
                    $clear(fxDelay);
                }

                this.set('morph',that.fastFX).morph(opt.hoverFX);
            },

            'mouseleave':function()
            {

                var hoverFX = $H(opt.hoverFX);

                if(hoverFX.has('background-color') && $H(that.origStyles).get('background-color') == 'transparent')
                {
                    this.setStyle.delay(opt.hoverDelay,this,['background-color','transparent']);
                }

                var fxDelay = this.set('morph',opt.hoverOptions).morph.delay(opt.hoverDelay,this,that.origStyles);
                this.store('fxDelay',fxDelay);
            }
        });
    },

    clickFX : function()
    {
        var that = this,
        opt = this.options;

        this.fireEvent('click');

        $$(this.elements.getElements('span')).set('morph',opt.clickOptions).each(function(span,i)
        {
            var fxDelay = span.retrieve('fxDelay');

            if($defined(fxDelay))
            {
                $clear(fxDelay);
            }
			
            span.set('morph',that.fastFX).morph.delay((i*3)+1,span,opt.clickFX);
			
            var fxDelay = function() {
                span.set('morph',opt.clickOptions).morph(that.origStyles)
            }.delay(((i*5)+250));
            span.store('fxDelay',fxDelay);
        });
    }
});


window.addEvent('domready',function(){
    new LetterFX($('logo_div').getChildren());
});