var tilesize = 150+20;

// SCROLLER INITIALIZER:
// ==============================================================
addEvent(window, 'load', function() {
  instantiateScroller(0, "tn0", 0, 0, 680, 510, 150);

  if (typeof(a)=="undefined" || !isHandheld) {
    var sb = 510;      // scroll bar height minus button height

    if (theScroll.length > 0) {
      for (var i=0; i<theScroll.length; i++) {
        var siz = getLyr('tn'+i+'Content').h();
        var th = Math.round((tilesize*3)*(sb/siz));
        if (th<26)  th = 26;    // smallest thumb
        lim = sb-th;
        createDragger(i, "thumbnails", -15, -15, 15, theScroll[i].clipH-15, lim);
        getLyr('scrollbar-th-'+i).h(th);
      }
    }
  } else {
    var div = document.getElementById('tn0Content');
    var pos = theScroll[0].scrollTop;
    var h = theScroll[0].clipH;
    var pos,h;
    div.touchAction = function(el,dir) {
      if (dir=='left' || dir=='right')  return;
      if ( dir == 'down' ) {
        if (pos<=0)   return;
        pos -= h;
        if (pos<0)  pos = 0;
      } else if ( dir == 'up' ) {
        var siz = getLyr('tn0Content').h() - 510;
        if (pos>=siz)   return;
        pos += h;
        if (pos>siz)  pos = siz;
      }
      theScroll[0].scrollTo(0, pos, 100);
    } // end of touchAction

    // use setAttribute?
    div.ontouchstart = function(e) {
      touchStart(e,'tn0Content');
    }
    div.ontouchend = function(e) {
      touchEnd(event);
    }
    div.ontouchmove = function(e) {
      touchMove(event);
    }
    div.ontouchcancel = function(e) {
      touchCancel(event);
    }

    theScroll[0].load();
  }
});


function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}



  var detailBox = null;
  var detailArrow = null;
  var detailTimer = null;
  var boxPositions = Array(205,195,365,35);   // cols 4,1,2,3
  var arrowPositionsX = Array(498,171,341,328);   // cols 4,1,2,3
  var arrowTypes = Array('right','left');
  function showDetail(x,idc,cid) {
    if (isHandheld)   return;   // ignore this, until we figure out how to handle it.
    if (detailTimer)  clearTimeout(detailTimer);
    detailTimer = setTimeout('showDetailBox('+x+',"'+idc+'","'+cid+'");',250);
  }
  function showDetailBox(x,idc,cid) {
   // First, clear the detail timer value.
    detailTimer = null;
   // Get the content layer, and calculate the top position (which should be
   // zero or negative), the current row number, and the position of the top
   // of the current tile.
    var r = getLyr('tn0Content');
    var toprow = Math.floor((Math.abs(r.y())+tilesize)/tilesize)-1;
    var toppos = Math.abs(r.y());
    var currow = Math.floor((x+3)/4);
    var curpos = (currow-1)*tilesize;
    var offset = (curpos-toppos);
   // if the potential arrow position is too high or too low (exceeds the
   // bounds of the detail box), don't display anything.
    if ((offset < 0) || (offset > 425)) {
      hideDetailBox();
      return;
    }
   // Set the position of the detail box, and display it.
    if (detailBox) {
      detailBox.x(boxPositions[x%4]);
      detailBox.sty.visibility = 'visible';
      getRef('detailContent').src = '/store/_detailFlyover.php?id='+idc+
                                    '&cid='+readCookie('corpID')+
                                    '&cust='+readCookie('custID');
    }
   // The detail arrow position was calculated above, so we just show it.
    if (detailArrow) {
      detailArrow.x(arrowPositionsX[x%4]);
      detailArrow.y(35 + offset);
      ax = Math.floor((x+1)/2)%2;
      getRef('detailArrow').className = 'detailArrow-'+arrowTypes[ax];
      detailArrow.sty.visibility = 'visible';
    }
  }
  function hideDetail() {
    if (detailTimer)  clearTimeout(detailTimer);
    detailTimer = setTimeout('hideDetailBox();',500);
  }
  function hideDetailBox() {
    detailTimer = null;
    if (detailBox)  detailBox.sty.visibility = 'hidden';
    if (detailArrow)  detailArrow.sty.visibility = 'hidden';
  }
  function keepDetail() {
    if (detailTimer)  clearTimeout(detailTimer);
  }
  function startDetail() {
   // Prepare the detail box and arrow, so we can pop them up when needed.
    detailBox = getLyr('detailBox');
    detailArrow = getLyr('detailArrow');
  }
  addEvent(window, 'load', startDetail);