$(document).ready(function()
{
    // Use the each() method to gain access to each elements attributes
    $('div [rel]').each(function()
    {
        $(this).qtip(
                  {
                      content: {
                          // Set the text to a DOM element content specified by rel attribute of each element
                          text: $('div#' + $(this).attr('rel')),  //'<img class="" src="img/throbber.gif" alt="Loading..." />',
                          //url: $(this).attr('rel'), // Use the rel attribute of each element for the url to load
                          title: {
                              text: '', // Give the tooltip a title using each elements text
                              button: '<img src="../Images/close_bt.gif" />' // Show a close link in the title
                          }
                      },

                      position: {
                          target: $(document.body), // Position it via the document body...
                          corner: {
                                target: 'topMiddle',
                                tooltip: 'topMiddle'
                            }
                      },

                      show: {
                          when: 'click',
                          solo: true // Only show one tooltip at a time
                      },

                      hide: false,
                      style: {
                          padding: 5,
                          background: '#efefef',
                          color: 'black',
                          border: {
                              width: 5,
                              radius: 5,
                              color: '#efefef'
                          },
                          name: 'light', // Use the default light style
                          //width: parseInt($(this).attr('width')), // Set the tooltip width
                          width: parseInt($('div#' + $(this).attr('rel')).attr('popupWidth')), // Set the tooltip width
                          title: { 'padding': 0, 'background': 'transparent'} // Valid

                      },

                      api:
                      {
                          beforeShow: function()
                          {
                              // Fade in the modal "blanket" using the defined show speed
                              $('#qtip-blanket').fadeIn(this.options.show.effect.length);
                          },
                          beforeHide: function()
                          {
                              // Fade out the modal "blanket" using the defined hide speed
                              $('#qtip-blanket').fadeOut(this.options.hide.effect.length);
                          }
                      }
                  })

    });

    // Create the modal backdrop on document load so all modal tooltips can use it
    $('<div id="qtip-blanket">')
  .css({
      position: 'absolute',
      top: $(document).scrollTop(), // Use document scrollTop so it's on-screen even if the window is scrolled
      left: 0,
      height: $(document).height(), // Span the full document height...
      width: '100%', // ...and full width

      opacity: 0.5, // Make it slightly transparent
      backgroundColor: 'black',
      zIndex: 5000  // Make sure the zIndex is below 6000 to keep it below tooltips!
  })
  .appendTo(document.body) // Append to the document body
  .hide(); // Hide it initially

    //If the User resizes the window, adjust the #container height
    $(window).bind("resize", resizeWindow);
    function resizeWindow(e)
    {
        var scrollTop = $(window).scrollTop();
        var newWindowHeight = $(window).height();
        $("div#qtip-blanket").css("height", newWindowHeight + scrollTop);

        var scrollLeft = $(window).scrollLeft();
        var newWindowWidth = $(window).width();
        $("div#qtip-blanket").css("width", newWindowWidth + scrollLeft);
    }

    //on scroll event
    $(window).bind("scroll", scrollWindow);
    function scrollWindow(e)
    {
        resizeWindow(e);
    }

});

function ClosePopup()
{
    $("a.qtip-button").click();
}