// Implement push-style templating methods on the Element class.
// This defines a clean but arbitrarily powerful templating.
// Templates completely lack non-HTML code containing only markup
// to define the structure _and_ example data.
//
// These method can be used to first parse a template into DOM
// and then manipulate sub-elements of that DOM in a convenient
// and structured way to transform the DOM into something that
// can be immediately inserted to browser DOM.
//
// Templates are completely unaware of how the programmer transforms
// them into real UI output freeing the designer of any necessity of
// learning anything non-HTML/CSS.
Element.implement({
    _tplThrowExceptions: true,
    tplThrowExceptions: function(setting) {
        this._tplThrowExceptions = setting;
    },
    /**
     * Loops over _data_ cycling the element set matching _repeaterSel_.
     * This can be used to embed a list of data items into a template.
     * The predefined elements in the template are cycled, so arbitrary
     * odd-even patterns can be used.
     *
     * Example:
     *  // <table><tr class="odd">
     *  //           <td>col1</td><td>col2</td><td>col3</td></tr>
     *  //        <tr class="even">
     *  //           <td>col1</td><td>col2</td><td>col3</td></tr></table>
     *  tableEl.repeat("tr", data, function(el, dataItem) {
     *      el.embed("td", dataItem.col1, dataItem.col2, dataItem.col3);
     *  });
     */
    repeat: function(repeaterSel, data, handler) {
        var repeaters = this.getElements(repeaterSel);
        var firstRepeater = repeaters[0];
        var nextRepeater = 0;
        data.each(function(item, index) {
            var repeater = repeaters[nextRepeater % repeaters.length];
            var el = repeater.clone();
            handler.call(el, item, index, data);
            // Has to be injected BEFORE the first repeater for the
            // resulting order to match the order of data items.
            el.inject(firstRepeater, "before");
            ++nextRepeater;
        });
        repeaters.dispose();
        return this;
    },
    /**
     * Embeds a values passed as arguments to elements
     * matched by _selector_.
     *
     * _selector_ can also define both the DOM selector _and_
     * the attribute to embed. If no attribute is specified,
     * 'html' is used which simply sets the innerHTML value of
     * the matched elements.
     * The number of matched elements must be at least the number of
     * embeddable values passed.
     *
     * Example:
     *  // fooEl = <div><h2 class="title">Foo title</h2>
     *  //              <p class="text">Foo text</p></div>
     *  fooEl.embed(".title, .text", foo.title, foo.text)
    */
    embed: function(selector) {
        var match = selector.match(/^(.+?)@([a-z]+)$/i);
        var attr;
        if (match) {
            selector = match[1];
            attr = match[2];
        } else {
            attr = "html";
        }
        var values = $A(arguments).slice(1).flatten();
        var targets = this.getElements(selector);
        if (this._tplThrowExceptions && targets.length < values.length)
            throw new Error("Target elements are fewer than values");
        values.each(function(value, index) {
            if (typeof targets[index] !== "undefined")
                targets[index].set(attr, value);
        });
        return this;
    },
    /**
     * Same as _embed_ but automatically extracts values out
     * of an object.
     *
     * Example:
     *  // fooEl = <div><h2 class="title">Foo title</h2>
     *  //              <p class="text">Foo text</p></div>
     *  fooEl.embedObj(".title, .text", foo, ["title", "text"])
     */
    embedObj: function(selector, object, attrs) {
        return this.embed(selector, attrs.map(function(attr) {
            return object[attr];
        }));
    }
});

/**
 * Generates Python style range objects.
 */
function $range(start, end, step) {
    if (typeof end === "undefined") {
        end = start;
        start = 0;
    }
    if (typeof step === "undefined")
        step = 1;
    var ret = [];
    for (var i = start; i < end; i = i + step)
        ret.push(i);
    return ret;
}


var Lightbox = new Class({
    Implements: [Options, Events],
    options: {
        position: {position: "center"},
        show: false,
        html: null,
        domOptions: {
            classes: {"lightbox": true},
            opacity: 0.0
        }
    },
    initialize: function(options) {
        this.setOptions(options || {});

        var domOptions = $merge({}, this.options.domOptions);
        domOptions["class"] = $H(domOptions.classes).getKeys().join(" ");
        delete domOptions.classes;

        var el = this._el = new Element("div", domOptions);

        var tween = el.get("tween", {duration: 150});
        this._onKeyPress = this._onKeyPress.bind(this);
        tween.addEvent("complete", function() {
            window.addEvent("keydown", this._onKeyPress);
            this.fireEvent("show");
        }.bind(this));

        this._mask = new Mask($(document.body), {
            hideOnClick: true,
            onHide: this.hide.bind(this)
        });
        var rePos = this._position.bind(this);
        window.addEvent("resize", rePos);
        window.addEvent("scroll", rePos);

        if (this.options.show) this.show();
        if (this.options.html) this.setHtml(options.html);
    }
});
Lightbox.implement({
    _onKeyPress: function(e) {
        if (e.key === "esc") {
            this.hide();
            window.removeEvent(this._onKeyPress);
        }
    },
    show: function() {
        if (!this._showing) {
            this._showing = true;
            var el = this.getEl();
            el.inject($(document.body));
            this.fireEvent("beforeShow");
            el.show();
            this._position();
            el.tween("opacity", 1.0);
            this._mask.show();
        }
    },
    hide: function() {
        if (this._showing) {
            this._showing = false;
            this._el.tween("opacity", 0.0);
            this._mask.hide();
        }
    },
    setHtml: function(html) {
        UpdateManager.update(this.getEl(), html);
        this._position();
    },
    getEl: function() {
        return this._el;
    },
    _position: function() {
        this.getEl().position(this.options.position);
        this._mask.position();
    }
});

