/**
 * YouPlans Module Hover
 * @version                1.0.0
 * @MooTools version 1.2
 * @Copyright Youjoomla LLC
 * @author                Constantin Boiangiu <info [at] constantinb.com>
 */

var HoverPlan = new Class({
        Implements: [Options],
        options: {
                elements:null,
                hoveredClass:null,
                txtFx:Fx.Transitions.Quad.easeInOut,
                txtFxDuration:1200
        },

        initialize: function(options){
                this.setOptions(options);
                this.elements = $$(this.options.elements);
                this.start();
        },

        start: function(){
                this.defaultEl = 0;

                this.elements.each(function(element, i){

                        if(element.hasClass(this.options.hoveredClass)){
                                this.defaultEl = i;
                        }

                        var fx = new Fx.Morph(element,{wait:false, duration:this.options.txtFxDuration, transition:this.options.txtFx});

                        element.addEvent('mouseover', function(event){
                                this.elements.removeClass(this.options.hoveredClass);
                                element.addClass(this.options.hoveredClass);
                        }.bind(this));

                        element.addEvent('mouseenter', function(){
                                fx.start({
                                                 /*'opacity':[.5,1],*/
                                                 'bottom':[-30,0]
                                        /*         'left':[-10,0]*/
                                                 });
                        })

                        element.addEvent('mouseout', function(event){
                                this.elements.removeClass(this.options.hoveredClass);
                                this.elements[this.defaultEl].addClass(this.options.hoveredClass);
                        }.bind(this));
                        element.addEvent('mouseleave', function(){
                                fx.start({
                                        'bottom':[-100,0]
                                });
                        })
                }.bind(this));
        }
});