$(document).ready(function(){
  // $("#imagelist").show();
});

imagelist = {
  html_id : "#imagelist",
  data : "",
  initialize : function (new_data) {
    $(this.html_id).empty();
    for (var i in new_data) {
      $("<div><img class=\"img_mo\" id=\"img_" + i + "\" src=\"" + new_data[i]["th_img"] + "\"></div>").appendTo(this.html_id);
      $("#img_" + i).bind("mouseover", {id:i, img:new_data[i]["img"], 
                                              img_width:new_data[i]["img_width"],
					      img_height:new_data[i]["img_height"]}, function(event) { 
	var div_width = parseInt(event.data.img_width) + parseInt(4);
	var div_height = parseInt(event.data.img_height) + parseInt(4);
        var div_top = Math.max(parseInt(event.clientY) - (parseInt(div_height) * 0.7), 50);
	var div_left = parseInt(event.clientX) - parseInt(div_width) - 30;
	$("<div class=\"div_overlay\" id=\"over_div_" + event.data.id +
	  "\" style=\"display: none; top: " + div_top + "px; left: " + 
	  div_left + "px; width: " + div_width + "px;\"><img class=\"img_overlay\" id=\"over_img_" + 
	  event.data.id + "\" src=\"" + event.data.img + 
	  "\"></div>").appendTo("body");
	$("#over_div_" + event.data.id).fadeIn();
      });
      $("#img_" + i).bind("mouseout", {id:i}, function(event) {       
        $("#over_img_" + event.data.id).remove();
        $("#over_div_" + event.data.id).remove();
      });
    }
    this.data = new_data;
  }
};

function picture_ovl(id, src, width, height) {
  $("#img_" + id).addClass("img_mo");
  $("#img_" + id).bind("mouseover", function(event) { 
	var div_width = parseInt(width) + parseInt(4);
	var div_height = parseInt(height) + parseInt(4);
        var div_top = Math.max(parseInt(event.clientY) - (parseInt(div_height) * 0.7), 50);
	var div_left = Math.max(parseInt(event.clientX) - parseInt(div_width) - 50, 50);
	if ((parseInt(div_top) + parseInt(height) + 30) > parseInt(window.innerHeight)) {
	  div_top = parseInt(window.innerHeight) - parseInt(height) - 30;
	}
	if ((parseInt(div_left) + parseInt(width) + 30) > parseInt(event.clientX)) {
	  div_left = parseInt(event.clientX) + 50;
	}
	
	$("<div class=\"div_overlay\" id=\"over_div_" + id +
	  "\" style=\"top: " + div_top + "px; left: " + 
	  div_left + "px; width: " + div_width + "px;\"><img class=\"img_overlay\" id=\"over_img_" + 
	  id + "\" src=\"" + src + "\"></div>").appendTo("body");
	$("#over_div_" + id).fadeIn();
      });
  $("#img_" + id).bind("mouseout", function(event) {       
    $("#over_img_" + id).remove();
    $("#over_div_" + id).remove();
  });
}

function picture_ovl_center(id, src, width, height) {
  $("#img_" + id).bind("click", function(event) { 
	var div_width = parseInt(width) + parseInt(4);
	var div_height = parseInt(height) + parseInt(4);
	var div_margin_left = Math.round(-div_width / 2);
	var div_margin_top = Math.round(-div_height / 2);
	$("<div class=\"div_overlay\" id=\"over_div_" + id +
	  "\" style=\"position: absolute; top: 50%; left: 50%; width: " + div_width + "px; height: " +
	  div_height + "px; margin-left: " + div_margin_left + "px; margin-top: " +
          div_margin_top + "px;\"></div>").appendTo("body");
	$("<div id=\"div_shadow\" class=\"shadow\"></div>").appendTo("body");

	$("#div_shadow").fadeIn(750, function() {
	  $("#over_div_" + id).fadeIn(750);
	});
    $("<img \>")
      .attr("class", "img_overlay")
      .attr("id", "over_img_" + id)      
      .attr("src", src)    
      .load(function() {
        $("#over_div_" + id).append($(this)).fadeIn(750);
      });
    $("#over_div_" + id).bind("click", function(event) {   
      $("#over_img_" + id).remove();
      $("#over_div_" + id).fadeOut(750, function() {
        // $("#div_shadow").fadeOut(750, function() {
          $("#over_div_" + id).remove();
          $("#div_shadow").remove();
        // });	
      });	
    });
  });
}