function animate() { // panel animations
  ahTop += inc * 5; thRight += inc * thumbWinWidth / 75 * 5;
  object("artheader").style.top = ahTop + "px";
  object("thumbs").style.right = thRight + "px";
  if (ahTop < -75 || ahTop > 0 || thRight < -thumbWinWidth || thRight > 0) {
    // stop animation
    window.clearInterval(slidePanels);
    // fix panels into place
    if (ahTop > -50) {
      object("artheader").style.top = 0;
      object("thumbs").style.right = 0;
      object("artcontainer").style.visibility = "visible";
    } else {
      object("artheader").style.top = "-75px";
      object("thumbs").style.right = -thumbWinWidth + "px";
      object("artcontainer").style.visibility = "hidden";
      object("outertable2").style.display = "none";
      object("outertable").style.display = "table";
    }
  }
}

var inc = 0;
function readyPanels(io) {
  // open panels
  if (io == 1) {
    object("outertable").style.display = "none";
    object("outertable2").style.display = "table";
    ahTop = -75; thRight = -thumbWinWidth;
  } else {
    // close panels, clear comment screen first
    if (find("screen")) {object("screen").style.visibility = "hidden"}
    ahTop = 0; thRight = 0;
  }
  inc = io;
  slidePanels = window.setInterval("animate()", 10); // start panel animation
}

function sizeArt(view) {
  object("resize").style.display = "inline"; // resize button appears by default
  var w = parseFloat(top.frames["artwindow"].width);
  var h = parseFloat(top.frames["artwindow"].height);
  var winWidth, winHeight, percent;
  var mat = 48; // includes 16px inner borders x 2, 8px outer borders x 2
  // determine viewing space
  var Wfit = object("availspace").offsetWidth - mat;
  var Hfit = object("availspace").offsetHeight - mat;
  // percentages of size decrease. -.04 adds margin around frame
  var Wpct = object("availspace").offsetWidth / (w + mat) - .04;
  var Hpct = object("availspace").offsetHeight / (h + mat) - .04;
  // float artwork
  var Wflt = true;
  var Hflt = true;
  // determine orientation
  var ratio = (Wfit > w) * 10 + (Hfit > h);
  switch (ratio) {
      // both dimensions fit. size art to 100%, window = art size
    case 11: percent = 1; winWidth = w; winHeight = h; break;
      // art is too wide. size width to space and dock it
    case 01: percent = Wpct; winWidth = Wfit; winHeight = h; Wflt = false; break;
      // art is too tall. size height to space and dock it
    case 10: percent = Hpct; winWidth = w; winHeight = Hfit; Hflt = false; break;
      // art is too big. size dimensions to space and dock both
    case 00: percent = Math.min(Wpct, Hpct); winWidth = Wfit; winHeight = Hfit; Wflt = false; Hflt = false; break;
  }
  // FOR ARTWORK
  if (find("art", "artwindow")) {
    // if art fits at 100%, hide resize button
    if (percent == 1) {object("resize").style.display = "none"}
    if (view == true) {
      // size art normally within full screen
      object("art", "artwindow").width = w;
      object("art", "artwindow").height = h;
    } else {
      // size art to percentage
      winWidth = Math.floor(w * percent); winHeight = Math.floor(h * percent);
      Wflt = true; Hflt = true;
      object("art", "artwindow").width = winWidth; object("art", "artwindow").height = winHeight;
      object("art", "artwindow").style.left = "0px"; object("art", "artwindow").style.top = "0px";
    }
      // show artwork
      object("art", "artwindow").style.display = "block";
  // FOR GAMES
  } else {
    var Wflt = true; var Hflt = true;
    if (view == true) {
      // enlarge game to full screen
      var enlarge = Math.min(Wfit / w, Hfit / h);
      winWidth = w * enlarge; winHeight = h * enlarge;
    } else {
      // size game to fit
      winWidth = Math.floor(w * percent); winHeight = Math.floor(h * percent);
      Wflt = true; Hflt = true;
    }
  }
  // size window
  object("artwindow").style.width = winWidth + "px";
  object("artwindow").style.height = winHeight + "px";
  // center window in space
  object("artcontainer").style.left = ((Wfit - winWidth) / 2 * Wflt) + "px";
  object("artcontainer").style.top = ((Hfit - winHeight) / 2 * Hflt + 76) + "px";
  // comment window at 60%
  Wfit = object("availspace").offsetWidth;
  object("screen").style.width = (Wfit * .6) + "px";
  object("screen").style.left = ((Wfit - (Wfit * .6)) / 2 - 28) + "px";
  object("screen").style.bottom = ((Hfit - winHeight) / 2 * Hflt + 48) + "px";
}

// art buttons
var ioNote = false;
var ioSize = false;

function toggleNote() {
  ioNote = !ioNote;
  if (ioNote == true) {object("screen").style.visibility = "visible"}
    else {object("screen").style.visibility = "hidden"}
}

// previous and next
// filenames of all database matches are stored in anchors
// current spot# is called from art_page.php
function goNext(dir) {
  spot = Number(spot) - dir;
  if (spot > document.anchors.length - 1) {spot = 0}
  if (spot < 0) {spot = document.anchors.length - 1}
  top.frames["artwindow"].location = "art_page.php?file=" + document.anchors[spot].name;
}

function placement() {
  screenWidth = object("body").offsetWidth;
  screenHeight = object("body").offsetHeight;
  // make thumbnail window larger for wide screens
  if (screenWidth <= 1024) {thumbWinWidth = 147} // 1 column
    else {thumbWinWidth = 273} // 2 columns
  // make thumbnail window 250px for interactive instructions
  if (object("artcontainer").style.visibility == "visible" && !find("art", "artwindow")) {thumbWinWidth = 250}
  object("sidebar").style.width = thumbWinWidth + "px";
  object("thumbs").style.width = thumbWinWidth + "px";
  object("content").style.height = (screenHeight - (screenHeight * .14) - 240) + "px";
}

window.onresize = function() {
  if (screenWidth != null && screenHeight != null) {
    if (object("body").offsetWidth != screenWidth || object("body").offsetHeight != screenHeight) {
      placement();
    }
  }
}