/**
 * HelpBalloon.js
 * Prototype/Scriptaculous based help balloons / dialog balloons
 * @version 2.0.1
 * @requires prototype.js <http://www.prototypejs.org/>
 * @author Beau D. Scott <beau_scott@hotmail.com>
 * 4/10/2008
 */
var HelpBalloon = Object.extend(Class.create(), {
	/**
	 * Enumerated value for dynamic rendering position.
	 * @static
	 */
	POS_DYNAMIC: -1,
	/**
	 * Enumerated value for the top-left rendering position.
	 * @static
	 */
	POS_TOP_LEFT: 0,
	/**
	 * Enumerated value for the top-right rendering position.
	 * @static
	 */
	POS_TOP_RIGHT: 1,
	/**
	 * Enumerated value for the bottom-left rendering position.
	 * @static
	 */
	POS_BOTTOM_LEFT: 2,
	/**
	 * Enumerated value for the bottom-right rendering position.
	 * @static
	 */
	POS_BOTTOM_RIGHT: 3,
	/**
	 * CSS Classname to look for when doing auto link associations.
	 * @static
	 */
	ELEMENT_CLASS_NAME: 'HelpBalloon',
	/**
	 * Global array of all HelpBalloon instances.
	 * (Cheaper than document.getElementByClassName with a property check)
	 * @static
	 * @private
	 */
	_balloons: [],
	/**
	 * Event listener that auto-associates anchors with a dynamic HelpBalloon.
	 * Also begins mouse movement registration
	 * @static
	 */
	registerClassLinks: function(e) {
		$A(document.getElementsByClassName(HelpBalloon.ELEMENT_CLASS_NAME))
			.each(function(obj){
			// Only apply any element with an href tag
			if(obj && obj.tagName && obj.href && obj.href != '')
			{
				new HelpBalloon({
					icon:obj,
					method: 'get'
				});
			}
		});

		Event.observe(document, 'mousemove', HelpBalloon._trackMousePosition);

	},

	/**
	 * Private cache of the client's mouseX position
	 */
	_mouseX: 0,

	/**
	 * Private cache of the client's mouseY position
	 */
	_mouseY: 0,

	/**
	 * @param {Event} e
	 */
	_trackMousePosition: function(e) {
		if(!e) e = window.event;
		HelpBalloon._mouseX = e.clientX;
		HelpBalloon._mouseY = e.clientY;
	}
});

//
// Event for activating HelpBalloon classed links
//
Event.observe(window, 'load', HelpBalloon.registerClassLinks);

