/**
 * jQuery :: Popup window
 *
 * @version  1.02
 * @date     2010-05-31
 * @author   Christian Oellers
 * @contact  veryshort@gmx.de
 *
 * REQUIREMENTS
 * - jQuery 1.4.2
 *
 * FEATURES
 * - Displays a popup window on element
 *   hover with custom CSS-formatted text.
 */
jQuery.noConflict();
jQuery(document).ready(function($)
{
   var el                 = "#popup";       // Element HTML
   var elID               = "popup";        // Element HTML-ID
   var elHoverable        = "a.titlepopup"; // Hover over this element to show the popup.
   var elContent          = "img";          // Child element of hoverable with popup-content.
   var fadeInSpeed        = "fast";         // jQuery based Popup fadeIn speed.
   var centerOnX          = false;          // Ignore horizontal offset and center the popup.
   var offsetX            = 0;              // Horizontal offset from cursor (positive values shift to left).
   var offsetY            = -30;            // Vertical offset from cursor (negative values shift to bottom).
   var browserBorderRight = 50;             // Distance from right browser border.

   // -------------------------------------------------------------------------------------------------
   // FUNCTIONS

   /**
    * Text output debugger.
    * Use browser console or alert box.
    */
   function debug(text) // :Void
   {
      ((window.console && console.log)
      || (window.opera && opera.postError)
      || window.alert).call(this, text);
   }

   /**
    * Return Opera browser based on body class.
    * Set body class in template with PHP.
    */
   function isOpera() // :Boolean
   {
      return $("body").hasClass("opera");
   }

   /**
    * Return IE browser based on proprietary css properties.
    *
    * @param  obj  Element  Element with browser-specific CSS and -hacks.
    */
   function isIE(obj) // :Boolean
   {
      return ($(obj).css("text-overflow") != "") ? true : false;
   }

   /**
    * Return IE6 or IE7 browser based on current CSS value set through hack.
    *
    * @param  obj          Element  Element with browser-specific CSS and -hacks.
    * @param  cssProperty  String   CSS property to compare.
    * @param  cssValueIE6  String   CSS-value for IE6 (*html).
    * @param  cssValueIE7  String   CSS-value for IE7 (*+html).
    */
   function getBrowserIE67(obj, cssProperty, cssValueIE6, cssValueIE7) // :String
   {
      if ($(obj).css(cssProperty) == cssValueIE6) return "IE6";
      if ($(obj).css(cssProperty) == cssValueIE7) return "IE7";
      return "";
   }

   /**
    * Get element childrens html content.
    *
    * @param  obj        Element  Target object.
    * @param  parentObj  Element  Target children object.
    */
   function getObjectContent(obj, parentObj) // :String
   {
      return $(obj, parentObj).attr("alt");
   }

   /**
    * Update object position on events.
    * Object must not hit browser borders.
    *
    * Fix for Opera because of jQuery bug necessary.
    *
    * @param  e    Event    Current event.
    * @param  obj  Element  Target object.
    */
   function updateObjectPosition(e, obj) // :Void
   {
      offsetX      = centerOnX ? offsetX = $(obj).width() / 2 : offsetX;
      var objWidth = $(obj).width();

      if (isOpera())
      {
         objWidth = document.getElementById(elID).offsetWidth;
      }

      $(obj).css
      ({
         "left" : (e.pageX - offsetX) + "px",
         "top"  : (e.pageY - offsetY) + "px"
      });

      if (window.innerWidth && ((e.pageX + objWidth) > window.innerWidth))
      {
         $(obj).css({"left":(window.innerWidth - objWidth - browserBorderRight) + "px"});
      }

      if (document.body.scrollWidth && ((e.pageX + objWidth) > document.body.scrollWidth))
      {
         $(obj).css({"left":(window.innerWidth - objWidth - browserBorderRight) + "px"});
      }
   }

   // -------------------------------------------------------------------------------------------------
   // CUSTOM

   /**
    * Hover over this element to display an element with its child elements content.
    * Do not animate fadeIn for IE browsers.
    *
    * Leaving element will remove the popup.
    */
   $(elHoverable).hover(function(e) // :Void
   {
      $("body").append('<div id="' + elID + '">' + getObjectContent(elContent, this) + '</div>');
      $(el).css({"display":"none"});

      updateObjectPosition(e, el);
      isIE(el) ? $(el).css({"display":"block"}) : $(el).fadeIn(fadeInSpeed);
   },
   function() // :Void
   {
      $(el).remove();
   });

   /**
    * Reposition popup on mouse move.
    */
   $(elHoverable).mousemove(function(e) // :Void
   {
      updateObjectPosition(e, el);
   });
});