// JsLint Global Objects
/*global window, alert, document, Ext, AV */
/*jslint devel: true, browser: true, unparam: true, sloppy: true, white: true, nomen: true, maxerr: 50, indent: 2, eqeq: true, newcap: true */
Ext.namespace('AV');
AV.NFTip = function (config) {
var _tip,
_hideProc = 1,
_config = config,
_arrowImgCur, _arrowImgUL, _arrowImgUR, _arrowImgLL, _arrowImgLR, _content,
hideTip, onOut, clearTO, onOver,
els, arrows, ttCont, divHt;
//_hideDelay = config.hideDelay ? config.hideDelay : 100,
hideTip = function () {
_tip.setVisible(false);
_arrowImgCur.setVisible(false);
};
onOut = function (e) { _hideProc = setTimeout(hideTip, 100); };
clearTO = function () { clearTimeout(_hideProc); };
//=============================================================================
onOver = function (e) {
clearTO();
//console.log('--------------------------------------');
hideTip();//this is necessary for proper rendering of the current tip (esp. if setTimeout above didn't execute yet)
_content.update(_config.getContentFn(e.getTarget()));
/*NOTES:
Be aware that hyphens in the tooltip content can cause it to "browser-wrap" and this throws off the "tipBox.width" calculation (below). The symptom
will be a tooltip arrow "disconnected" from the tip content or even tooltip content getting "cut off"; add "nowrap" or nbsp around hyphens to get them not to wrap;
also can try setting a specific width on the tooltip content (div, table, whatever e.g. style="width: 300px;" ) ** may need to do both
*/
var scroll = Ext.get(document).getScroll(),
scrollTop = (scroll && scroll.top) ? scroll.top : 0,
scrollLeft = (scroll && scroll.left) ? scroll.left : 0,
viewWidth = Ext.lib.Dom.getViewWidth(),
viewHeight = Ext.lib.Dom.getViewHeight(),
scrollBot = scrollTop + viewHeight,
targetBox = Ext.get(e.getTarget()).getBox(),
tipBox = _tip.getBox(),
arrowBox = _arrowImgCur.getBox(),
addAdjust;
_arrowImgCur.dom.style.visibility = 'hidden';
//console.log('viewWidth = ' + viewWidth);
//console.log('scrollLeft = ' + scrollLeft);
//console.log('tipBox.width = ' + tipBox.width);
//console.log('tipBox.height = ' + tipBox.height);
//console.log('targetBox.x = ' + targetBox.x);
// target is in E hemisphere or it's an AV Lite site
if (targetBox.x > ((viewWidth + scrollLeft) / 2) || AV.site_type_id === '2' || AV.site_type_id === '7') {
tipBox.x = (targetBox.x - tipBox.width - 18);
arrowBox.x = tipBox.width - 28;
//console.log('E tipBox.x = ' + tipBox.x);
//console.log('E arrowBox.x = ' + arrowBox.x);
//tipBox off screen
if (tipBox.x < scrollLeft) {
//console.log('REPOSITION 1');
tipBox.x = tipBox.x + (tipBox.x * -1) + scrollLeft;
arrowBox.x = -9000;//hide (this arrow never looks "right".. we're just making sure the tip is on the screen)
}
// target is in SE quadrant
if (targetBox.y > ((viewHeight + scrollTop) / 2)) {
//console.log('SE');
tipBox.y = (((targetBox.bottom < scrollBot) ? targetBox.bottom : scrollBot) - tipBox.height + 15);
_arrowImgCur = _arrowImgLR;
arrowBox.y = tipBox.height - 85;
}
// target is in NE quadrant
else {
//console.log('NE');
tipBox.y = (((targetBox.y > scrollTop) ? targetBox.y : scrollTop) - 15);
_arrowImgCur = _arrowImgUR;
arrowBox.y = 21;
}
}
// target is in W hemisphere
else {
tipBox.x = targetBox.right + 15;
arrowBox.x = -32;
//console.log('W tipBox.x = ' + tipBox.x);
//console.log('W arrowBox.x = ' + arrowBox.x);
//tipBox off screen
if (tipBox.x > (viewWidth + scrollLeft)) {
//console.log('REPOSITION 2');
tipBox.x = (viewWidth - scrollLeft) - tipBox.width - 32;
}
//tipBox goes off edge
if ((tipBox.x + tipBox.width) > (viewWidth + scrollLeft))
{
//console.log('REPOSITION 3');
addAdjust = 10;
//80 seems necessary to avoid a scroll bar "popping up" e.g. on flex-based sites (IE), but makes the arrow show up "pointing" to the wrong thing (so you'd maybe need to hide it?)
if (!Ext.isBorderBox) { addAdjust = 80; }
tipBox.x = tipBox.x - ((tipBox.x + tipBox.width) - (viewWidth + scrollLeft) - Ext.getScrollBarWidth()) - addAdjust;
//arrowBox.x = -9000;//hide
}
//tipBox x position off screen (< scrollLeft, negative if scrollLeft is 0)
if (tipBox.x < scrollLeft) {
//console.log('REPOSITION 4');
tipBox.x = scrollLeft + 32;
arrowBox.x = -9000;//hide (this arrow sometimes looks "right".. but on flex-based sites particularly seems to be "off".. again, really just making sure the tip is on the screen)
}
// target is in SW quadrant
if (targetBox.y > ((viewHeight + scrollTop) / 2)) {
//console.log('SW');
tipBox.y = (((targetBox.bottom < scrollBot) ? targetBox.bottom : scrollBot) - tipBox.height + 15);
_arrowImgCur = _arrowImgLL;
arrowBox.y = tipBox.height - 85;
}
// target is in NW quadrant
else {
//console.log('NW');
tipBox.y = (((targetBox.y > scrollTop) ? targetBox.y : scrollTop) - 15);
_arrowImgCur = _arrowImgUL;
arrowBox.y = 21;
}
}
//console.log('FINAL tipBox.x = ' + tipBox.x);
//console.log('FINAL tipBox.width = ' + tipBox.width);
//console.log('FINAL tipBox.height = ' + tipBox.height);
//console.log('FINAL arrowBox.x = ' + arrowBox.x);
//console.log('FINAL arrowBox.y = ' + arrowBox.y);
_tip.setLeftTop(tipBox.x, tipBox.y);
_arrowImgCur.setLeftTop(arrowBox.x, arrowBox.y);
_tip.setVisible(true);
_arrowImgCur.setVisible(true);
};//end of "onOver"
//=============================================================================
_tip = new Ext.Layer({ shim: true, constrain: false });
if (Ext.isIE) {
divHt = "min-height: 50px;";
if (Ext.isBorderBox) { divHt = "height: 50px;"; }
_tip.update('
' +
'
' +
'
' +
'
' +
'' +
'' +
' | ' +
' | ' +
' | ' +
'
' +
'' +
' | ' +
' | ' +
' | ' +
'
' +
'' +
' | ' +
' | ' +
' | ' +
'
' +
'
');
}
else {
_tip.update('' +
'' +
'' +
'' +
'');
}
_arrowImgUL = _tip.child('img.arrowUL');
_arrowImgUR = _tip.child('img.arrowUR');
_arrowImgLL = _tip.child('img.arrowLL');
_arrowImgLR = _tip.child('img.arrowLR');
_arrowImgCur = _arrowImgUL;
_content = _tip.child('div.ttContent');
els = Ext.select(config.targets, false);
els.on('mouseover', onOver);
els.on('mouseout', onOut);
if (Ext.isSafari4) { els.on('click', onOut); } // fix for iPad not closing tooltip
arrows = Ext.select("img.ttArrow", false);
arrows.on('mouseover', clearTO);
arrows.on('mouseout', onOut);
ttCont = Ext.get('ttContainer');
ttCont.on('mouseover', clearTO);
ttCont.on('mouseout', onOut);
//=============================================================================
};