/* Toont een popup image met een onhover event waarin de popup tekst getoond wordt.

   Benodigde HTML: <span class="popup">popup tekst</span>. VB:
   <span class="field">
      <input id="txtAfzender" name="txtAfzender" type="text" maxlength="50" />
      <span class="popup">De te sturen email sluit de email af met uw naam</span>
   </span>
   Default wordt een vraagteken img gebruikt. Dit kan overruled worden door een img op te nemen in de html:
   <span class="popup"><img class="popuptag" src="images/person.jpg" />poptext text to show.....</span>
   
   OOK: functies om een tooltip weer te geven. Tooltip beweegt mee met de muis over het object. 
   HTML: <span class="tooltipText">dit is de tooltip...</span>   zie hieronder voor de javascript
   
   Dependencies:
   - popup.css          : benodigde css voor styling van de popup tekst.
*/
  
// console.log("docready in popup.js runs");
var va = va || {};      // get or create namespace

var $inContext

/** create popup from spans with class=popup 
 * gegenereerde HTML:
  <span class="popupWrapper">    // css=> position: relative
  		<img src="images/clock.gif" class="popuptag popupimg">
  		<span class="popupToShow ui-corner-all">Dit is de tekst die in de popup wordt getoond</span>
  </span>
  
  je kunt ook onderstaande html in de source opnemen ipv laten genereren om daardoor de popupWrapper absoluut te kunnen posistioneren:
	<span class="popupWrapper" style="position:absolute; top: 25px">
      <img src="../vaLib/popup/tooltip.png" class="popupimg">
      <span style="display: none;" class="ui-corner-all popupToShow">de popup tekst</span>
	</span>
  Wel dan de hover expliciet aanmaken middels:
  va.addHoverToPopupspan( {popupSpan: $('.popupToShow')} );     	// enable hover for the popup tags that have been positioned absolute
  Zorg dat popup.js dan als laatste wordt geinclude dus ná de va.addHoverToPopupspan code!	

  use options map to pass options. At least:
  {context: ...,
  	popupImg: ...,			// het plaatje dat voor de hover wordt gebruikt
  	popupTop: ..., 
  	popupWidth: ... }
 */
va.createPopups = function(options){
	
	var $inContext = options.context;
   $inContext.find('span.popup').each(function(){
      
		var $popupSpan = $(this);
      $popupSpan.addClass("ui-corner-all");
		// remove the class 'popup' and add class 'popupToShow'. this makes sure that the class isn't found again if the popupwrapper is already generated
		$popupSpan.addClass('popupToShow').removeClass('popup');
		
		// wrap de popup span in a parent span zodat die parent position relative kan krijgen. Nodig om de popup absoluut te kunnen positioneren.
      $popupSpan.wrap('<span class="popupWrapper"></span>')
		
		// if the  <span class="popup"> contains an img with class=popuptag we will use this img as the hover img.  
		// html like: <span class="popup"><img class="popuptag" src="images/person.jpg" />poptext text to show.....</span>
		var $popupImg = $popupSpan.find('.popuptag');  //returns array
		if ($popupImg.length > 0) {
			$popupImg.remove();						// remove the tag because it has be instered again BEFORE the <span class=popup> tag
		} else {
	     	// add the info image. We cannot position the img absolute: that somehow messes up the <div class="input-line"> in firefox
	      // the img has no 'margin-left' because in IE this margin dissappears on hover. Instead the preceding input has a margin-right
	      var $popupImg = $('<img />')
	         .attr("src", (typeof va.pathToLib !== "undefined" ? va.pathToLib : '') + 'vaLib/popup/tooltip.png');
		}
      $popupImg.addClass('popupimg').insertBefore($popupSpan);

		options.popupSpan = $popupSpan;
		options.popupImg = $popupImg;
		
		va.addHoverToPopupspan(options);	
   });  // end each
} // end createPopups

/**
 * voeg hover toe aan html die reeds is aangemaakt. Alles met live() werkt niet zoals in:
 *  $popupImg.live('hover', function(event) { if (event.type == 'mouseover') { ...
   
 @param options:
   popupSpan = de <span class='popupToShow'> tag
   popupImg = optionele param: de IMG waarover de hover moet plaatsvinden. Indien niet meegegeven dan wordt het default vraagteken als img gebruikt
 */
