var fasoon = fasoon || {};

(function (ns, $) {
    "use strict";

    ns.Placeholder = function () {
        this.construct.apply(this, arguments);
    };

    var proto = ns.Placeholder.prototype;

    proto.construct = function () {
        this.elems = $('input[data-placeholder]');
        if (this.elems.length) {
            this.elems.on('keyup', $.proxy(this.onKeyUp, this));
            this.elems.on('focus', $.proxy(this.onFocus, this));
            this.elems.on('blur', $.proxy(this.onBlur, this));
            this.elems.each($.proxy(function (idx, el) {
                this.onFocus({target: el});
                this.elems.prev('span').show();
            }, this));
        }
    };

    proto.onFocus = function (ev) {
        var el = $(ev.target);
        var span = el.prev('span');

        var altplaceholder = el.data('altplaceholder');
        if (altplaceholder && el.val()) {
            span.text(altplaceholder);
        }

        this.align_placeholder(el, span);
    };

    proto.onBlur = function (ev) {
        var el = $(ev.target);
        var span = el.prev('span');

        if (!el.val()) {
            var altplaceholder = el.data('altplaceholder');
            if (altplaceholder) {
                span.text(el.data('placeholder'));
            }
        }

        this.align_placeholder(el, span);
    };

    proto.onKeyUp = function (ev) {
        var el = $(ev.target);
        var span = el.prev('span');
        this.align_placeholder(el, span);
    };

    proto.align_placeholder = function (el, span) {
        var margin = this.getTextWidth(el.val(), el.css('font'));
        if ( margin > 0) {
            margin += 10;
        }
        span.css('margin-left', margin);
    };

    proto.getTextWidth = function (text, font) {
        this.width_tester = this.width_tester || document.getElementById("width-tester");
        this.width_tester.style.font = font;
        this.width_tester.innerText = text;
        if (this.width_tester.clientWidth) {
            return (this.width_tester.clientWidth + 1);
        }
        return 0;
    };
})(fasoon, jQuery);

jQuery(window).load(function () {
    new fasoon.Placeholder();
});