/**
 * Tooltip component
 *
 * Controls behaviour / animation of the tooltip component (example: sitemaker.html) via jQuery
 * See the end of this file for example html/css to accompany this script
 * 
 * Uses revealing module JS pattern as described here:
 * 	http://peter.michaux.ca/articles/how-i-write-javascript-widgets
 * 	http://www.wait-till-i.com/2007/08/22/again-with-the-module-pattern-reveal-something-to-the-world/
 * 
 * @filesource ~/js/nui.tooltip.js
 * @package Namesco UI
 * @subpackage Components
 *
 * @uses ~/js/jquery.min.js jQuery 1.2+ (minified)
 * 
 * @uses ToolTip principal object, holding all functions and variables used
 * 
 * @uses ToolTip.init() Script initialisation
 * 
 * @author Tim Curzon
 * @version 1.0
 * @changed 12/11/2008
 *
 */

(function(){
	
	// global equals "this"
	var global = this;

	// locally accessible helper functions
	// can be dropped here as required

	/**
	 * ToolTip
	 * 
	 * The container for all functions and variables used within the tooltip component
	 * 
	 * @author Tim Curzon
	 * @version 1.0
	 * @since 1.0
	 * 
	 */
	// principal object constructor
	global.ToolTip = function(){
			
		/**
		 * private data store (container object)
		 * 
		 * A collection of private variables used throughout the object
		 * 
		 * @since 1.0
		 */
		var store = {
			tooltip_class:	".tooltip",		// tooltip class name
			ani_duration:	350				// duration of animations
		};
	
		/**
		 * init
		 *
		 * Initialise all tooltips - adjust css and add rollover functionality
		 *
		 * @return null
		 *
		 * @author Tim Curzon
		 * @version 1.0
		 * @since 1.0
		 */
		var init = function() {
			
			// add rollover behaviour to tooltips
			utils.activate_tooltips();
			
		};

		/**
		 * utils (container object)
		 * 
		 * A collection of common functions used by all 
		 * 
		 * @since 1.0
		 */
		var utils = {
			
			/**
			 * activate_tooltips
			 * 
			 * Attatches tooltip hover functionality to tooltip icons
			 *
			 * @return false
			 *
			 * @author Tim Curzon
			 * @version 1.0
			 * @since 1.0
			 */
			activate_tooltips : function(){
				
				// on tooltip mouse over, show appropriate tooltip & attach to cursor
				$(store.tooltip_class).mouseover(function() {
					var tooltip_content = $(this).attr("rel");
					$("#"+tooltip_content).fadeIn(store.ani_duration);
					
					$(this).mousemove(function(e) {			
						$("#"+tooltip_content).css("top", e.pageY + "px");
						$("#"+tooltip_content).css("left", e.pageX + 20 + "px");
					});
				});
				
				// on tooltip mouse out, hide tooltip
				$(store.tooltip_class).mouseout(function() { 
					var tooltip_content = $(this).attr("rel");
					$("#"+tooltip_content).hide();
				});
			
			}
			
		};

		// return public pointers
		return {
			init: init
		};
		
	}();
	
})();

/**
 * Inititalise script
 * 
 * Call init() functions / perform any final startup tasks
 */
$(document).ready(function(){
	ToolTip.init();
});

/**
 * Example html / css
 * 
 * This html / css would accompany the javascript above. Note that the element the tooltip
 * is attached to (with the .tooltip class) will need to be styled seperately
 * 
 * @author Phase 8 / Andrew Warburton / Tim Curzon
 * @version 1.0
 * @since 1.0
 */

/* the HTML

<th class="tooltip" rel="tooltip_advertfree">
    Advert Free
    <div id="tooltip_advertfree" class="tooltip_popup">
        <h4>Advert Free</h4>
        <p>Adsense allows you to earn money from relevant adverts placed on your website. Google AdSense matches adverts to your website's content.
            Each time an advert is clicked you receive revenue for the visit.
        </p>
        <p>SiteMaker and SiteMakerPro are advert free allowing you to add your own AdSense account, making revenue from clickthroughs. 
            SiteMakerFREE contains Google AdSense as a default and does not allow you to add your own account to the website. Relevant 
            Google adverts will appear on all SiteMakerFREE websites as standard.
        </p>
    </div>
</th>

*/

/* the CSS
 * 
.tooltip_popup {
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	width: 300px;
	padding: 10px 10px 5px 10px;
	font-family: arial, helvetica ,sans-serif;
	border: 2px solid red;
	background-color: #fff;
	z-index: 9999;
}

.tooltip_popup h4 {
	font-size: 14px;
	margin: 0 0 5px 0;

}

.tooltip_popup p {
	margin: 0 0 10px;
	font-size: 12px !important;
	font-weight: 100 !important;
}

*/// JavaScript Document