window.onresize = checkMask;

// this function will see if the mask is currently applied.
// if so, it will do it again, but calling the applyMask function.
// why? one reason could be that the user resized the window.
function checkMask() {
  if (document.getElementById('mask1').style.display == 'block') {
    applyMask(maskNumber);
  }
}

// applying a mask to the whole page.
// two divs are on the page, hidden (one is white transparent, one is black transparent).
// they will be resized to the current website/window size and shown.

var maskNumber = '';

function applyMask(theMaskNumber) {
  if (typeof(theMaskNumber) == 'undefined') theMaskNumber = '';
  maskNumber = theMaskNumber;
  maskH = '0px';
  maskW = '0px';
  windowH = getInsideWindowHeight();
  windowW = getInsideWindowWidth();
  contentH = getObjectHeight('wrapper');
  contentW = getObjectWidth('wrapper');
  // alert('windowH = ' + windowH + '\nwindowW = ' + windowW + '\ncontentH = ' + contentH + '\ncontentW = ' + contentW + '\n\nisIE4 = ' + isIE4);
  var extraW = 0;
  var extraH = 0;
  if (!isIE4) {
    if (windowH <= contentH && windowW > contentW) {
      // alert('windowH <= contentH && windowW > contentW');
      extraW = -18;
      extraH = 22;
    }
    else if (windowH <= contentH && windowW <= contentW) {
      // alert('windowH <= contentH && windowW <= contentW');
      extraW = 0;
      extraH = 22;
    }
    else if (windowH > contentH && windowW <= contentW) {
      // alert('windowH > contentH && windowW <= contentW');
      extraW = 0;
      extraH = -20;
    }
  }
  if (windowH > contentH) maskH = windowH + extraH;
  else maskH = contentH + extraH;
  if (windowW > contentW) maskW = windowW + extraW;
  else maskW = contentW + extraW;
  document.getElementById('mask1').style.width = maskW + 'px';
  document.getElementById('mask1').style.height = maskH + 'px';
  document.getElementById('mask2').style.width = maskW + 'px';
  document.getElementById('mask2').style.height = maskH + 'px';
  document.getElementById('mask1').style.display = 'block';
  document.getElementById('mask2').style.display = 'block';
  document.getElementById('above_mask' + theMaskNumber).style.display = 'block';
  var aboveMaskH = getObjectHeight('above_mask' + theMaskNumber);
  if (aboveMaskH + 75 > maskH) {
    document.getElementById('mask1').style.height = aboveMaskH + 125 + 'px';
    document.getElementById('mask2').style.height = aboveMaskH + 125 + 'px';
  }
}

function hideMask() {
  document.getElementById('mask1').style.display = 'none';
  document.getElementById('mask2').style.display = 'none';
  document.getElementById('above_mask' + maskNumber).style.display = 'none';
  if (secondMask) resetMask2();
}

var above_mask_table_css;
var secondMask = false;
function applyMask2(imageContent) {
  if(above_mask_table_css == undefined) {
    above_mask_table_css = document.getElementById('above_mask_table').className;
  }
  document.getElementById('above_mask_table').className = above_mask_table_css + ' above_mask_table_faded';
  setOpacity('table_title',10);
  setOpacity('icon_close',10);
  setOpacity('table_header',10);
  setOpacity('tA',10);
  document.getElementById('above_mask2').style.display = 'block';
  document.getElementById('mask2content').innerHTML = '<img src="' + imageContent + '" style="clear: both;" />';
  secondMask = true;
}

function resetMask2() {
  if(above_mask_table_css != undefined) {
    document.getElementById('above_mask_table').className = above_mask_table_css;
  }
  setOpacity('table_title',100);
  setOpacity('icon_close',100);
  setOpacity('table_header',100);
  setOpacity('tA',100);
  document.getElementById('mask2content').innerHTML = '&nbsp;';
  document.getElementById('above_mask2').style.display = 'none';
  secondMask = false;
}