/**

	This is a generic implementation of the tooltips used in
	the productvergelijker

	@author Marnix Kok

**/
jQuery(document).ready(function(){   
	$().mousemove(function(e){      
	window.mouseXPos = e.pageX;      
	window.mouseYPos = e.pageY;   
	}); 
})

var agt	= navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
var is_ie6 = (is_ie && (is_major == 4) && (agt.indexOf("msie 6.") != -1));
var is_ie7 = (is_ie && (is_major == 4) && (agt.indexOf("msie 7.") != -1));

var Tooltip = {

		layoutId : null,
		contentsId : "",
		removeDelay : 1000,

		linger : false,
		timer : undefined,
		insideCount : 0,
		elementBase : undefined,

		bStillOpen : true,

		maxWidth : 400,

		/**
		 *  Initialize the tooltip
		 */
		init : function(layoutId, removeDelay /* = 1000 */)	{
			clearTimeout(Tooltip.timer);

			Tooltip.closeElement();


			Tooltip.layoutId = layoutId;

			// if specified setup delay
			if (removeDelay !== undefined) {
				Tooltip.removeDelay = removeDelay;
			}

			Tooltip.bStillOpen = true;
		},

		stillOpen : function(bStillOpen) {
			Tooltip.bStillOpen = bStillOpen;
		},

		showAtPos : function(elementBase, posX, posY, ie6Width) {
			if(Tooltip.bStillOpen) {
				clearTimeout(Tooltip.timer);

				var element = $(elementBase);
				var layoutEl = $("#" + Tooltip.layoutId);
				var location = {
					x: posX,
					y: posY
				};

				layoutEl.css('visibility', 'hidden');
				layoutEl.show();

				this.resize(layoutEl, ie6Width);
				location = Tooltip.adjustForWindowBoundaries(location, layoutEl);
				
				
				
				// set element to new position
				layoutEl.css("top", location.y);
				layoutEl.css("left", location.x);

				layoutEl.css('visibility', 'visible');

				Tooltip.initializeHideBehaviour(element, layoutEl);
			}
		},

		/**
		 * Show the tooltip somewhere near the elementbase
		 */
		showAt : function(elementBase, offsetX, offsetY, ie6Width) {
			if(Tooltip.bStillOpen) {
				clearTimeout(Tooltip.timer);

				if (elementBase === undefined) {
					elementBase = Tooltip.elementBase;
				}

				// retrieve elements
				var element = $(elementBase);
				var layoutEl = $("#" + Tooltip.layoutId);

				var offset = element.offset();
				
				var location = {
					x : offset.left + offsetX,
					y : offset.top + offsetY
				};
				
				layoutEl.css('visibility', 'hidden');
				layoutEl.show();
				this.resize(layoutEl, ie6Width);

				
				location = Tooltip.adjustForWindowBoundaries(location, layoutEl);

				// set element to new position
				layoutEl.css("top", location.y);
				layoutEl.css("left", location.x);

				layoutEl.css('visibility', 'visible');

				Tooltip.initializeHideBehaviour(element, layoutEl);
			}
		},
		
		/**
		 * Shows the tooltip at mouse position
		 */
		showAtMousePosition : function(elementBase, offsetX, offsetY, ie6Width) {
			if(Tooltip.bStillOpen) {
				clearTimeout(Tooltip.timer);

				if (elementBase === undefined) {
					elementBase = Tooltip.elementBase;
				}

				// retrieve elements
				var element = $(elementBase);
				var layoutEl = $("#" + Tooltip.layoutId);

				var location = {
					x :  window.mouseXPos,
					y :  window.mouseYPos
				};
				
				layoutEl.css('visibility', 'hidden');
				layoutEl.show();
				this.resize(layoutEl, ie6Width);

				
				location = Tooltip.adjustForWindowBoundaries(location, layoutEl);

				// set element to new position
				layoutEl.css("top", location.y);
				layoutEl.css("left", location.x);

				layoutEl.css('visibility', 'visible');

				Tooltip.initializeHideBehaviour(element, layoutEl);
			}
		},

		resize : function(tooltipElement, ie6Width) {
			if(is_ie6) {
				var elementWidth = ie6Width;
			} else {
				var elementWidth = tooltipElement.width();

				if(elementWidth > this.maxWidth) {
					elementWidth = this.maxWidth;
				} else {
					elementWidth += 20;
				}
			}

			tooltipElement.css('width', elementWidth);

			$('.boxTopRight', tooltipElement).css('width', elementWidth - 5);
			$('.boxBottomRight', tooltipElement).css('width', elementWidth - 5);
		},

		/**
		 * Remove all old eventhandlers from the tooltip that has been used
		 */
		removeEventHandlers : function()
		{
			// unbind, to make sure we don't multiple times
			$(".touchedByTooltip").unbind('mouseenter', Tooltip.inc);
			$(".touchedByTooltip").unbind('mouseleave', Tooltip.dec);
			$(".touchedByTooltip").removeClass("touchedByTooltip");
		},

		/**
		 *  Depending on where the tooltip is positioned with regards
		 *  to the borders of the browser window it should be displaced
		 *  upwards or to the left.
		 */
		adjustForWindowBoundaries : function(location, layoutEl) {
			if(location.x + layoutEl.width() > $('body').width()) {
				location.x -= layoutEl.width();
			}
			if(location.y + layoutEl.height() - $(document).scrollTop() > $(window).height()) {
				location.y -= layoutEl.height();
			}
			return location;
		},

		/**
		 * Depending on whether the `linger` option has been
		 * enabled handlers will be initialized. Entering and
		 * leaving certain elements will resp. increase and decrease
		 * a reference count for this tooltip. If 0, then the cursor
		 * is outside all, we can then close the tooltip.
		 */
		initializeHideBehaviour : function(element, layoutEl)
		{
			Tooltip.removeEventHandlers();

			layoutEl.bind('mouseenter', Tooltip.inc);
			layoutEl.bind('mouseleave', Tooltip.dec);
			layoutEl.addClass("touchedByTooltip");

			element.bind('mouseenter', Tooltip.inc);
			element.bind('mouseleave', Tooltip.dec);
			element.addClass("touchedByTooltip");

			// initialize timer
			if (Tooltip.timer !== undefined) {
				clearTimeout(Tooltip.timer);
			}
		},


		/**
		 * Increase the inside counter
		 */
		inc : function() {
			clearTimeout(Tooltip.timer);
		},

		/**
		 * Decrease the inside counter
		 */
		dec : function() {
			Tooltip.timer = setTimeout(Tooltip.closeElement, Tooltip.removeDelay);
		},

		/**
		 * Close the popup
		 */
		closeElement : function() {
			var layoutEl = $("#" + Tooltip.layoutId);
			layoutEl.hide();
			layoutEl.css('width', 'auto');
			$('.boxTopRight', layoutEl).css('width', 'auto');
			$('.boxBottomRight', layoutEl).css('width', 'auto');
		}
};