$(document).ready(function () {
    //在字段元素上按下鼠标时
    $("body").delegate(".component", "mousedown", function (md) {
        md.preventDefault();
        $(".popover").remove();
        var tops = [];
        var mouseX = md.pageX;
        var mouseY = md.pageY;
        var $temp;
        var timeout;
        var $this = $(this);
        var delays = {main: 0, form: 120}
        var type;
        //判断是否是左边的字段列表
        if ($this.parent().attr("id") === "components") {
            type = "main";
        } else {
            type = "form";
        }

        var delayed = setTimeout(function () {
            if (type === "main") {
                var form_html = $this.attr('data-content');
                $temp = $("<form class='form-horizontal col-sm-24' id='temp'></form>").append(form_html);
            } else {
                if ($this.attr("id") !== "legend") {
                    $temp = $("<form class='form-horizontal col-sm-24' id='temp'></form>").append($this);
                }
            }
            $("body").append($temp);
            $temp.css({"position": "absolute",
                "top": mouseY - ($temp.height() / 2) + "px",
                "left": mouseX - ($temp.width() / 2) + "px",
                "opacity": "0.9"}).show()

            var half_box_height = ($temp.height() / 2);
            var half_box_width = ($temp.width() / 2);

            //右侧表单容器
            var $target = $("#target");
            var tar_pos = $target.offset();
            var $target_component = $("#target .component");

            //拖动表单的时候的样式
            $(document).delegate("body", "mousemove", function (mm) {
                var mm_mouseX = mm.pageX;
                var mm_mouseY = mm.pageY;
                $temp.css({"top": mm_mouseY - half_box_height + "px", "left": mm_mouseX - half_box_width + "px"});
                //进入到右侧表单容器时的容器的样式变化，同时判断要插入到哪个位置
                if (mm_mouseX > tar_pos.left &&
                        mm_mouseX < tar_pos.left + $target.width() &&
                        mm_mouseY > tar_pos.top &&
                        mm_mouseY < tar_pos.top + $target.height() + $temp.height() / 2
                        ) {
                    $("#target").css("background-color", "#fafdff");
                    $target_component.css({"border-top": "1px solid white", "border-bottom": "none"});
                    tops = $.grep($target_component, function (e) {
                        return ($(e).offset().top - mm_mouseY + half_box_height > 0 && $(e).attr("id") !== "legend");
                    });
                    if (tops.length > 0) {
                        $(tops[0]).css("border-top", "1px solid #22aaff");
                    } else {
                        if ($target_component.length > 0) {
                            $($target_component[$target_component.length - 1]).css("border-bottom", "1px solid #22aaff");
                        }
                    }
                }
                else {
                    $("#target").css("background-color", "#fff");
                    $target_component.css({"border-top": "1px solid white", "border-bottom": "none"});
                    $target.css("background-color", "#fff");
                }
            });

            $("body").delegate("#temp", "mouseup", function (mu) {
                mu.preventDefault();
                var mu_mouseX = mu.pageX;
                var mu_mouseY = mu.pageY;
                var tar_pos = $target.offset();

                $("#target .component").css({"border-top": "1px solid white", "border-bottom": "none"});

                // 进入到右边表单区域的话添加一个字段
                if (mu_mouseX > tar_pos.left &&
                        mu_mouseX < tar_pos.left + $target.width() &&
                        mu_mouseY + half_box_height > tar_pos.top &&
                        mu_mouseY - half_box_height < tar_pos.top + $target.height()
                        ) {
                    $temp.attr("style", null);
                    // where to add
                    if (tops.length > 0) {
                        $($temp.html()).insertBefore(tops[0]);
                    } else {
                        $("#target fieldset").append($temp.append("\n\n\ \ \ \ ").html());
                    }
                } else {
                    // no add
                    $("#target .component").css({"border-top": "1px solid white", "border-bottom": "none"});
                    tops = [];
                }

                //clean up
                $target.css("background-color", "#fff");
                $(document).undelegate("body", "mousemove");
                $("body").undelegate("#temp", "mouseup");
                $temp.remove();

            });
        }, delays[type]);

        $(document).mouseup(function () {
            clearInterval(delayed);
            hover_set();
            //return false;
        });
        $(this).mouseout(function () {
            clearInterval(delayed);
            hover_set();
            //return false;
        });
    });
    //打开字段属性编辑窗口
    $("#target").on('click', ".component .glyphicon-cog", function (event) {
        $("#target").find('.component').removeClass('active');
        var $component = $(this).parents('.component');
        $component.addClass('active');

        //初始化字段标签名称
        var filed_label = $component.find(".filed_label_name").text();
        filed_label = filed_label.replace('*', '');
        $('#filed_label').val(filed_label);

        //初始化必填选项
        if ($component.find(".filed_label_name>span").length > 0) {
            $("#filed_need").attr('checked', 'checked');
        } else {
            $("#filed_need").attr('checked', false);
        }

        //初始化帮助选项
        if ($component.find(".help_span_box").html() == '') {
            $("#filed_help_text").val('');
            $("#filed_help_link").val('');
            $("#filed_help").attr('checked', false);
            $(".help_container").hide();
        } else {
            $help_child = $component.find(".help_span_box").children();
            $("#filed_help_text").val($help_child.attr('title'));
            if ($help_child.attr('href')) {
                $("#filed_help_link").val($help_child.attr('href'));
            }
            $("#filed_help").attr('checked', 'checked');
            $(".help_container").show();
        }

        //按钮的话，不用展示“其他”选项
        $(".radio_kuang").hide();
        $(".form_filed_dialog").css({"display": "block", "opacity": "1"});
        if ($component.attr('data-filed_type') == "button") {
            $(".filed_other_option").hide();
            $("#filed_label").val($component.find("button").text());
        } else if ($component.attr('data-filed_type') == "d_radio") {
            $(".radio_kuang").show();
            var radio_html = '';
            $component.find("input:radio").each(function () {
                radio_html += $(this).val() + '\r\n';
            });
            $(".radio_list_key").val(radio_html);
        } else if ($component.attr('data-filed_type') == "d_checkbox") {
            $(".radio_kuang").show();
            var radio_html = '';
            $component.find("input:checkbox").each(function () {
                radio_html += $(this).val() + '\r\n';
            });
            $(".radio_list_key").val(radio_html);
        } else if ($component.attr('data-filed_type') == "d_select") {
            $(".radio_kuang").show();
            var radio_html = '';
            $component.find(".select_lists>option").each(function () {
                radio_html += $(this).text() + '\r\n';
            });
            $(".radio_list_key").val(radio_html);
        }
        else {
            $(".filed_other_option").show();
        }
    });
    //关闭字段属性编辑窗口
    $("body").on('click', ".close_form_option", function (event) {
        $(".form_filed_dialog").css({"display": "none", "opacity": "0"});
        $("#target").find('.component').removeClass('active');
    });

    //删除选中的字段
    $("#target").on('click', ".component .glyphicon-trash", function (event) {
        $(this).parents('.component').remove();
    });

    //表单设置
    $(".btn_set_filed_options").on('click', function () {
        var $component = $("#target").find('.component.active');
        var filed_label = $('#filed_label').val();
        if ($component.attr('data-filed_type') == "button") {
            $component.find("button").text(filed_label);
        } else {
            $component.find(".filed_label_name").text(filed_label);
            if ($("#filed_need").attr('checked')) {
                $component.find(".filed_label_name").append('<span class="text-danger">*</span>');
            }
            ;
            if ($("#filed_help").attr('checked')) {
                var title = $("#filed_help_text").val();
                var href = $("#filed_help_link").val();
                href == '' && $component.find(".help_span_box").html('<span title="' + title + '" class="glyphicon glyphicon-question-sign"></span>');
                href != '' && $component.find(".help_span_box").html('<a target="_blank" href="' + href + '" title="' + title + '" class="glyphicon glyphicon-question-sign"></a>');
            } else {
                $component.find(".help_span_box").html('');
            }

            if ($component.attr('data-filed_type') == "d_radio") {
                var radio_list_key = $(".radio_list_key").val();
                var radio_arr = radio_list_key.split('\n');
                var radio_html = '';
                var radio_name = filed_label.replace(' ', '_');
                for (var i = 0; i < radio_arr.length; i++) {
                    if (radio_arr[i] != '')
                        radio_html += '<label class="radio-inline"><input type="radio" name="' + radio_name + '" value="' + radio_arr[i] + '">' + radio_arr[i] + '</label>';
                }
                ;
                var $radio_lists = $component.find('.radio_lists');
                $radio_lists.html(radio_html);
            }

            if ($component.attr('data-filed_type') == "d_checkbox") {
                var radio_list_key = $(".radio_list_key").val();
                var radio_arr = radio_list_key.split('\n');
                var radio_html = '';
                var radio_name = filed_label.replace(' ', '_');
                for (var i = 0; i < radio_arr.length; i++) {
                    if (radio_arr[i] != '')
                        radio_html += '<label class="checkbox-inline"><input type="checkbox" name="' + radio_name + '[]" value="' + radio_arr[i] + '">' + radio_arr[i] + '</label>';
                }
                ;
                var $checkbox_lists = $component.find('.checkbox_lists');
                $checkbox_lists.html(radio_html);
            }
            if ($component.attr('data-filed_type') == "d_select") {
                var radio_list_key = $(".radio_list_key").val();
                var radio_arr = radio_list_key.split('\n');
                var radio_html = '';
                var radio_name = filed_label.replace(' ', '_');
                for (var i = 0; i < radio_arr.length; i++) {
                    if (radio_arr[i] != '')
                        radio_html += '<option value="' + radio_arr[i] + '">' + radio_arr[i] + '</option>';
                }
                ;
                var $select_lists = $component.find('.select_lists');
                $select_lists.html(radio_html);
                $select_lists.attr('name', radio_name);
            }
        }

        $(".form_filed_dialog").css({"display": "none", "opacity": "0"});
    });

    $("body").on("click", "#guide_backup_toggle", function () {
        $("#guide_backup").show();
    }).on("click", "#guide_backup_hide", function () {
        $("#guide_backup").hide();
    });

});

hover_set();
function hover_set() {
    $("#target").on('hover', ".component", function (event) {
        event.preventDefault();
        $(this).find(".set_form_btn").removeClass("hidden");
    }).on('mouseleave', '.component', function (event) {
        event.preventDefault();
        $(this).find(".set_form_btn").addClass("hidden");
    });
}