﻿function AddModalBackground() {
                // Create the modal backdrop on document load so all modal tooltips can use it
                var reduceHeight = 0;
                if ($.browser.msie) {
                    reduceHeight = 4;
                }

                $('<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() - reduceHeight, // Span the full document height...
                      width: '100%', // ...and full width

                      opacity: 0.7, // 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

              }

            function InitSingleToolTip(selector, textContent, txtClose) {
                $(selector).qtip(
                {    
                   content: {                       
                       text: textContent,
                       title: {
                          text: '&nbsp;',
                          button: txtClose
                       }
                   },
                   position: {
                        target: $('#Navigation'),
                       corner: {
                           target: 'rightTop',
                           tooltip: 'topLeft'
                       }
                   },
                   show: {
                       when: 'click', // Show it on click
                       solo: true // And hide all other tooltips
                   }
                   ,

                   hide: {
                       when: 'blur'
                   },

                   style: {
                       width: 350,
                       padding: '14px',
                       color: '#000',
                       border: {
                           width: 9,
                           radius: 9,
                           color: '#E4E4E4'
                       },
                       name: 'light',
                       title: 
                       {
                            color:'#000',
                            background:'#FFF'
                       }
                   }
                   ,
                   api: {
                       beforeShow: function () {
                            //$('input').attr('disabled', true);
                            //$('select').attr('disabled', true);
                           // Fade in the modal "blanket" using the defined show speed
                           $('#qtip-blanket').fadeIn(this.options.show.effect.length);
                       },
                       beforeHide: function () {
                            //$('input').attr('disabled', false);
                            //$('select').attr('disabled', false);
                           // Fade out the modal "blanket" using the defined hide speed
                           $('#qtip-blanket').fadeOut(this.options.hide.effect.length);
                       }              
                   }
               });      
                 
        }
