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 )
    {
      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: 1 } );
    });
  };
  
  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: 1 },
        { 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: 1 },
        { 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: 1 },
        { 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 : 250,
                speed  : 600,
                ease   : 'easeOutQuint'
        } );
        
        var btnUpCss = 'contactBtnUp',
        btnOverCss   = 'contactBtnOver',
        btnActiveCss = 'contactBtnActive';
        
        sp.addPan( [
            {
                pan      : 'topSliderCountries',
                btn      : 'sliderBtnCountries',
                btnClass : {
                    up     : btnUpCss,
                    over   : btnOverCss,
                    active : btnActiveCss
                }
            },
            {
                pan      : 'topSliderMyNA',
                btn      : 'sliderBtn',
                btnClass : {
                    up     : btnUpCss,
                    over   : btnOverCss,
                    active : btnActiveCss
                }
            }
        ] );
        
        sp.addCloseBtn( 'contactClose' );
        
} );