/**
 * Copyright (C) 2008 Ignition Commerce.
 * All Rights Reserved.  No use, copying or distribution of this
 * work may be made except in accordance with a valid license
 * agreement from IgnitionCommerce.  This notice must be
 * included on all copies, modifications and derivatives of this
 * work.
 *
 * @Author Brian Boyett
 * @Version 1.0
 * @Since 1.0
 *
 * What does it do?
 * The bubbleMessage javascript allows for the site to display a
 * bubble image with dynamic text and sizing to inform the users
 * of needed information.  It uses the bubble divs offsetParent
 * to determine the cross browser positioning.
 *
 * How do you use it?
 * Copy the following line into any div on the jsp page
 * <jsp:include page="/global/shared/bubbleMessage.jsp"/>
 *
 * Call the setupBubble javascript function.  This function will
 * create the bubble, set the message, position the bubble, &
 * show the bubble when it is ready. Pass it the element id, message,
 * and true or false for wrapping text
 * setupBubble('selectedSize', 'Changed the color', false);
 *
 * Call the javascript function setBubbleVisible when you need to either
 * hide or show the bubble.  Pass it true for 'block' or false for 'none' 
 * because it uses the 'display' option in the css instead of visibility.
 * setBubbleVisible(true);
 */

var container_default_width = 153 + 4; // 4 extra pixels for padding
var container_default_height = 41;
var middle_image_default_width = 122;
var middle_image_default_height = 41;
var left_image_default_width = 24;
var left_image_default_height = 41;
var right_image_default_width = 8;
var right_image_default_height = 41;
var right_resize_padding = 20;
var message_top_padding = 5;
var single_text_line_default_size = 11;
var right_and_left_image_combined_width = (left_image_default_width + right_image_default_width) + 4; // 4 extra pixels for padding
var showOnSetup = true; // default is to show the bubble when they call the setupBubble function

var bubble_Ajax_Cart_Offset = 0;

/*
 * This function takes the id of any element, and sets the bubble
 * message directly over it based on the image height, the elements
 * height, and the position of the element.
 */
function positionBubble(elementID, bubbleContainer, bubbleMessage, resized_left_image_width) {
  	var chosen_element = document.getElementById(elementID);
  	var objTop=0;
  	var objLeft=0;
  	var tempObj=chosen_element;
  	  	
  	var pos = jq(chosen_element).position();
  	objTop = pos.top + bubble_Ajax_Cart_Offset;
  	objLeft = pos.left;
	
  	bubbleContainer.style.top = (objTop - bubbleContainer.offsetHeight) + 'px';
  	bubbleContainer.style.left = objLeft + 'px';
  	
  	bubbleMessage.style.top = message_top_padding + 'px';
  	bubbleMessage.style.left = resized_left_image_width + 'px';
} 

/*
 * This function will set all the elements widths and heights back 
 * to their original values.
 */
function resetToDefaults(bubbleContainer, middleBubbleImage, leftBubbleImage, rightBubbleImage) {
	middleBubbleImage.style.width = middle_image_default_width + 'px';
	leftBubbleImage.style.width = left_image_default_width + 'px';
	rightBubbleImage.style.width = right_image_default_width + 'px';
	bubbleContainer.style.width = container_default_width +'px';
	middleBubbleImage.style.height = middle_image_default_height + 'px';
	leftBubbleImage.style.height = left_image_default_height + 'px';
	rightBubbleImage.style.height = right_image_default_height + 'px';
  	bubbleContainer.style.height = container_default_height +'px';
}

/*
 * This function takes the id of any element, and sets the bubble
 * message directly over it based on the image height, the elements
 * height, and the position of the element.
 * 
 * This function also takes a boolean to determine if the bubble
 * should be displayed automatically or if it will be displayed at
 * a later time.
 */
function setupBubble(element_to_show_message, message, wrapText, showBubble) {
	showOnSetup = showBubble;
	setupBubble(element_to_show_message, message, wrapText);
}

/*
 * This function takes the id of any element, and sets the bubble
 * message directly over it based on the image height, the elements
 * height, and the position of the element.
 */
function setupBubble(element_to_show_message, message, wrapText) {
	if(showOnSetup == true) {
		setBubbleVisible(true);
	}
  	var bubbleMessage = jq('#bubbleMessage').get(0);
  	var middleBubbleImage = jq('#middleBubbleImage').get(0);
  	var leftBubbleImage = jq('#leftBubbleImage').get(0);
  	var rightBubbleImage = jq('#rightBubbleImage').get(0);
  	var bubbleContainer = jq('#bubbleContainer').get(0);
  	
  	resetToDefaults(bubbleContainer, middleBubbleImage, leftBubbleImage, rightBubbleImage);
	setBubbleMessage(message, bubbleMessage);
  	if(wrapText) {
  		bubbleMessage.style.whiteSpace = 'normal';
  	}
  	else {
  		bubbleMessage.style.whiteSpace = 'nowrap';
  	}
  	
  	var messageWidth = bubbleMessage.offsetWidth;
  	middleBubbleImage.style.width = (messageWidth + right_resize_padding) + 'px';
  	bubbleContainer.style.width = (messageWidth + (right_resize_padding + right_and_left_image_combined_width)) + 2 + 'px';
  	
  	var messageHeight = bubbleMessage.offsetHeight;
  	var resized_left_image_width = left_image_default_width;
  	if(wrapText && (messageHeight != (single_text_line_default_size + 2))) { // then change the height
	  	leftBubbleImage.style.height = ((messageHeight + left_image_default_height)) + 'px';
	  	rightBubbleImage.style.height = ((messageHeight + right_image_default_height)) + 'px';
	  	middleBubbleImage.style.height = ((messageHeight + middle_image_default_height)) + 'px';
	  	
	  	// images were resized for height therefore the widths are going to be different
	  	resized_left_image_width = leftBubbleImage.offsetWidth;
	  	var resized_left_image_height = leftBubbleImage.offsetHeight;
	  	var resized_right_image_width = rightBubbleImage.offsetWidth;
	  	var change_difference = ((resized_left_image_width - left_image_default_width) + (resized_right_image_width - right_image_default_width)) + 4;
		middleBubbleImage.style.width = ((messageWidth - change_difference) + right_resize_padding) + 10 + 'px';
	  	bubbleContainer.style.height = ((messageHeight + middle_image_default_height) - single_text_line_default_size) + 'px';
  	}
  	positionBubble(element_to_show_message, bubbleContainer, bubbleMessage, resized_left_image_width);
} 

/*
 * This function sets the message to the bubble
 */
function setBubbleMessage(message, bubbleMessage) {
	bubbleMessage.innerHTML = message;
}

/*
 * This function takes a true or false value and determines
 * if the bubble message should be shown
 */
function setBubbleVisible(show) {
	var bubbleContainer = jq('#bubbleContainer').get(0);
	if (bubbleContainer != null) {
		if(show) {
			bubbleContainer.style.visibility = 'visible';
		}
		else {
			bubbleContainer.style.visibility = 'hidden';
		}
	
		jq(bubbleContainer).bgiframe({ opacity: true });
	}
}