var nextIx = 0;
var activeImage = null;

function uploadComplete(file) {
  if (file == null) {
    return;
  }
  hideProgressBar();
  $('submit_form_btn').disabled = false;
  var image_div = $('image_div');
  var top_child = document.createElement("div");
  top_child.id = "ni_" + nextIx + "_preview";
  top_child.className = "ImageThumbnail"
  var wrap0 = document.createElement("div");
  wrap0.className = "ThumbWrapper"
  top_child.appendChild(wrap0);
  var wrap1 = document.createElement("div");
  wrap1.className = "Thumb100WrapOuter"
  wrap0.appendChild(wrap1);
  var wrap2 = document.createElement("div");
  wrap2.className = "Thumb100WrapInner"
  if (file.endsWith("_p.jpg")) {
    wrap2.innerHTML = '<a href="javascript:void(0)" onClick="viewLarger(\'' + file + '\')">' +
                      '<img style="height:100px;" src="' + file + '" /></a>'
  }
  else {
    wrap2.innerHTML = '<a href="javascript:void(0)" onClick="viewLarger(\'' + file + '\')">' +
                      '<img style="width:100px;" src="' + file + '" /></a>'
  }
  var openm = document.createElement("div");
  openm.className = "openm"
  wrap1.appendChild(wrap2);
  wrap1.appendChild(openm);
  var thumbnail_text = document.createElement("div");
  thumbnail_text.className = "ThumbnailText";
  var n = $("image_order").value.split(",").length;
  thumbnail_text.innerHTML = '<span id="ni_' + nextIx + '_img_num">IMAGE 0' + n + '</span><br />' +
                             '<a class="ThumbnailLink" href="javascript:moveImageForward(\'ni_' + nextIx + '\')">Forward</a>&nbsp;|&nbsp;' +
                             '<a class="ThumbnailLink" href="javascript:moveImageBack(\'ni_' + nextIx + '\')">Back</a><br/>' +
                             '<a class="EditLink" href="javascript:deleteImage(\'ni_' + nextIx + '\')">Delete</a>';
  top_child.appendChild(thumbnail_text);
  image_div.appendChild(top_child);
  if ($("empty_message") != null) {
    $("empty_message").style.display = "none";
  }
  var input_node = document.createElement("input");
  input_node.type = "hidden";
  input_node.id = "ni_" + nextIx;
  input_node.name = "ni_" + nextIx;
  input_node.value = file;
  $("edit_item_form").appendChild(input_node);
  var old_order = $("image_order").value;
  $("image_order").value = old_order + "ni_" + nextIx + ","
  nextIx++;
}

function moveImageForward(img_id) {
  var old_order = $("image_order").value
  var iter = old_order.split(",")
  var prev_id = null;
  var image_div = $('image_div');
  for (var i = 0; i < iter.length - 1; i++) {
    if (iter[i] == img_id) {
      if (prev_id == null) {
        return;
      }
      $("image_order").value = old_order.replace(prev_id + "," + iter[i], iter[i] + "," + prev_id);
      var img_thumb = $(img_id + "_preview");
      var prev_thumb = $(prev_id + "_preview");
      image_div.removeChild(img_thumb);
      image_div.insertBefore(img_thumb, prev_thumb);
      var tmp_txt = $(prev_id + "_img_num").innerHTML;
      $(prev_id + "_img_num").innerHTML = $(iter[i] + "_img_num").innerHTML;
      $(iter[i] + "_img_num").innerHTML = tmp_txt;
      return;
    }
    else {
      prev_id = iter[i];
    }
  }
}

function moveImageBack(img_id) {
  var old_order = $("image_order").value
  var iter = old_order.split(",")
  var prev_id = null;
  var image_div = $('image_div');
  for (var i = 0; i < iter.length - 1; i++) {
    if (prev_id == img_id) {
      $("image_order").value = old_order.replace(prev_id + "," + iter[i], iter[i] + "," + prev_id);
      var img_thumb = $(iter[i] + "_preview");
      var prev_thumb = $(prev_id + "_preview");
      image_div.removeChild(img_thumb);
      image_div.insertBefore(img_thumb, prev_thumb);
      var tmp_txt = $(prev_id + "_img_num").innerHTML;
      $(prev_id + "_img_num").innerHTML = $(iter[i] + "_img_num").innerHTML;
      $(iter[i] + "_img_num").innerHTML = tmp_txt;
      return;
    }
    else {
      prev_id = iter[i];
    }
  }
}

