var popUpElm;//popup用

$(document).ready(function() {
  init();
  popUpElm = document.createElement("div");
  popUpElm.setAttribute("id", "popUpArea");
  popUpElm.style.visibility = "hidden";
  document.body.appendChild(popUpElm);
  $("a").hover(
    function() {
      this.style.color = "#00BFFF";
    },
    function() {
      this.style.color = "#0000FF";
    }
  );
});

function drawPopUpPicture(which, fileName) {
  var gap = 0;
  var img;
  var pos = $(which).position();

  $("#popUpArea").html("<img id=\"image\" src=\"images/" + fileName + "\" border=\"1\" />");
  img = $("#image").get(0);
  if(pos.top < img.height / 2) {
      gap = img.height / 2 - pos.top + 10;
  }
  popUpElm.style.position = "absolute";
  popUpElm.style.left = pos.left + $(which).html().length * 15 + "px";
  popUpElm.style.top = pos.top - img.height / 2 + gap + "px";
  popUpElm.style.visibility = "visible";
}

function hiddenPopUp() {
  popUpElm.style.visibility = "hidden"
}