$(document).ready(function() {

  $("body").append("<div id='screen'></div><div id='popupbox'></div>\n");
  $("#screen").hide().css({
    position: 'absolute',
    left: '0px',
    top: '0px',
    background: '#000',
    opacity: 0.75
  }).click(function() {
      $("#popupbox").fadeOut();
      $("#screen").fadeOut();   
  });
  $("#popupbox").hide().css({position: 'absolute'});
  
    /* show popup */
  $(".product").click(function(e, tgt) {
    var $clicked = $(tgt || e.target);
    if ($clicked.attr("type") != "submit" && $clicked.attr("type") != "text") {
	    if ($clicked.attr("class") != "product") {
	      $clicked = $clicked.parents(".product");
	    }
	    id = $clicked.attr("id");
	    if (id != undefined) {
	    	id = id.split("_").pop();
		    $("#popupbox").html($("#popup_"+id).html()).css({
			  top: $(window).scrollTop() + 20 + 'px',
		      left: (($(window).width() - $("#popupbox").width()) / 2) + 'px'
		    }).fadeIn(function() {
		    	$("#screen").css({height: $(document).height()});
		    });
		    $("#screen").css({
		        width: $(window).width(),
		        height: $(document).height()
		      }).fadeIn();
		    $(".close").unbind("click").click(function() {
		      $("#popupbox").fadeOut();
		      $("#screen").fadeOut();      
		    });
		}
	}
  });
   
  $(window).resize(function() {
    $("#popupbox:visible").css({
	  left: (($(window).width() - $("#popupbox").width()) / 2) + 'px'
	});
	$("#screen:visible").css({
	  width: $(window).width(),
	  height: $(document).height()
	});
  });
         
 });