function deleteImage(img_id) {
  var old_order = $("image_order").value
  var iter = old_order.split(",")
  var tmp_txt = null;
  var image_div = $('image_div');
  for (var i = 0; i < iter.length - 1; i++) {
    if (iter[i] == img_id) {
      tmp_txt = $(iter[i] + "_img_num").innerHTML;
      var imgE = $(img_id + "_preview");
      imgE.parentNode.removeChild(imgE);
      $("image_order").value = old_order.replace(img_id + ",", "");
    }
    else {
      if (tmp_txt != null) {
        var tmp2 = $(iter[i] + "_img_num").innerHTML;
        $(iter[i] + "_img_num").innerHTML = tmp_txt;
        tmp_txt = tmp2;
      }
    }
  }
}

function showPrevImage() {
  var img_order = $("image_order").value;
  var iter = img_order.split(",");
  if (iter.length <= 1) {
    return;
  }
  if (activeImage == null || activeImage == iter[0]) {
    activeImage = iter[0];
    displayImage(iter[iter.length - 2])
    return;
  }
  for (var i = 1; i < iter.length - 1; i++) {
    if (iter[i] == activeImage) {
      displayImage(iter[i - 1]);
      return;
    }
  }
}

function showNextImage() {
  var img_order = $("image_order").value;
  var iter = img_order.split(",");
  if (iter.length <= 1) {
    return;
  }
  if (activeImage == null) {
    activeImage = iter[0];
  }
  for (var i = 0; i < iter.length - 1; i++) {
    if (iter[i] == activeImage) {
      if (i == iter.length - 2) {
        displayImage(iter[0]);
        return;
      }
      displayImage(iter[i + 1]);
      return;
    }
  }
}

function displayImage(img_id) {
  var file = null;
  file = $(img_id).value;
  $("displayed_image").src = "";
  if (file.endsWith("_l.jpg")) {
    $("displayed_image").style.width = "200px"
    $("displayed_image").style.height = "auto"
  }
  else {
    $("displayed_image").style.width = "auto"
    $("displayed_image").style.height = "200px"
  }
  $("displayed_image").src = file;
  activeImage = img_id;
  $("vl_link").onclick = function() { viewLarger(file); }
  $("vl_link2").onclick = function() { viewLarger(file); }
}

function viewLarger(file) {
  var vl_div = $("vl_div");
  var wrap = null;
  if (vl_div == null) {
    vl_div = document.createElement("div");
    vl_div.className = "ViewLargerContainer DefaultBorderF";
    vl_div.id = "vl_div";
    vl_div.style.position = "absolute";
    vl_div.style.width = "660px"
    vl_div.style.height = "680px"
    vl_div.style.backgroundColor = "white";

    var close_button = document.createElement("div");
    close_button.style.textAlign = "center";
    close_button.style.marginBottom = "10px";
    close_button.innerHTML = "<a href=\"javascript:void(0)\" onClick=\"hideVLDiv()\">Close X</a>";
    vl_div.appendChild(close_button);

    wrap = document.createElement("div");
    wrap.id = "vl_wrap";
    vl_div.appendChild(wrap);
    $("Micurio").appendChild(vl_div);
  }
  else {
    wrap = $("vl_wrap");
    wrap.removeChild($("vl_img"));
  }
  if (file.endsWith("_p.jpg")) {
    wrap.innerHTML = '<img id="vl_img" style="height:640px;" onLoad="vlImageLoaded()" src="' + file + '" />'
  }
  else {
    wrap.innerHTML = '<img id="vl_img" style="width:640px;" onLoad="vlImageLoaded()" src="' + file + '" />'
  }
}

function hideVLDiv() {
  var vl_div = $("vl_div");
  vl_div.style.visibility = "hidden";
}

function vlImageLoaded() {
  var vl_div = $("vl_div");
  var x = Position.cumulativeOffset($("Micurio"))[0];
  var y = typeof window.scrollY != "undefined" ? window.scrollY : document.documentElement.scrollTop;
  var img = $("vl_img");
  var d = img.getDimensions();
  vl_div.style.left = (x + (967 - d.width) / 2) + "px";
  vl_div.style.top = (y + 10) + "px";
  vl_div.style.height = (d.height + 30) + "px";
  vl_div.style.width = (d.width + 20) + "px";
  vl_div.style.display = "none";
  vl_div.style.visibility = "visible";
  Effect.BlindDown(vl_div);
}