/*
* Javascript for the Bubble Box Logic.
* Written By Pankaj
*
* (code to be written sandiwched between ~> and <~)
*
* TO USE:
* 1. Call the function:
* a. ~> start(obj) <~ on mouseover. (See how obj is laid out below)
* b. ~> start(null,'cancel') <~ on mouseout of the same element for the bubble to
* not be displayed if mouse goes out of the element in question.
*
* Flow of Control:
*
* Start func --> BuildAndLoad(obj) --> showBox(HTMLString)
*
* All other functions are helper functions to accomplish the above function
* tasks.
*
* showBox needs Prototype/Scriptaculous to show its box, although only effects are used.
*
* ======
* obj
* This is a JSON JS Object that contains the information to be displayed.
* If you just pass a 'url' property in the object, it will fill an iframe with that URL.
*
*
*
*/
//Check whether we are dealing with brain damaged IE
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE);
var intervalId = 0; // To call a function again and again.
var clickedElement;
//Bubble Box Height and Width
var boxHeight = "300px";
var boxWidth = "220px";
if (!IE)
boxWidth = "190px";
var boxTop = 0;
var boxLeft = 0;
//Are we to hide the box?
var hideTheBox = true;
//Price and Quantity Object
var priceAndQuantity = null;
//Viewport height and width
var viewportwidth = 0;
var viewportheight = 0;
//Interval Id
var intvl = null;
var tempObj = null;
var elementX = 0;
var elementY =0;
/////////////// The Function to be called in Normal Usage **
function start(dispObj)
{
if(arguments.length > 1 && arguments[1] == "cancel")
{
window.clearTimeout(intvl);
//tempObj = null;
doHide();
intvl=window.setTimeout("hideBox();",500);
}
else
{
window.clearTimeout(intvl);
tempObj = dispObj;
intvl = window.setTimeout("BuildAndLoad(tempObj);",900);
}
}
/////////////^^ The Function to be called in normal usage.
// resizes Iframe according to content
function resize(the_height)
{
if(IE){
var paddingOffset=0;
} else {
var paddingOffset= 15;
}
var bBox = $("bubbleBox");
var destContainer = $('container');
destContainer.style.height = the_height +paddingOffset+ "px";
bBox.style.height = the_height + paddingOffset+"px";
calculatePosition();
showBox()
}
function showBox()
{
var destContainer = $('container');
destContainer.style.visibility="visible";
Effect.Appear('container',{duration: 0.2});
//Set z-index to make sure the box is up above everything.
if(IE){
destContainer.style.zIndex = "10";
}
else {
destContainer.setStyle("z-index","10");
}
destContainer.style.left= elementX+"px";
destContainer.style.top= elementY+"px";
}
function getViewport()
{
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight;
//alert(window.innerHeight );
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !='undefined'
&& document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight;
}
// older versions of IE
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight;
}
}
/*
* BuildAndLoad will actually be called by places in the code.
* This essentially takes in variable number of arguments.
*
* If the argument count is 1.
* It automatically assumes that a URL has been passed to it.
*
* If the argument count is 2.
* The second argument has to be the pricing and quantity object.
*
* If argument count == 3
* Then three arguments...
* BuildAndLoad([imgURL],[heading],[description]).
*/
function BuildAndLoad(s)
{
var bubbleiframe = $('container');
if(s.url)
{
if(IE)
widthpercent="97%";
else
widthpercent="100%";
if(!$('bubbleBox'))
{
bubbleiframe.innerHTML = "
";
}
if(s.sku || s.includes || s.features || s.price)
{
var t = 280;
var l = 0;
var w = 100;
if(s.img.h > 200)
{
t = 100;
l = 42;
w = 42;
}
bubbleiframe.innerHTML += "
"+
"
"+"
"+
"
Part Number:
"+s.sku+"
"+
"
"+
"
Includes:
"+s.includes+"
"+
"
"+
"
Features:
"+s.features+"
"+
"
"+
"
Price:
"+s.price.unit+" "+s.price.value+"
"+
"
"+
"
";
}
if(s.element)
{
clickedElement=s.element;
}else
{
elementX = -9000;
elementY = -9000;
}
}
loadBox();
return true;
}
/*
* loadBox(el,[h],[w])
* The main function to display the bubble box.
*
* [h] and [w] are optional height and width.
* If not supplied the box will automatically adjust itself to the content supplied.
*
* el - An element passed from the Javascript.
*
*/
function loadBox()
{
var destContainer = $('container');
destContainer.style.width = boxWidth;
destContainer.style.height= boxHeight;
if(arguments.length == 3)
{
boxHeight = arguments[1];
boxWidth = arguments[2];
destContainer.style.width = boxWidth + "px";
destContainer.style.height = "100%";
}
destContainer.style.position = "absolute";
//The top and left corner of the
//box are to be automatically adjusted.
//so that the box appears fully in the screen.
//and not off it.
if(clickedElement){
//this is the x and y coordinates of the element clicked
elementX = getX(clickedElement)+ getWidth(clickedElement);
elementY = getY(clickedElement);
}
//hide bubble box to some negative space
destContainer.style.top = "-9000px";
destContainer.style.left = "-9000px";
//Attach event handler funcs so that the box doesn't
//disappear when the mouse is on it.
// And disappears if the mouse is somewhere else after 5 secs.
if(IE)
{
destContainer.attachEvent("onmouseover", doNotHide);
destContainer.attachEvent("onmouseout", doHide);
}
else
{
destContainer.addEventListener("mouseover", doNotHide, false);
destContainer.addEventListener("mouseout", doHide, false);
}
}
function calculatePosition()
{
var destContainer = $('container');
getViewport();
var bubbleBoxHeightOffset = 50;
var bubbleBoxWidthOffset = 70;
if(IE)
{
bubbleBoxHeightOffset=60;
bubbleBoxWidthOffset=45;
}
if(viewportwidth < (parseInt(elementX) + parseInt(destContainer.style.width)))
{
elementX= parseInt(elementX)- getWidth(clickedElement) - parseInt(destContainer.style.width)-bubbleBoxWidthOffset;
destContainer.style.left = elementX+"px";
destContainer.style.top = parseInt(elementY)+"px";
}
if((viewportheight+document.body.scrollTop) < (parseInt(elementY) + bubbleBoxHeightOffset+parseInt(destContainer.style.height)))
{
var yExtraSpace= viewportheight - parseInt(elementY) ;
var deltaY= parseInt(destContainer.style.height)+bubbleBoxHeightOffset - yExtraSpace;
var newY= parseInt(elementY) - parseInt(deltaY);
elementY= newY + document.body.scrollTop ;
destContainer.style.top = elementY+"px"
destContainer.style.left = parseInt(elementX)+"px";
}
}
//returns the x coordinate of the element
function getX(ele)
{
var xCoord = 0;
if(ele.offsetParent)
while(1)
{
xCoord += ele.offsetLeft;
if(!ele.offsetParent)
break;
ele = ele.offsetParent;
}
else if(ele.x)
xCoord += ele.x;
return xCoord;
}
//returns the y coordinate of the element
function getY(ele)
{
var yCoord = 0;
if(ele.offsetParent)
while(1)
{
yCoord += ele.offsetTop;
if(!ele.offsetParent)
break;
ele = ele.offsetParent;
}
else if(ele.y)
yCoord += ele.y;
return yCoord;
}
//return the width of the element
function getWidth(element)
{
var width=0;
width =element.offsetWidth;
return width;
}
function getHeight(element)
{
var height=0;
height =element.offsetHeight;
return height;
}
/*
* doNotHide and doHide and pinPress
* event Handler functions to just set the variable above.
*/
function doNotHide()
{
hideTheBox = false;
}
function doHide()
{
hideTheBox = true;
}
/*
* hideBox()
* The main function to hide the box.
* Checks whether it should not hide the box.
* or else
* just hides the box in a smooth fade.
*/
function hideBox()
{
var destContainer = $('container');
if(IE)
{
destContainer.style.zIndex = "0";
}
else
{
destContainer.setStyle("z-index","0");
}
if(hideTheBox == false)
{
window.setTimeout("hideBox()", 500);
}
else
{
clearTimeout(intervalId);
destContainer.style.visibility="hidden";
destContainer.style.top="-9000px";
destContainer.style.left="-9000px";
destContainer.style.visibility="visible";
}
}
![\""+s.sku+"\"](\""+s.img.src+"\")