/** Spotlight: Grab the user's attention by "spotlighting" an element in the DOM with this div, created on the fly and positioned to be relevant created 1/29/2009 by Brandon Medenwald (CUR-7244) @module Spotlight @namespace spotlight @required flexmls Core for JQuery positioning */ var spotlight = {}; /** spotlight.show(): create a new Spotlight @method show @param parent {Node} the DOM node that should be spotlighted @param o {Object} the object for options, which consists of: * id {String} the id of the spotlight div, also the id that will be used for closing (defaults to "spotlight_" + random number) * html {String} the HTML to place inside the spotlight (defaults to "Insert HTML here...") * close {Boolean} whether to automatically include the close button (default to false) * cancelCookie {String} the name of a cookie that will be set via a link at the bottom of this text that reads "Don't show this message again" * backgroundColor {String} background color of the spotlight div (default to #fff9d7) * borderColor {String} border color of the spotlight div (default to #e2c822) * color {String} text color within the spotlight div (default to #000) * fontSize {String} font size within the spotlight div (default to 9pt) * backgroundColor {String} background color of the spotlight div (default to #fff9d7) * width {Integer} width of the spotlight div (default to 150) * zIndex {Integer} zIndex of the spotlight div (default to 100) * closeColor {String} color of the close "X" if close is set to true (defaults to #000) * closeTimer {Integer} number of milliseconds until the spotlight div autocloses (default to null, so it doesn't automatically close) * orientation {String} general instruction on where to place the spotlight div relative to the parent node (defaults to right over the top, but can be 'above', 'below', 'left', 'right') * orientationBuffer {Integer} the number of pixels that buffer the space between the parent node and the spotlight div when orientation is used (defaults to 2) * left {Integer} number of pixels to adjust the spotlight div from the left (defaults to null, can be a positive or negative number) * top {Integer} number of pixels to adjust the spotlight div from the top (defaults to null, can be a positive or negative number) @return {string} id of the spotlight div */ spotlight.show = function(parent, o) { // set defaults if (!o) var o = {}; if (!o.id) o.id = 'spotlight_' + Math.floor(Math.random()*10000000000000000); if (!o.html) o.html = 'Insert HTML here...'; if (!o.zIndex) o.zIndex = 100; o.width = (o.width) ? o.width : 150 ; // set style defaults var styleArray = ['position:absolute;padding:4px 10px;border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;']; styleArray.push('background-color:'+((o.backgroundColor)?o.backgroundColor:'#fff9d7')+';'); styleArray.push('border:1px solid '+((o.borderColor)?o.borderColor:'#e2c822')+';'); styleArray.push('color:'+((o.color)?o.color:'#000')+';'); styleArray.push('font-size:'+((o.fontSize)?o.fontSize:'9pt')+';'); styleArray.push('width:'+o.width+'px;z-index:'+o.zIndex+';'); // box shadow var shadowShift = (o.orientation && o.orientation == "left") ? "-" : "" ; styleArray.push('-moz-box-shadow:'+shadowShift+'3px 3px 10px #333;'); styleArray.push('-webkit-box-shadow:'+shadowShift+'3px 3px 10px #333;'); styleArray.push('box-shadow:'+shadowShift+'3px 3px 10px #333;'); styleArray.push('filter:progid:DXImageTransform.Microsoft.DropShadow(color=#888888, offx='+shadowShift+'1, offy=1)progid:DXImageTransform.Microsoft.DropShadow(color=#cccccc, offx='+shadowShift+'1, offy=1);'); // IE hates me and CSS3 // establish the DOM node var spotlight_div = ($("#"+o.id).length > 0) ? $("#"+o.id) : $("
") ; // set box content spotlight_div.html(o.html); // show the message to plant the cookie to stop showing this, if requested if (o.cancelCookie) { var centeredDiv = $("
"); centeredDiv.prepend( $("").html("Don't show this message again").click(function() { spotlight.optout(o.id, o.cancelCookie); }) ).appendTo(spotlight_div); } // add a close link, if requested if (o.close) { spotlight_div.prepend( $("").html("×").click(function() { spotlight.hide(o.id); }) ); } // determine the box's position and show using JQuery var pos = $(parent).offset(); // alert(pos.left + "," + pos.top); // adjust the offset if the options mandate it if (o.left) pos.left = pos.left + o.left; if (o.top) pos.top = pos.top + o.top; // take the requested orientation into account if (o.orientation) { var buffer = (!isNaN(o.orientationBuffer)) ? o.orientationBuffer : 2 ; var paddingBufferLeft = 20; var borderBufferLeft = 2; // accounts for the border width when we're positioned to the left var paddingBufferTop = 8; // above: need to find the height of the spotlight and adjust the top in a negative way if (o.orientation == 'above') pos.bottom = $(window).height() - pos.top + buffer; // below: need to find the height of the parent and adjust the top in a positive way if (o.orientation == 'below') pos.top += (parent.offsetHeight + buffer); // left: need to find the width of the spotlight and adjust the left in a negative way if (o.orientation == 'left') pos.left -= (o.width + paddingBufferLeft + buffer + borderBufferLeft); // right: need to find the width of the parent and adjust the left in a positive way if (o.orientation == 'right') pos.left += (parent.offsetWidth + buffer); } // make sure spotlight doesn't display off the screen if (pos.top < 0) pos.top = 0; if (pos.left < 0) pos.left = 0; // position and create/show div styleArray.push('left:'+pos.left+'px;'); (pos.bottom) ? styleArray.push('bottom:'+pos.bottom+'px;') : styleArray.push('top:'+pos.top+'px;') ; // set the box's attributes spotlight_div.attr("z", o.zIndex).attr("style", styleArray.join('')); // IE likes cssText if ($("#"+o.id).length > 0) document.getElementById(o.id).style.cssText = styleArray.join(''); // create div ($("#"+o.id).length > 0) ? spotlight_div.show() : spotlight_div.appendTo("body") ; // create shim, if this is IE6 (Damn you old man!) if (navigator.userAgent.match('MSIE 6')) spotlight.shim(o.id); // if this is set to automatically close after a certain period of time, set a timeout if (o.closeTimer && parseInt(o.closeTimer) > 0) setTimeout("spotlight.hide('"+o.id+"')", parseInt(o.closeTimer)); // return the id of the spotlight div in case the programmer would like to manipulate it later return o.id; } /** spotlight.hide(): hide a Spotlight @method hide @param id {string} the id of the Spotlight div to be hidden */ spotlight.hide = function(id) { $("div#"+id+", iframe#"+id+"_shim").remove(); } /** spotlight.hide(): hide a Spotlight @method hide @param id {string} the id of the Spotlight div to be hidden @param cookieName {string} name of the cookie to set */ spotlight.optout = function(id, cookieName) { var date = new Date(); date.setTime(date.getTime()+(365*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); document.cookie = cookieName+"=true"+expires+"; path=/"; if (document.getElementById(id)) document.getElementById(id).parentNode.removeChild(document.getElementById(id)); } /** spotlight.shim(): create or modify shim for Spotlight (used for IE6) @method hide @param id {string} the id of the Spotlight div to be shimmed */ spotlight.shim = function(id) { var spotlightDiv = document.getElementById(id); var $spot = $(spotlightDiv); var shim = $("iframe#"+id+"_shim"); if (shim.length > 0) { // reposition if the shim already exists shim.css({width:$spot.width()+22, height:$spot.height()+10}); } else { // otherwise, create from scratch var pos = $spot.offset(); // alert(pos.left + "," + pos.top); $("