var tbase;
var xclip;
var yclip;
function pageLoadAdvanced() {
  tbase = xGetElementById('tbase');
  xclip = xWidth(cvs);
  yclip = xHeight(cvs);
  setSwipeLocation();
  initVSwipe(1);
  enableVSwipe();
  initHSwipe(1);
  enableHSwipe();
  initTrans(1);
  enableTrans();
}
function onAdvancedMapResponse(json, data) {
  var oldTImgs = xGetElementsByClassName('mapimg', tbase, 'img');
  var newImg = document.createElement('img');
  newImg.setAttribute('src', json.tImgUrl);
  xAddClass(newImg, 'mapimg');
  xMoveTo(newImg, curr_left, curr_top);
  tbase.appendChild(newImg);
  setClip()
  setTimeout(function() {for (var i in oldTImgs) tbase.removeChild(oldTImgs[i]);}, 100);
}
function setSwipeLocation() {
  var arrows = xGetElementById('arrows');
  var el = xGetElementById('hswipe_bdr');
  if (el) {
    if (arrows == null) xMoveTo(el, xLeft('canvas_border'), xTop('canvas_border') + xHeight('canvas_border') - bdr);
    xWidth(el, xWidth('canvas_border'));
  }
  el = xGetElementById('vswipe_bdr');
  if (el) {
    if (arrows == null) xMoveTo(el, xLeft('canvas_border') + xWidth('canvas_border') - bdr, xTop('canvas_border'));
    xHeight(el, xHeight('canvas_border'));
  }
}
function initVSwipe(p) {
  var h = xHeight('vswipe_cvs') * p;
  xTop('vswiper', h - (xHeight('vswiper') / 2));
  yclip = h;
}
function initHSwipe(p) {
  var w = xWidth('hswipe_cvs') * p;
  xLeft('hswiper', w - (xWidth('hswiper') / 2));
  xclip = w;
}
function initTrans(p) {
  p = 1 - p;
  var w = (xWidth('trans_cvs') - xWidth('transmaker')) * p;
  xLeft('transmaker', w);
  xOpacity('tbase', 1 - p);
}

// Vertical swipe
function enableVSwipe() {
  var el = xGetElementById('vswiper');
  if (el) {
    el.style.cursor = 'crosshair';
    xEnableDrag(el, vSwipeStart, vSwipeGo, null);
  }
}
function vSwipeStart(el, x, y, ev) {
  var scvs = xGetElementById('vswipe_cvs');
  el.miny = xPageY(scvs);
  el.ch = xHeight(scvs);
  el.maxy = el.miny + el.ch;
  el.y0 = y;
  el.h = xHeight(el) / 2;
  el.s0 = el.miny + xTop(el) + el.h;
}
function vSwipeGo(el, dx, dy, ev) {
  var np, d = el.s0 + ev.pageY - el.y0;
  if (d < el.miny) np = 0 - el.h;
  else if (d > el.maxy) np = el.ch - el.h;
  else np = d - el.miny - el.h;
  xMoveTo(el, 0, np);
  yclip = np + el.h;
  setClip();
}

// Horizontal swipe
function enableHSwipe() {
  var el = xGetElementById('hswiper');
  if (el) {
    el.style.cursor = 'crosshair';
    xEnableDrag(el, hSwipeStart, hSwipeGo, null);
  }
}
function hSwipeStart(el, x, y, ev) {
  var scvs = xGetElementById('hswipe_cvs');
  el.minx = xPageX(scvs);
  el.cw = xWidth(scvs);
  el.maxx = el.minx + el.cw;
  el.x0 = x;
  el.w = xWidth(el) / 2;
  el.s0 = el.minx + xLeft(el) + el.w;
}
function hSwipeGo(el, dx, dy, ev) {
  var np, d = el.s0 + ev.pageX - el.x0;
  if (d < el.minx) np = 0 - el.w;
  else if (d > el.maxx) np = el.cw - el.w;
  else np = d - el.minx - el.w;
  xMoveTo(el, np, 0);
  xclip = np + el.w;
  setClip();
}
function setClip() {
  xGetElementsByClassName('mapimg', tbase, 'img', function(e) { xClip(e, 0, xclip, yclip, 0); });
}

// Transparency
function enableTrans() {
  var el = xGetElementById('transmaker');
  if (el) {
    el.style.cursor = 'crosshair';
    xEnableDrag(el, transStart, transGo, null);
  }
}
function transStart(el, x, y, ev) {
  var tcvs = xGetElementById('trans_cvs');
  el.minx = xPageX(tcvs);
  el.cw = xWidth(tcvs);
  el.maxx = el.minx + el.cw;
  el.x0 = x;
  el.s0 = el.minx + xLeft(el);
  el.w = xWidth(el);
}
function transGo(el, dx, dy, ev) {
  var np, d = el.s0 + ev.pageX - el.x0;
  if (d < el.minx) np = el.minx;
  else if (d + el.w > el.maxx) np = el.maxx - el.w;
  else np = d;
  xMoveTo(el, np - el.minx);
  var tr = Math.max(0.01, (xLeft(el) / (el.cw - el.w)));
  xOpacity(tbase, 1 - tr);
}