(function(){


    /**
    * Display imageHoverPopout effect.
    */
    aura.provide('s100g.effect.imageHoverPopout');

    var effect = aura.namespace('s100g.effect.imageHoverPopout');

    effect.process = function(node)
    {

        var o = {
            'image': node,
            'hoverImage': aura.byId(aura.dom.getAttribute(node, 'imageHoverPopoutTarget')),
            'shadow': aura.byId(aura.dom.getAttribute(node, 'imageHoverPopoutShadowTarget')),
            'width': aura.dom.getAttribute(node, 'width'),
            'height': aura.dom.getAttribute(node, 'height'),
            'hoverWidth': aura.dom.getAttribute(node, 'hoverWidth'),
            'hoverHeight': aura.dom.getAttribute(node, 'hoverHeight'),
            'hoverShowing': false
        };

        o.shiftLeft = ( ( o.hoverWidth - o.width ) / 2 ) * -1;
        o.shiftTop = ( ( o.hoverHeight - o.height ) / 2 ) * -1;

        o.shadowShiftLeft = ( ( ( o.hoverWidth - o.width ) / 2 ) - 10 ) * -1;
        o.shadowShiftTop = ( ( ( o.hoverHeight - o.height ) / 2 )- 10 )  * -1;

        aura.style.set(o.hoverImage, 'z-index', 100);
        aura.style.set(o.hoverImage, 'margin-left', o.shiftLeft + 'px');
        aura.style.set(o.hoverImage, 'margin-top', o.shiftTop + 'px');

        aura.style.set(o.shadow, 'z-index', 99);
        aura.style.set(o.shadow, 'margin-left', o.shadowShiftLeft + 'px');
        aura.style.set(o.shadow, 'margin-top', o.shadowShiftTop + 'px');
        aura.style.set(o.shadow, 'width', o.hoverWidth + 'px');
        aura.style.set(o.shadow, 'height', o.hoverHeight + 'px');
        aura.style.set(o.shadow, 'opacity', '.5');

        aura.event.onMouseEnter(o.image, function(e) {
            aura.event.stop(e);
            aura.style.show(o.hoverImage);
            aura.style.show(o.shadow);
            aura.style.set(o.image, 'opacity', '0');
        });

        aura.event.onMouseEnter(o.hoverImage, function(e) {
            aura.event.stop(e);
            o.hoverShowing = true;
        });


        aura.event.onMouseLeave(o.hoverImage, function(e) {
            if ( ! ( aura.event.isMouseEnteringTo(e, o.image) || aura.event.isMouseEnteringTo(e, o.shadow) ) )
            {
                aura.event.stop(e);
                aura.style.hide(o.hoverImage);
                aura.style.hide(o.shadow);
                o.hoverShowing = false;
                aura.style.set(o.image, 'opacity', '100');
            }
        });

        aura.event.onMouseLeave(o.shadow, function(e) {
            if ( ! ( aura.event.isMouseEnteringTo(e, o.image) || aura.event.isMouseEnteringTo(e, o.hoverImage) ) )
            {
                aura.event.stop(e);
                aura.style.hide(o.hoverImage);
                aura.style.hide(o.shadow);
                o.hoverShowing = false;
                aura.style.set(o.image, 'opacity', '100');
            }
        });

        aura.event.onMouseLeave(o.image, function(e) {
            if ( o.hoverShowing )
            {
                aura.event.stop(e);
                aura.style.hide(o.hoverImage);
                aura.style.hide(o.shadow);
                o.hoverShowing = false;
                aura.style.set(o.image, 'opacity', '100');
            }
        });

        /*
        aura.event.on(o.image, 'mouseover', function(e) {
            aura.event.stop(e);
            aura.style.show(o.hoverImage);
        });
        aura.event.on(o.hoverImage, 'mouseout', function(e) {
            aura.event.stop(e);
            aura.style.hide(o.hoverImage);
        });
        */
    };

    /**
    * Register us with the effects manager.
    */
    aura.effect.registerEffect(
        's100g.effect.imageHoverPopout',
        effect.process
    );


})();