// Some useful Window / DOM functions

function getPos(el)
{
	var l = 0;
	var t = 0;
  if (el.offsetParent)
  {
    do
    {
			l += el.offsetLeft;
			t += el.offsetTop;
    }
    while (el = el.offsetParent);
  }
  return [l, t];
}

function getCenteredPos(w, h)
{
  var winW, winH, scr, t, l;
  if(typeof(window.innerWidth) == 'number' && typeof(window.pageYOffset) == 'number')
  {
    winW = window.innerWidth;
    winH = window.innerHeight;
    scr = window.pageYOffset;
  }
  else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight))
  {
    winW = document.documentElement.clientWidth;
    winH = document.documentElement.clientHeight;
    scr = document.documentElement.scrollTop;
  }
  else if (document.body && (document.body.clientWidth || document.body.clientHeight))
  {
    winW = document.body.clientWidth;
    winH = document.body.clientHeight;
    scr = document.body.scrollTop;
  }
  t = Math.round((winH/2 - h/2), 0) + scr;
  l = Math.round((winW/2 - w/2), 0);
  return [t, l];
}

// Manage waiting for features to load (forms, full size pics, etc)
// Display overlay with waiting animation
// remove waiting animation when loaded
// ensure only one feature is being loaded at the same time
var wStateLoaded = new Array();
var waitUnder = null;
var waitOver = null;
var waitIndex = null;
var waitInt = null;
var waitCallback = null;

function newWaitState()
{
  wStateLoaded[wStateLoaded.length] = false;
  return (wStateLoaded.length - 1);
}

function start_waiting(under, index, callback)
{
  if (waitInt != null)
  {
    if (waitIndex != index)
    {
      // Waiting for different pic
      // stop interval, remove overlay & reset
      window.clearInterval(waitInt);
      document.body.removeChild(waitOver);
      waitCallback(false, waitUnder, waitIndex);
      waitInt = null;
      waitOver = null;
      waitUnder = null;
      waitIndex = null;
      waitCallback = null;
    }
    else
    {
      // dont restart waiting for same pic
      return;
    }
  }

  var lt = getPos(under);
  var el = document.createElement("div");
  el.className = "loadingOverlay";
  el.style.width = under.style.width;
  el.style.height = under.style.height;
  el.style.top = "" + lt[1] + "px";
  el.style.left = "" + lt[0] + "px";
  setOpacity(el, 80);
  var waitImg = document.createElement("img");
  waitImg.src = "http://www.boatlocator.com.au/images/waiting.gif";
  el.appendChild(waitImg);
  document.body.appendChild(el);
  
  waitUnder = under;
  waitOver = el;
  waitIndex = index;
  waitCallback = callback;
  waitInt = window.setInterval("wait_for_wstate()", 250);
}

function wait_for_wstate()
{
  if (waitOver != null && waitUnder != null)
  {
    if (wStateLoaded[waitIndex])
      stop_waiting();
  }
}

function stop_waiting()
{
  if (waitOver != null && waitUnder != null)
  {
    window.clearInterval(waitInt);
    document.body.removeChild(waitOver);
    if (waitCallback != null)
      waitCallback(true, waitUnder, waitIndex);
    
    waitInt = null;
    waitOver = null;
    waitUnder = null;
    waitIndex = null;
    waitCallback = null;
  }
}

// Image gallery features

var listingPics = new Array();
var fsPicIndex = 0;

function img_loaded(e)
{
  if (this.picIndex != null)
  {
    wStateLoaded[this.picIndex] = true;
  }
  return true;
}

function loadImg(index)
{
  if (!wStateLoaded[this.picIndex] && (listingPics[index].src.indexOf("/full/") < 0))
  {
    var thumb = listingPics[index].src;
    var i = thumb.lastIndexOf("/");
    if (i > -1)
    {
      var full = thumb.substring(0, i) + "/full" + thumb.substring(i, thumb.length);
      listingPics[index] = new Image();
      listingPics[index].picIndex = index;
      listingPics[index].onload = img_loaded;
      listingPics[index].src = full;
    }
  }
}

function buffer_forward(i, n)
{
  var j = i + n;
  if (j > (listingPics.length))
    j = listingPics.length;
  for (var k=i; k<j; k++)
    loadImg(k);
}

function buffer_back(i, n)
{
  var j = i - n;
  if (j < 0)
    j = 0;
  for (var k=j; k<i; k++)
    loadImg(k);
}

function buffer_around(i, n)
{
  buffer_forward(i, n);
  buffer_back(i, n);
}

function init_images()
{
  var imgs = document.body.getElementsByTagName("IMG");
  var wsi;
  for (var i=0; i<imgs.length; i++)
  {
    if (imgs[i].className && imgs[i].className == "boatPic")
    {
      wsi = newWaitState();
      listingPics[wsi] = imgs[i];
      imgs[i].picIndex = wsi;
      imgs[i].onmousedown = img_mousedown;
      imgs[i].onmouseup = img_mouseup;
      imgs[i].onmouseout = img_mouseup;
      imgs[i].onclick = img_click;
      imgs[i].style.cursor = "pointer";
    }
  }
  
  var j = 5;
  if (listingPics.length < j)
    j = listingPics.length;
  for (var i=0; i<j; i++)
    loadImg(i);
}

function win_resize()
{
  var el = document.getElementById("PICBOX");
  var pos = getCenteredPos(666, 544);
  if (pos[0] < 0) { pos[0] = 0; }
  if (pos[1] < 0) { pos[1] = 0; }
  el.style.top = pos[0] + "px";
  el.style.left = pos[1] + "px";
  
  if (document.body.scrollTop)
  {
    document.getElementById("CLICK_SHIELD").style.top = document.body.scrollTop + "px";
  }
  else if (document.documentElement.scrollTop)
  {
    document.getElementById("CLICK_SHIELD").style.top = document.documentElement.scrollTop + "px";
  }
  else if (window.pageYOffset)
  {
    document.getElementById("CLICK_SHIELD").style.top = window.pageYOffset + "px";
  }
  
  return true;
}

