/*
* pretty forms, v 1.0 :)
*/

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

    $.prettyform = {
        defaults: {
            elementButtonClass: "pretty_button",
            elementCheckboxClass: "pretty_checkbox",
            elementRadioClass: "pretty_radio",
            elementSelectClass: "pretty_select",
            elementTextClass: "pretty_text",
            elementTextareaClass: "pretty_textarea",
            statusActiveClass: "active",
            statusCheckedClass: "checked",
            statusDisabledClass: "disabled",
            statusFocusClass: "focus",
            statusHoverClass: "hover",
            autoHide: true,
            buttonHeight: null,
            textHeight: null,
            textAddTag: null,
            buttonsTextShadow: true
        },
        elements: []
    };

    function classClearStandard($el, options) {
        $el.removeClass(options.statusHoverClass + " " + options.statusFocusClass + " " + options.statusActiveClass);
    }

    function classToggle($el, className, enabled) {
        if (enabled) {
            $el.addClass(className);
        } else {
            $el.removeClass(className);
        }
    }

    function classToggleChecked($tag, $el, options) {
        var isChecked = $el.is(":checked");

        if ($el.prop) {
            $el.prop("checked", isChecked);
        }

        classToggle($tag, options.statusCheckedClass, isChecked);
    }

    function classToggleDisabled($tag, $el, options) {
        classToggle($tag, options.statusDisabledClass, $el.is(":disabled"));
    }

    function getElementType($el) {
        if ($el.is(":radio")) {
            return "radio";
        }
        if ($el.is(":checkbox")) {
            return "checkbox";
        }
        if ($el.is(":text, :password")) {
            return "text";
        }
        if ($el.is("textarea")) {
            return "textarea";
        }
        if ($el.is(":submit, :reset, :button, button, a")) {
            return "button";
        }
        if ($el.is("select") && !$el.attr("multiple")) {
            return "select";
        }
        return false;
    }

    function onCustomEvents($el, events) {
        var name;
        for (name in events) {
            if (events.hasOwnProperty(name)) {
                $el.on("" + name + ".prettyform", events[name]);
            }
        }
    }

    function onUiEvents($el, $target, options) {
        onCustomEvents($el, {
            "mouseenter": function(){
                $target.addClass(options.statusHoverClass);
            },
            "mouseleave": function(){
                $target.removeClass(options.statusHoverClass);
                $target.removeClass(options.statusActiveClass);
            },
            "mousedown": function(){
                if (!$el.is(":disabled")) {
                    $target.addClass(options.statusActiveClass);
                }
            },
            "mouseup": function(){
                $target.removeClass(options.statusActiveClass);
            },
            "focus": function(){
                $target.addClass(options.statusFocusClass);
            },
            "blur": function(){
                $target.removeClass(options.statusFocusClass);
                $target.removeClass(options.statusActiveClass);
            }
        });
    }

    function wrap($el, options, config) {
        if (!config) {
            config = {};
        }
        config = $.extend({
            wrapperClass: null,
            spans: null
        }, config);

        var $div = $("<div />");

        if (config.wrapperClass) {
            $div.addClass(config.wrapperClass);
        }
        if (config.spans) {
            var classes = config.spans.split(",");
            var spans = [];
            for (var i = classes.length - 1; i >= 0; i--) {
                spans.push('<span class="' + classes[i] + '"></span>');
            };
            $div.append(spans.join(""));
        }

        if (options.autoHide && !($el.is(':visible'))) {
            $div.hide();
        }

        $el.after($div);
        $el.appendTo($div);

        return $div;
    }

    var allowStyling = true;

    // обработчики
    var handlers = {
        text : function($el, options) {
            var cssText = $el.attr("style");
            var cssObj = {
                "width": $el.attr("data-width") || $el.outerWidth(),
                "vertical-align": $el.css("vertical-align"),
                "margin-top": $el.css("margin-top"),
                "margin-bottom": $el.css("margin-bottom"),
                "margin-left": $el.css("margin-left"),
                "margin-right": $el.css("margin-right"),
                "float": $el.css("float")
            };

            var addElems = $el.attr("data-addElem");

            var spans = addElems ? "textPadding,l,c,r," + addElems : "textPadding,l,c,r";

            var wrapper = wrap($el, options, {
                wrapperClass: options.elementTextClass,
                spans: spans
            });

            var $pad = wrapper.find(".textPadding");
            $el.appendTo($pad);

            if (options.textHeight && options.textHeight > 0) {
                wrapper.attr("data-height", options.textHeight);
            }

            if ($el.attr("data-height")) {
                wrapper.attr("data-height", $el.attr("data-height"));
            }

            wrapper.css(cssObj);

            onUiEvents($el, wrapper, options);
            classToggleDisabled(wrapper, $el, options);

            return {
                detach: function() {
                    if (cssText) {
                        $el.attr("style", cssText);
                    } else {
                        $el.removeAttr("style");
                    }                    
                    $el.insertAfter(wrapper);
                    wrapper.remove();
                },
                update: function() {
                    classClearStandard(wrapper, options);
                    classToggleDisabled(wrapper, $el, options);
                }
            };
        },
        radio : function($el, options) {
            var cssObj = {
                "vertical-align": $el.css("vertical-align"),
                "margin": $el.css("margin"),
                "float": $el.css("float")
            };

            var wrapper = wrap($el, options, {
                wrapperClass: options.elementRadioClass
            });

            wrapper.css(cssObj);

            onUiEvents($el, wrapper, options);

            onCustomEvents($el, {
                "click": function () {
                    var form = $el.parents("form:first"),
                        otherRadios = "." + options.elementRadioClass + "." + options.statusCheckedClass + ":has([name='" + $el.attr("name") + "'])";

                    $(otherRadios, form).each(function () {
                        var other = $(this),
                            $el = other.find(":radio");
                        classToggleChecked(other, $el, options);
                    });

                    classToggleChecked(wrapper, $el, options);
                }
            });
            classToggleChecked(wrapper, $el, options);
            classToggleDisabled(wrapper, $el, options);

            return {
                detach: function() {
                    $el.insertAfter(wrapper);
                    wrapper.remove();
                },
                update: function() {
                    classClearStandard(wrapper, options);
                    classToggleChecked(wrapper, $el, options);
                    classToggleDisabled(wrapper, $el, options);
                }
            };
        },
        checkbox : function($el, options) {
            var cssObj = {
                "vertical-align": $el.css("vertical-align"),
                "margin": $el.css("margin"),
                "float": $el.css("float")
            };

            var wrapper = wrap($el, options, {
                wrapperClass: options.elementCheckboxClass
            });

            wrapper.css(cssObj);

            onUiEvents($el, wrapper, options);

            onCustomEvents($el, {
                "click": function () {
                    classToggleChecked(wrapper, $el, options);
                }
            });
            classToggleChecked(wrapper, $el, options);
            classToggleDisabled(wrapper, $el, options);

            return {
                detach: function() {
                    $el.insertAfter(wrapper);
                    wrapper.remove();
                },
                update: function() {
                    classClearStandard(wrapper, options);
                    wrapper.removeClass(options.statusCheckedClass);
                    classToggleChecked(wrapper, $el, options);
                    classToggleDisabled(wrapper, $el, options);
                }
            };
        },
        select: function($el, options) {
            var cssObj = {
                "width": $el.attr("data-width") || $el.outerWidth(),
                "vertical-align": $el.css("vertical-align"),
                "margin-top": $el.css("margin-top"),
                "margin-bottom": $el.css("margin-bottom"),
                "margin-left": $el.css("margin-left"),
                "margin-right": $el.css("margin-right"),
                "float": $el.css("float")
            };

            var wrapper = wrap($el, options, {
                wrapperClass: options.elementSelectClass,
                spans: "txt,l,c,r"
            });

            var $txt = wrapper.find(".txt");

            var selectedTxt = $el.find(":selected").html();

            wrapper.css(cssObj);

            onUiEvents($el, wrapper, options);
            classToggleDisabled(wrapper, $el, options);

            $txt.html(selectedTxt);

            onCustomEvents($el, {
                change: function () {
                    $txt.html($el.find(":selected").html());
                    wrapper.removeClass(options.statusActiveClass);
                },
                "click": function () {
                    var selHtml = $el.find(":selected").html();

                    if ($txt.html() !== selHtml) {
                        $el.trigger('change');
                    }
                },
                keyup: function () {
                    $txt.html($el.find(":selected").html());
                }
            });

            return {
                detach: function() {
                    $el.insertAfter(wrapper);
                    wrapper.remove();
                },
                update: function() {
                    classClearStandard(wrapper, options);
                    $txt.html(selectedTxt);
                    classToggleDisabled(wrapper, $el, options);
                }
            };
        },
        button : function($el, options) {
            var cssObj = {
                "vertical-align": $el.css("vertical-align"),
                "margin-top": $el.css("margin-top"),
                "margin-bottom": $el.css("margin-bottom"),
                "margin-left": $el.css("margin-left"),
                "margin-right": $el.css("margin-right"),
                "float": $el.css("float")
            };

            var wrapper = wrap($el, options, {
                wrapperClass: options.elementButtonClass,
                spans: "txt,l,c,r"
            });

            var $txt = wrapper.find(".txt");
            var val = "";

            if ($el.is("a, button")) {
                val = $el.html();
            } else {
                val = $el.attr("value");
            }

            if (options.buttonHeight && options.buttonHeight > 0) {
                wrapper.attr("data-height", options.buttonHeight);
            }

            if ($el.attr("data-height")) {
                wrapper.attr("data-height", $el.attr("data-height"));
            }

            wrapper.css(cssObj);

            onUiEvents($el, wrapper, options);
            classToggleDisabled(wrapper, $el, options);

            if (options.buttonsTextShadow) {
                var sh = $("<span class=\"sh\" />");
                sh.html(val);
                sh.appendTo($txt);

                if ($.browser.msie && $.browser.version < 10) {
                    var ie_txt = $("<span class=\"ie_txt\" />");
                    ie_txt.html(val);
                    ie_txt.appendTo(sh);
                }
            } else {
                $txt.html(val);
            }

            

            return {
                detach: function() {
                    $el.insertAfter(wrapper);
                    wrapper.remove();
                },
                update: function() {
                    classClearStandard(wrapper, options);
                    classToggleDisabled(wrapper, $el, options);
                }
            };
        },
        textarea : function($el, options){
            var cssText = $el.attr("style");
            var cssObj = {
                "width": $el.attr("data-width") || $el.outerWidth(),
                "height": $el.outerHeight(),
                "vertical-align": $el.css("vertical-align"),
                "margin-top": $el.css("margin-top"),
                "margin-bottom": $el.css("margin-bottom"),
                "margin-left": $el.css("margin-left"),
                "margin-right": $el.css("margin-right"),
                "float": $el.css("float")
            };

            var wrapper = wrap($el, options, {
                wrapperClass: options.elementTextareaClass,
                spans: "textareaPadding,l,c,r,t,b,lt,rt,rb,lb"
            });

            var $pad = wrapper.find(".textareaPadding");
            $el.appendTo($pad);

            wrapper.css(cssObj);

            onUiEvents($el, wrapper, options);

            if ($el.get(0).style.resize!==undef) {
                $el.css("resize", "none");
            };

            classToggleDisabled(wrapper, $el, options);

            return {
                detach: function(){
                    if (cssText) {
                        $el.attr("style", cssText);
                    } else {
                        $el.removeAttr("style");
                    } 
                    $el.insertAfter(wrapper);
                    wrapper.remove();
                },
                update: function() {
                    classClearStandard(wrapper, options);
                    classToggleDisabled(wrapper, $el, options);
                }
            }
        }
    };

    // для ие ниже 7 ой версии не разрешим оформление
    if ($.browser.msie && $.browser.version < 7) {
        allowStyling = false;
    }

    $.fn.prettyform = function (options) {
        
        options = $.extend({}, $.prettyform.defaults, options);

        var _this = this,
            _length = this.length;

        return _this.each(function (ind) {
            var $el = $(this), callbacks;

            // если элемент уже был оформлен просто обновляем
            if ($el.data("prettyform")) {
                $.prettyform.update($el);
            }

            // если элемент оформлен или оформление не разрешается то возвращаем
            if ($el.data("prettyform") || !allowStyling) {
                return;
            }

            // определим тип элемента
            var type = getElementType($el);

            if (type==="button" && $el.is(":reset")) {
                $el.on("click.prettyform", function(){
                    window.setTimeout(function(){
                        $.prettyform.update(_this);
                    }, 10);
                });
            }

            // если тип не определен то возвращаем
            if (!type) {
                return;
            }

            // преобразование
            var callbacks = handlers[type]($el, options);

            $el.data("prettyform", callbacks);

            // добавим элемент в список оформленных
            $.prettyform.elements.push($el.get(0));
        });
    };

    $.prettyform.detach = function (elem) {
        if (elem === undef) {
            elem = $.prettyform.elements;
        }

        $(elem).each(function () {
            var $el = $(this), index, elementData;
            elementData = $el.data("prettyform");

            if (!elementData) {
                return;
            }

            elementData.detach(); // удаляем добавленный html
            $el.off(".prettyform"); // отключаем добавленные обработчики событии

            // удаляем элемент из списка оформленных элементов
            index = $.inArray(this, $.prettyform.elements);

            if (index >= 0) {
                $.prettyform.elements.splice(index, 1);
            }

            $el.removeData("prettyform"); // удаляем добавленные данные у элемента
        });
    };

    $.prettyform.update = function (elem) {
        if (elem === undef) {
            elem = $.prettyform.elements;
        }

        $(elem).each(function () {
            var $el = $(this), elementData;
            elementData = $el.data("prettyform");

            // пропускаем если элемент не был оформлен
            if (!elementData) {
                return;
            }

            elementData.update();
        });
    };
}(jQuery));