﻿function showPictureBox(inPath)
{
  var width = document.documentElement.clientWidth + document.documentElement.scrollLeft;

  var layer = document.createElement('div');
  layer.style.zIndex = 2;
  layer.id = 'layer';
  layer.style.position = 'absolute';
  layer.style.top = '0px';
  layer.style.left = '0px';
  layer.style.height = document.documentElement.scrollHeight + 'px';
  layer.style.width = width + 'px';
  layer.style.backgroundColor = 'black';
  layer.style.opacity = '.6';
  layer.style.filter += ("progid:DXImageTransform.Microsoft.Alpha(opacity=60)");
  document.body.appendChild(layer);

  var div = document.createElement('div');
  div.style.zIndex = 3;
  div.id = 'box';
  div.style.position = (navigator.userAgent.indexOf('MSIE 6') > -1) ? 'absolute' : 'fixed';
//  div.style.top = '200px';
//  div.style.left = (width / 2) - (400 / 2) + 'px'; 
//  div.style.height = '50px';
//  div.style.width = '400px';
  div.style.top = 10 + '%';
  div.style.left = 20 + '%';
  div.style.height = 75 + '%'; //450 + 'px';
  div.style.width = 45 + '%'; //650 + 'px';
//  div.style.backgroundColor = 'pink';
  div.setAttribute('class', 'picture-module-box-background');
  div.setAttribute('className', 'picture-module-box-background');
//  div.style.border = '2px solid silver';
  div.style.border = '2px solid #A02134';
  div.style.padding = '20px';
  document.body.appendChild(div);
  
//  var p = document.createElement('p');
//  p.innerHTML = 'Some text';
//  div.appendChild(p);
  
  var sectionTitle = document.createElement('h3');
  if (inPath.toString().indexOf('eyebrows', 0) >= 0)
  {
    sectionTitle.innerHTML = document.getElementById('section-eyebrows').innerHTML;
  }
  else if (inPath.toString().indexOf('eyeliner', 0) >= 0)
  {
    sectionTitle.innerHTML = document.getElementById('section-eyeliner').innerHTML;
  }
  else if (inPath.toString().indexOf('lips', 0) >= 0)
  {
    sectionTitle.innerHTML = document.getElementById('section-lips').innerHTML;
  }
  else if (inPath.toString().indexOf('camouflage', 0) >= 0)
  {
    sectionTitle.innerHTML = document.getElementById('section-camouflage').innerHTML;
  }
  else if (inPath.toString().indexOf('lash-extension') >= 0)
  {
    sectionTitle.innerHTML = document.getElementById('section-lash-extensions').innerHTML;
  }
  else if (inPath.toString().indexOf('hairbrush') >= 0)
  {
    sectionTitle.innerHTML = document.getElementById('section-hairbrush').innerHTML;
  }
  div.appendChild(sectionTitle);
  
//  var d = document.createElement('img');
////  d.src = 'uploads/eyebrows/before_brows_9-2-05.jpg';
//  d.src = inPath;
//  d.style.border = 'solid thin #000000';
//  div.appendChild(d);

  var picDiv = document.createElement('div');
  picDiv.innerHTML = document.getElementById(inPath).innerHTML;
  picDiv.setAttribute('class', 'picture-module-box');
  picDiv.setAttribute('className', 'picture-module-box');
  div.appendChild(picDiv);

  var a = document.createElement('a');
  a.innerHTML = 'Close window';
  a.href = 'javascript:void(0)';
  a.onclick = function()
  {
    document.body.removeChild(document.getElementById('layer'));
    document.body.removeChild(document.getElementById('box'));
  };
 
  div.appendChild(a);
}
