///
//******************** Overlay **********************/
Comcast.namespace('Comcast.Ui.Overlay');
(function() {
Comcast.Ui.Overlay = function(version)
{
var maskId = "PageActivityMask";
var panel = "interstitialPanel";
if(version)
{
panel += version;
this._version = version;
}
else
{
this._version = 1;
}
var messageId = "overlayAnimateMessage";
var spinnerRow = "spinnerRow";
var otherRow = "otherRow";
var interstitialContent = "interstitialContent";
var spinnerCell = "spinnerCell";
if($("PageActivityMask") == null)
{
var body = document.getElementsByTagName("body")[0];
if(version == 2)
{
body.innerHTML += "
" +
"";
}
else
{
body.innerHTML += "
" +
"";
}
}
this._panelWidth = 320;
this._mask = DF.$(maskId);
this._panel = DF.$(panel);
this._message = DF.$(messageId);
this._spinnerRow = DF.$(spinnerRow);
this._otherRow = DF.$(otherRow);
this._interstitialContent = DF.$(interstitialContent);
this._contentCol = DF.$("contentCol");
this._spinnerCol = DF.$("spinnerCol");
this._closeButton = DF.$("closeButton");
this._windowShade = $("overlayWindowShade");
this._selectBoxes = new Array();
this._finSequence = 1;
var selectBoxes = document.getElementsByTagName("select");
for(var i = 0; i < selectBoxes.length; i++)
{
this._selectBoxes.push(selectBoxes[i]);
}
var growFont = function(element, maxSize, orgSize)
{
element.style.fontSize = orgSize + "px";
var grow = function()
{
var curSize = parseInt(element.style.fontSize.replace("px",""));
if(curSize < maxSize)
{
curSize++;
element.style.fontSize = curSize + "px";
window.setTimeout(grow.createDelegate(this), 10);
}
else
{
window.setTimeout(shrink.createDelegate(this), 40);
}
}
var shrink = function()
{
var curSize = parseInt(element.style.fontSize.replace("px",""));
if(curSize > orgSize)
{
curSize--;
element.style.fontSize = curSize + "px";
window.setTimeout(shrink.createDelegate(this), 40);
}
}
window.setTimeout(grow.createDelegate(this), 10);
}
this._stopInput = function() {
var defaultMessageFontSize = 0;
if(this._mask.style.fontSize)
{
defaultMessageFontSize = parseInt(this._mask.style.fontSize.replace("px",""));
}
else
{
defaultMessageFontSize = 12;
}
growFont(this._message, 24, defaultMessageFontSize);
}
this.open = true;
this.contentUpdated = false;
this.shadeOpen = new DF.evt.CustomEvent("shadeOpen");
this.shadeOpened = function () {
this.open = true;
//console.warn("open: true");
}
this.shadeOpen.subscribe ( this.shadeOpened.createDelegate(this) );
}
Comcast.Ui.OverlayCache = new Array();
Comcast.Ui.Overlay.prototype = {
showWaitMask : function(message) {
// hide window shade
//console.warn("showWaitMask");
// If this is not the first time the overlay has been shown, IE 6 and 7 tend to show the close box
// even though it has display: none. Yanking it out of the DOM and then putting it back in
// makes IE display it correctly, i.e. not display it.
var browserInfo = new DF.browserInformation();
if (browserInfo.getBrowser().versionStr == "MSIE")
{
var nextsib = this._closeButton.nextSibling;
var parent = this._closeButton.parentNode;
parent.removeChild(this._closeButton);
if (nextsib)
parent.insertBefore(this._closeButton, nextsib);
else
parent.appendChild(this._closeButton);
}
this._windowShade.style.overflowY = "hidden";
this._windowShade.style.height = "0px";
this._closeButton.style.display = "none";
this._spinnerCol.style.width = "100px";
this._spinnerRow.style.display = "";
this._message.style.display = "block";
this.updateInterstitialWidth(320);
this._interstitialContent.innerHTML = " ";
this._otherRow.style.display = "none";
if(message == null || message.trim() == "")
{
message = "Please wait..."
}
this.stopInputDelegate = this._stopInput.createDelegate(this)
DF.evt.Event.addListener(this._mask, "click", this.stopInputDelegate);
this.updateMessage(message);
this.showMaskWithElement();
},
showInterstitial : function(content, contentWidth) {
// hide window shade
//console.warn("showInterstitail");
this._closeButton.onclick = null;
this._closeButton.onclick = this.closeOverlay.createDelegate(this);
//DF.evt.Event.addListener(this._closeButton,"click",this.closeOverlay.createDelegate(this));
if(!this.contentUpdated)
{
this.updateInterstitialContent(content);
this.contentUpdated = true;
}
if(this.open == false)
{
window.setTimeout(this.showInterstitial.createDelegate(this, [content, contentWidth]), 100);
return;
}
this._windowShade.style.overflowY = "hidden";
this._windowShade.style.height = "0px";
this._otherRow.style.display = "";
this._spinnerCol.style.width = "0px";
this._spinnerRow.style.display = "none";
this._message.style.display = "none";
this._closeButton.style.display = "";
if(contentWidth != null)
{
this.updateInterstitialWidth(contentWidth);
}
DF.evt.Event.removeListener(this._mask, "click", this.stopInputDelegate);
this.showMaskWithElement();
this.contentUpdated = false; //reset to initial status
},
hideCloseButton : function()
{
this._closeButton.style.display = "none";
},
closeOverlay : function() {
if(Comcast.Ui.OverlayCache.length > 0)
{
var temp = Comcast.Ui.OverlayCache.pop();
this.showInterstitial(temp.fragment, temp.width);
return;
}
else
{
this.hideMask.createDelegate(this)();
this.overlayClosed.fire();
}
},
getOpen : function() {
return this.open;
},
hideMask : function() {
this._mask.style.display = "none";
this._windowShade.style.display = "none";
this._closeButton.style.display = "none";
var browserInfo = new DF.browserInformation();
if(browserInfo.getBrowser().versionStr == "MSIE" && browserInfo.getVersion(browserInfo.browser) < 7)
{
for(var i = 0; i < this._selectBoxes.length; i++)
{
this._selectBoxes[i].style.visibility = "";
}
}
},
updateMessage: function(message) {
this._message.innerHTML = message;
},
saveCurrentContent : function()
{
this._windowShade.style.display = "none";
this._closeButton.style.display = "none";
/*
var fragment = document.createDocumentFragment();
for(var i = 0; i < this._interstitialContent.childNodes.length; i++)
{
var temp = this._interstitialContent.childNodes[i];
fragment.appendChild(temp);
}
if(fragment.hasChildNodes())
{
}
*/
Comcast.Ui.OverlayCache.push({"fragment" : this._interstitialContent.innerHTML, "width": this._panelWidth});
},
updateInterstitialContent: function(content) {
if(typeof(content) == "string")
{
this._interstitialContent.innerHTML = content;
}
else
{
this._interstitialContent.replaceChild(content,this._interstitialContent.firstChild);
}
},
updateInterstitialWidth: function(contentWidth) {
this._panelWidth = contentWidth;
this._contentCol.style.width = contentWidth + 'px';
this._interstitialContent.style.width = contentWidth + 'px';
// set window shade width
var shadeWidth = 0;
var colGroup = this._panel.getElementsByTagName("colGroup");
var cols = colGroup[0].getElementsByTagName("col")
shadeWidth += parseInt(this._panelWidth);
shadeWidth += parseInt(cols[0].style.width.replace("px",""));
shadeWidth += parseInt(cols[cols.length - 1].style.width.replace("px",""));
if(this._spinnerRow.style.display == "")
{
shadeWidth += 100;
}
this._windowShade.style.width = shadeWidth + "px";
},
getInterstitialWidth: function() {
// set window shade width
var width = 0;
var colGroup = this._panel.getElementsByTagName("colGroup");
var cols = colGroup[0].getElementsByTagName("col")
width += parseInt(this._panelWidth);
width += parseInt(cols[0].style.width.replace("px",""));
width += parseInt(cols[cols.length - 1].style.width.replace("px",""));
if(this._spinnerRow.style.display == "")
{
width += 100;
}
return width;
},
showMaskWithElement: function () {
//console.warn("showMaskWithElement");
DF.Ui.fixPngImages(this._panel);
DF.Ui.fixPngBackgrounds("td", this._panel);
var browserInfo = new DF.browserInformation();
if(browserInfo.getBrowser().versionStr == "MSIE" && browserInfo.getVersion(browserInfo.browser) < 7)
{
for(var i = 0; i < this._selectBoxes.length; i++)
{
this._selectBoxes[i].style.visibility = "hidden";
}
}
this._mask.style.display = "block";
this._windowShade.style.display = "block";
this.updateMaskPosition();
this.open = false;
//console.warn("open: false");
this.fibSequence = 1;
this._openShade();
DF.evt.Event.addListener(window, "resize", this.updateMaskPosition.createDelegate(this));
DF.evt.Event.addListener(window, "scroll", this.updateMaskPosition.createDelegate(this));
},
_openShade: function() {
var maxH = this._panel.clientHeight;
var _timer = null
//alert(maxH);
var shade = function() {
//var h = parseInt(this._windowShade.style.height.replace("px",""));
//h += Math.round(this.fibSequence);
//this.fibSequence += this.fibSequence/12;
//this._windowShade.style.height = h + "px";
//if(h < maxH)
//{
//this._windowShade.style.overflowY = "hidden";
// _timer = window.setTimeout(shade.createDelegate(this), 2);
//}
//else
//{
this._windowShade.style.height = maxH + "px";
this.open = true;
//console.warn("open: true");
this._windowShade.style.overflowY = "visible";
if (_timer != null)
window.clearTimeout(_timer);
_timer = null;
this.fibSequence = 1;
this.shadeOpen.fire();
//}
}
window.setTimeout(shade.createDelegate(this), 0);
},
updateMaskPosition: function() {
var html = document.getElementsByTagName("html")[0];
var body = document.getElementsByTagName("body")[0];
var browserInfo = new DF.browserInformation();
if(browserInfo.getBrowser().versionStr == "MSIE")
{
this._mask.style.height = html.offsetHeight + html.scrollTop + "px";
this._mask.style.width = html.offsetWidth + html.scrollLeft + "px";
}
else if(body.scrollHeight > html.scrollHeight)
{
this._mask.style.height = body.scrollHeight + "px";
this._mask.style.width = body.scrollWidth + "px";
}
else
{
this._mask.style.height = html.scrollHeight + "px";
this._mask.style.width = html.scrollWidth + "px";
}
// IE 6 does not support position: fixed
if ((browserInfo.getBrowser().versionStr == "MSIE" && browserInfo.version < 8) || browserInfo.getBrowser().versionStr == undefined)
this.updateOverlayPositionAbsolute();
else
this.updateOverlayPositionFixed();
},
updateOverlayPositionFixed: function() {
var html = document.getElementsByTagName("html")[0];
var body = document.getElementsByTagName("body")[0];
var panelHeight = this._panel.clientHeight;
var panelWidth = this.getInterstitialWidth();
var windowHeight = html.clientHeight;
var windowWidth = html.clientWidth;
/* If the overlay won't fit in the window, position: fixed will prevent the user from
scrolling to see it all. Fall back on the old method, which copes with that. */
if (panelHeight > windowHeight || panelWidth > windowWidth)
this.updateOverlayPositionAbsolute();
else
{
this._windowShade.style.position = "fixed";
this._windowShade.style.top = ((windowHeight - panelHeight) / 2) + "px";
this._windowShade.style.left = ((windowWidth - panelWidth) / 2) + "px";
}
},
updateOverlayPositionAbsolute: function() {
var html = document.getElementsByTagName("html")[0];
var body = document.getElementsByTagName("body")[0];
var browserInfo = new DF.browserInformation();
// get test panel height vs window height
var panelHeight = this._panel.clientHeight;
var windowHeight = html.clientHeight;
var panelWidth = this.getInterstitialWidth();
var windowWidth = html.clientWidth;
var scrollTop = document.getElementsByTagName("html")[0].scrollTop;
var scrollLeft = document.getElementsByTagName("html")[0].scrollLeft;
if(panelHeight > windowHeight)
{
var diff= panelHeight - windowHeight;
var pos = 5;
if(scrollTop > diff)
{
pos = scrollTop - diff;
}
this._windowShade.style.top = pos + "px";
}
else
{
this._windowShade.style.top = (((windowHeight / 2) + scrollTop) - (panelHeight / 2)) + "px";
}
if(panelWidth > windowWidth)
{
var diff = panelWidth - windowWidth;
var pos = 5;
if(scrollLeft > diff)
{
pos = scrollLeft - diff;
}
this._windowShade.style.left = pos + "px";
}
else
{
this._windowShade.style.left = (((windowWidth / 2) + scrollLeft) - (panelWidth/2)) + "px";
}
},
WrapContent : function(header, content) {
return "" +
"
" +
"
" + content + "
"+
"
![](\"/images/dot.gif\")
![](\"/images/animated/looploader.gif\")
![](\"/images/interstitial/version2/closeButton.gif\")
" +
"![](\"/images/interstitial/topLeftCorner.png\")
![](\"/images/interstitial/topRightCorner.png\")
![](\"/images/interstitial/close.gif\")
![](\"/images/interstitial/bottomLeftCorner.png\")
![](\"/images/interstitial/bottomRightCorner.png\")