function setup() {
	// grab everything of class fragment
  var arr = document.getElementsByClassName("fragment");
  var viewport = getViewportSize();
  // get this size of something as wide as a fragment
  var fragmentSize = $('makeNice').getDimensions();
  // include a few pixel fudge factor in offset
  var fudge=8;
  // highBound needs extra fudge for scroll bar
  var xBound = {low: fudge,
	  high:viewport.width - (fragmentSize.width+50)
  };
  // roughly how many fragments could fit horizontally adjacent without making viewport scroll?
  var clipsPerLine = Math.floor(viewport.width/fragmentSize.width);
  //console.log("clips per line:" + clipsPerLine);
  // if we packed all the fragments, how many "lines" would it take
  var clipLines = Math.round(arr.length / clipsPerLine);
  //console.log("would take " + clipLines + " lines");
  // double clipLines, multiply by makeNice.height to get upper yBound
  var yy = (clipLines*2)*fragmentSize.height;
  //console.log("upperbound " + yy);
  // if it's smaller than the viewport.height, use that instead
  yy = Math.max(yy,viewport.height);
  //console.log("upperbound " + yy);
  var yBound = {low:fudge*3,
	  high:yy
  };
  for (var ii=0;ii<arr.length ;ii++ ) {
	  // randomize the x
	  arr[ii].style.left = xBound.low + Math.floor(Math.random()*xBound.high)+"px";
	  // randomize the y
	  arr[ii].style.top = yBound.low + Math.floor(Math.random()*yBound.high)+"px";
	  // make it draggable
	  new Draggable(arr[ii]);
  }
}


// thank you ppk
function getViewportSize() {
var x,y;
if (self.innerHeight) // all except Explorer
{
	x = self.innerWidth;
	y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
	// Explorer 6 Strict Mode
{
	x = document.documentElement.clientWidth;
	y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
	x = document.body.clientWidth;
	y = document.body.clientHeight;
}
return ({width:x, height:y});
}