HelpBalloon.prototype = {

//
// Properties
//
	/**
	 * Configuration options
	 * @var {HelpBalloon.Options}
	 */
	options: null,

	/**
	 * Containing element of the balloon
	 * @var {Element}
	 */
	container: null,
	/**
	 * Inner content container
	 * @var {Element}
	 */
	inner: null,
	/**
	 * A reference to the anchoring element/icon
	 * @var {Element}
	 */
	icon: null,
	/**
	 * Content container
	 * @var {Element}
	 */
	content: null,
	/**
	 * Closing button element
	 * @var {Element}
	 */
	button: null,
	/**
	 * The closer object. This can be the same as button, but could
	 * also be a div with a png loaded as the back ground, browser dependent.
	 * @var {Element}
	 */
	closer: null,
	/**
	 * Title container
	 * @var {Element}
	 */
	titleContainer: null,
	/**
	 * Background container (houses the balloon images
	 * @var {Element}
	 */
	bgContainer: null,
	/**
	 * Array of balloon image references
	 * @var {Array}
	 */
	balloons: null,

	/**
	 * The local store of 'title'. Will change if the balloon is making a remote call
	 * unless options.title is specified
	 * @var {String}
	 */
	_titleString: null,

	/**
	 * The balloons visibility state.
	 * @var {Boolean}
	 */
	visible: false,

	/**
	 * Rendering status
	 * @var {Boolean}
	 */
	drawn: false,

	/**
	 * Stores the balloon coordinates
	 * @var {Object}
	 */
	balloonCoords: null,

	/**
	 * Width,height of the balloons
	 * @var {Array}
	 */
	balloonDimensions: null,

	/**
	 * ID for HelpBalloon
	 * @var {String}
	 */
	id: null,

	/**
	 * Used at render time to measure the dimensions of the loaded balloon
	 * @private
	 */
	_lastBalloon: null,

//
// Methods
//

	/**
	 * @param {Object} options
	 * @see HelpBalloon.Options
	 * @constructor
	 */
	initialize: function(options)
	{

		this.options = new HelpBalloon.Options();
		Object.extend(this.options, options || {});

		this._titleString = this.options.title;
		this.balloonDimensions = [0,0];

		//
		// Preload the balloon and button images so they're ready
		// at render time
		//
		// 0 1
		//  X
		// 2 3
		//
		this.balloons = [];
		for(var i = 0; i < 4; i++)
		{
			var balloon = new Element('img', {
				src: this.options.balloonPrefix + i + this.options.balloonSuffix
			});
			this.balloons.push(balloon.src);
		}

		this._lastBalloon = balloon;

		this.button = new Element('img', {
			src: this.options.button
		});

		//
		// Create the anchoring icon, or attach the balloon to the given icon element
		// If a string is passed in, assume it's a URL, if it's an object, assume it's
		// a DOM member.
		//
		if(typeof this.options.icon == 'string')
		{
			this.icon = new Element('img', {
				src: this.options.icon,
				id: this.id + "_icon"
			});
			Element.setStyle(this.icon, this.options.iconStyle);
		}
		else
		{
			//
			// Not a string given (most likely an object. Do not append the element
			// Kind of a hack for now, but I'll fix it in the next version.
			//
			this.icon = this.options.icon;
			this.options.returnElement = true;
		}

		this.icon._HelpBalloon = this;

		//
		// Attach rendering events
		//

		for(i = 0; i < this.options.useEvent.length; i++)
			Event.observe(this.icon, this.options.useEvent[i], this.toggle.bindAsEventListener(this));

		this.container = new Element('div');
		this.container._HelpBalloon = this;

		this.id = 'HelpBalloon_' + Element.identify(this.container);

		HelpBalloon._balloons.push(this);

		//
		// If we are not relying on other javascript to attach the anchoring icon
		// to the DOM, we'll just do where the script is called from. Default behavior.
		//
		// If you want to use external JavaScript to attach it to the DOM, attach this.icon
		//
		if(!this.options.returnElement)
		{
			document.write('<span id="' + this.id + '"></span>');
			var te = $(this.id);
			var p = te.parentNode;
			p.insertBefore(this.icon, te);
			p.removeChild(te);
		}
	},

	/**
	 * Toggles the help balloon
	 * @param {Object} e Event
	 */
	toggle: function(event)
	{
		if(!event) event = window.event || {type: this.options.useEvent, target: this.icon};
		var icon = Event.element(event);
		Event.stop(event);
		if(event.type == this.options.useEvent && !this.visible && icon == this.icon)
		{
			this.show(event);
		}
		else
			this.hide();
	},

	/**
	 * Triggers the balloon to appear
	 */
	show: function(event)
	{
		if(!this.visible){
			if(!event) event = window.event;
			if(!this.drawn || !this.options.cacheRemoteContent) this._draw();
			this._reposition(event);
			this._hideOtherHelps();
			if(this.options.showEffect)
			{
				this.options.showEffect(this.container, Object.extend(this.options.showEffectOptions, {
					afterFinish: this._afterShow.bindAsEventListener(this)
				}));
			}
			else
			{
				this._afterShow();
			}
			Event.observe(window, 'resize', this._reposition.bindAsEventListener(this));
		}
	},

	/**
	 * Sets the container to block styling and hides the elements below the
	 * container (if in IE)
	 * @private
	 */
	_afterShow: function()
	{
		Element.setStyle(this.container, {
			'display': 'block'
		});
		this._hideLowerElements();
		this.visible = true;
		if(this.options.autoHideTimeout)
		{
			setTimeout(this._hideQueue.bind(this), this.options.autoHideTimeout);
		}
	},

	/**
	 * Checks the mouse position and triggers a hide after the time specified in autoHideTimeout
	 * if the mouse is not currently over the balloon, otherwise it requeue's a hide for later.
	 */
	_hideQueue: function()
	{
		if(Position.within(this.container, HelpBalloon._mouseX, HelpBalloon._mouseY))
			setTimeout(this._hideQueue.bind(this), this.options.autoHideTimeout);
		else
			this.hide();
	},

	/**
	 * Hides the balloon
	 */
	hide: function()
	{
		if(this.visible)
		{
			this._showLowerElements();
			if(this.options.hideEffect)
			{
				this.options.hideEffect(this.container, Object.extend(this.options.hideEffectOptions, {
					afterFinish: this._afterHide.bindAsEventListener(this)
				}));
			}
			else
			{
				this._afterHide();
			}
			Event.stopObserving(window, 'resize', this._reposition.bindAsEventListener(this));
		}
	},

	/**
	 * Sets the container's display to block
	 * @private
	 */
	_afterHide: function()
	{
		Element.setStyle(this.container, {
			'display': 'none'
		});
		this.visible = false;
	},

	/**
	 * Redraws the balloon based on the current coordinates of the icon.
	 * @private
	 */
	_reposition: function(event)
	{
		if(this.icon.tagName.toLowerCase() == 'area' || !!this.icon.isMap)
		{
			this.balloonCoords = Event.pointer(event);
		}
		else
		{
			this.balloonCoords = this._getXY(this.icon);
			//Horizontal and vertical offsets in relation to the icon's 0,0 position.
			// Default is the middle of the object
			var ho = this.icon.offsetWidth / 2;
			var vo = this.icon.offsetHeight / 2;

			var offsets = this.options.anchorPosition.split(/\s+/gi);
			// Only use the first two specified values
			if(offsets.length > 2)
				offsets.length = 2;

			for(var i = 0; i < offsets.length; i++)
			{
				switch(offsets[i].toLowerCase())
				{
					case 'left':
							ho = 0;
						break;
					case 'right':
							ho = this.icon.offsetWidth;
						break;
					case 'center':
							ho = this.icon.offsetWidth / 2;
						break;
					case 'top':
							vo = 0;
						break;
					case 'middle':
							vo = this.icon.offsetHeight / 2;
						break;
					case 'bottom':
							vo = this.icon.offsetHeight;
						break;
					default:
						var numVal = parseInt(offsets[i]);
						if(!isNaN(numVal))
						{
							// 0 = width, 1 = height (WxH)
							if(i == 0)
							{
								if(numVal < 0)
								{
									ho = 0;
								}
								else
								{
									if(numVal > this.icon.offsetWidth)
										ho = this.icon.offsetWidth;
									else
										ho = numVal
								}
							}
							else
							{
								if(numVal < 0)
								{
									vo = 0;
								}
								else
								{
									if(numVal > this.icon.offsetHeight)
										vo = this.icon.offsetHeight;
									else
										vo = numVal
								}
							}
						}
						break;
				}
			}
			this.balloonCoords.x += ho;
			this.balloonCoords.y += vo;
		}

		//
		// Figure out what position to show based on available realestate
		// unless
		// 0 1
		//  X
		// 2 3
		// Number indicates position of corner opposite anchor
		//
		var pos = 1;
		if(this.options.fixedPosition == HelpBalloon.POS_DYNAMIC)
		{
			var offsetHeight = this.balloonCoords.y - this.balloonDimensions[1];
			if(offsetHeight < 0)
				pos += 2;

			var offsetWidth = this.balloonCoords.x + this.balloonDimensions[0];
			var ww = Prototype.Browser.IE ? document.body.clientWidth : window.outerWidth;
			if(offsetWidth > ww)
				pos -- ;
		}
		else
			pos = this.options.fixedPosition;

		var zx = 0;
		var zy = 0;

		//
		// 0 1
		//  X
		// 2 3
		//
		switch(pos)
		{
			case 0:
				zx = this.balloonCoords.x - this.balloonDimensions[0];
				zy = this.balloonCoords.y - this.balloonDimensions[1];
				break;

			case 1:
				zx = this.balloonCoords.x;
				zy = this.balloonCoords.y - this.balloonDimensions[1];
				break;

			case 2:
				zx = this.balloonCoords.x - this.balloonDimensions[0];
				zy = this.balloonCoords.y;
				break;

			case 3:
				zx = this.balloonCoords.x;
				zy = this.balloonCoords.y;
				break;
		}
		var containerStyle = {
			/*'backgroundRepeat': 'no-repeat',
			'backgroundColor': 'transparent',
			'backgroundPosition': 'top left',*/
			'left' 	: zx + "px",
			'top'	: zy + "px",
			'width' : this.balloonDimensions[0] + 'px',
			'height' : this.balloonDimensions[1] + 'px'
		}
		if(Prototype.Browser.IE)
		{
			//
			// Fix for IE alpha transparencies
			//
			if(this.balloons[pos].toLowerCase().indexOf('.png') > -1)
			{
				Element.setStyle(this.bgContainer, {
					'left' 		: '0px',
					'top'		: '0px',
					'filter'	: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.balloons[pos] + "', sizingMethod='scale')",
					'width' 	: this.balloonDimensions[0] + 'px',
					'height' 	: this.balloonDimensions[1] + 'px',
					'position'	: 'absolute'
				});
			}
			else
				containerStyle['background'] = 'transparent url(' + this.balloons[pos] + ') top left no-repeat';
		}
		else
		{
				containerStyle['background'] = 'transparent url(' + this.balloons[pos] + ') top left no-repeat';
		}
		Element.setStyle(this.container, containerStyle);
	},

	/**
	 * Renders the Balloon
	 * @private
	 */
	_draw: function()
	{
		Element.setStyle(
			this.container,
			Object.extend(this.options.balloonStyle, {
				'position': 	'absolute',
				'display': 		'none'
			})
		);

		var url = this.options.dataURL;

		//
		// Play nicely with anchor tags being used as the icon. Use it's specified href as our
		// data URL unless one has already been used specified in this.options.dataURL.
		// We'll also force a new request with this as it may be an image map.
		//
		if(this.icon.className == 'a')
		{
			if(!this.options.dataURL && this.icon.href != ''){
				url = this.icon.href;
				this.options.cacheRemoteContent = false;
			}
		}

		if(url && (!this.drawn || !this.options.cacheRemoteContent))
		{
			var cont = new Ajax.Request(this.options.dataURL, {asynchronous: false, method: this.options.method});
			//
			// Expects the following XML format:
			// <HelpBalloon>
			// 		<title>My Title</title>
			// 		<content>My content</content>
			// </HelpBaloon>
			//
			var doHTML = false;
			if(cont.transport.responseXML)
			{
				var xml = cont.transport.responseXML.getElementsByTagName('HelpBalloon')[0];

				if(xml)
				{
					if(!this.options.title)
					{
						xmlTitle = xml.getElementsByTagName('title')[0];
						if(xmlTitle) this._titleString = xmlTitle.firstChild.nodeValue;
					}

					xmlContent = xml.getElementsByTagName('content')[0];
					if(xmlContent) this.options.content = xmlContent.firstChild.nodeValue;
				}
				else
					doHTML = true;
			}
			else
				doHTML = true;

			if(doHTML)
			{
				// Attempt to get the title from a <title/> HTML tag, unless the title option has been set. If so, use that.
				if(!this.options.title)
				{
					var htmlTitle = cont.transport.responseText.match(/\<title\>([^\<]+)\<\/title\>/gi);
					if(htmlTitle)
					{
						htmlTitle = htmlTitle.toString().replace(/\<title\>|\<\/title\>/gi, '');
						this._titleString = htmlTitle;
					}
				}
				this.options.content = cont.transport.responseText;
			}
		}

		this.balloonDimensions[0] = this._lastBalloon.width;
		this.balloonDimensions[1] = this._lastBalloon.height;

		var contentDimensions = [
			this.balloonDimensions[0] - (2 * this.options.contentMargin),
			this.balloonDimensions[1] - (2 * this.options.contentMargin)
		];

		var buttonDimensions = [
			this.button.width,
			this.button.height
		];

		//
		// Create all the elements on demand if they haven't been created yet
		//
		if(!this.drawn)
		{
			this.inner = new Element('div');

			this.titleContainer = new Element('div');
			this.inner.appendChild(this.titleContainer);

			// PNG fix for IE
			if(Prototype.Browser.IE && this.options.button.toLowerCase().indexOf('.png') > -1)
			{
				this.bgContainer = new Element('div');

				// Have to create yet-another-child of container to house the background for IE... when it was set in
				// the main container, it for some odd reason prevents child components from being clickable.
				this.container.appendChild(this.bgContainer);

				this.closer =  new Element('div');
				Element.setStyle(this.closer, {
					'filter':
						"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.options.button + "', sizingMethod='scale')"
				});
			}
			else
			{
				this.closer = this.button;
			}

			Event.observe(this.closer, 'click', this.toggle.bindAsEventListener(this));
			this.inner.appendChild(this.closer);

			this.content =  new Element('div');
			this.inner.appendChild(this.content);

			this.container.appendChild(this.inner);

			document.getElementsByTagName('body')[0].appendChild(this.container);

			this.drawn = true;
		}

		// Reset the title element and reappend the title value (could have changed with a new URL)
		this.titleContainer.innerHTML = '';
		this.titleContainer.appendChild(document.createTextNode(this._titleString));

		// Reset content value:
		this.content.innerHTML = this.options.content;

		//
		// Reapply styling to components as values might have changed
		//

		Element.setStyle(this.inner, {
			'position': 	'absolute',
			'top':			this.options.contentMargin + 'px',
			'left':			this.options.contentMargin + 'px',
			'width': 		contentDimensions[0] + 'px',
			'height': 		contentDimensions[1] + 'px'
		});

		Element.setStyle(this.titleContainer, {
			'width':		(contentDimensions[0] - buttonDimensions[0]) + 'px',
			'height':		buttonDimensions[1] + 'px',
			'position':		'absolute',
			'overflow':		'hidden',
			'top': 			'0px',
			'left': 		'0px'
		});

		Element.setStyle(this.titleContainer, this.options.titleStyle);

		Element.setStyle(this.closer, {
			'width': buttonDimensions[0] + 'px',
			'height': buttonDimensions[1] + 'px',
			'cursor': 	'pointer',
			'position':	'absolute',
			'top': 		'0px',
			'right': 	'0px'
		});

		Element.setStyle(this.content, {
			'width':		contentDimensions[0] + 'px',
			'height': 		(contentDimensions[1] - this.button.height) + 'px',
			'overflow': 	'auto',
			'position': 	'absolute',
			'top': 			buttonDimensions[1] + 'px',
			'left': 		'0px',
			'fontFamily': 	'verdana',
			'fontSize': 	'11px',
			'fontWeight': 	'normal',
			'color': 		'black'
		});

	},

	/**
	 * Gets the current position of the obj
	 * @param {Element} element to get position of
	 * @return Object of (x, y, x2, y2)
	 */
	_getXY: function(obj)
	{
		var pos = Position.cumulativeOffset(obj)
		var y = pos[1];
		var x = pos[0];
		var x2 = x + parseInt(obj.offsetWidth);
		var y2 = y + parseInt(obj.offsetHeight);
		return {'x':x, 'y':y, 'x2':x2, 'y2':y2};

	},

	/**
	 * Determins if the object is a child of the balloon element
	 * @param {Element} Element to check parentage
	 * @return {Boolean}
	 * @private
	 */
	_isChild: function(obj)
	{
		var i = 15;
		do{
			if(obj == this.container)
				return true;
			obj = obj.parentNode;
		}while(obj && i--);
		return false
	},

	/**
	 * Determines if the balloon is over this_obj object
	 * @param {Element} Object to look under
	 * @return {Boolean}
	 * @private
	 */
	_isOver: function(this_obj)
	{
		if(!this.visible) return false;
		if(this_obj == this.container || this._isChild(this_obj)) return false;
		var this_coords = this._getXY(this_obj);
		var that_coords = this._getXY(this.container);
		if(
			(
			 (
			  (this_coords.x >= that_coords.x && this_coords.x <= that_coords.x2)
			   ||
			  (this_coords.x2 >= that_coords.x &&  this_coords.x2 <= that_coords.x2)
			 )
			 &&
			 (
			  (this_coords.y >= that_coords.y && this_coords.y <= that_coords.y2)
			   ||
			  (this_coords.y2 >= that_coords.y && this_coords.y2 <= that_coords.y2)
			 )
			)

		  ){
			return true;
		}
		else
			return false;
	},

	/**
	 * Restores visibility of elements under the balloon
	 * (For IE)
	 * TODO: suck yourself
	 * @private
	 */
	_showLowerElements: function()
	{
		if(this.options.hideUnderElementsInIE)
		{
			var elements = this._getWeirdAPIElements();
			for(var i = 0; i < elements.length; i++)
			{
				if(this._isOver(elements[i]))
				{
					if(elements[i].style.visibility != 'visible' && elements[i].hiddenBy == this)
					{
						elements[i].style.visibility = 'visible';
						elements[i].hiddenBy = null;
					}
				}
			}
		}
	},

	/**
	 * Hides elements below the balloon
	 * (For IE)
	 * @private
	 */
	_hideLowerElements: function()
	{
		if(this.options.hideUnderElementsInIE)
		{
			var elements = this._getWeirdAPIElements();
			for(var i = 0; i < elements.length; i++)
			{
				if(this._isOver(elements[i]))
				{
					if(elements[i].style.visibility != 'hidden')
					{
						elements[i].style.visibility = 'hidden';
						elements[i].hiddenBy = this;
					}
				}
			}
		}
	},

	/**
	 * Determines which elements need to be hidden
	 * (For IE)
	 * @return {Array} array of elements
	 */
	_getWeirdAPIElements: function()
	{
		if(!Prototype.Browser.IE) return [];
		var objs = ['select', 'input', 'object'];
		var elements = [];
		for(var i = 0; i < objs.length; i++)
		{
			var e = document.getElementsByTagName(objs[i]);
			for(var j = 0; j < e.length; j++)
			{
				elements.push(e[j]);
			}
		}
		return elements;
	},

	/**
	 * Hides the other visible help balloons
	 * @param {Event} e
	 */
	_hideOtherHelps: function(e)
	{
		if(this.options.hideOtherBalloonsOnDisplay)
		{
			$A(HelpBalloon._balloons).each(function(obj){
				if(obj != this)
				{
					obj.hide();
				}
			}.bind(this));
		}
	}
};

