// The order of the requires bellow is important
//= require jquery-2.0.1.js
//= require jquery-ui-1.10.3.custom.min.js
//= require jquery.json-2.4.min.js
//= require jquery.simulate.js
//= require jquery.simulate-ext.js
//= require jquery.simulate.drag-n-drop.js

describe("Ballonizer", function () {
    /* jshint strict: false */
    // We disable the strict mode here because the libs included
    // with "//= require" break the tests if with strict mode

    // Variables pre-set before each test
    var actionFormURL,
        imageToBallonizeCSSSelector,
        initialBallonText,
        instance;

    beforeEach(function () {
        actionFormURL = "/action/path/to/submit";
        imageToBallonizeCSSSelector = ".ballonizer_image_container";
        initialBallonText = "double click to edit";
        instance = null;

        this.addMatchers({
            toHaveBallonizerForm: function (actionFormURL) {
                var lastBodyChild = this.actual.children().last();

                expect(lastBodyChild).toBe("form.ballonizer_page_form" +
                        "[method='post'][action='" + actionFormURL + "']");
                expect(lastBodyChild).toContain("input[type='submit']" +
                        "[name='ballonizer_submit']");
                expect(lastBodyChild).toContain("input[type='hidden']" +
                        "[name='ballonizer_data']");

                return true;
            },
            toBeAnEmptyObject: function () {
                var obj = this.actual;
                for (var p in obj) {
                    if (obj.hasOwnProperty(p)) {
                        this.message = "expected object to be empty but" +
                                "found the key '" + p + "'";

                        return false;
                    }
                }
                return true;
            }
        });
    });

    afterEach(function () {
        // Remove left-overs created out of the #jasmine-fixtures container
        $(".ballonizer_page_form").remove();
    });

    it("it's defined", function () {
        expect(Ballonizer).toBeDefined();
    });

    describe("when exist images to ballonize in the document", function () {
        describe("but none in the context", function () {
            it("doesn't create a form", function () {
                loadFixtures("ballonized-xkcd-without-ballons.html");
                Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#bottom"));
                expect($("form.ballonizer_page_form")).not.toExist();
            });
            it(".getForm return null", function () {
                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#bottom"));
                expect(instance.getForm()).toEqual(null);
            });
        });
        describe("and they are in the context", function () {
            it("create a hidden form as the last child of the context", function () {
                loadFixtures("ballonized-xkcd-without-ballons.html");
                Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
                expect($("#jasmine-fixtures")).toHaveBallonizerForm(actionFormURL);
                expect($("form.ballonizer_page_form")).toBeHidden();
            });
            it("changes in .getForm result affect the node in the DOM", function () {
                loadFixtures("ballonized-xkcd-without-ballons.html");
                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
                instance.getForm().attr("method", "get");
                expect($("form.ballonizer_page_form")).toHaveAttr("method", "get");
            });
        });
        describe("when the ballonized image is double clicked", function () {
            it("a new ballon will be created", function () {
                loadFixtures("ballonized-xkcd-without-ballons.html");
                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));

                var ballonizedImg = $(".ballonizer_image_container img");
                ballonizedImg.trigger("dblclick");
                expect($(".ballonizer_ballon")).toExist();
            });
            it("the default action of clicking the image (if any) will not trigger", function () {
                loadFixtures("ballonized-xkcd-with-anchor-in-image.html");
                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
                var spyAnchor = spyOnEvent("#comic a", "click");
                var ballonizedImg = $(".ballonizer_image_container img");
                // In a real browser the dblclick event will be generated with one or
                // two clicks events before it (http://api.jquery.com/dblclick/)
                ballonizedImg.trigger("click");
                expect(spyAnchor).toHaveBeenPrevented();
            });
        });
    });

    describe(".getBallonizedImageContainers", function () {
        describe("when there's no image to ballonize", function () {
            it("return an object without any keys", function () {
                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
                var ballonizedImageContainers = instance.getBallonizedImageContainers();
                expect(ballonizedImageContainers).toBeAnEmptyObject();
            });
        });
        describe("when there's a image to ballonize", function () {
            it("return an object with the img src as key and the object as value", function () {
                loadFixtures("ballonized-xkcd-without-ballons.html");
                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
                var ballonizedImageContainers = instance.getBallonizedImageContainers();
                expect(ballonizedImageContainers.hasOwnProperty("http://imgs.xkcd.com/comics/cells.png")).toBeTruthy();
            });
        });
    });
    describe("BallonizedImageContainer", function () {
        it("adds a hidden form for the ballon edition in the container", function () {
            loadFixtures("ballonized-xkcd-without-ballons.html");
            instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
            expect($(".ballonizer_image_container")).toContain("form.ballonizer_image_form");
            // What the value of method is not important, but the method attribute
            // is required (http://www.w3.org/TR/html401/interact/forms.html#h-17.3)
            expect($("form.ballonizer_image_form")).toHaveAttr("method");
            expect($("form.ballonizer_image_form")).toBeHidden();
        });
        describe("when there's a image with ballons", function () {
            it("getBallons return they", function () {
                loadFixtures("ballonized-xkcd-with-ballons.html");
                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
                var ballonizedImageContainers = instance.getBallonizedImageContainers();
                var ballons = ballonizedImageContainers["http://imgs.xkcd.com/comics/cells.png"].getBallons();

                expect(ballons.length).toEqual(2);
                expect(ballons[0].getText()).toEqual("When you see a claim that a common drug or vitamin \"kills cancer cells in a petri dish\", keep in mind:");
                expect(ballons[1].getText()).toEqual("So does a handgun.");
                expect(ballons[0].getPositionAndSize()).toEqual(
                    { left: 0, top: 0, width: 218, height: 82 }
                );
                expect(ballons[1].getPositionAndSize()).toEqual(
                    { left: 21, top: 319, width: 170, height: 19 }
                );
            });
        });
    });
    describe("InterfaceBallon", function () {
        var containerWidth, containerHeight;
        var getBallons = function () {
            loadFixtures("ballonized-xkcd-with-ballons.html");
            instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
            var imageContainer = instance.getBallonizedImageContainers()["http://imgs.xkcd.com/comics/cells.png"],
                ballons = imageContainer.getBallons(),
                containerNode = imageContainer.getContainerNode();

            containerWidth = containerNode.width();
            containerHeight = containerNode.height();

            return ballons;
        };
        var realWorldEvent = function (eventName, obj) {
            switch (eventName) {
            case "dblclick":
                obj.mousedown().mouseup().click().mousedown().mouseup().click().dblclick();
                break;
            case "click":
                obj.mousedown().mouseup().click();
                break;
            }

            return obj;
        };
        var ballons = null;

        it("creates a hidden edit ballon for each ballon", function () {
            ballons = getBallons();

            var imgContainer = ballons[0].getBallonizedImageContainer().getContainerNode();
            var imgForm = $("form.ballonizer_image_form", imgContainer);

            expect(imgForm.children().length).toEqual(2);
            expect(imgForm.children()).toBeHidden();
            expect(imgForm).toContain("textarea.ballonizer_edition_ballon");

            var textfieldTexts = imgForm.children().toArray().map(function (e, ix) {
                /* jshint unused: false */
                return $(e).val();
            }).sort();
            var ballonTexts = jQuery.map(ballons, function (e, ix) {
                /* jshint unused: false */
                return e.getText();
            }).sort();

            expect(textfieldTexts).toEqual(ballonTexts);
        });
        it("initial state is 'initial'", function () {
            ballons = getBallons();
            expect(ballons[0].getState()).toEqual("initial");
            expect(ballons[1].getState()).toEqual("initial");
        });
        describe("when in initial state", function () {
            it("the ballon can be dragged (and this update the getBounds return)", function () {
                ballons = getBallons();
                // We are using the second ballon because the first
                // can't be dragged in the x axis, it already occupy
                // all the x axis
                var oldBounds = ballons[1].getPositionAndSize();
                ballons[1].getNode().simulate("drag-n-drop", { dx: -20, dy: -20 });
                expect(ballons[1].getPositionAndSize()).toEqual({
                    left: (oldBounds.left - 20),
                    top: (oldBounds.top - 20),
                    width: oldBounds.width,
                    height: oldBounds.height
                });
            });
            it("the ballon can be resized (and this update the getBounds return)", function () {
                ballons = getBallons();
                var oldBounds = ballons[0].getPositionAndSize();
                var resizeHandle = $(".ui-icon-gripsmall-diagonal-se", ballons[0].getNode());
                
                // The handle is hidden when not hovering over the ballon
                // (which includes the handle)
                resizeHandle.mouseover().simulate("drag-n-drop", {
                    dx: -20,
                    dy: -20
                }).mouseout();

                expect(ballons[0].getPositionAndSize()).toEqual({
                    left: oldBounds.left,
                    top: oldBounds.top,
                    width: oldBounds.width - 20,
                    height: oldBounds.height - 20
                });
            });
        });
        describe("when dblclicked 2x(mousedown + mouseup + click) + dblclick", function () {
            it("alternate to edit mode initial -> edit)", function () {
                ballons = getBallons();
                realWorldEvent("dblclick", ballons[0].getNode());
                expect(ballons[0].getState()).toEqual("edit");
            });
            it("hide the normal ballon and put the textarea (focused) in the place", function () {
                ballons = getBallons();

                // Test from the initial state
                realWorldEvent("dblclick", ballons[0].getNode());

                expect(ballons[0].getNormalNode()).toBeHidden();
                expect(ballons[0].getEditionNode()).toBeVisible();
                expect(ballons[0].getEditionNode()).toBeFocused();

                expect(ballons[0].getEditionNode().attr("style")).toEqual(
                    ballons[0].getNormalNode().attr("style")
                );
            });
        });
        describe("when the focus is lost in edit mode", function () {
            it("the ballon return to the initial mode with the new text", function () {
                ballons = getBallons();
                // Edit the text of the first ballon
                realWorldEvent("dblclick", ballons[0].getNode());
                var firstNewText = "This is the first ballon text";
                ballons[0].getNode().val(firstNewText);
                // simulate focus loss
                ballons[0].getNode().blur();
                expect(ballons[0].getNormalNode()).toBeVisible();
                expect(ballons[0].getText()).toEqual(firstNewText);
                expect(ballons[0].getNormalNode().text()).toEqual(firstNewText);
                expect(ballons[0].getEditionNode()).toBeHidden();
            });
            describe("and the ballon is empty (or only with spaces)", function () {
                it("the ballon is removed", function () {
                    ballons = getBallons();
                    var imgContainer = ballons[0].getBallonizedImageContainer();

                    realWorldEvent("dblclick", ballons[0].getNode());
                    ballons[0].getNode().val("");
                    ballons[0].getNode().blur();

                    ballons = imgContainer.getBallons();

                    expect(ballons.length).toEqual(1);
                    expect($(".ballonizer_ballon")).toHaveLength(1);
                    expect($("form.ballonizer_image_form > *")).toHaveLength(1);
                });
            });
        });
        describe("when the ballons change", function () {
            var htmlUnescape = function (value) {
                return (value)
                    .replace(/"/g, '"')
                    .replace(/'/g, "'")
                    .replace(/&lt;/g, '<')
                    .replace(/&gt;/g, '>')
                    .replace(/&amp;/g, '&');
            };

            describe("position", function () {
                var changePosition = function (ballon, dx, dy) {
                    ballon.getNode().simulate("drag-n-drop", { dx: dx, dy: dy });

                    return ballon;
                };
                // We are using the second ballon in the tests because
                // the first can't be dragged in the x axis, it already
                // occupy all the x axis
                it("the button to submit change appears", function () {
                    ballons = getBallons();
                    changePosition(ballons[1], -20, -20);
                    expect($("form.ballonizer_page_form > input[name='ballonizer_submit']")).toBeVisible();
                });
                it("the serialize methods shows the new values", function () {
                    ballons = getBallons();
                    var ballon = ballons[1],
                        image = ballon.getBallonizedImageContainer(),
                        ballonizer = image.getBallonizerInstance(),
                        bounds = ballon.getPositionAndSize(),
                        expectedLeft = (bounds.left - 20) / containerWidth,
                        expectedTop = (bounds.top - 20) / containerHeight;

                    changePosition(ballons[1], -20, -20);

                    expect(ballon.serialize().left).toEqual(expectedLeft);
                    expect(ballon.serialize().top).toEqual(expectedTop);
                    expect(image.serialize()[1].left).toEqual(expectedLeft);
                    expect(image.serialize()[1].top).toEqual(expectedTop);
                    expect(ballonizer.serialize()["http://imgs.xkcd.com/comics/cells.png"][1].left).toEqual(expectedLeft);
                    expect(ballonizer.serialize()["http://imgs.xkcd.com/comics/cells.png"][1].top).toEqual(expectedTop);
                });
                it("the page form data update", function () {
                    ballons = getBallons();
                    var formData = $("form.ballonizer_page_form > input[name='ballonizer_data']");
                    expect(formData).toHaveValue("");
                    changePosition(ballons[1], -20, -20);
                    expect(jQuery.parseJSON(htmlUnescape(formData.val()))).toEqual({
                        "http://imgs.xkcd.com/comics/cells.png": [
                            { left: 0,
                                top: 0,
                                width: 1,
                                height: 0.24188790560471976,
                                text: 'When you see a claim that a common drug or vitamin "kills cancer cells in a petri dish", keep in mind:'
                            },
                            { left: 0.0045871559633027525,
                                top: 0.8820058997050148,
                                width: 0.7798165137614679,
                                height: 0.05604719764011799,
                                text: 'So does a handgun.'
                            }
                        ]
                    });
                });
            });
            describe("size", function () {
                var changeSize = function (ballon, dx, dy) {
                    var resizeHandle = $(".ui-icon-gripsmall-diagonal-se", ballon.getNode());
                
                    // The handle is hidden when not hovering over the ballon (which includes the handle)
                    resizeHandle.mouseover().simulate("drag-n-drop", { dx: dx, dy: dy }).mouseout();

                    return ballon;
                };
                it("the button to submit change appears", function () {
                    ballons = getBallons();
                    changeSize(ballons[0], -20, -20);
                    expect($("form.ballonizer_page_form > input[name='ballonizer_submit']")).toBeVisible();
                });
                it("the serialize methods shows the new values", function () {
                    ballons = getBallons();
                    var ballon = ballons[0],
                        image = ballon.getBallonizedImageContainer(),
                        ballonizer = image.getBallonizerInstance(),
                        bounds = ballon.getPositionAndSize(),
                        expectedWidth = (bounds.width - 20) / containerWidth,
                        expectedHeight = (bounds.height - 20) / containerHeight;

                    changeSize(ballons[0], -20, -20);

                    expect(ballon.serialize().width).toEqual(expectedWidth);
                    expect(ballon.serialize().height).toEqual(expectedHeight);
                    expect(image.serialize()[0].width).toEqual(expectedWidth);
                    expect(image.serialize()[0].height).toEqual(expectedHeight);
                    expect(ballonizer.serialize()["http://imgs.xkcd.com/comics/cells.png"][0].width).toEqual(expectedWidth);
                    expect(ballonizer.serialize()["http://imgs.xkcd.com/comics/cells.png"][0].height).toEqual(expectedHeight);
                });
                it("the page form data update", function () {
                    ballons = getBallons();
                    var formData = $("form.ballonizer_page_form > input[name='ballonizer_data']");
                    expect(formData).toHaveValue("");
                    changeSize(ballons[0], -20, -20);
                    expect(jQuery.parseJSON(htmlUnescape(formData.val()))).toEqual({
                        "http://imgs.xkcd.com/comics/cells.png": [
                            { left: 0,
                                top: 0,
                                width: 0.908256880733945,
                                height: 0.18289085545722714,
                                text: 'When you see a claim that a common drug or vitamin "kills cancer cells in a petri dish", keep in mind:'
                            },
                            { left: 0.0963302752293578,
                                top: 0.9410029498525073,
                                width: 0.7798165137614679,
                                height: 0.05604719764011799,
                                text: 'So does a handgun.'
                            }
                        ]
                    });
                });
            });
            describe("text", function () {
                var changeText = function (ballon, text) {
                    realWorldEvent("dblclick", ballon.getNode());
                    ballon.getNode().val(text);
                    ballon.getNode().blur();

                    return ballon;
                };
                it("the button to submit change appears", function () {
                    ballons = getBallons();
                    changeText(ballons[0], "Ballon new text");
                    expect($("form.ballonizer_page_form > input[name='ballonizer_submit']")).toBeVisible();
                });
                it("the serialize methods shows the new values", function () {
                    ballons = getBallons();
                    var ballon = ballons[0],
                        text = "Ballon new text",
                        image = ballon.getBallonizedImageContainer(),
                        ballonizer = image.getBallonizerInstance();

                    changeText(ballon, text);

                    expect(ballon.serialize().text).toEqual(text);
                    expect(image.serialize()[0].text).toEqual(text);
                    expect(ballonizer.serialize()["http://imgs.xkcd.com/comics/cells.png"][0].text).toEqual(text);
                });
                it("the page form data update", function () {
                    ballons = getBallons();
                    var formData = $("form.ballonizer_page_form > input[name='ballonizer_data']");
                    expect(formData).toHaveValue("");
                    changeText(ballons[0], "Ballon new text");
                    expect(jQuery.parseJSON(htmlUnescape(formData.val()))).toEqual({
                        "http://imgs.xkcd.com/comics/cells.png": [
                            { left: 0,
                                top: 0,
                                width: 1,
                                height: 0.24188790560471976,
                                text: 'Ballon new text'
                            },
                            { left: 0.0963302752293578,
                                top: 0.9410029498525073,
                                width: 0.7798165137614679,
                                height: 0.05604719764011799,
                                text: 'So does a handgun.'
                            }
                        ]
                    });
                });
            });
            describe("a ballon being added", function () {
                var addBallon = function () {
                    $(".ballonizer_image_container img").trigger(
                        jQuery.Event("dblclick", { pageX: 490, pageY: 444 })
                    );
                };

                it("the button to submit change appears", function () {
                    getBallons();
                    addBallon();
                    expect($("form.ballonizer_page_form > input[name='ballonizer_submit']")).toBeVisible();
                });
                it("the serialize methods shows the new values", function () {
                    ballons = getBallons();
                    addBallon();
                    var image = ballons[0].getBallonizedImageContainer(),
                        imageData = image.serialize(),
                        ballonizer = image.getBallonizerInstance(),
                        ballonizerData = ballonizer.serialize();

                    expect(imageData.length).toEqual(3);
                    expect(ballonizerData["http://imgs.xkcd.com/comics/cells.png"].length).toEqual(3);
                });
                it("the page form data update", function () {
                    getBallons();
                    var formData = $("form.ballonizer_page_form > input[name='ballonizer_data']");
                    expect(formData).toHaveValue("");
                    addBallon();
                    expect(jQuery.parseJSON(htmlUnescape(formData.val()))).toEqual({
                        "http://imgs.xkcd.com/comics/cells.png": [
                            { left: 0,
                                top: 0,
                                width: 1,
                                height: 0.24188790560471976,
                                text: 'When you see a claim that a common drug or vitamin "kills cancer cells in a petri dish", keep in mind:'
                            },
                            { left: 0.0963302752293578,
                                top: 0.9410029498525073,
                                width: 0.7798165137614679,
                                height: 0.05604719764011799,
                                text: 'So does a handgun.'
                            },
                            { left: 0.40825688073394495,
                                top: 0.05604719764011799,
                                width: 0.591743119266055,
                                height: 0.12094395280235988,
                                text: 'double click to edit ballon text'
                            }
                        ]
                    });
                });
            });
            describe("a ballon being removed", function () {
                var removeBallon = function (ballon) {
                    realWorldEvent("dblclick", ballon.getNode());
                    ballon.getNode().val("");
                    ballon.getNode().blur();

                    return ballon;
                };
                it("the button to submit change appears", function () {
                    ballons = getBallons();
                    removeBallon(ballons[0]);
                    expect($("form.ballonizer_page_form > input[name='ballonizer_submit']")).toBeVisible();

                    return ballons;
                });
                it("the serialize methods shows the new values", function () {
                    ballons = getBallons();

                    var image = ballons[0].getBallonizedImageContainer(),
                        ballonizer = image.getBallonizerInstance();

                    removeBallon(ballons[0]);

                    var imageData = image.serialize(),
                        ballonizerData = ballonizer.serialize();

                    expect(imageData.length).toEqual(1);
                    expect(ballonizerData["http://imgs.xkcd.com/comics/cells.png"].length).toEqual(1);
                });
                it("the page form data update", function () {
                    ballons = getBallons();
                    var formData = $("form.ballonizer_page_form > input[name='ballonizer_data']");
                    expect(formData).toHaveValue("");
                    removeBallon(ballons[0]);
                    expect(jQuery.parseJSON(htmlUnescape(formData.val()))).toEqual({
                        "http://imgs.xkcd.com/comics/cells.png": [
                            { left: 0.0963302752293578,
                                top: 0.9410029498525073,
                                width: 0.7798165137614679,
                                height: 0.05604719764011799,
                                text: 'So does a handgun.'
                            }
                        ]
                    });
                });
            });
        });
    });
});