How to set draggable element in a flip book pages
===

I am working with a jquery dynamic flip book. I can add post it notes to either page the even or odd. This code create the notes select which page to add the note to and drags.

    function CreatePostIt() {
                        $("#PostIt").dialog({ modal: true, autoResize: true, height: 500, width: 530,
                            open: function () {

                                $("#BookMenu").fadeOut(500);
                                BookMenuShow = false;
                                $("#pNotes").addClass("yellow");
                                $("#pNotes").removeClass("transparent");
                                $("#pNotes").removeClass("blue");
                                $("#pNotes").removeClass("green");
                                $("#note-body").text("");
                                $("#pNotes").css("font-size", $("#NoteFontSize").val());
                                color = "yellow";
                                $("#pNotes").text("");
                                if (PageIndex == 0) {
                                    $("#rightTn").click();

                                    $("#leftTn").attr("src", "images/blank.gif")

                                    $("#rightTn").attr("src", tnNames[PageIndex]);

                                } else {
                                    $("#leftTn").width(120);
                                    $("#rightTn").width(120);
                                    $("#leftTn").attr("src", tnNames[PageIndex - 1])
                                    $("#rightTn").attr("src", tnNames[PageIndex]);
                                    $("#leftTn").click();
                                }

                            },
                            buttons: {
                                "INSERT": function () {

                                    var count = $(".npg" + PageSelected).length;

                                    var Annotation = $("<div style='z-index:250000' class='note npg" + PageSelected + "' index='0'></div>");
                                    var aId = "Page-" + PageSelected + "-Note-" + (count + 1);
                                    AnnoCount = AnnoCount + 1;
                                    $(Annotation).attr("id", "Page-" + PageSelected + "-Note-" + (count + 1));
                                    $(Annotation).css("font-size", $("#NoteFontSize").val());
                                    $(Annotation).css("display", "none");
                                    $(Annotation).append("<img class='noteClose'  rel='Page-" + PageSelected + "-Note-" + (count + 1) + "' style='float:right; padding:10px 10px 5px 5px' src='images/close.gif'/>");
                                    $(Annotation).append("<div style='padding:25px 25px 25px 25px;' id='noteText" + (count + 1) + "' class='noteBody'>" + $("#note-body").val() + " </div>")
                                    $(Annotation).addClass("liveNote");
                                    $(Annotation).addClass("npage" + PageSelected);
                                    $(Annotation).addClass(color);
                                    $("#pgDv" + (PageSelected)).prepend(Annotation);
                                    $.cookie("Book-" + bookid + "-Page-" + PageSelected, aId + "||" + $("#note-body").val() + "||" + "0,0,0,0||" + color + "||" + $("#NoteFontSize").val() + "<*>", { expires: 365, path: "/" });

                                    **if (ZoomOn != true) {
                                        if ("#rightPageShadow") {
                                       Annotation.draggable({ cusror: "pointer", containment: 'parent'                                  
                                               });
                                   } else {
                                       Annotation.draggable({ cusror: "pointer", containment: "#leftPageShadow"
                                       });
                                   }
                                    }
                                    else if (ZoomOn = true) {
                                        Annotation.draggable({
                                            create: function () {
                                                $(this).show();
                                            },
                                            cusror: "pointer",
                                            containment: "parent"
                                        });
                                    }
                                    $(Annotation).show();
                                    //   $("#PostItNoteInd").show();
                                    $(this).dialog("close");
                                    $("#note-body").text("");**
                                }
                       , "CANCEL": function () {
                           $("#pNotes").text("");
                           $("#leftTn").attr("rel", -10);
                           $("#leftTn").css("border", "0px solid red");
                           $("#rightTn").attr("rel", -10);
                           $("#rightTn").css("border", "0px solid red");
                           $(this).dialog("close");
                       }
                            }
                        });
                        var cw = $("#PostItDialogContent").width();
                        $("#PostIt").dialog("option", "width", cw + 20);

                    }
the problem I am have is when the post it note is place on the page on left and top it works. but on the right and bottom it does not. I have tried [x,y, x1, y1] but because each book is different I tried to used the my id tags if you #leftPageShadow with is on div and other is #rightPageShadow