document.observe("dom:loaded", function() {
  var images = galleryImages.sortBy(Math.random), padding = 10, columns = 0, rows = 0;
  var chromeHeight = 100;

  function getColumnWidthForCount(columnCount) {
    var viewportWidth = document.viewport.getDimensions().width;
    return Math.round((viewportWidth - padding) / columnCount) - padding;
  }

  function getColumnCount() {
    var count = 0, width;
    do width = getColumnWidthForCount(++count);
    while (width > 280);
    return count;
  }
  
  function getRowCount(columnCount) {
    var width = getColumnWidthForCount(columnCount);
    return Math.max(1, Math.floor(getCanvasHeight() / width));
  }
  
  function getCanvasHeight() {
    return document.viewport.getDimensions().height - chromeHeight;
  }
  
  function drawGalleryTable(columns, rows) {
    var i = images.clone();
    var html = ["<table class=gallery>"];
    rows.times(function(row) {
      html.push("<tr>");
      columns.times(function(column) {
        var imageInfo = i.shift();
        var index = galleryImages.indexOf(imageInfo) + 1;
        html.push("<td width=\"" + Math.round((1 / columns) * 100) + "%");
        html.push("\"><img width=350 src=\"images/thumbnails/" + imageInfo.filename);
        html.push("\" data-index=" + index + "></td>");
      });
      html.push("</tr>");
    });
    html.push("</table>");
    
    return html.join("\n");
  }

  function refresh() {
    var columnCount = getColumnCount(), rowCount = getRowCount(columnCount);
    if (columnCount != columns || rowCount != rows) {
      columns = columnCount, rows = rowCount;
      $("gallery").update(drawGalleryTable(columns, rows));
    }

    var viewportHeight = document.viewport.getDimensions().height;
    var height = padding + (getColumnWidthForCount(columnCount) * rowCount);
    $("gallery").setStyle({ height: Math.floor(height + ((viewportHeight - height) / 2)) + "px" });
    $("chrome").show();
  }
  
  refresh.defer();
  Event.observe(window, "resize", refresh);
});

document.observe("click", function(event) {
  var element = event.findElement("img[data-index]");
  if (element) {
    var index = element.readAttribute("data-index");
    window.location = "viewer.html#/" + index;
    event.stop();
  }
});