// picture array
var gdiv;
var gimg;
var gimgwidth;
var gimgheight;

// adjust MsgBox on window resize
window.onresize = function adjust() {
										if ( document.getElementById('Lock').style.visibility == 'visible' ) {
                    	showMsgBox(gdiv, gimg, gimgwidth, gimgheight);
                    }
                  }

// show MsgBox   
function showMsgBox(id, img, width, height) {
	gdiv = id;
	gimg = img;
	gimgwidth = width;
	gimgheight = height;

  div = document.getElementById(id);
  lock = document.getElementById('Lock');

  // enable screen lock
  if ( lock ) {
    lock.style.width = frameWidth();
    lock.style.height = frameHeight();
    lock.style.visibility = 'visible';
  }

  // show MsgBox in the middle of the frame
  if ( div ) {
    div.style.top = (frameHeight()/2)-(height/2) + 'px';
    div.style.left = (frameWidth()/2)-(width/2) + 'px';
    div.innerHTML = "<img src='www/img/"+img+"' width='"+width+"' height='"+height+"' style='border: #FFFFFF 10px solid;'>";
    div.style.visibility = 'visible';
  }
}

// hide MsgBox
function hideMsgBox(id) {
  div = document.getElementById(id);
  lock = document.getElementById('Lock');
  // hide MsgBox
  if ( div ) {
    //var height = div.style.height;
    //var width = div.style.width;
    div.style.visibility = 'hidden';
    div.style.top = -1000;
    div.style.left = -1000;
  }

  // disable screen lock
  if ( lock ) {
    lock.style.width = 0 + 'px';
    lock.style.height = 0 + 'px';
    lock.style.visibility = 'hidden';
  }
}

// get frame height
function frameHeight() {
  var height = -1;

  if (typeof(window.innerWidth)=="number") {
    height = window.innerHeight;
  } else {
    height = document.body.clientHeight;
  }

  return height;
}

// get frame width
function frameWidth() {
  var width = -1;

  if (typeof(window.innerWidth)=="number") {
    width = window.innerWidth;
  } else {
    width = document.body.clientWidth;
  }

  return width;
}