function draw_fullsize(loaded, under, index)
{
  if (loaded && !document.getElementById('PICBOX'))
  {
    var sels = document.body.getElementsByTagName("select");
    for (var j=0; j<sels.length; j++)
      sels[j].style.display = 'none';
    setOpacity(document.getElementById('content'), 7);
    setOpacity(document.getElementById('footer'), 7);
    document.documentElement.style.overflow = 'hidden';
    // todo: add left padding to body for different scroll bar widths
    
    var cs = document.createElement('div');
    cs.id = "CLICK_SHIELD";
    cs.className = "clickShield";

    var isIE = (document.all && !window.opera && (window.navigator.appVersion.indexOf("IE 6.") != -1)); // TODO: proper browser check
    var cn = "picBoxPNG";
    if (isIE)
      cn = "picBoxFilter";
      
    var picBox = document.createElement("div");
    picBox.id = "PICBOX";
    picBox.className = cn;
    var pbt = document.createElement("div");
    pbt.className = "picBoxTop";
    pbt.innerHTML = "<b>&nbsp;</b>";
    var pbr = document.createElement("div");
    pbr.className = "picBoxRight";
    pbr.innerHTML = "<b>&nbsp;</b>";
    var pbb = document.createElement("div");
    pbb.className = "picBoxBot";
    pbb.innerHTML = "<b>&nbsp;</b>";
    var pbl = document.createElement("div");
    pbl.className = "picBoxLeft";
    pbl.innerHTML = "<b>&nbsp;</b>";
    
    var picCont = document.createElement("div");
    picCont.className = "picBoxCont";
    var lgeImg = document.createElement("img");
    lgeImg.id = "fsPic";
    lgeImg.className = "lgeBoatPic";
    lgeImg.style.width = "640px";
    lgeImg.style.height = "480px";
    picCont.appendChild(lgeImg);
    
    var picBtns = document.createElement("div");
    picBtns.className = "picControls";
    var backBtn = document.createElement("a");
    backBtn.className = "picBackBtn";
    backBtn.onclick = back_click;
    backBtn.ondblclick = back_click;
    var fwdBtn = document.createElement("a");
    fwdBtn.className = "picFwdBtn";
    fwdBtn.onclick = fwd_click;
    fwdBtn.ondblclick = fwd_click;
    var closeBtn = document.createElement("a");
    closeBtn.className = "picCloseBtn";
    closeBtn.onclick = close_click;
    closeBtn.ondblclick = close_click;
    picBtns.appendChild(backBtn);
    picBtns.appendChild(fwdBtn);
    picBtns.appendChild(closeBtn);
    
    picBox.appendChild(pbt);
    picBox.appendChild(pbl);
    picBox.appendChild(picCont);
    picBox.appendChild(pbr);
    picBox.appendChild(pbb);
    picBox.appendChild(picBtns);
    document.body.appendChild(cs);
    document.body.appendChild(picBox);
    
    win_resize();
    window.onresize = win_resize;
    change_fsimage(true, document.getElementById("fsPic"), index);
  }
}

function img_mousedown(e)
{
  this.style.width = "217px";
  this.style.height = "160px";
  this.style.margin = "5px 23px 17px 23px";
}

function img_mouseup(e)
{
  this.style.width = "227px";
  this.style.height = "170px";
  this.style.margin = "0 18px 12px 18px";
}

function img_click(e)
{
  if (this.picIndex != null)
  {
    if (!wStateLoaded[this.picIndex])
    {
      loadImg(this.picIndex);
      buffer_around(this.picIndex, 2);
      start_waiting(this, this.picIndex, draw_fullsize);
    }
    else
    {
      buffer_around(this.picIndex, 2);
      draw_fullsize(true, this, this.picIndex);
    }
  }
}

function change_fsimage(loaded, under, index)
{
  if (loaded)
  {
    fsPicIndex = index;
    document.getElementById("fsPic").src = listingPics[fsPicIndex].src;
  }
}

function fwd_click()
{
  if (fsPicIndex + 1 >= listingPics.length)
    return;

  if (!wStateLoaded[fsPicIndex + 1])
  {
    buffer_forward(fsPicIndex+1, 3);
    start_waiting(document.getElementById("fsPic"), (fsPicIndex + 1), change_fsimage);
  }
  else
  {
    change_fsimage(true, document.getElementById("fsPic"), (fsPicIndex + 1));
    buffer_forward(fsPicIndex+1, 3);
  }
}

function back_click()
{
  if (fsPicIndex - 1 < 0)
    return;

  if (!wStateLoaded[fsPicIndex - 1])
  {
    buffer_back(fsPicIndex, 3);
    start_waiting(document.getElementById("fsPic"), (fsPicIndex - 1), change_fsimage);
  }
  else
  {
    buffer_back(fsPicIndex, 3);
    change_fsimage(true, document.getElementById("fsPic"), (fsPicIndex - 1));
  }
}

function close_click()
{
    var sels = document.body.getElementsByTagName("select");
    for (var j=0; j<sels.length; j++)
      sels[j].style.display = 'inline';
    setOpacity(document.getElementById('content'), 100);
    setOpacity(document.getElementById('footer'), 100);
    document.documentElement.style.overflow = 'auto';
    
    var el = document.getElementById("PICBOX");
    if (el)
      document.body.removeChild(el);
    
    el = document.getElementById("CLICK_SHIELD");
    if (el)
      document.body.removeChild(el);
    
    window.onresize = null;
    
    return true;
}

init_images();