/**
 * This javascript file should be used for global common functions.
 *
 * THIS SCRIPT REQUIRES "hits_slider.js" TO ALSO BE INCLUDED!
 *   (-> due to usage of method replaceInFilePathAttribute(...)) [tb]
 *
 * @since 23.07.2009
 * @author christine.medon
 */

/** --------------------- START Tooltip Functions -------------------------------------- */
/**
 * Method adds a tooltip to given element
 * @param element required param which contains either the object itself or the id of the object to which the tooltip should be added
 * @param text the string value which should be shown within the tooltip
 * @param contentId the id of one object, whose (innerHTML) content should be shown within the tooltip,
 *  should be used as alternative to the text parameter, if there's more tooltip content needed as a simple String value.
 * 	If both parameters 'text' and 'contentId' are not null, the value of the contentId object (if it exists) is preferred to the text value.
 *  If the element to which the tooltip should be added and/or the text which should be shown aren't existing, no tooltip is created.
 */
function addTooltip(element, text, contentId, style) {
  if ((style == null) || (style == '')) {
	  style = 'lightgrey';
  }
  if (element.tagName == undefined) {
	  element = document.getElementById(element);
  }
  if ((contentId != null) && (contentId != '')) {
	var content = document.getElementById(contentId);
	if (content) {
	  text = content.innerHTML;
	}
  }
  if ((element != null) && (text != null) && (text != '')) {
	new Tip(element, text, {
	  style: style
	});
  }
}


/**
 * Automatically closes open tooltips on mouse click.
 */
document.observe('click', function() { Tips.hideAll(); });


/**
 * Shows an ajax toolip. Must be called in the "onmouseup"-eventhandler
 * of a node, and you MUST return false at the end of the call, so that
 * call should look like this:
 *
 * <img class="toggleAjaxPrototip" onmouseup="showAjaxTooltip('#{productOverlayUrl}', this.id); return false;" id="prototip#{tableIdentifier}#{i}" src="/r/images/buttons/arrow_20_closed.gif" style="vertical-align: middle;padding-right: 5px;" />
 *
 * @param ajaxURI the URI to load the AJAX data from
 * @param the element to add the prototip
 * @return
 */
function showAjaxTooltip(ajaxURI, elementID) {
	var element = document.getElementById(elementID);

	if (!element.tip) {
		addAjaxPrototip(element, ajaxURI, 'lightgreySwitching');
	}
}


/**
 * HELPER METHOD, NOT INTENDED TO BE CALLED DIRECTLY!
 *
 * Makes the given element "slide out" downwards.
 *
 * @param element the element to be slided
 *
 * @return the new Effect-instance
 */
function makeBlindDown(element) {
	var elementId = element.id;

	var queue = Effect.Queues.get(elementId);
	if ((queue.effects.length > 0) && (queue.effects[queue.effects.length-1].options.effectName === 'blinddown')) {
	 	// prevent the queue accepts two identical slides (caused by timing inaccuracies)
		return;
	}

	element.makeClipping();

	replaceInFilePathAttribute(element.arrow, 'src', /closed/g, 'open');

	var setupObject = Object.extend({
		effectName: 'blinddown',
		duration: 0.6,
		queue:{limit:2, scope:elementId, position:'end'},
		scaleContent: false,
		scaleX: false,
		scaleFrom: 0,
		scaleMode: {originalHeight: element.originalSize.height, originalWidth: element.originalSize.height},
		restoreAfterFinish: true,
		afterSetup: function(effect) {
			effect.element.setStyle({height: '0px'}).setStyle("visibility:visible");
			effect.element.isOpened = true;				// enhancement TB: not set in scriptaculous, but useful not working with prototype-interna state flags
			effect.element.animationRuns = true;
		},
		afterFinishInternal: function(effect) {
			effect.element.undoClipping();
			effect.element.animationRuns = false;
		}
	}, arguments[1] || { });

	return new Effect.Scale(element, 100, setupObject);
}


 /**
  * HELPER METHOD, NOT INTENDED TO BE CALLED DIRECTLY!
  *
  * Makes the given element "slide in" upwards.
  *
  * @param element the element to be slided
  *
  * @return the new Effect-instance
  */
function makeBlindUp(element) {
	var elementId = element.id;

	var queue = Effect.Queues.get(elementId);
	if ((queue.effects.length > 0) && (queue.effects[queue.effects.length-1].options.effectName === 'blindup')) {
		// prevent the queue accepts two identical slides (caused by timing inaccuracies)
		return;
	}

	element.makeClipping();

	replaceInFilePathAttribute(element.arrow, 'src', /open/g, 'closed');

	return new Effect.Scale(element, 0,
			Object.extend({
				effectName: 'blindup',
				scaleContent: false,
				duration: 0.6,
				scaleX: false,
				scaleMode: {originalHeight: element.originalSize.height, originalWidth: element.originalSize.height},
				queue:{limit:2, scope:elementId, position:'end'},
				restoreAfterFinish: true,
				afterSetup: function(effect) {
					effect.element.makeClipping();
					effect.element.setStyle("visibility:visible"); // bugfix TB: needed in order to chain effects in queue, misses in scriptaculous
					effect.element.isOpened = false;        // enhancement TB: not set in scriptaculous, but useful not working with prototype-interna state flags
					effect.element.animationRuns = true;
				},
				afterFinishInternal: function(effect) {
					effect.element.hideR();
					effect.element.undoClipping();
					effect.element.animationRuns = false;
				}
			}, arguments[1] || { }));
}

/**
 * Makes the given element having an AJAX driven prototip. If you
 * wanna use it "automatically", use the <img />-tag as described
 * in the initAjaxPrototips() method above!
 *
 * @param element the element to set an ajax tooltip for
 * @param contentUrl the (ajax request) URL to obtain the tooltip content from
 * @param style the prototip-style to be used
 * @return nothing
 */
