var X, app;

window.onload = function() {
  app = new xDI3(
    "#ffffff", // header bg
    "#ffffff", // col1 bg
    "#ffffff", // col2 bg
    "#ffffff", // footer bg
    0,  // header height
    0,  // footer height
    150, // column 1 width
    0,  // vertical margin
    0,  // horizontal margin
    0,   // inner margin
    0,  // menu x offset
    100,  // menu y offset
    0.4   // menu slide factor
  );
  app.paint();
  xAddEventListener(window, "resize", winResizeListener, false);
  xAddEventListener(window, "scroll", winScrollListener, false);
}
function winResizeListener() {
  if (document.layers) location.replace(location.href);
  else app.paint();
}
function winScrollListener() {
  var y = 0, st = xScrollTop();
  if (st > app.my) y = st - app.my;
  xSlideTo('menu', xLeft('menu'), y, 1200);
//  menuSlide(y);
}

function xDI3(hdrBg, col1Bg, col2Bg, ftrBg, hdrHeight, ftrHeight, col1Width, vMargin, hMargin, iMargin, mXOffset, mYOffset, mSlideFactor) {
  // Properties
  this.hbg = hdrBg;
  this.c1bg = col1Bg;
  this.c2bg = col2Bg;
  this.fbg = ftrBg;
  this.hh = hdrHeight;
  this.fh = ftrHeight;
  this.cw = col1Width;
  this.vm = vMargin;
  this.hm = hMargin;
  this.im = iMargin;
  this.mx = mXOffset;
  this.my = mYOffset;
  this.msf = mSlideFactor;
  this.mm = false;
  this.mt = 0;
  // Methods
  this.paint = function() {
    xBackground('header', this.hbg);
    xBackground('col1', this.c1bg);
    xBackground('col2', this.c2bg);
    xBackground('footer', this.fbg);
    xBackground('bMargin', 'transparent');
    xWidth('col2', (xClientWidth()-(2*this.hm))-this.cw-this.im);
    var ch = xHeight('col2');
    var hw = xClientWidth()-(2*this.hm);
    xResizeTo('header', hw, this.hh);
    xMoveTo('header', this.hm, this.vm);
    xShow('header');

    xResizeTo('col1', this.cw, ch);
    xMoveTo('col1', this.hm, this.hh+this.vm+this.im);
    xShow('col1');
    xMoveTo('col2', xWidth('col1')+this.hm+this.im, xTop('col1'));
    xShow('col2');
    xResizeTo('footer', hw, this.fh);
    xMoveTo('footer', this.hm, xTop('col1')+ch+this.im);
    xShow('footer');
    xResizeTo('bMargin', hw, this.vm);
    xMoveTo('bMargin', this.hm, xTop('footer')+this.fh);
    xShow('bMargin');
    xWidth('menu', this.cw-(2*this.mx));
    xMoveTo('menu', this.mx, ch);
    xShow('menu');
    //winScrollListener(); // initial slide of menu
  } // end paint() method
} // end class xDI3


function menuSlide(iY, iterating) {
  var delta, currentY;
  if (!app.mm) {app.mt = iY;}
  else if (!iterating) {
    app.mt = iY;
    return;
  }
  currentY = xTop('menu');
  app.mm = true;
  if (app.msf < 1) {
    delta = app.msf * Math.abs(Math.abs(currentY) - Math.abs(app.mt));
    if (delta < 1) delta = 1;
  }
  else {delta = app.msf;}
  if (currentY < app.mt) {
    if (currentY + delta <= app.mt) xTop('menu', currentY + delta);
    else xTop('menu', app.mt);
  }
  else if (currentY > app.mt) {
    if (currentY - delta >= app.mt) xTop('menu', currentY - delta);
    else xTop('menu', app.mt);
  }
  else {
    app.mm = false;
    return;
  }
  setTimeout("menuSlide("+app.mt+","+true+")",25);
}