How to add new point (image) on double click?

Question

I have javascript function (that uses Raphael) that on click select area. And I need to add new function that on double click:

• add new image (small image that symbolizes point)
• add some text field next to this image (point) so that user could add description to this point
• add remove button next to image and text field. So that if user woluld like to remove it he could. It should remove this whole new point(image) with text field
• I need to also know cordinates of this new point, so that I could save it

Here is code of my javascript function:

<script type="text/javascript" charset="utf-8">
    window.onload = function () {
        var R = Raphael("paper", 500, 500);
        var attr = {
            fill: "#EEC7C3",
            stroke: "#E0B6B2",
            "stroke-width": 1,
            "stroke-linejoin": "round"
        };
        var area = {};
        area.Element1 = R.path("...").attr(attr);
        area.Element2 = R.path("...").attr(attr);
        ...
        area.Element63 = R.path("...").attr(attr);                                 
        var current = null;
        for (var state in area) {
            area[state].color = Raphael.getColor();
            (function (st, state) {
                st[0].state = 0;
                st[0].style.cursor = "pointer";
                st[0].onmouseover = function () {
                    current && area[current].animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500) && (document.getElementById(current).style.display = "");
                    st.animate({ fill: st.color, stroke: "#ccc" }, 500);
                    st.toFront();
                    R.safari();
                    document.getElementById(state).style.display = "block";
                    current = state;
                };
                st[0].onmouseout = function () {
                    if (this.state == 0)
                        st.animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500);
                    else
                        st.animate({ fill: "#C05219", stroke: "#E0B6B2" }, 500);
                    st.toFront();
                    R.safari();
                };
                st[0].onclick = function () {
                    st.animate({ fill: "#C05219", stroke: "#E0B6B2" }, 500);
                    st.toFront();
                    if (this.state == 0)
                        this.state = 1;
                    else
                        this.state = 0;
                    R.safari();
                };

            })(area[state], state);
        }
    };
</script>

I am not a javascript programmer so I don't really even know where to start. So any help here is much appreciated!

Answer 1

I have manage to make it work using more simple javascipt than Raphael. Here is code:

<script type="text/javascript" charset="utf-8">
    window.onload = function () {
        var R = Raphael("paper", 500, 500);
        var attr = {
            fill: "#EEC7C3",
            stroke: "#E0B6B2",
            "stroke-width": 1,
            "stroke-linejoin": "round"
        };
        var area = {};
        area.Element1 = R.path("...").attr(attr);
        area.Element2 = R.path("...").attr(attr);
        ...
        area.Element63 = R.path("...").attr(attr);                                 
        var timer;
            var firing = false;
            var singleClick = function () { };
            var doubleClick = function () { };
            var firingFunc = singleClick;
            var counter = 1;           

            for (var state in area) {
                area[state].color = Raphael.getColor();

                (function (st, state) {
                    st[0].active = 0;
                    st[0].style.cursor = "pointer";

                    st[0].onclick = function (event) {
                        if (firing) {
                            var relativeX = event.pageX;
                            var relativeY = event.pageY;                          
                            $('.marker').append('<div class="pin_container" style="top:' + relativeY + 'px; left:' + relativeX + 'px;"> <input type="text" name="textbox" id="textbox' + counter + '" value="" class="pin_textbox"><input type="button" id="remove" class="delete_button" value=" "></div>');
                            counter++;
                            $(".delete_button").click(function () {
                                $(this).parent().remove();
                            });                       
                            firingFunc = doubleClick;
                            if (st.editable == true) {
                                if (this.active == 0) {
                                    this.active = 1;
                                    st.animate({ fill: "#C05219", stroke: "#E0B6B2" }, 500);
                                    st.selected = true;                                    
                                }
                                else {
                                    this.active = 0;
                                    st.animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500);
                                    st.selected = false;                                                                    }
                            }
                            R.safari();
                            return;
                        }

                        firing = true;
                        timer = setTimeout(function () {
                            firingFunc();                                                   
                            firingFunc = singleClick;
                            firing = false;
                        }, 250);
                        if (st.editable == true) {
                            if (this.active == 0) {
                                this.active = 1;
                                st.animate({ fill: "#C05219", stroke: "#E0B6B2" }, 500);
                                st.selected = true;
                                //st.toFront();
                            }
                            else {
                                this.active = 0;
                                st.animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500);
                                st.selected = false;
                                //st.toFront();
                            }
                        }
                        R.safari();
                    };
                })(area[state], state);
            }
        };
    </script>

Answer 2

Your requirement is not clear, especially the use of RaphaelJS. This is how you can add an image using RaphaelJS.

HTML

<div id="target"></div>

Javascript

var paper = Raphael("target", 320, 200);
var image = paper.image("https://ssl.gstatic.com/images/logos/google_logo_41.png", 10, 10, 116, 41);

For button and all you can use HTML elements, and place it in the div target over RaphaelJS svg.