/* * jQuery clueTip plugin * Version 0.9.2.1 (10/07/2007) * @requires jQuery v1.1.1+ * @requires Dimensions plugin  * * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html */(function($) {  var $cluetip, $cluetipInner, $cluetipOuter, $cluetipTitle, $dropShadow, imgCount; $.fn.cluetip = function(options) { var defaults = { // set up default options width: 275, height: 'auto', cluezIndex: 97, positionBy: 'auto', topOffset: 15, leftOffset: 15, local: false, hideLocal: true, attribute: 'rel', titleAttribute: 'title', splitTitle: '', showTitle: true, cluetipClass: 'default', hoverClass: '', waitImage: true, cursor: 'pointer', arrows: false,  dropShadow: true, dropShadowSteps: 6, sticky: false, mouseOutClose: false, activation: 'hover', closePosition: 'top', closeText: 'Close', truncate: 0, fx: {  open: 'show', openSpeed: '' },  hoverIntent: {  sensitivity: 3, 			 interval: 50, 			 timeout: 0 },  onActivate: function(e) {return true;}, onShow: function(ct, c){}, ajaxCache: true,  ajaxProcess: function(data) { data = $(data).not('style, meta, link, script, title'); return data; },  ajaxSettings: {  dataType: 'html' } };  if (options && options.ajaxSettings) { $.extend(defaults.ajaxSettings, options.ajaxSettings); delete options.ajaxSettings; } if (options && options.fx) { $.extend(defaults.fx, options.fx); delete options.fx; } if (options && options.hoverIntent) { $.extend(defaults.hoverIntent, options.hoverIntent); delete options.hoverIntent; } $.extend(defaults, options); return this.each(function() { var cluetipContents = false; var cluezIndex = parseInt(defaults.cluezIndex, 10)-1; var isActive = false; if (!$cluetip) { $cluetipInner = $('<div id="cluetip-inner"></div>'); $cluetipTitle = $('<h3 id="cluetip-title"></h3>');  $cluetipOuter = $('<div id="cluetip-outer"></div>').append($cluetipInner).prepend($cluetipTitle); $cluetip = $('<div></div>').attr({'id': 'cluetip'}).css({zIndex: defaults.cluezIndex}) .append($cluetipOuter)[insertionType](insertionElement).hide(); $('<div id="cluetip-waitimage"></div>').css({position: 'absolute', zIndex: cluezIndex-1}) .insertBefore('#cluetip').hide(); $cluetip.css({position: 'absolute', zIndex: cluezIndex}); $cluetipOuter.css({position: 'relative', zIndex: cluezIndex+1}); } var dropShadowSteps = (defaults.dropShadow) ? +defaults.dropShadowSteps : 0; if (!$dropShadow) { $dropShadow = $([]); for (var i=0; i < dropShadowSteps; i++) { $dropShadow = $dropShadow.add($('<div></div>').css({zIndex: cluezIndex-i-1, opacity:.1, top: 1+i, left: 1+i})); }; $dropShadow.css({position: 'absolute', backgroundColor: '#000'}) .prependTo($cluetip); } var $this = $(this);  var tipAttribute = $this.attr(defaults.attribute), ctClass = defaults.cluetipClass; if (!tipAttribute && !defaults.splitTitle) return true; if (defaults.local && defaults.hideLocal) { $(tipAttribute).hide(); } var tOffset = parseInt(defaults.topOffset, 10), lOffset = parseInt(defaults.leftOffset, 10); var tipHeight, wHeight; var defHeight = isNaN(parseInt(defaults.height, 10)) ? 'auto' : (/\D/g).test(defaults.height) ? defaults.height : defaults.height + 'px'; var sTop, linkTop, posY, tipY, mouseY; var tipWidth = parseInt(defaults.width, 10) + parseInt($cluetip.css('paddingLeft')) + parseInt($cluetip.css('paddingRight')) + dropShadowSteps; if( isNaN(tipWidth) ) tipWidth = 275; var linkWidth = this.offsetWidth; var linkLeft, posX, tipX, mouseX, winWidth; var tipParts; var tipTitle = (defaults.attribute != 'title') ? $this.attr(defaults.titleAttribute) : ''; if (defaults.splitTitle) { tipParts = tipTitle.split(defaults.splitTitle); tipTitle = tipParts.shift(); } var localContent;/*************************************** * ACTIVATION****************************************/ var activate = function(event) { if (!defaults.onActivate($this)) { return false; } isActive = true; $cluetip.removeClass().css({width: defaults.width}); if (tipAttribute == $this.attr('href')) { $this.css('cursor', defaults.cursor); } $this.attr('title',''); if (defaults.hoverClass) { $this.addClass(defaults.hoverClass); } linkTop = posY = $this.offset().top; linkLeft = $this.offset().left; mouseX = event.pageX; mouseY = event.pageY; if ($this[0].tagName.toLowerCase() != 'area') { sTop = $(document).scrollTop(); winWidth = $(window).width(); } if (defaults.positionBy == 'fixed') { posX = linkWidth + linkLeft + lOffset; $cluetip.css({left: posX}); } else { posX = (linkWidth > linkLeft && linkLeft > tipWidth) || linkLeft + linkWidth + tipWidth + lOffset > winWidth  ? linkLeft - tipWidth - lOffset  : linkWidth + linkLeft + lOffset; if ($this[0].tagName.toLowerCase() == 'area' || defaults.positionBy == 'mouse' || linkWidth + tipWidth > winWidth) { // position by mouse if (mouseX + 20 + tipWidth > winWidth) {  posX = (mouseX - tipWidth - lOffset) >= 0 ? mouseX - tipWidth - lOffset : mouseX - (tipWidth/2); } else { posX = mouseX + lOffset; } var pY = posX < 0 ? event.pageY + tOffset : event.pageY; } $cluetip.css({left: (posX > 0 && defaults.positionBy != 'bottomTop') ? posX : (mouseX + (tipWidth/2) > winWidth) ? winWidth/2 - tipWidth/2 : Math.max(mouseX - (tipWidth/2),0)}); } wHeight = $(window).height(); if (tipParts) { for (var i=0; i < tipParts.length; i++){ if (i == 0) { $cluetipInner.html(tipParts[i]); } else {  $cluetipInner.append('<div class="split-body">' + tipParts[i] + '</div>'); }  }; cluetipShow(pY); }/**************************************** load external file via ajax ***************************************/ else if (!defaults.local && tipAttribute.indexOf('#') != 0) { if (cluetipContents && defaults.ajaxCache) { $cluetipInner.html(cluetipContents); cluetipShow(pY); } else { var ajaxSettings = defaults.ajaxSettings; ajaxSettings.url = tipAttribute; ajaxSettings.beforeSend = function() { $cluetipOuter.children().empty(); if (defaults.waitImage) { $('#cluetip-waitimage') .css({top: mouseY-10, left: parseInt(posX+(tipWidth/2),10)}) .show(); } }; ajaxSettings.error = function() { if (isActive) { $cluetipInner.html('<i>sorry, the contents could not be loaded</i>'); } }; ajaxSettings.success = function(data) { cluetipContents = defaults.ajaxProcess(data); if (isActive) { $cluetipInner.html(cluetipContents); } }; ajaxSettings.complete = function() { 	imgCount = $('#cluetip-inner img').length; 		if (imgCount) { 		 $('#cluetip-inner img').load( function(){ 			imgCount--; 			if (imgCount<1) { 				$('#cluetip-waitimage').hide(); 			 if (isActive) cluetipShow(pY); 			} 		 });  		} else { 				$('#cluetip-waitimage').hide(); 		 if (isActive) cluetipShow(pY);  		}  }; $.ajax(ajaxSettings); }/**************************************** load an element from the same page***************************************/ } else if (defaults.local && tipAttribute.indexOf('#') == 0){ var localContent = $(tipAttribute).html(); $cluetipInner.html(localContent); cluetipShow(pY); } }; var cluetipShow = function(bpY) { $cluetip.addClass('cluetip-' + ctClass);  if (defaults.truncate) {  var $truncloaded = $cluetipInner.text().slice(0,defaults.truncate) + '...'; $cluetipInner.html($truncloaded); } function doNothing() {}; //empty function tipTitle ? $cluetipTitle.show().html(tipTitle) : (defaults.showTitle) ? $cluetipTitle.show().html('&nbsp;') : $cluetipTitle.hide(); if (defaults.sticky) { var $closeLink = $('<div id="cluetip-close"><a href="#">' + defaults.closeText + '</a></div>'); (defaults.closePosition == 'bottom') ? $closeLink.appendTo($cluetipInner) : (defaults.closePosition == 'title') ? $closeLink.prependTo($cluetipTitle) : $closeLink.prependTo($cluetipInner); $closeLink.click(function() { cluetipClose(); return false; }); if (defaults.mouseOutClose) { $cluetip.hover(function() {doNothing(); },  function() {$closeLink.trigger('click'); }); } else { $cluetip.unbind('mouseout'); } } var direction = ''; $cluetipOuter.css({overflow: defHeight == 'auto' ? 'visible' : 'auto', height: defHeight}); tipHeight = defHeight == 'auto' ? $cluetip.outerHeight() : parseInt(defHeight,10);  tipY = posY; if (defaults.positionBy == 'fixed') { tipY = posY - defaults.dropShadowSteps + tOffset; } else if ( (posX < mouseX && Math.max(posX, 0) + tipWidth > mouseX) || defaults.positionBy == 'bottomTop') { if (posY + tipHeight + tOffset > sTop + wHeight && mouseY - sTop > tipHeight + tOffset) {  tipY = mouseY - tipHeight - tOffset; direction = 'top'; } else {  tipY = mouseY + tOffset; direction = 'bottom'; } } else if ( posY + tipHeight + tOffset > sTop + wHeight ) { tipY = (tipHeight >= wHeight) ? sTop : sTop + wHeight - tipHeight - tOffset; } else if ($this.css('display') == 'block' || $this[0].tagName.toLowerCase() == 'area' || defaults.positionBy == "mouse") { tipY = bpY - tOffset; } else { tipY = posY - defaults.dropShadowSteps; } if (direction == '') { posX < linkLeft ? direction = 'left' : direction = 'right'; } $cluetip.css({top: tipY + 'px'}).removeClass().addClass('clue-' + direction + '-' + ctClass).addClass(' cluetip-' + ctClass); if (defaults.arrows) {  var bgPos = '0 0'; var bgY = (posY - tipY - defaults.dropShadowSteps); if (direction == 'left') { bgPos = posX >=0 ? '100% ' + bgY + 'px' : '100% 0'; } else if (direction == 'right') { bgPos = (posX >=0 && bgY > 0) ? '0 ' + bgY + 'px' : '0 0'; } else if (direction == 'top') { bgPos = '50% 100%'; } else if (direction == 'bottom') { bgPos = '50% 0'; } } else { bgPos = '0 100%'; } $cluetip.css({backgroundPosition: bgPos}); $dropShadow.hide(); $cluetip.hide()[defaults.fx.open](defaults.fx.open != 'show' && defaults.fx.openSpeed); if (defaults.dropShadow) $dropShadow.css({height: tipHeight, width: defaults.width}).show(); defaults.onShow($cluetip, $cluetipInner); };/*************************************** =INACTIVATION-------------------------------------- */ var inactivate = function() { isActive = false; $('#cluetip-waitimage').hide(); if (!defaults.sticky) { cluetipClose(); }; if (defaults.hoverClass) { $this.removeClass(defaults.hoverClass); } }; var cluetipClose = function() { $cluetipOuter  .parent().hide().removeClass().end() .children().empty(); if (tipTitle) { $this.attr('title', tipTitle); } };/*************************************** =BIND EVENTS-------------------------------------- */ if (defaults.activation == 'click'||defaults.activation == 'toggle') { $this.click(function(event) { if ($cluetip.is(':hidden')) { activate(event); } else { inactivate(event); } this.blur(); return false; }); } else { $this.click(function() { if (tipAttribute == $this.attr('href')) { return false; } }); if ($.fn.hoverIntent && defaults.hoverIntent) { $this.hoverIntent({ sensitivity: defaults.hoverIntent.sensitivity, interval: defaults.hoverIntent.interval,  over: function(event) {activate(event);},  timeout: defaults.hoverIntent.timeout,  out: function(event) {inactivate(event);} });  } else { $this.hover(function(event) { activate(event); }, function(event) { inactivate(event); }); } } }); }; var insertionType = 'appendTo', insertionElement = 'body'; $.cluetip = {}; $.cluetip.setup = function(options) { if (options && options.insertionType && (options.insertionType).match(/appendTo|prependTo|insertBefore|insertAfter/)) { insertionType = options.insertionType; } if (options && options.insertionElement) { insertionElement = options.insertionElement; } };})(jQuery);