$(document).ready(function() {

    $(".pop_a").each(function(i) {
        $("body").append("<div class='popup' id='popup" + i + "'><p>" + $(this).attr("title") + "</p></div>");

        var myID = $("#popup" + i);

        if ($(this).attr("title") != "" && $(this).attr("title") != "undefined") {
            $(this).removeAttr("title").mouseover(function(e) {
                myID.css({ opacity: 1, display: "none" }).fadeIn(300);
            }).mousemove(function(e) {
                var x;
                var y;

                if ($(window).width() - (30 * 2) >= myID.width() + e.pageX) {
                    if ($("body").width() >= $(window).width()) {
                        x = e.pageX;
                    } else {
                        x = e.pageX - (($(window).width() - $("body").width()) / 2);
                    }
                } else {
                    x = e.pageX - myID.width() - 20;
                }

                if ($(window).scrollTop() + (30 * 2) >= e.pageY - myID.height()) {
                    y = e.pageY + 50;
                } else {
                    y = e.pageY - myID.height() - 70;
                }


                //x = e.pageX - (($(window).width() - $("body").width()) / 2) - $(".image").width();
                //y = e.pageY - ($(".image").height() * 2);

                //x = e.pageX - myID.offset().left;
                //y = e.pageY - myID.offset().top;

                myID.css({ left: x, top: y });
            }).mouseout(function() {
                myID.css({ left: "-9999px" });
            });
        }
        //点線非表示
        $(this).focus(function() {
            $(this).blur();
        });
    });
});