document.write("<style>");
document.write("a.overlay-feedback-link {background-color: #79c8fb; text-decoratiion:none; display: block;} ");
document.write("a.overlay-feedback-link:hover {background-color: #FA1010; ");
document.write("</style>");

//Check for IE6
var isIE6 = /msie|MSIE 6/.test(navigator.userAgent);

//Constants used
//root elmenet id created/destroyed @ runtime..
var BUBBLEIDEAS_OVERLAY_WIDGET    = "bubbleideas_overlay_widget";
var BUBBLEIDEAS_OVERLAY_IFRAME    = "bubbleideas_overlay_iframe";
var BUBBLEIDEAS_IFRAME_CONTAINER  = "bubbleideas_iframe_container";
var BUBBLEIDEAS_CLOSE_LINK        = "bubbleideas_close_link";
var BUBBLEIDEAS_BOTTOM_LOGO       = "bubbleideas_bottom_logo"

var IFRAME_CONTAINER_TOP = 24;
var IFRAME_WIDTH  = 750;
var IFRAME_HEIGHT = 392;

//function to get client vieport dimension
function getClientViewPortDimension() {
  var viewPortArray = new Array(2);
  var viewportwidth = Math.max(
      Math.max(document.body.scrollWidth, document.documentElement.scrollWidth),
      Math.max(document.body.offsetWidth, document.documentElement.offsetWidth),
      Math.max(document.body.clientWidth, document.documentElement.clientWidth) );
  var viewportheight = Math.max(
      Math.max(document.body.scrollHeight, document.documentElement.scrollHeight),
      Math.max(document.body.offsetHeight, document.documentElement.offsetHeight),
      Math.max(document.body.clientHeight, document.documentElement.clientHeight) );

  viewPortArray[0] = viewportwidth;
  viewPortArray[1] = viewportheight;

  return viewPortArray;
}

//Function to remove overlay from DOM if it exist
function destroyOverlayDiv() {
   var overlayWidget = document.getElementById(BUBBLEIDEAS_OVERLAY_WIDGET);
   if(overlayWidget != null) { document.body.removeChild(overlayWidget); }

   var overlayIFrameContainer = document.getElementById(BUBBLEIDEAS_IFRAME_CONTAINER);
   if(overlayIFrameContainer != null) { document.body.removeChild(overlayIFrameContainer); }

   var overlayCloseLink = document.getElementById(BUBBLEIDEAS_CLOSE_LINK);
   if(overlayCloseLink != null) { document.body.removeChild(overlayCloseLink); }

   var overlayBottomLogo = document.getElementById(BUBBLEIDEAS_BOTTOM_LOGO);
   if(overlayBottomLogo != null) { document.body.removeChild(overlayBottomLogo); }
}

//Function to create overlaying div
function createOverlayDiv() {
  var overlayDiv = document.createElement('div');
  overlayDiv.id  = BUBBLEIDEAS_OVERLAY_WIDGET;
  overlayDiv.style.position = (isIE6) ? 'absolute' : 'fixed';
  overlayDiv.style.top = 0;
  overlayDiv.style.left = 0;
  overlayDiv.style.width = getClientViewPortDimension()[0] + "px";
  overlayDiv.style.height = getClientViewPortDimension()[1] + "px";
  overlayDiv.style.backgroundColor = '#000';
  overlayDiv.style.zIndex = 900;
  overlayDiv.style.opacity = '0.58';
  overlayDiv.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=58)';
  overlayDiv.setAttribute("onclick","destroyOverlayDiv()");
  return overlayDiv;
}

//Function to create iframe containing div
function createIFrameContainerDiv() {
  var iframeContainerDiv = document.createElement('div');
    var containerWidth = (IFRAME_WIDTH + 16);
    var containerHeight = (IFRAME_HEIGHT + 16);
    var leftPosition = (getClientViewPortDimension()[0] - containerWidth) /2 ;
  iframeContainerDiv.id = BUBBLEIDEAS_IFRAME_CONTAINER;
  iframeContainerDiv.style.position = (isIE6) ? 'absolute' : 'fixed';
  iframeContainerDiv.style.zIndex = 990;
  iframeContainerDiv.style.margin = "0px auto";
  iframeContainerDiv.style.textAlign = "center";
  iframeContainerDiv.style.left = leftPosition + "px";
  iframeContainerDiv.style.width  = containerWidth + "px";
  iframeContainerDiv.style.height = containerHeight + "px";
  iframeContainerDiv.style.MozBorderRadius = "8px"
  iframeContainerDiv.style.backgroundColor = "#EFEFEF";
  return iframeContainerDiv;
}

