function getSizeXY() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return [ myWidth, myHeight ]
}

function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}

function popUp() {
  var temp = getSizeXY();
  var windowWidth = temp[0];
  var windowHeight = temp[1];
  temp = getScrollXY();
  var scrollX = temp[0];
  var scrollY = temp[1];
  var bgcontainer = document.getElementById("bgcontainer");
  bgcontainer.style.top = "0px";
  bgcontainer.style.left = "0px";
  bgcontainer.style.width = windowWidth + scrollX + "px";
  bgcontainer.style.height = windowHeight + scrollY + "px";
  bgcontainer.style.display = "block";
  var innercontainer = document.getElementById("innercontainer");
  innercontainer.style.left = (windowWidth/2 + scrollX - innercontainer.offsetWidth/2)+"px";
  innercontainer.style.top = (windowHeight/2 + scrollY - innercontainer.offsetHeight/2)+"px";
  innercontainer.style.visibility = "visible";
  fade('in');
}

function fade(state) {
  var speed = 20;
  var opacEnd = 100;
  var opacStart = 1;
  var timer = 0;
  if(state == "in") {
   for(i = opacStart; i <= opacEnd; i++) {
      if(i <= 60) { setTimeout("changeOpacBg("+ i + ")",(timer * speed /2)); }
      setTimeout("changeOpacInner("+ i + ")", timer * speed / 4);
      timer++;
    }
  } else if(state == "out") {
    for(i = opacEnd; i >= opacStart -1; i--) {
      if(i >= 75) { setTimeout("changeOpacBg("+ (i-75) + ")",(timer * speed)); }
      setTimeout("changeOpacInner("+ i + ")",(timer * speed / 5));
      timer++;
    }
  }
}

function changeOpacBg(opacity) { 
  var obj = document.getElementById("bgcontainer");
  changeOpacity(obj,opacity);
} 
function changeOpacInner(opacity) {
  obj = document.getElementById("innercontainer");
  changeOpacity(obj,opacity);
}
function changeOpacity(obj,opacity) {
  obj.style.opacity = (opacity / 100);
  obj.style.MozOpacity = (opacity / 100);
  obj.style.KhtmlOpacity = (opacity / 100);
  obj.style.filter = "alpha(opacity=" + opacity + ")";
  if(opacity == 0) {
    if(obj.id == "bgcontainer") {
      document.getElementById("bgcontainer").style.display = "none";
      document.getElementById("innercontainer").style.visibility = "hidden";      
    }  
  }
}