function goNext(rowId) {

boxesPerRow = 4;
myRow = document.getElementById(rowId);
var numChildren = myRow.childNodes.length;

arrowPrevId = "arrow_prev_" + rowId;
arrowNextId = "arrow_next_" + rowId;

// find box that should be hidden
for (var i = 0; i < numChildren; i++) {

// childNode is a box
if (myRow.childNodes[i].className == 'box') {

  // make sure box if not the first one, which is used for interface (and has no ID)
  if (myRow.childNodes[i].getAttribute('id')) {
  // make sure box wasn't already hidden (in that case we need to hide the next one
    if (myRow.childNodes[i].style.display != 'none') {
     myBox = myRow.childNodes[i];
     // do stuff with box
     boxId = myBox.getAttribute('id');     
     new Effect.Shrink(boxId, {duration: 0.5});
     // show prev arrow
     document.getElementById(arrowPrevId).style.display = 'block';
         // keep going to see if we need to hide the arrow
         var boxesLeft = 0;
         i++; // start from next element
         for (var i2 = i; i2 < numChildren; i2++) {
         // childNode is a box
         if (myRow.childNodes[i2].className == 'box') boxesLeft++;
         } 
     if (boxesLeft <= boxesPerRow) document.getElementById(arrowNextId).style.display = 'none';
     break;

    } // if box wasn't already hidden
  } // if box is not the first one

} // if node is a box

} // boxes

} // function goNext



function goPrev(rowId) {

myRow = document.getElementById(rowId);
var numChildren = myRow.childNodes.length;

// find box that should be shown
// go through nodes backwards

var n = numChildren -1; // as array index

for (var i = n; i > -1; i--) {

// childNode is a box
if (myRow.childNodes[i].className == 'box') {

  // make sure box if not the first one, which is used for interface (and has no ID)
  if (myRow.childNodes[i].getAttribute('id')) {
  // if box is hidden...
    if (myRow.childNodes[i].style.display == 'none') {
     myBox = myRow.childNodes[i];

     // do stuff with box
     boxId = myBox.getAttribute('id');
     new Effect.Grow(boxId, {duration: 0.5});
     // show next arrow
     document.getElementById(arrowNextId).style.display = 'block';
     
     // keep going to see if we need to  hide the arrow
     moreBoxes = false;
         i--; // start from next element
         for (var i2 = i; i2 > -1; i2--) {
           // childNode is a box
           if (myRow.childNodes[i2].className == 'box' && myRow.childNodes[i2].getAttribute('id')) moreBoxes = true;
         } 
     if (!moreBoxes) document.getElementById(arrowPrevId).style.display = 'none';
     break;

    } // if box wasn't already hidden
  } // if box is not the first one

} // if node is a box

} // boxes


} // function goPrev