//Function to create iframe so that can render foreign pages in it
function createIFrame() {
  var iFrame = document.createElement("IFRAME");
  iFrame.id  = BUBBLEIDEAS_OVERLAY_IFRAME;
  iFrame.style.width  = IFRAME_WIDTH + "px";
  iFrame.style.height = IFRAME_HEIGHT + "px";
  iFrame.style.margin = "8px";
  iFrame.style.border = "1px none";
  return iFrame;
}

//Function to create close link
function createCloseLinkDiv(leftPosition, topPosition) {
  var closeLinkDiv = document.createElement('a');
  closeLinkDiv.innerHTML = "<img border='0' src='http://we.bubbleideas.com/images/feedback-close.png' />";
  closeLinkDiv.id = BUBBLEIDEAS_CLOSE_LINK;
  closeLinkDiv.href = "javascript:destroyOverlayDiv()";
  closeLinkDiv.style.left = leftPosition + "px";
  closeLinkDiv.style.top = topPosition + "px";
  closeLinkDiv.style.display = "block";
  closeLinkDiv.style.textdecoration = "none";
  closeLinkDiv.style.position = (isIE6) ? 'absolute' : 'fixed';
  closeLinkDiv.style.zIndex = 990;
  return closeLinkDiv;
}

//Function to create bottom bubbleidea's logo
function createBottomLogo(leftPosition, topPosition) {
  var bottomLogoAnchor = document.createElement('a');
  bottomLogoAnchor.innerHTML = "<img border='0' src='http://we.bubbleideas.com/images/trans_bubbleideas.png' />";
  bottomLogoAnchor.href = "http://bubbleideas.com";
  bottomLogoAnchor.target = "_blank";
  bottomLogoAnchor.id = BUBBLEIDEAS_BOTTOM_LOGO;
  bottomLogoAnchor.style.left = leftPosition + "px";
  bottomLogoAnchor.style.top = topPosition + "px";
  bottomLogoAnchor.style.display = "block";
  bottomLogoAnchor.style.textdecoration = "none";
  bottomLogoAnchor.style.position = (isIE6) ? 'absolute' : 'fixed';
  bottomLogoAnchor.style.zIndex = 990;
  return bottomLogoAnchor;
}

//Function to create show overlay link div
function showOverlayLinkDiv(alignment,top) {
  var showLinkDiv = document.createElement('a');
  showLinkDiv.innerHTML = "<img src='http://we.bubbleideas.com/images/connect.png' border='0'/>";
  showLinkDiv.href = "javascript:showOverlayWidget()";
  showLinkDiv.className = "overlay-feedback-link";
  showLinkDiv.style.position = (isIE6) ? 'absolute' : 'fixed';
  showLinkDiv.style.top = top + "px";
  if(alignment == "left") {
    showLinkDiv.style.left = "0px";
 }else {
    showLinkDiv.style.right = "0px";
  }
  return showLinkDiv;
}

//creates all the elements by calling repective methods and display it on screen by attaching it to document body
function showOverlayWidget() {
  //Reset overlaydiv if any
  destroyOverlayDiv();

  //Creating overlay div and attaching it to body
  var overlayDivElement = createOverlayDiv();
  document.body.appendChild(overlayDivElement);

  //Creating iframe container div and attaching it to overlayfic
  var iframeContainerDiv = createIFrameContainerDiv();
  document.body.appendChild(iframeContainerDiv);

  //re-positioning iframeContainerDiv in center of page
  iframeContainerDiv.style.top   = IFRAME_CONTAINER_TOP + "px";

  //creating overlay iframe and attaching it to overlay div
  var iframeElement = createIFrame();
  iframeContainerDiv.appendChild(iframeElement);

  //creating close button and attaching it to overlay div
  var closeLinkElement = createCloseLinkDiv(((getClientViewPortDimension()[0] - IFRAME_WIDTH)/2 + IFRAME_WIDTH - 5),6);
  document.body.appendChild(closeLinkElement);
  
  var bottomLogoElement = createBottomLogo(((getClientViewPortDimension()[0] - IFRAME_WIDTH)/2 + IFRAME_WIDTH - 193), (IFRAME_HEIGHT + IFRAME_CONTAINER_TOP + 25));
  document.body.appendChild(bottomLogoElement);

  //Adding web document to open in iframe
  iframeElement.setAttribute("src", "http://we.bubbleideas.com/widget-home");
}

//Main execution and function call..
//Creating show overlay link and attaching it to body. onclick of it overlay widget will appear
var showOverlayLinkDivElement = showOverlayLinkDiv("left","240");
document.body.appendChild(showOverlayLinkDivElement);

//showOverlayWidget();