<%@ Page Language="C#" MasterPageFile="../Admin.Master" AutoEventWireup="true" CodeBehind="edit.aspx.cs"
    EnableViewState="false" Inherits="ETongJin.YM.Web.Admin.Template.edit" ValidateRequest="false" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style type="text/css">
        li
        {
            float: left;
            padding: 3px 5px 3px 3px;
            margin: 0px 3px 0px 0px;
            border-style: outset;
            border-color: White;
            border-width: 3px;
        }
        .tooltip-red
        {
            background-color: #FCE5CE;
            color: #F38F2A;
            padding: 10px 10px 10px 10px;
            font-weight: bold;
            z-index: 100;
        }
        #spnClose{float:right;color:Red;cursor:pointer;}
    </style>

    <script type="text/javascript" src="../../Utility/jquery.js"></script>

    <script type="text/javascript">
        (function($) {
            $.fn.tooltip = function(options) {

                var defaults = {
                    cssClass: "",     //CSS class or classes to style the tooltip
                    delay: 0,        //The number of milliseconds before displaying the tooltip
                    duration: 500,   //The number of milliseconds after moving the mouse cusor before removing the tooltip.
                    xOffset: 15,     //X offset will allow the tooltip to appear offset by x pixels.
                    yOffset: 15,     //Y offset will allow the tooltip to appear offset by y pixels.
                    opacity: 0,      //0 is completely opaque and 100 completely transparent
                    fadeDuration: 100 //[toxi20090112] added fade duration in millis (default = "normal")
                };

                var options = $.extend(defaults, options);


                return this.each(function(index) {
                    var closeStr = '<span id="spnClose">关闭</span>';
                    var $this = $(this);

                    //use just one div for all tooltips
                    // [toxi20090112] allow the tooltip div to be already present (would break currently)
                    $tooltip = $("#divTooltip");
                    if ($tooltip.length == 0) {
                        $tooltip = $('<div id="divTooltip"></div>');
                        $('body').append($tooltip);
                        $tooltip.hide();
                    }

                    //displays the tooltip
                    $this.mouseover(function(e) {
                        //compatibility issue
                        e = e ? e : window.event;

                        //don't hide the tooltip if the mouse is over the element again
                        clearTimeout($tooltip.data("hideTimeoutId"));

                        //set the tooltip class
                        $tooltip.removeClass($tooltip.attr("class"));
                        $tooltip.css("width", "");
                        $tooltip.css("height", "");
                        $tooltip.addClass(options.cssClass);
                        $tooltip.css("opacity", 1 - options.opacity / 100);
                        $tooltip.css("position", "absolute");

                        //save the title text and remove it from title to avoid showing the default tooltip
                        $tooltip.data("title", $this.attr("title"));
                        $this.attr("title", "");
                        $tooltip.data("alt", $this.attr("alt"));
                        $this.attr("alt", "");

                        //set the tooltip content
                        $tooltip.html($tooltip.data("title"));
                        // [toxi20090112] only use ajax if there actually is an href attrib present
                        var href = $this.attr("href");
                        if (href != undefined && href != "#") {
                            $tooltip.html('<img src="../../images/loading.gif" alt="正在加载信息..."/>');
                            $tooltip.html(closeStr + $.ajax({ url: $this.attr("href"), async: false }).responseText);
                        }
                        //set the tooltip position
                        winw = $(window).width();
                        w = $tooltip.width();
                        xOffset = options.xOffset;

                        //right priority
                        if (w + xOffset + 50 < winw - e.clientX)
                            $tooltip.css("left", $(document).scrollLeft() + e.clientX + xOffset);
                        else if (w + xOffset + 50 < e.clientX)
                            $tooltip.css("left", $(document).scrollLeft() + e.clientX - (w + xOffset));
                        else {
                            //there is more space at left, fit the tooltip there
                            if (e.clientX > winw / 2) {
                                $tooltip.width(e.clientX - 50);
                                $tooltip.css("left", $(document).scrollLeft() + 25);
                            }
                            //there is more space at right, fit the tooltip there
                            else {
                                $tooltip.width((winw - e.clientX) - 50);
                                $tooltip.css("left", $(document).scrollLeft() + e.clientX + xOffset);
                            }
                        }

                        winh = $(window).height();
                        h = $tooltip.height();
                        yOffset = options.yOffset;
                        //top position priority
                        if (h + yOffset + 50 < e.clientY)
                            $tooltip.css("top", $(document).scrollTop() + e.clientY - (h + yOffset));
                        else if (h + yOffset + 50 < winh - e.clientY)
                            $tooltip.css("top", $(document).scrollTop() + e.clientY + yOffset);
                        else
                            $tooltip.css("top", $(document).scrollTop() + 10);

                        //start the timer to show the tooltip
                        //[toxi20090112] modified to make use of fadeDuration option
                        $tooltip.data("showTimeoutId", setTimeout("$tooltip.fadeIn(" + options.fadeDuration + ")", options.delay));
                        $("#spnClose").click(function() {$tooltip.fadeOut(options.fadeDuration) })
                    });

                    $this.mouseout(function(e) {
                        //restore the title
                        $this.attr("title", $tooltip.data("title"));
                        $this.attr("alt", $tooltip.data("alt"));
                        //don't show the tooltip if the mouse left the element before the delay time
                        clearTimeout($tooltip.data("showTimeoutId"));

                    });

                    $this.click(function(e) {
                         e.preventDefault();
                    });

                });

            }
        })(jQuery);

        $(document).ready(function() {
            $("a[tooltip]").each(function() { $(this).tooltip({ cssClass: "tooltip-red" }); })
        })</script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <table class="tableBorder" border="0" cellpadding="0" cellspacing="1">
        <tr>
            <th colspan="4">
                <div style="color: #990000;">
                    <asp:Label ID="lblTemplateName" runat="server" Text="修改模板："></asp:Label>
                </div>
            </th>
        </tr>
        <tr>
            <th colspan="4">
                &nbsp;常用标签：
            </th>
        </tr>
        <tr>
            <td colspan="4">
                <asp:Repeater ID="rptTaglist" runat="server">
                    <HeaderTemplate>
                        <ul>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <li><a href="help.aspx?tag=<%#Eval("name")%>" tooltip="true">
                            <%#Eval("name")%></a></li></ItemTemplate>
                    <FooterTemplate>
                        </ul></FooterTemplate>
                </asp:Repeater>
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <textarea name="templateContent" id="templateContent" runat="server" cols="150" rows="24"
                    style="width: 100%; height: 450px"></textarea>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td colspan="4">
                &nbsp;
                <asp:Button ID="btnSubmit" runat="server" OnClick="Button1_Click" Text="  保 存  " />
                &nbsp;&nbsp;
                <input type="reset" value="取消修改" />
                &nbsp;
                <input type="button" value="不理返回" onclick="javascript:history.go(-1);" />
            </td>
        </tr>
    </table>
    <br />
</asp:Content>