/**
 * HelpBalloon.Options
 * Helper class for defining options for the HelpBalloon object
 * @author Beau D. Scott <beau_scott@hotmail.com>
 */
HelpBalloon.Options = Class.create();
HelpBalloon.Options.prototype = {

	/**
	 * @constructor
	 * @param {Object} overriding options
	 */
	initialize: function(values){
		// Apply the overriding values to this
		Object.extend(this, values || {});
	},

	/**
	 * Show Effect
	 * The Scriptaculous (or compatible) showing effect function
	 * @var Function
	 */
	showEffect: window.Scriptaculous ? Effect.Appear : null,

	/**
	 * Show Effect options
	 */
	showEffectOptions: {duration: 0.2},

	/**
	 * Hide Effect
	 * The Scriptaculous (or compatible) hiding effect function
	 * @var Function
	 */
	hideEffect: window.Scriptaculous ? Effect.Fade : null,

	/**
	 * Show Effect options
	 */
	hideEffectOptions: {duration: 0.2},

	/**
	 * For use with embedding this object into another. If true, the icon is not created
	 * and not appeneded to the DOM at construction.
	 * Default is false
	 * @var {Boolean}
	 */
	returnElement: false,

	/**
	 * URL to the anchoring icon image file to use. This can also be a direct reference
	 * to an existing element if you're using that as your anchoring icon.
	 * @var {Object}
	 */
	icon: 'images/icon.gif',

	/**
	 * Alt text of the help icon
	 * @var {String}
	 */
	altText: 'Click here for help with this topic.',

	/**
	 * URL to pull the title/content XML
	 * @var {String}
	 */
	dataURL: null,

	/**
	 * Static title of the balloon
	 * @var {String}
	 */
	title: null,

	/**
	 * Static content of the balloon
	 * @var {String}
	 */
	content: null,

	/**
	 * The event type to listen for on the icon to show the balloon.
	 * Default 'click'
	 * @var {String}
	 */
	useEvent: ['click'],

	/**
	 * Request method for dynamic content. (get, post)
	 * Default 'get'
	 * @var {String}
	 */
	method:	'get',

	/**
	 * Flag indicating cache the request result. If this is false, every
	 * time the balloon is shown, it will retrieve the remote url and parse it
	 * before the balloon appears, updating the content. Otherwise, it will make
	 * the call once and use the same content with each subsequent showing.
	 * Default true
	 * @var {Boolean}
	 */
	cacheRemoteContent: true,

	/**
	 * Vertical and horizontal margin of the content pane
	 * @var {Number}
	 */
	contentMargin: 35,

	/**
	 * X coordinate of the closing button
	 * @var {Number}
	 */
	buttonX: 246,

	/**
	 * Y coordinate of the closing button
	 * @var {Number}
	 */
	buttonY: 35,

	/**
	 * Closing button image path
	 * @var {String}
	 */
	button: 'images/button.png',

	/**
	 * Balloon image path prefix. There are 4 button images, numerically named, starting with 0.
	 * 0 1
	 *  X
	 * 2 3
	 * X indicates the anchor corner
	 * @var {String}
	 */
	balloonPrefix: 'images/balloon-',

	/**
	 * The image filename suffix, including the file extension
	 * @var {String}
	 */
	balloonSuffix: '.png',

	/**
	 * Position of the balloon's anchor relative to the icon element.
	 * Combine one horizontal indicator (left, center, right) and one vertical indicator (top, middle, bottom).
	 * Numeric values can also be used in an X Y order. So a value of 9 13 would place the anchor 9 pixels from
	 * the left and 13 pixels below the top. (0,0 is top left). If values are greater than the width or height
	 * the width or height of the anchor are used instead. If less than 0, 0 is used.
	 * Default is 'center middle'
	 * @var {String}
	 */
	anchorPosition: 'center middle',

	/**
	 * Flag indicating whether to hide the elements under the balloon in IE.
	 * Setting this to false can cause rendering issues in Internet Explorer
	 * as some elements appear on top of the balloon if they're not hidden.
	 * Default is true.
	 * @var {Boolean}
	 */
	hideUnderElementsInIE: true,

	/**
	 * Default Balloon styling
	 * @var {Object}
	 */
	balloonStyle: {},

	/**
	 * Default Title Bar style
	 * @var {Object}
	 */
	titleStyle: {
		'color': 'black',
		'fontSize': '16px',
		'fontWeight': 'bold',
		'fontFamily': 'Verdana'
	},

	/**
	 * Icon custom styling
	 * @var {Object}
	 */
	iconStyle: {
		'cursor': 'pointer'
	},

	/**
	 * Flag indication whether to automatically hide any other visible HelpBalloon on the page before showing the current one.
	 * @var {Boolean}
	 */
	hideOtherBalloonsOnDisplay: true,

	/**
	 * If you want the balloon to always display in a particular location, set this
	 */
	fixedPosition: HelpBalloon.POS_DYNAMIC,

	/**
	 * Number of milliseconds to hide the balloon after showing and after the mouse is not over the balloon.
	 * A value of 0 means it will not auto-hide
	 * @var {Number}
	 */
	autoHideTimeout: 0

};