function addAjaxPrototip(element, contentUrl, style) {
	if ((style == null) || (style == '')) {
		style = 'lightgrey';
	}

	if (element.tagName == undefined) {
		element = document.getElementById(element);
	}

	if ((element != null) && (contentUrl != null) && (contentUrl != '')) {
		element.canBeShown = false;

		element.tip = new Tip(element, {
			ajax: {
				url: contentUrl
			},
			style: style
		});

		prepareAjaxTooltipTarget(element, element.tip.wrapper);

	}
}

/**
 * Shows an ajax toolip. Must be called in the "onmouseup"-eventhandler
 * of a node, and you MUST return false at the end of the call, so that
 * call should look like this:
 *
 * <span class="toggleAjaxPrototip" onmouseup="showAjaxTooltip('#{productOverlayUrl}', this.id); return false;" id="spanID" >keyword</span>
 *
 * @param ajaxURI the URI to load the AJAX data from
 * @param the element to add the prototip
 * @return
 */
function showSimpleAjaxTooltip(ajaxURI, elementID, style) {
	var element = document.getElementById(elementID);

	if (!element.tip) {
		addSimpleAjaxPrototip(element, ajaxURI, style);
	}
}

/**
 * Makes the given element having an AJAX driven prototip.
 *
 * @param element the element to set an ajax tooltip for
 * @param contentUrl the (ajax request) URL to obtain the tooltip content from
 * @param style the prototip-style to be used
 * @return nothing
 */
function addSimpleAjaxPrototip(element, contentUrl, style) {
	if ((style == null) || (style == '')) {
		style = 'lightgreyClickable';
	}

	if (element.tagName == undefined) {
		element = document.getElementById(element);
	}

	if ((element != null) && (contentUrl != null) && (contentUrl != '')) {

		element.tip = new Tip(element, {
			ajax: {
				url: contentUrl
			},
			style: style
		});
	}
}


/**
 * Prepares the given trigger node (the arrow to click on to open the tooltip)
 * and the tooltip node (the DIV-element prototip creates for being the tooltip)
 * so they can be animated for makeBlindUp() and makeBlindDown().
 *
 * @param triggerNode the DOM NODE of the trigger, must have unique ID
 * @param tipNode the tooltip node, normally equal to triggerNode.tip.wrapper
 *
 * @return nothing
 */
function prepareAjaxTooltipTarget(triggerNode, tipNode) {
	tipNode.id = "wrap" + triggerNode.id;
	tipNode.animationRuns = false;
	tipNode.arrow = triggerNode;

	tipNode.showR = tipNode.show;
	tipNode.hideR = tipNode.hide;

	tipNode.show = function() {
		tipNode.showR();
		tipNode.setStyle("visibility:hidden");
	}

	tipNode.hide = function() {
		if ((!tipNode.isOpened) && (tipNode.animationRuns == false)) {
			tipNode.hideR();
		}
	}

	tipNode.isOpened = false;

	triggerNode.observe('prototip:shown', function(event) {
		if (tipNode.sizeWasStored != true) {
			tipNode.originalSize = tipNode.getDimensions(tipNode);
			tipNode.sizeWasStored = true;
		}

		makeBlindDown(tipNode);
	});

	triggerNode.observe('prototip:hidden', function(event) {
		makeBlindUp(tipNode);
	});
}

/** add some own style definitions to the Prototip.Styles map */
Prototip.Styles['lightgrey'] = {
  className: 'lightgrey',
  border: 3,
  borderColor: '#e7e7e7',
  images: 'styles/lightgrey/',
  radius: 3,
  stem: { position: 'topLeft', height: 12, width: 15 },
  viewport: true,
  hideOthers: true
};

Prototip.Styles['lightgreyClickable'] = {
		  className: 'lightgrey',
		  border: 3,
		  borderColor: '#e7e7e7',
		  images: 'styles/lightgrey/',
		  radius: 3,
		  offset: { x: 5, y: 15 },
		  stem: { position: 'topLeft', height: 12, width: 15 },
		  hideOn: { element: 'closeButton', event: 'click' },
		  hideOthers: true,
		  viewport: true
		};

Prototip.Styles['lightgreySwitching'] = {
		  className: 'transparent',
		  border: 0,
		  borderColor: 'transparent',
		  images: 'styles/lightgrey/',
		  offset: { x: -7, y: 19 },
		  fixed: true,
		  showOn: 'click',
		  hideOn: 'click',
		  hideOthers: true,
		  viewport: true
		};

Prototip.Styles['transparentDontHideOthers'] = {
		  className: 'transparent',
		  border: 0,
		  borderColor: 'transparent',
		  images: 'styles/lightgrey/',
		  radius: 0,
		  offset: { x: 10, y: 10 },
		  viewport: true
		};

Prototip.Styles['transparent'] = {
		  className: 'transparent',
		  border: 0,
		  borderColor: 'transparent',
		  images: 'styles/lightgrey/',
		  radius: 0,
		  offset: { x: 10, y: 10 },
		  hideOthers: true,
		  viewport: true
		};

Prototip.Styles['smartTagTooltip'] = {
		  className: 'lightgrey',
		  border: 3,
		  borderColor: '#e7e7e7',
		  images: 'styles/lightgrey/',
		  radius: 3,
		  offset: { x: 5, y: 15 },
		  stem: { position: 'topLeft', height: 12, width: 15 },
		  hideOn: { element: 'closeButton', event: 'click' },
		  hideOthers: true,
		  viewport: true,
		  fixed: true
		};
/** end of own style definitions for Prototip.Styles map */
/** --------------------- END Tooltip Functions -------------------------------------- */