var x = new Array();
var y = new Array();
var w = new Array();
x["pp0"] = 43;
y["pp0"] = 20;
w["pp0"] = 28;
x["pp1"] = 127;
y["pp1"] = 48;
w["pp1"] = 28;
x["pp2"] = 183;
y["pp2"] = 20;
w["pp2"] = 28;
x["pp3"] = 211;
y["pp3"] = 48;
w["pp3"] = 28;
x["pp4"] = 267;
y["pp4"] = 20;
w["pp4"] = 28;
x["pp5"] = 323;
y["pp5"] = 48;
w["pp5"] = 28;
x["pp6"] = 379;
y["pp6"] = 48;
w["pp6"] = 28;
x["pp7"] = 407;
y["pp7"] = 20;
w["pp7"] = 28;
x["pp8"] = 463;
y["pp8"] = 48;
w["pp8"] = 28;

var t = new Array(); // stores timeouts
var m = new Array(); // stores flags: is a box growing/shrinking?

function start_big(id) {
  for(i=0;i<9;i++)
    div = document.getElementById("pp"+i);
    if (!m["pp"+i])
      div.className = "pi";
    else
      div.className = "pi pitop0";
  div = document.getElementById(id);
  div.className = "pi pitop";
  clearTimeout(t[id]);
  m[id] = true;
  big(id);
}
function big(id) {
  if(w[id] > 61) { return; }
  w[id] += 2;
  div = document.getElementById(id);
  div.style.width  = w[id] + 'px';
  div.style.height = w[id] + 'px';
  div.style.top    = (--y[id]) + 'px';
  div.style.left   = (--x[id]) + 'px';
  t[id] = setTimeout('big("' + id + '")', 10);
}
function start_small(id) {
  div = document.getElementById(id);
  div.className = "pi pitop0";
  clearTimeout(t[id]);
  small(id);
}
function small(id) {
  div = document.getElementById(id);
  if (w[id] < 29) { m[id] = false; div.className = "pi"; return; }
  w[id] -= 2;
  div.style.width  =  w[id] + 'px';
  div.style.height = w[id] + 'px';
  div.style.top    = (++y[id]) + 'px';
  div.style.left   = (++x[id]) + 'px';
  t[id] = setTimeout('small("' + id + '")', 30);
}