/**
 * IchsanTooltipLoader
 * Create rich tooltip based on htmltooltip.js by javascriptkit.com
 * by Muhammad Ichsan A.K.A sancho21 <ichsan et gmail com>
 *
 * Require: jquery >= 1.3.2
 */

var ichsanTooltipLoader = {
	tooltipClass:'ichsan-tooltip',
	effect: {type:'fade', speed:'slow'},	// fade|slide, slow|fast
	anchors: [],
	tooltips: [],
	dimensionRatio: [2, 1], // width, height

	tooltipStillNeeded: false,

	// Function to set the position of the tooltip
	positionTooltip: function(index){
		var anchor = this.anchors[index];
		var tooltip = this.tooltips[index];

		// Get X and Y position of window scroll
		var scrollLeft = window.pageXOffset ? window.pageXOffset : this.ieBody.scrollLeft;
		var scrollTop = window.pageYOffset ? window.pageYOffset : this.ieBody.scrollTop;
		// Get window's width and height
		var docWidth = window.innerWidth ? window.innerWidth - 15 : this.ieBody.clientWidth - 15;
		var docHeight = window.innerHeight ? window.innerHeight - 18 : this.ieBody.clientHeight - 15;
		// Tooltip's X and Y
		var tipX = anchor.dimensions.offsetX;
		var tipY = anchor.dimensions.offsetY + anchor.dimensions.h;

		$(tooltip).css({left: tipX, top: tipY});

		// Reposition
		var padding = 30; // Next, it has to be real
		var tipOuterWidth = $(tooltip).width() + padding;
		if (tipOuterWidth + tipX > docWidth) {
			tipX = docWidth - tipOuterWidth;
			$(tooltip).css({left: tipX, top: tipY});
		}
	},

	// Function to show the tooltip
	showTooltip: function(index) {
		var tooltip = this.tooltips[index];
		$(tooltip).css('display', 'block');
		if 			(this.effect.type == 'fade')		$(tooltip).hide().fadeIn(this.effect.speed);
		else if (this.effect.type == 'slide')	$(tooltip).hide().slideDown(this.effect.speed);
		else																									$(tooltip).show();
	},

	// Function to hide the tooltip
	hideTooltip:function(index) {
		var tooltip = this.tooltips[index];

		if 			(this.effect.type == 'fade')		$(tooltip).fadeOut(this.effect.speed);
		else if (this.effect.type == 'slide')	$(tooltip).slideUp(this.effect.speed);
		else																									$(tooltip).hide();
	},

	updateAnchorDimensions: function() {
		var $anchors = $('.' + this.tooltipClass);
		$anchors.each(function(index) {
				$anchor = $(this);
				this.dimensions = {w:$anchor.width(), h:$anchor.height(), offsetX:$anchor.offset().left, offsetY:$anchor.offset().top};
		})
	},

	render: function() {
		$(document).ready(function() {// When the DOM is ready, execute!
			ichsanTooltipLoader.ieBody = (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;

			$('.' + ichsanTooltipLoader.tooltipClass).each(function(index) {

				$anchor = $(this); // this = anchors[index] => // html element

				// Store the anchor dimension
				this.dimensions = {w:$anchor.width(), h:$anchor.height(), offsetX:$anchor.offset().left, offsetY:$anchor.offset().top};

				// Skip if rel is not found or related tooltip is not found
				if (!this.id || !$(this.id + '-target')) return;

				var tooltip = $('#' + this.id + '-target').get(0);

				// Fix dimension
				for (var i = 0; i < 5; i++) {
					var rounds = $(tooltip).width() + $(tooltip).height();
					var newWidth = rounds * ichsanTooltipLoader.dimensionRatio[0] / (ichsanTooltipLoader.dimensionRatio[0] + ichsanTooltipLoader.dimensionRatio[1]);
					$(tooltip).width(newWidth);
				}

				// Hide
				$(tooltip).css('position', 'absolute');
				$(tooltip).css('z-index', '1000');
				$(tooltip).css('left', '-1000px');
				$(tooltip).css('top', '-1000px');
				// Apply the css first before we get its dimension
				$(tooltip).addClass(ichsanTooltipLoader.tooltipClass + '-target');

				tooltip.dimensions = {w:$(tooltip).width(), h:$(tooltip).height()};  // Store the tooltip dimension
				$(tooltip).remove().appendTo('body');  // Add tooltip to end of BODY for easier positioning

				ichsanTooltipLoader.anchors.push(this); //store reference to each anchor
				ichsanTooltipLoader.tooltips.push(tooltip); //store reference to each tooltip

				// Apply behaviour of this anchor
				$anchor.hover(
					function() { //onMouseover
						ichsanTooltipLoader.positionTooltip(index);
						ichsanTooltipLoader.showTooltip(index);
						ichsanTooltipLoader.tooltipStillNeeded = true;
					},
					function() {
						ichsanTooltipLoader.tooltipStillNeeded = false;
						setTimeout(function() { if (!ichsanTooltipLoader.tooltipStillNeeded) ichsanTooltipLoader.hideTooltip(index) }, 10); // Just in case the quranTooltipStillNeeded is true
					}
				);
				$(tooltip).hover(
					function() {
						ichsanTooltipLoader.tooltipStillNeeded = true;
					},
					function() { //onMouseout
						ichsanTooltipLoader.tooltipStillNeeded = false;
						setTimeout(function() { if (!ichsanTooltipLoader.tooltipStillNeeded) ichsanTooltipLoader.hideTooltip(index) }, 10); // Just in case the quranTooltipStillNeeded is true
					}
				);
				$(window).bind("resize", function(){ ichsanTooltipLoader.updateAnchorDimensions() });
			});

		});
	}
};

ichsanTooltipLoader.render();