var SlideTopPan = null;

(function( $ )
{
    var stp = SlideTopPan = function( conf )
    {
        var o             = this;
        o.height        = conf.height || 100;
        o.speed         = conf.speed    || 1000;
        o.ease            = conf.ease     || 'linear';
        o.members     = [];
        o.openedIdx = -1;
    },
    stpProto = stp.prototype,
    setOver    = function( memb, over )
    {
        if( over )
        {
            memb.btn.removeClass( memb.btnClass.up );
            memb.btn.addClass( memb.btnClass.over );
        }
        else
        {
            memb.btn.removeClass( memb.btnClass.over );
            memb.btn.addClass( memb.btnClass.up );
        }
    },
    setActive = function( memb, active )
    {
        if( active )
        {
            memb.btn.removeClass( memb.btnClass.up );
            memb.btn.removeClass( memb.btnClass.over );
            memb.btn.addClass( memb.btnClass.active );
        }
        else
        {
            memb.btn.removeClass( memb.btnClass.active );
            memb.btn.addClass( memb.btnClass.up );
        }
    };
    
    
    
    stpProto.addPan = function( conf )
    {
        var o = this, pan, btn;
        
        $.each( conf, function( i, el )
        {
            if( !el.pan || !el.btn )
            {
                return;
            }
            
            pan = $( '#' + el.pan );
            btn = $( '#' + el.btn );
            
            var memb = {
                    idx: o.members.length,
                    pan: pan,
                    panHeight: el.panHeight || o.height,
                    btn: btn,
                    btnClass: el.btnClass || ''
            };
            btn.click( function()
                {
                    if( o.openedIdx !== -1 )
                    {
                        setOver( o.members[ o.openedIdx ], false );
                        setActive( o.members[ o.openedIdx ], false );
                    }
                    if( o.openedIdx !== memb.idx ) setActive( memb, true );
                    o.togglePan( memb );
                    return false;
                }
            ).mouseover( function()
                {
                    if( o.openedIdx !== memb.idx ) setOver( memb, true );
                }
            ).mouseout( function()
                {
                    if( o.openedIdx !== memb.idx ) setOver( memb, false );
                }
            );
            
            setOver( memb, false );
            o.members.push( memb );
            
            pan.css( { height: 0, overflow: 'hidden', opacity: 0 } );
        });
    };
    
    stpProto.togglePan = function( memb )
    {
        var o = this;
        if( o.openedIdx === -1 ) // no pan is opened
        {
            memb.pan.animate(
                { height: memb.panHeight },
                { duration: o.speed, easing: o.ease, complete: function()
                {
                        memb.pan.animate(
                        { opacity: 1 },
                        { duration: o.speed, easing: o.ease }
                        );
                } }
            );
            o.openedIdx = memb.idx;
        }
        else if( o.openedIdx === memb.idx ) // the open member is memb (so let's close it)
        {
            memb.pan.animate(
                { height: 0, opacity: 0 },
                { duration: o.speed, easing: o.ease }
            );
            o.openedIdx = -1;
        }
        else // close the opened one, then open the selected one
        {
            o.members[ o.openedIdx ].pan.animate(
                { height: 0, opacity: 0 },
                { duration: o.speed, easing: o.ease, complete: function()
                    {
                        memb.pan.animate(
                            { height: memb.panHeight },
                            { duration: o.speed, easing: o.ease, complete: function()
                                {
                                    memb.pan.animate( { opacity: 1 }, { duration: o.speed, easing: o.ease } );
                                }
                            } );
                    }
                }
            );
            o.openedIdx = memb.idx;
        }
    };
    
    stpProto.addCloseBtn = function( id )
    {
        var o = this;
        
        $( '#' + id ).click( function()
        {
            var memb = o.members[ o.openedIdx ];
            memb.pan.animate(
                { height: 0, opacity: 0 },
                { duration: o.speed, easing: o.ease }
            );
            
            //o.members[ o.openedIdx ].btn.css( o.members[ o.openedIdx ].btnClass.up );
            
            setActive( o.members[ o.openedIdx ], false );
            
            o.openedIdx = -1;
            
            return false;
        });
    };
    
})( jQuery );

// Before placed in the page header
$( document ).ready( function()
{
        var imgCloseOver = new Image();
        imgCloseOver.src = 'PLG-Main-imgs/btn-close-over.png';
        
        var sp = new SlideTopPan( {
                height : 400,
                speed  : 600,
                ease   : 'easeOutQuint'
        } );
        
        var btnUpCss = 'contactBtnUp',
        btnOverCss   = 'contactBtnOver',
        btnActiveCss = 'contactBtnActive';
        
        sp.addPan( [
            {
                pan      : 'contactSlider',
                btn      : 'contactBtn',
                btnClass : {
                    up     : btnUpCss,
                    over   : btnOverCss,
                    active : btnActiveCss
                }
            }
        ] );
        
        sp.addCloseBtn( 'contactClose' );
        
} );