va.addHoverToPopupspan = function(options) {
	
	var $popupSpan = options.popupSpan;
	var $popupImg = options.popupImg || $popupSpan.prev();
		
	$popupImg.hover(
	   function(){
	      // make sure the popup fits on the right side of the img. If not show it on the left side of the img
	      var pos = $(this).offset(); 
	      if (pos.left + $popupSpan.width() + 40 < $(document).width()) {
	         if (options.popupLeft) {		// override css value if passed as an option
					$popupSpan.css({'left': options.popupLeft});
				};
	      } else {
	         var posL = "-" + ($popupSpan.width() + 25) + "px";
				$popupSpan.css({'left': posL});
	      };			
			if (options.popupTop) {  // override css value if passed as an option
				$popupSpan.css({'top': options.popupTop});
			};	
			if (options.popupWidth) {  // override css value if passed as an option
				$popupSpan.width(options.popupWidth); 
			}
			$popupSpan.show();			 
	   }, 
	   function(){
	      $popupSpan.hide();
	   }
	);		
} // end addHoverToPopupspan
									
/* 
 om popups in een dialoog weer te geven eerst de oude popups verwijderen,
 daarna createPopups opnieuw aanroepen met de dialog as context. VB:
   $('#showFriendsDialog').click(function(){
      va.deletePopups($('#dialogFriends'));
      va.createPopups($('#dialogFriends'));
      $('#dialogFriends').dialog('open');
   });
*/
va.deletePopups = function($inContext){
   $inContext.find('span.popup').each(function(){
      var $popupSpan = $(this).clone();
      var $sibling = $(this).parent().prev();
      $(this).parent().remove();
      // now add the popupspan again:
      $popupSpan.insertAfter($sibling);
   });
}

// delete een enkele popup
va.deletePopup = function($inContext) {
	$inContext.find('.popupWrapper').remove();
}

/** 
 * functies om een tooltip weer te geven. Tooltip beweegt mee met de muis over het object.
 * HTML: <span class="tooltipText">dit is de tooltip...</span>
 * JavaScript:
   		$('<span class="tooltipText">' + dagen[i].weekdagNaam + " " + i + '</span>').appendTo($dagButton); 
			$dagButton.hover(
							function(event){ va.showTooltip.call(this, event); }, 
							va.hideTooltip
						 )
						.mousemove(va.positionTooltip);	
 */
va.positionTooltip = function(event) {
	var tPosX = event.pageX - 5;
	var tPosY = event.pageY + 20;
	$('div.tooltip').css({top: tPosY, left: tPosX});
};

/** Show (create) the tooltip. The tooltiptext can be passed optionally. If not passed it is assumed to be present in
*  the HTML: <span class="tooltipText">dit is de tooltip...</span>
 * @param {Object} event
 * @param {string} ttText		optional, the tooltip to show
 */
va.showTooltip = function(event, ttText) {
	$('div.tooltip').remove();
	if (typeof ttText === "undefined") {
		$tooltipText = $(this).find('.tooltipText').html();
	} else {
		$tooltipText = ttText;
	}
	if ($tooltipText) {
		$('<div class="tooltip">' + $tooltipText + '</div>').appendTo('body');
		va.positionTooltip(event);
	};
};

// Hide (remove) the tooltip.
va.hideTooltip = function() {
	$('div.tooltip').remove();
};
/** simpel function to create the hover on a jquery element
 * 
 * @param {Object} elementsJQstr		string from which the JQuery elements are created. Example: '.kName'
 */ 
va.createToolTipForElements = function(elementsJQstr, ttText) {
	$(elementsJQstr).hover(
			function(event){ va.showTooltip.call(this, event, ttText); }, 
			va.hideTooltip
		 )
		.mousemove(va.positionTooltip);
};
/** einde tooltip */

$(document).ready(function() {   
   // call the function when the document loads
   va.createPopups( {context: $(document)} );            
});