AjaxLightbox = new Class({
    Extends: Lightbox,
    options: {
        requestClass: Request
    },
    _show: function() {
        Lightbox.prototype.show.call(this);
    },
    show: function() {
        if (!this._loaded) {
            this._loaded = true;
            var requestClass = this.options.requestClass;
            new requestClass({
                url: this.options.url,
                onSuccess: function(response) {
                    try {
                        this._handleResponse(response);
                        this._show();
                    } catch (e) {
                        console.error(e);
                    }
                }.bind(this)
            }).GET();
        } else {
            this._show();
        }
    },
    _handleResponse: function(responseText) {
        console.warning("An AjaxLightbox must define the _handleResponse method");
    }
});

// *** SIIT EDASI TULEB APP-SPECIFIC KOOD

P_LIGHTBOX_POSITION = {
    edge: "centerTop",
    position: "centerTop",
    offset: {y: 50}
};

MyBookmarksLightbox = new Class({
    Extends: AjaxLightbox,
    options: {
        requestClass: Request.JSON,
        url: "/my-bookmarks/",
        domOptions: {
            classes: {"my-bookmarks": true}
        },
        position: P_LIGHTBOX_POSITION
    },
    _handleResponse: function(response) {
        this._titles = response["data"];
        var tplEl = this._tplEl = new Element("div", {"html": response["tpl"]});
        this._pageIndex = 0;
        this._pageCount = Math.ceil(this._titles.length / 10);
        this._fillTpl();
    },
    _fillTpl: function(update) {
        var tplEl = this._tplEl.clone();

        var indexStart = this._pageIndex * 10;
        var titles = this._titles.slice(indexStart, indexStart + 10);

        tplEl.repeat("tbody tr", titles, function(title, index) {
            this.embed("td",
                (indexStart + index + 1) + ". " + title["title"],
                title["created"]);
        });

        if (update) {
            tplEl.getElement("table").replaces(this.getEl().getElement("table"));
        } else {
            tplEl.getElement("a.prev").addEvent("click", function() {
                this._pageIndex = Math.max(0, this._pageIndex - 1);
                this._fillTpl();
            }.bind(this));
            tplEl.getElement("a.next").addEvent("click", function() {
                this._pageIndex = Math.min(this._pageCount - 1, this._pageIndex + 1);
                this._fillTpl();
            }.bind(this));
            new Elements(tplEl.getElements("a.page").slice(1)).destroy();

            var self = this;
            tplEl.repeat("a.page", $range(this._pageCount), function(index) {
                this.set("html", index + 1);
                this.addEvent("click", function() {
                    self._pageIndex = index;
                    self._fillTpl();
                    return false;
                });
            });

            this.getEl().empty();
            tplEl.getChildren().inject(this.getEl());
        }
    }
});

FormLightbox = new Class({
    Extends: AjaxLightbox,
    options: {
        domOptions: {
            classes: {"form": true}
        }
    },
    _handleResponse: function(responseText) {
        this.setHtml(responseText);
        var doSubmit = this._doSubmit.bind(this);
        this.getForm().addEvent("submit", doSubmit);
        this.getSubmitButton().addEvent("click", doSubmit);
        this.getCancelButton().addEvent("click", function() {
            this.hide();
            return false;
        }.bind(this));
    },
    _doSubmit: function() {
        new Request.JSON({
            url: this.getForm().action,
            onSuccess: function(response) {
                this.fireEvent("success", response);
            }.bind(this)
        }).POST(this.getForm());
        return false;
    },
    getSubmitButton: function() {
        return this.getEl().getElement("button[type=submit]");
    },
    getCancelButton: function() {
        return this.getEl().getElement("a.cancel");
    },
    getForm: function() {
        return this.getEl().getElement("form");
    }
});

PFormLightbox = new Class({
    Extends: FormLightbox,
    options: {
        position: P_LIGHTBOX_POSITION,
        overtexts: {}
    },
    initialize: function(options) {
        this.parent(options);
        this.addEvents({
            "beforeShow": this._onBeforeShow.bind(this),
            "show": this._onShow.bind(this)
        });
    }
});
PFormLightbox.implement({
    _getAllFields: function() {
        return this.getEl().getElements("input[title], textarea[title]");
    },
    _getFirstField: function() {
        return this.getEl().getElement("input, textarea, button[type=submit]");
    },
    _onBeforeShow: function() {
        var defaultOpts = {
            positionOptions: {offset: {x: 10}},
            poll: true
        };
        this._getAllFields().each(function(field) {
            var customOpts = this.options.overtexts[field.id || field.name];
            var opts = $merge(defaultOpts, customOpts);
            new OverText(field, opts);
        }.bind(this));
    },
    _onShow: function() {
        var firstField = this._getFirstField();
        firstField.addEventOnce("keydown", function() {
            var overText = this.retrieve("OverText");
            if (overText) overText.hide();
        });
        firstField.focus();
        var overText = firstField.retrieve("OverText");
        if (overText) overText.show();
    }
});