That's an amazing script!! And it works very smoothly and it is stable...moreover it's code is lightweight and this is very good as mootools library takes too lonk to load on a page.

I was experimenting with the script and I thought that it could be useful to add more squares, so I tried and I added in the html file two new divs with each their id's content5 and content6.

I wanted a grid of 6 squares like this:
1 | 2
3 | 4
5 | 6

So in the fob.js file I added 8 rows in the setup function: 4 in the position and 4 in the dimension:

//position document.getElementById('content5').style.left= "0px";
document.getElementById('content5').style.top= sheight + sheight +"px";
document.getElementById('content6').style.left= swidth +"px";
document.getElementById('content6').style.top= sheight + sheight +"px";

//
document.getElementById('content5').style.width=swidth +"px";
document.getElementById('content5').style.height=sheight + "px";
document.getElementById('content6').style.width=swidth +"px";
document.getElementById('content6').style.height=sheight + "px";

Then I tested the new grid, and everything gone well for squares 1,2 and 5,6 but for the middle ones 3,4 the scroll function gave a bad orizontal distance while scrolling. I imagine that this is due to the scroll function that was thought for a 2x2 grid. Isn't it?

Can you suggest how to edit the script to add more squares, 6 in this example or more?

Thank you very much!
Jos