var bottom = 0;
var padding = 5;
var X = 100;
var Y = 0;

function dropMyPopup() {
  Y++;
  if( Y > bottom ) return;
  document.getElementById("styled_popup").style.top = Y + "px";
  
  setTimeout("dropMyPopup()", 1);
}

function fireMyPopup() {
  var scrolledY;
  if( self.pageYOffset ) {
    scrolledY = self.pageYOffset;
  } else if( document.documentElement && document.documentElement.scrollTop ) {
    scrolledY = document.documentElement.scrollTop;
  } else if( document.body ) {
 
    scrolledY = document.body.scrollTop;
  }

  var centerY;
  if( self.innerHeight ) {
    centerY = self.innerHeight;
  } else if( document.documentElement && document.documentElement.clientHeight ) {
    centerY = document.documentElement.clientHeight;
  } else if( document.body ) {
    centerY = document.body.clientHeight;
  }

  // Don't forget to subtract popup's height! ( 300 in our case )

  bottom = scrolledY + centerY - padding - 370;
  Y = scrolledY;

  document.getElementById("styled_popup").style.right = X + "px";
  document.getElementById("styled_popup").style.display = "block";
  dropMyPopup();
}

function styledPopupClose() {
  document.getElementById("styled_popup").style.display = "none";
  Y = bottom; // if it was closed, make sure extra computations are done in dropMyPopup()
}