function showProduct(ref)
 {
  var request;
  if(window.XMLHttpRequest) request = new XMLHttpRequest();
  else if(window.ActiveXObject) request = new ActiveXObject("Microsoft.XMLHTTP");

  request.open("GET", ref+'.html', false);
  request.setRequestHeader('X-Requested-With','XMLHttpRequest');
  request.send();

  if(request.readyState == 4)
   {
    if(request.status == 200)
     {
      var grayLayer=document.getElementById('grayLayer');
      var productBox=document.getElementById('productBox');
      grayLayer.style.display='block';
      productBox.innerHTML=request.responseText;
      productBox.style.display='block';
      productBox.style.left=(-productBox.scrollWidth)+'px';
      productBox.style.top=((document.documentElement.clientHeight-productBox.scrollHeight)>>1)+'px';
      openProduct();
     }
    delete request;
    request=null;
   }
 }

function openProduct() {
  var productBox=document.getElementById('productBox');
  var posLeft=((document.documentElement.clientWidth-productBox.scrollWidth)>>1);
  if(productBox.offsetLeft<posLeft) {
    productBox.style.left=((productBox.offsetLeft>(posLeft-60))?posLeft:productBox.offsetLeft+60)+'px'
    window.setTimeout(openProduct,40);
   }
  else if(productBox.clientHeight<500) {
    productBox.style.height=((productBox.clientHeight>440)?480:productBox.clientHeight+60)+'px';
    window.setTimeout(openProduct,40);
   }
  else document.forms['product'].elements['closeButton'].disabled=false;
 }

function closeProduct() {
  var productBox=document.getElementById('productBox');
  document.forms['product'].elements['closeButton'].disabled=true;
  if(productBox.clientHeight>49) {
    productBox.style.height=((productBox.clientHeight<89)?29:productBox.clientHeight-60)+'px';
    window.setTimeout(closeProduct,40);
   }
  else if(productBox.offsetLeft<document.documentElement.clientWidth) {
    productBox.style.left=(productBox.offsetLeft+60)+'px'
    window.setTimeout(closeProduct,40);
   }
  else {
    var grayLayer=document.getElementById('grayLayer');
    grayLayer.style.display='none';
    productBox.style.display='none';
   }
 }