var slideDiv;

function c_start_slide(id) {
 c_end_slide();
 var random = document.getElementById("product_randomizer");

 pos = getPos(random);


 var div = slideDiv = document.createElement('div');
 div.className = 'product_overlay';
 div.style.height = random.offsetHeight + "px";
 div.style.top  = pos.top+'px';
 div.style.left = pos.left+'px';

 if(overlay_titles[id]) {
  var title = document.createElement('div');
  title.className = 'title';
  title.innerHTML = overlay_titles[id];
  div.appendChild(title);
 }

 if(overlay_text[id]) {
  var text = document.createElement('div');
  text.className = 'description';
  text.innerHTML = overlay_text[id];
  div.appendChild(text);
 }

 document.body.appendChild(div);

 for(var i = 1; i <= 10; i++) {
  setTimeout(c_slide_ref(div, random.offsetWidth, i), 50 * i);
 }
}

function c_end_slide() {
 var random = document.getElementById("product_randomizer");
 if(slideDiv != null) {
  var div = slideDiv;
  for(var i = 1; i <= 10; i++) {
   setTimeout(c_slide_ref(div, random.offsetWidth, i, true), 50 * i);
  }
  slideDiv = null;
 }
}

function c_slide_ref(node, width, i, down) {
 return function() {c_slide(node, width, i, down)};
}

function c_slide(node, width, i, down) {
 if(!node) {
  return;
 }
 if(down == true) {
  node.style.width = ((10 - i) /  10 * width) + "px";
  if(i == 10) {
   document.body.removeChild(node);
  }
 }
 else {
  node.style.width = (i / 10 * width) + "px";
 }
}