$(document).ready( function () { 
  HookDropdowns();
});

function OnDropdown(trigger, popup, wait, id)
{
  if ((popup.hasClass('ddUserOptions')) && (popup.html().length == 0) && (id != null))
  {
    if (wait != null)
      popup.html(wait.html());
    
    var username = trigger.text();
    var userid = id.text();
    //Dynamically retrieve the menu options
    PageMethod("/ForumPages/ForumMethods.aspx", "UserDropdownGet", ["siteID", 24, "userID", userid, "username", username], 
                function(result) 
                { 
                  if (result.d != null)
                    popup.html(result.d); 
                  else
                    popup.html(result); 
                }, 
                function(err) { alert(err); });
  }
}

function HookDropdowns() {
  $('.ddContainer').each(function () {
    // options
    var distance = 10;
    var time = 250;
    var hideDelay = 500;

    var hideDelayTimer = null;

    // tracker
    var beingShown = false;
    var shown = false;
    
    var trigger = $('.ddTrigger', this);
    var popup = $('.ddDropdown', this).css('opacity', 0);
    var id = $('.ddID', this);
    var waitIcon = $('.ddWait', this);

    // set the mouseover and mouseout on both element
    $([trigger.get(0), popup.get(0)]).mouseover(function () {
      // stops the hide event if we move from the trigger to the popup element
      if (hideDelayTimer) clearTimeout(hideDelayTimer);

      // don't trigger the animation again if we're being shown, or already visible
      if (beingShown || shown) {
        return;
      } else {
        beingShown = true;

        OnDropdown(trigger, popup, waitIcon, id);
        
        // reset position of popup box
        popup.css({
          top: 10,
          left: -33,
          display: 'block' // brings the popup back in to view
        })

        // (we're using chaining on the popup) now animate it's opacity and position
        .animate({
          top: '+=' + distance + 'px',
          opacity: 1
        }, time, 'swing', function() {
          // once the animation is complete, set the tracker variables
          beingShown = false;
          shown = true;
        });
      }
    }).mouseout(function () {
      // reset the timer if we get fired again - avoids double animations
      if (hideDelayTimer) clearTimeout(hideDelayTimer);
      
      // store the timer so that it can be cleared in the mouseover if required
      hideDelayTimer = setTimeout(function () {
        hideDelayTimer = null;
        popup.animate({
          top: '+=' + distance + 'px',
          opacity: 0
        }, time, 'swing', function () {
          // once the animate is complete, set the tracker variables
          shown = false;
          // hide the popup entirely after the effect (opacity alone doesn't do the job)
          popup.css('display', 'none');
        });
      }, hideDelay);
    });
  });
};

$.fn.replaceHTML = function( html ) 
{
    var stack = [];
    return this.each( function(i, el) {
        var oldEl = el;
        /*@cc_on // Pure innerHTML is slightly faster in IE
        oldEl.innerHTML = html;
        return oldEl;
        @*/
        var newEl = oldEl.cloneNode(false);
        newEl.innerHTML = html;
        oldEl.parentNode.replaceChild(newEl, oldEl);
        /* Since we just removed the old element from the DOM, return a reference
        to the new element, which can be used to restore variable references. */
        stack.push( newEl );
    }).pushStack( stack );

};