var O = [];
  var iL;
  var scr;
  var grd;
  var grs;
  var tit;
  var cap;
  var xm = 0;
  var ym = 0;
  var nx = 0;
  var ny = 0;
  var nw = 0;
  var nh = 0;
  var cx = 0;
  var cy = 0;
  var cz = .2;
  var Tw = 0;
  var Th = 0;
  var X  = 0;
  var Y  = 0;
  var F  = false;
  var Fo = false;
  var NK = 0;
  var ZM = .8;      // init zoom
  var NX = 5;      // Number of pics tall
  var NY = 5;      // Number of pics wide
  var NB = 1.2;    // border size
  var Mz = NX * 2; // max zoom
  var mz = .1;     // min zoom

  var path   = "pics/"; // my picture directory

  var images = [
  //    source, title, caption
    ["joshua2007.jpg","- 01 -","joshua 2007"],
    ["brandon2007.jpg","- 02 -","brandon 2007"],
    ["caleb2007.jpg","- 03 -","caleb 2007"],
    ["payden2007.jpg","- 04 -","payden 2007"],
    ["nollee2007.jpg","- 05 -","nollee 2007"],
    ["maddux2007.jpg","- 06 -","maddux 2007"],
    ["joshua2006.jpg","- 07 -","joshua 2006"],
    ["brandon2006.jpg","- 08 -","brandon 2006"],
    ["caleb2006.jpg","- 09 -","caleb 2006"],
    ["payden2006.jpg","- 10 -","payden 2006"],
    ["nollee2006.jpg","- 11 -","nollee 2006"],
    ["maddux2006.jpg","- 12 -","maddux 2006"],
    ["joshua2005.jpg","- 13 -","joshua 2005"],
    ["brandon2005.jpg","- 14 -","brandon 2005"],
    ["caleb2005.jpg","- 15 -","caleb 2005"],
    ["payden2005.jpg","- 16 -","payden 2005"],
    ["nollee2005.jpg","- 17 -","nollee 2005"],
    ["joshua2004.jpg","- 18 -","joshua 2004"],
    ["brandon2004.jpg","- 19 -","brandon 2004"],
    ["caleb2004.jpg","- 20 -","caleb 2004"],
    ["payden2004.jpg","- 21 -","payden 2004"],
    ["joshua2003.jpg","- 22 -","joshua 2003"],
    ["brandon2003.jpg","- 23 -","brandon 2003"],
    ["caleb2003.jpg","- 24 -","caleb 2003"],
    ["payden2003.jpg","- 25 -","payden 2003"],
  ];

  // mouse move code from js site
  document.onmousemove = function(e)
  {
    if (!F)
    {
      if (window.event)
      {
        e = window.event;
      }
      xm = Math.min(nw, Math.max(0, (e.x || e.clientX) - nx));
      ym = Math.min(nh, Math.max(0, (e.y || e.clientY) - ny));
    }
  }

  //image resize from
  function resize()
  {
    nx = scr.offsetLeft;
    ny = scr.offsetTop;
    nw = scr.offsetWidth;
    nh = scr.offsetHeight;
    Tw = nw * cz;
    Th = nh * cz;
    for (var i in O)
    {
      O[i].resize();
    }
  }

  onresize = resize;

  //from mozilla.dev
  function scroll(e)
  {
    if (!F)
    {
      var z = 0;
      if (e)
      {
        /* Moz */
        z = (e.detail > 0) ? 1 :  - 1;
      }
      else
      {
        /* IE */
        z = (event.wheelDelta < 0) ? 1 :  - 1;
      }
      if (z > 0)
      {
        if (ZM < Mz)
        {
          /* zoom in */
          ZM *= 1.2;
        }
      }
      else
      {
        if (ZM > mz)
        {
          /* zoom out */
          ZM *= .8;
        }
      }
    }
    else
    {
      /* unlock image */
      F = false;
    }
  }

  if (window.addEventListener)
  {
    /* Moz */
    window.addEventListener('DOMMouseScroll', scroll, false);
  }
  else
  {
    /* IE */
    document.onmousewheel = scroll;
  }

  //building the images
  function Img(n, x, y)
  {
    this.x      = x;
    this.y      = y;
    this.n      = n;
    this.loaded = false;

    /* create image */
    this.img        = document.createElement("img");
    this.img.obj    = this;
    this.img.src    = document.getElementById('loading').src;
    grd.appendChild(this.img);
    this.ims = this.img.style;

    /* preload */
    this.pre        = new Image();
    this.pre.obj    = this;
    this.pre.onload = function()
    {
      this.obj.loaded     = true;
      this.obj.img.src    = this.src;
    }
    this.pre.src    = path + images[n % iL][0];

    /* mouse events */
    this.img.ondrag        = function() { return false; }
    this.img.onselectstart = function() { return false; }
    this.img.ondblclick    = this.img.onmousedown;

    /* onclick image */
    this.img.onmousedown = function()
    {
      if (this.obj.loaded)
      {
        if (F)
        {
          /* zoom out */
          ZM = NK;
          F  = false;
        }
        else
        {
          /* zoom in */
          F  = this;
          NK = ZM;
          ZM = NX + .1;
          xm = (((nw / NB) * .5) / NX) + F.obj.x * nw / NX;
          ym = (((nh / NB) * .5) / NY) + F.obj.y * nh / NY;
        }
      }
      return false;
    }

    /* update text image */
    this.img.onmouseover = function()
    {
      if(Fo)
      {
        Fo.obj.border(false);
      }
      if (this.obj.loaded)
      {
        var i = images[this.obj.n % iL];
        tit.innerHTML = i[1];
        cap.innerHTML = i[2];
        Fo = this;
        Fo.obj.border(true);
      }
      else
      {
        tit.innerHTML = "";
        cap.innerHTML = "";
      }
    }

    /* resize image */
    this.resize = function()
    {
      this.ims.left   = Math.round(NB * this.x * Tw / NX) + 'px';
      this.ims.top    = Math.round(NB * this.y * Th / NY) + 'px';
      this.ims.width  = Math.round(Tw / NX) + 'px';
      this.ims.height = Math.round(Th / NY) + 'px';
      if(this == Fo.obj)
      {
        this.border(true);
      }
    }
    /* borderSize */
    this.border = function(over)
    {
      var b = 0;
      var m = 0;
      if (over)
      {
        b = Math.round(((NB * Th / NY) - (Th / NY)) * .5);
        m = 2 - b;
        this.img.className = "over";
      }
      else
      {
        this.img.className = "";
      }
      this.ims.borderWidth = b + 'px';
      this.ims.marginLeft  = m + 'px';
      this.ims.marginTop   = m + 'px';
    }
  }

  function run()
  {
    /* zoom speed */
    var vz = (ZM - cz) * .05;
    if (Math.abs(vz) > .001)
    {
      resize();
    }
    else
    {
      vz = 0;
    }

    /* soften move */
    cz += vz;
    cx += (xm - cx) * .1;
    cy += (ym - cy) * .1;

    /* move grid */
    grs.left = Math.round((nw * .5) - (NB * cx * Tw / nw)) + 'px';
    grs.top  = Math.round((nh * .5) - (NB * cy * Th / nh)) + 'px';

    setTimeout(run, 16);
  }


  onload = function()
  {
    grd = document.getElementById("grid");
    grs = grd.style;
    scr = document.getElementById("screen");
    tit = document.getElementById("title");
    cap = document.getElementById("caption");
    iL  = images.length;

    /* create grid */
    var k = 0;
    for (var y = 0; y < NY; y++)
    {
      for (var x = 0; x < NX; x++)
      {
        O.push(new Img(k++, x, y));
      }
    }

    /* run */
    resize();
    cx = xm = nw / 2;
    cy = ym = nh / 2;
    run();
    /* hide notice */
    setTimeout( function () {
      document.getElementById('notice').style.visibility = 'hidden';
    }, 30000);
  }