<%@ Page Title="" Language="C#" MasterPageFile="../BaseMaster.Master" CodeBehind="AdCodeDetail.aspx.cs" Inherits="WAP2P.Web.PC.Admin.Info.AdCodeDetail" %>
<asp:Content ID="Content1" ContentPlaceHolderID="header" runat="server"></asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="content" runat="server">
    <form action="" class="auto" method="post" beforeSubmit="getValues();" onsuccess="parent.$.jPopupEdit.close(true);">
        <div class="m-editbar">
            <input type="submit" class="btn-larger c-priority iconfont" value="&#xe684; 保存" />
            <input type="button" class="btn-larger c-normal iconfont" value="&#xe634; 关闭" onclick="parent.$.jPopupEdit.close();" />
        </div>
        <div class="m-content m-editcontent">
            <table class="m-info" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <th>所属广告位</th>   
                    <td>     
                        <select data-vtype="must" data-vmsg="请选择所属广告位" id="positionId" name="positionId">
                            <option value=""  data-pxWidth="0" data-pxHeight="0">请选择所属广告位</option>
                       <ruson:Repater runat="server" ID="rptAdsTypeList" ItemType="WAP2P.Sys.AdPosition">
                            <ItemTemplate>                                	
	                                <option data-pxWidth="<%# Item.Width %>" data-pxHeight="<%# Item.Height %>" <%# Model.PositionId == Item.Id ? "selected=\"selected\"" : string.Empty %> value="<%# Item.Id %>"><%# Item.Name %></option>
                                </ItemTemplate>
                            </ruson:Repater>
                        </select>                   
                    </td>
                </tr>
                <tr>
                    <th>排序值</th>
                    <td><input type="text" name="priority" class="w60 ui-int" value="<%= Model.Priority %>" data-vtype="number" data-vmsg="排序必须为数字"/><em>数值越大越靠前</em></td>
                </tr>
                <tr>
                    <th>广告类型</th>
                    <td>
                        <div class="ui-radio"><ruson:EnumInput runat="server" ID="codeType" Type="Radio" TypeName="WAP2P.Sys.AdCode+AdCodeType,WAP2P.Sys" Values="0" /></div>
                    </td>
                </tr>
                <tr id="text">
                    <th>文字内容</th>
                    <td><textarea class="w300" rows="3" id="ctext" style="height:4em;"><%= Model.CodeType == WAP2P.Sys.AdCode.AdCodeType.Text ? text.HtmlEncode() : string.Empty %></textarea></td>
                </tr>
                <tr id="img" class="g-hide">
                    <th>图片</th>
                    <td>
                        <div Id="codeJsonResult" class="mb10"><%= IsNew || string.IsNullOrEmpty(text) ? string.Empty : string.Format("<img src=\"{0}\" alt=\"\" >", text)  %></div>
                        <input type="hidden" class="w250" maxlength="500" Id="codeJson" value="<%= Model.CodeType == WAP2P.Sys.AdCode.AdCodeType.Image ? text.HtmlEncode() : string.Empty %>" />
                        <input type="file" Id="imgFile" />
                        <em>请上传尺寸为 <i class="fcred-3  js-size"><% = IsNew || adPosition.Width == 0 ? "任意" : adPosition.Width.ToString()  %> X <% =IsNew ||adPosition.Height == 0 ? "任意" : adPosition.Height.ToString()  %> 像素</i> 的广告图片</em>
                    </td>
                </tr>
                <tr id="url">
                    <th>链接地址</th>
                    <td>
                        <input type="text" class="w250 curl" maxlength="500" id="curl" data-vtype="url" data-vmsg="请输入正确的链接地址" data-vmust="false" value="<%= url.HtmlEncode() %>" />
                        <em>以http://开头 (如果外部链接有值时，点击将直接跳转到外部链接)</em>
                    </td>
                </tr>
                <tr id="js">
                    <th>内置广告</th>
                    <td>
                        <ul class="ui-listvalue"> 
                            <asp:Repeater runat="server" ID="rptValues" ItemType="WAP2P.Sys.AdCode+TextUrlColor">
                                <ItemTemplate>
                                    <li style="width:100%;height:150px;">
                                        <a href="javascript:void(0)" class="iconfont fs22 listvalue-delete" title="删除">&#xe65a;</a>
                                        <div class="m-content">
                                            <div class="mb10"><%# IsNew || string.IsNullOrEmpty(Item.Text) ? string.Empty : string.Format("<img src=\"{0}\" alt=\"\" height=\"120\" width=\"300\">", Item.Text)  %></div>
                                        </div>
                                        <div style="position:relative;left:370px;top:-13px">
                                            <label>背景颜色：<input type="text" class="color w250" value="<%# Model.CodeType == WAP2P.Sys.AdCode.AdCodeType.SystemJs ? Item.Color.HtmlEncode() : string.Empty %>" /></label>
                                            <label>图片地址：<input type="text" class="ctext w250" value="<%# Model.CodeType == WAP2P.Sys.AdCode.AdCodeType.SystemJs ? Item.Text.HtmlEncode() : string.Empty %>" /></label> 
                                            <label>链接地址：<input type="text" class="curl w250" value="<%# Model.CodeType == WAP2P.Sys.AdCode.AdCodeType.SystemJs ? Item.Url.HtmlEncode() : string.Empty %>" /></label>
                                        </div>
                                        <a href="javascript:void(0)" class="iconfont fs30 listvalue-up" style="height:150px;line-height:150px;" title="上移">&#xe622;</a>
                                        <a href="javascript:void(0)" class="iconfont fs30 listvalue-down" style="height:150px;line-height:150px;" title="下移">&#xe661;</a>
                                    </li> 
                                </ItemTemplate>
                            </asp:Repeater>    
                        </ul>
                        <input type="hidden" id="valuesJson" name="valuesJson" />
                        <input type="file" id="codeJsonFile"/>
                        <em>请上传尺寸为 <i class="fcred-3 js-size"><% =IsNew ||adPosition.Width == 0 ? "任意" : adPosition.Width.ToString()  %> X <% =IsNew ||adPosition.Height == 0 ? "任意" : adPosition.Height.ToString()  %> 像素</i>  的广告图片</em>
                    </td>
                </tr>
                <tr id="textarea" class="g-hide">
                    <th>自定义HTML代码</th>
                    <td><textarea name="codeJson" id="custom"><%= Model.CodeType == WAP2P.Sys.AdCode.AdCodeType.CustomCode ? Model.CodeJson : string.Empty %></textarea></td>
                </tr>
                <tr>
                    <th>是否启用</th>
                    <td><div class="ui-checkbox"><%= HtmlHelper.CheckBox("active","启用", IsNew ? true : Model.Active) %></div></td>
                </tr>
                <tr>
                    <th>开始时间</th>
                    <td><input type="text" name="startAt" id="startAt" value="<% =(IsNew ? DateTime.Now : Model.StartAt).ToDateTimeString() %>" class="ui-date w150 ui-datetime" data-maxdate="#endAt" readonly="readonly" /></td>
                </tr>
                <tr>
                    <th>结束时间</th>
                    <td><input type="text" name="endAt" id="endAt" value="<% =IsNew ? null : Model.EndAt.ToDateTimeString() %>" class="ui-date w150 ui-datetime" data-mindate="#startAt" readonly="readonly" /><em>不填写则长期有效</em></td>
                </tr>
            </table>
        </div>
    </form>
    <script type="text/template" id="tmpListValue">
        <li style="width:100%;height:150px;">
            <a href="javascript:void(0)" class="iconfont fs22 listvalue-delete" title="删除">&#xe65a;</a>
            <div class="m-content">
                <div class="listvalue-imgbox"></div>
            </div>
            <div style="position:relative;left:370px;top:-13px">
                <label>背景颜色：<input type="text" class="color w250" /></label>
                <label>图片地址：<input type="text" class="ctext w250"/></label> 
                <label>链接地址：<input type="text" class="curl w250"  /></label>
            </div>
            <a href="javascript:void(0)" class="iconfont fs30 listvalue-up" style="height:150px;line-height:150px;" title="上移">&#xe622;</a>
            <a href="javascript:void(0)" class="iconfont fs30 listvalue-down" style="height:150px;line-height:150px;" title="下移">&#xe661;</a>
        </li> 
    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="script" runat="server">
    <script>    
        var uploadUrl='../uploadify/SwfUpload.aspx?type=image';
        //改变框体
        var changeSize=function(obj){
            var pxWidth=$(obj).find('option:selected').attr('data-pxWidth'),
                pxHeight=$(obj).find('option:selected').attr('data-pxHeight');
            if(pxWidth!=0||pxHeight!=0){
                pxWidth= pxWidth == 0 ? 1 : pxWidth;
                pxHeight= pxHeight == 0 ? 1 : pxHeight;
                uploadUrl='../uploadify/SwfUpload.aspx?type=image&width='+ pxWidth +'&height='+ pxHeight;
                $('i.js-size').text(pxWidth + ' X '+ pxHeight+' 像素');
            }
            else{
                
                $('i.js-size').text('任意像素');
            }
        };
        
        var tableToggle=function(obj){
            if(!$(obj).val()){
                $('table.m-info tr').not(':first').addClass('g-vhide');
            }else{
                $('table.m-info tr').not(':first').removeClass('g-vhide');
            }       
        };
        tableToggle('#positionId');
        changeSize('#positionId');
        $('#positionId').change(function(){
            tableToggle(this);
            changeSize(this);
        }); 


        function getValues() {
            var obj = [];
            
            $(".m-content .m-info .ui-radio input[type=radio]").each(function(i,n){
                var n = $(n);
                var checked = $(n).is(":checked");
                if((n.val() == <%= ((int)WAP2P.Sys.AdCode.AdCodeType.Text).ToString()%>)&& checked){
                    var kv = {
                        Text: $('#ctext').val(),
                        Url: $('#curl').val()
                    };

                    if (kv.Text)
                        obj.push(kv);
                    return false;
                }
                if((n.val() == <%= ((int)WAP2P.Sys.AdCode.AdCodeType.Image).ToString()%>)&& checked){
                    var kv = {
                        Text: $('#codeJson').val(),
                        Url: $('#curl').val()
                    };

                    if (kv.Text)
                        obj.push(kv);
                    return false;
                }
                if((n.val() == <%= ((int)WAP2P.Sys.AdCode.AdCodeType.SystemJs).ToString()%>)&& checked){
                    $('.ui-listvalue li').each(function (i, n) {
                        n = $(n);

                        var kv = {
                            Text: n.find('.ctext').val(),
                            Color: n.find('.color').val(),
                            Url: n.find('.curl').val()
                        };

                        if (kv.Text)
                            obj.push(kv);
                    });
                }
            });
            $('#valuesJson').val(utils.toJsonString(obj));
        };

        $("#codeJson").change(function(){
            $('#codeJsonResult').html('<img src="' +$(this).val() + '" />');
        });

        function selectText(){
            $("#img").hide();
            $("#text").show();
            $("#textarea").hide();
            $("#url").show();
            $("#js").hide();
            $("#codeJson").removeAttr("data-vtype");
            $("#codeJson").removeAttr("data-vmsg");
            $("#custom").removeAttr("data-vtype");
            $("#custom").removeAttr("data-vmsg");
            $("#valuesJson").removeAttr("data-vtype");
            $("#valuesJson").removeAttr("data-vmsg");
            $("#ctext").attr("data-vtype","must");
            $("#ctext").attr("data-vmsg","请输入文字内容");
        };

        function selectImage(){
            $("#img").show();
            $("#text").hide();
            $("#textarea").hide();
            $("#url").show();
            $("#js").hide();
            $("#ctext").removeAttr("data-vtype");
            $("#ctext").removeAttr("data-vmsg");
            $("#custom").removeAttr("data-vtype");
            $("#custom").removeAttr("data-vmsg");
            $("#valuesJson").removeAttr("data-vtype");
            $("#valuesJson").removeAttr("data-vmsg");
            $("#codeJson").attr("data-vtype","must");
            $("#codeJson").attr("data-vmsg","请上传广告图片");
        };

        function selectSystemJs(){
            $("#img").hide();
            $("#text").hide();
            $("#textarea").hide();
            $("#url").hide();
            $("#js").show();
            $("#ctext").removeAttr("data-vtype");
            $("#ctext").removeAttr("data-vmsg");
            $("#codeJson").removeAttr("data-vtype");
            $("#codeJson").removeAttr("data-vmsg");
            $("#custom").removeAttr("data-vtype");
            $("#custom").removeAttr("data-vmsg");
            //$("b").css("margin-left","140px");
            //$("#valuesJson").attr("data-vtype","must");
            //$("#valuesJson").attr("data-vmsg","请上传至少上传一张内置广告图片图片");
        };

        function selectCustomCode(){
            $("#img").hide();
            $("#text").hide();
            $("#textarea").show();
            $("#url").hide();
            $("#js").hide();
            $("#ctext").removeAttr("data-vtype");
            $("#ctext").removeAttr("data-vmsg");
            $("#codeJson").removeAttr("data-vtype");
            $("#codeJson").removeAttr("data-vmsg");
            $("#valuesJson").removeAttr("data-vtype");
            $("#valuesJson").removeAttr("data-vmsg");
            $("#custom").attr("data-vtype","must");
            $("#custom").attr("data-vmsg","请输入自定义HTML代码");

        };

        $(".m-content .m-info .ui-radio input[type=radio]").each(function(i,n){
            if($(n).is(":checked")){
                if(i == 0){
                   selectText();
                }else if(i == 1){
                    selectImage();
                }else if(i == 2){
                    selectSystemJs();
                }else if(i == 3){
                    selectCustomCode();
                }
            }

            $(n).click(function(){
                if(i == 0){
                    selectText();
                }else if(i == 1){
                    selectImage();
                }else if(i == 2){
                    selectSystemJs();
                }else if(i == 3){
                    selectCustomCode();
                }
            });
        });

        setTimeout(function() {
            $("#codeJsonFile").uploadify({
                width: 120,
                height: 32,
                multi: true,
                removeTimeout: 0,
                swf: '../res/uploadify/uploadify.swf?v=<% =CryptoHelper.Random(100000,999999) %>',
                uploader:'../res' + uploadUrl ,
                buttonClass:'iconfont',
                buttonText: '&#xe629; 上传图片',
                fileTypeExts: '<% =WAP2P.Web.PC.Admin.Res.uploadify.SwfUpload.AllowImages %>',
                formData: {
                    <% =WAP2P.Web.Admin.Membership.CookieName %> : '<% =Request.Cookies[WAP2P.Web.Admin.Membership.CookieName].Value %>'
                },
                onUploadStart:function(obj){
                    this.setUploadURL(uploadUrl);
                },
                onUploadSuccess: function(res, data) {
                    eval('var d = ' + data);
                    if (d.Success) {
                        $('.ui-listvalue').append(document.getElementById('tmpListValue').innerHTML);
                        $('.ui-listvalue li .ctext').each(function(i,n){
                            if($(n).val() == ''){
                                $(n).val(d.Message).trigger('blur');
                                return false;
                            }
                        })
                        $('.ui-listvalue li .listvalue-imgbox').each(function(i,n){
                            if($(n).html() == ""){
                                $(n).html('<a href="' + d.Message + '" target="_blank"><img src="' + d.Message + '" width=\"300\" /></a>');
                                return false;
                            }
                        })
                    } else {
                        $.jError(d.Message);
                    }
                }
            });
        }, 10);

        setTimeout(function() {
            $('#imgFile').uploadify({
                width: 120,
                height: 32,
                multi: false,
                removeTimeout: 0,
                swf: '../res/uploadify/uploadify.swf?v=<% =CryptoHelper.Random(100000,999999) %>',
                uploader:'../res' +  uploadUrl,
                buttonClass:'iconfont',
                buttonText: '&#xe629; 上传图片',
                fileTypeExts: '<% =WAP2P.Web.PC.Admin.Res.uploadify.SwfUpload.AllowImages %>',
                formData: {
                    <% =WAP2P.Web.Admin.Membership.CookieName %> : '<% =Request.Cookies[WAP2P.Web.Admin.Membership.CookieName].Value %>'
                },
                onUploadStart:function(obj){
                    this.setUploadURL(uploadUrl);
                },
                onUploadSuccess: function(res, data) {
                    eval('var d = ' + data);
                    if (d.Success) {
                        $('#codeJson').val(d.Message).trigger('blur');
                        $('#codeJsonResult').html('<img src="' + d.Message + '" />');
                    } else {
                        $.jError(d.Message);
                    }
                }
            });
        }, 10);

        $('.ui-listvalue').on('click', 'a', function () {
            var me = $(this);

            if (me.is('.listvalue-delete')) {

                me.closest('li').remove();

            } else if (me.is('.listvalue-up')) {

                var li = me.closest('li');
                if (li.prev().length)
                    li.prev().before(li);
                else
                    li.closest('ul').append(li);

            } else if (me.is('.listvalue-down')) {

                var li = me.closest('li');
                if (li.next().length)
                    li.next().after(li);
                else
                    li.closest('ul').prepend(li);

            }
        });
    </script>  
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="list" runat="server">
</asp:Content>
