(function($) {
    /*
    MagiClick Forms UI
    */

    /*
    
    TODO
    - iphone custom dropdown : native open (opacity)
    
    */


    $.forms = {
        construct: function(items) {
            return new $.forms.methods(items);
        },
        methods: function(items) {
            return {
                select: function(settings_external) {
                    if (typeof settings_external != "string") {
                        /* extending settings */
                        var settings = {
                            decoy: ".custom-select",
                            size: 5
                        };
                        var o = jQuery.extend(settings, settings_external || {});
                        o.decoy = o.decoy.split(".")[1];
                        /* builder */
                        var _selected = "";
                        var build = {
                            template: function(elm, default_text, _float) {
                                return '<div style="float:' + _float + ';width:' + elm.css("width") + '" class="' + o.decoy + '-item"><div class="' + o.decoy + '-item-left"><div class="' + o.decoy + '-item-right"><div class="' + o.decoy + '-item-text">' + default_text + '</div></div></div></div>';
                            },
                            events: function(elm) {
                                var _wrapper = elm.parents("." + o.decoy + "-wrapper");
                                elm.bind("change", function() {
                                    _wrapper.find("." + o.decoy + "-item-text").text($(this).find("option:selected").text());
                                    $(this).removeClass("active");
                                    $(this).parent().removeClass("active-state");
                                });
                                _wrapper.find("." + o.decoy + "-item-text").bind("click", function() {
                                    elm.focus();
                                    elm.addClass("active");
                                    elm.parent().addClass("active-state");
                                });
                                $(document).bind("click", function(e) {
                                    if ($(e.target).parents("." + o.decoy + "-wrapper").length == 0) {
                                        elm.trigger("close");
                                    }
                                });
                                elm.bind("close", function() {
                                    $(this).removeClass("active");
                                    $(this).parent().removeClass("active-state");
                                });
                            }
                        };
                        return items.each(function() {
                            _selected = $(this).find("option:selected").text();
                            $(this).wrap('<div class="' + o.decoy + '-wrapper"></div>');
                            $(this).attr("size", o.size);
                            var _float = $(this).css("float");
                            var temp = build.template($(this), _selected, _float);
                            $(temp).prependTo($(this).parent());
                            build.events($(this));
                        });
                    } else {
                        return items.each(function() {
                            switch (settings_external) {
                                case "destroy":
                                    with ($(this)) {
                                        unbind("focus change");
                                        prev().remove();
                                        removeAttr("size");
                                        unwrap();
                                    }
                                    break;
                            }
                        })
                    }
                },
                checkbox: function(settings_external) {
                    var settings = {
                        className: "input-custom-class",
                        hideClass: "dnone"
                    };
                    var o = jQuery.extend(settings, settings_external || {});
                    var build = {
                        template: function(label, input) {
                            return '<a href="javascript:void(0);" objname="' + input.attr("type") + "-" + input.attr("name") + '" class="' + o.className + '-' + input.attr("type") + '">' + label + '</a>';
                        },
                        events: function(link, input) {
                            var type = input.attr("type");
                            link.bind("click", function() {
                                if (type == "radio") {
                                    $("a[objname*='" + input.attr("name") + "']").removeClass().addClass(o.className + "-" + type);
                                }
                                ($(this).hasClass(o.className + "-" + type)) ? $(this).removeClass().addClass(o.className + "-" + type + "-active") : $(this).removeClass().addClass(o.className + "-" + type);
                                $(this).trigger("checkboxtoggle");
                                return false;
                            });
                            link.bind("checkboxtoggle", function() {
                                var input = $(this).next().children("input");
                                if (type == "radio") {
                                    $("input[type=radio][name='" + input.attr("name") + "']").removeAttr("checked");
                                }
                                (input.attr("checked") == false) ? input.attr("checked", "true") : input.removeAttr("checked");
                            });
                        }
                    };
                    return items.each(function() {
                        o.wrapper = $(this);
                        o.input = $(this).find("input");
                        o.type = $(this).find("input").attr("type");
                        o.label = $(this).find("label").text();
                        o.wrapper.wrapInner('<div class="' + o.hideClass + '"></div>');
                        $(build.template(o.label, o.input)).prependTo($(this));
                        o.link = $(this).find("a");
                        build.events(o.link, o.input);
                    });
                }
            }
        }
    };
    $.fn.forms = function() {
        return $.forms.construct(this);
    };
})(jQuery);