<%@ Page Language="C#" MasterPageFile="~/AngelShopMasters.Master" AutoEventWireup="true"
    CodeBehind="xx.aspx.cs" Inherits="AngelShop.xx" Title="ProductList" %>

<%@ Register Src="~/usercontrol/Login.ascx" TagName="login" TagPrefix="URL" %>
<%@ Register Src="~/usercontrol/ProductClass.ascx" TagName="sort" TagPrefix="URL" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <asp:Literal ID="LitMeta" runat="server"></asp:Literal>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <script type="text/javascript">
        function div(id) { return document.getElementById(id); }
        var ie = ! -[1, ];
        var Obj = {
            Create: function (id, id2, ele) {
                var obj = document.createElement(ele);
                obj.setAttribute("id", id2);
                div(id).appendChild(obj);
            },
            del: function (id) {
                var obj = div(id);
                obj.parentNode.removeChild(obj);
            },
            inner: function (id, text) {
                div(id).innerHTML = text;
            },
            css: function () {
                this.cssinfo();
                var obj = div(this.css.id);
                with (obj.style) {
                    ie ? (this.css.float != undefined ? styleFloat = this.css.float : "") : (this.css.float != undefined ? cssFloat = this.css.float : "");
                    this.css.background != undefined ? background = this.css.background : "";
                    this.css.width != undefined ? width = this.css.width : "";
                    this.css.height != undefined ? height = this.css.height : "";
                    this.css.position != undefined ? position = this.css.position : "";
                    this.css.left != undefined ? left = this.css.left : "";
                    this.css.top != undefined ? top = this.css.top : "";
                    this.css.bottom != undefined ? bottom = this.css.bottom : "";
                    this.css.padding != undefined ? padding = this.css.padding : "";
                    this.css.margin != undefined ? margin = this.css.margin : "";
                    this.css.filter != undefined ? filter = this.css.filter : "";
                    this.css.opacity != undefined ? opacity = this.css.opacity : "";
                    this.css.zIndex != undefined ? zIndex = this.css.zIndex : "";
                    this.css.border != undefined ? border = this.css.border : "";
                    this.css.overflow != undefined ? overflow = this.css.overflow : "";
                    this.css.display != undefined ? display = this.css.display : "";
                    this.css.textAlign != undefined ? textAlign = this.css.textAlign : "";
                    this.css.fontSize != undefined ? fontSize = this.css.fontSize : "";
                    this.css.color != undefined ? color = this.css.color : "";
                    this.css.verticalAlign != undefined ? verticalAlign = this.css.verticalAlign : "";
                    this.css.cursor != undefined ? cursor = this.css.cursor : "";
                    this.css.lineHeight != undefined ? lineHeight = this.css.lineHeight : "";
                }
            },
            oEventX: function (e) {
                var e = window.event ? window.event : e;
                return e.clientX;
            },
            oEventY: function (e) {
                var e = window.event ? window.event : e;
                return e.clientY;
            }
        }
        var Create = Obj.Create, inner = Obj.inner, del = Obj.del, oX = Obj.oEventX, oY = Obj.oEventY;
        Obj.css.prototype.cssinfo = function () {
            this.css = css;
            return this;
        }
    </script>
    <script src="JS/jquery-1.5.1.min.js" type="text/javascript"></script>
    <%--<script src="JS/jquery-1.4.1.min.js" type="text/javascript"></script>--%>
    <script src="JS/jquery.raty.js" type="text/javascript"></script>
    <script src="js/jquery.tabs.js"></script>
    <script type="text/javascript">
        $(function () {
            //Initialization specification event
            initGoodsSpec('/tools/submit_ajax.ashx?action=get_goods_info');
        });
        //Initial product specification event
        function initGoodsSpec(sendUrl) {
            //Check for specifications
            if ($("#goodsSpecBox dl").length == 0) {
                //  $("#buyButton button").prop("disabled", false).removeClass("over");
            }
            //Traversing specification attributes
            $("#goodsSpecBox dl dd ul li a").each(function () {
                $(this).click(function () {
                    if (!$(this).hasClass("selected")) {
                        //Label selected
                        $(this).parent().siblings("li").children("a").removeClass("selected");
                        $(this).addClass("selected");

                        $("#output li img").attr("src", $(this).attr("imgs"));

                        $('#<%=txt_counts.ClientID%>').attr("maxValue", $(this).attr("maxvalue"));
                        //                        $("#StockNum").text($(this).attr("maxvalue"));

                        // alert($(this).attr("maxvalue"));
                        var numObj = $('#<%=txt_counts.ClientID%>');

                        if (parseInt(numObj.val()) >= parseInt($(this).attr("maxvalue"))) {
                            numObj.val($(this).attr("maxvalue"));
                        }
                        if ($(this).attr("maxvalue") < 1) {
                            $("#<%=linkAddtoCart.ClientID%>").attr("src", "images/pro_xx_070.jpg");
                        }
                        else {
                            numObj.val("1");
                            $("#<%=linkAddtoCart.ClientID%>").attr("src", "images/pro_xx_07.jpg");
                        }


                        $('#<%=colorname.ClientID%>').val($(this).text());
                        $('#Prices').text(parseInt($(this).attr("prices")));
                        if ($(this).attr("vipprices") == "**") {
                            $('#vipPrices').text($(this).attr("vipprices"));
                         } else {
                            $('#vipPrices').text(parseInt($(this).attr("vipprices")));
                         }
                        $('#<%=TextBox1.ClientID%>').val($(this).attr("prices"));
                        $('#<%=TextBox2.ClientID%>').val($(this).attr("imgs"));
                        $('#<%=TextBox3.ClientID%>').val($(this).attr("vipprices"));

                        //Get Product Price
                        if ($("#goodsSpecBox dl dd ul li a.selected").length == $("#goodsSpecBox dl").length) {
                            var specIds = '';
                            $("#goodsSpecBox dl dd ul li a.selected").each(function (i) {
                                if (i == 0) {
                                    specIds = ",";
                                }
                                specIds += $(this).attr("specid") + ',';
                            });
                            //Send ansy request

                        }
                    }
                });
            });
        }
        // product number + - 1
        function addCartNum(num) {
            var numObj = $('#<%=txt_counts.ClientID%>');
            var selectNum = 0;
            if (numObj.val().length > 0) {
                selectNum = parseInt(numObj.val());
            }
            selectNum += num;
            //max value
            if (selectNum < 1) {
                selectNum = 0;
            }
            //max value
            if (selectNum > parseInt(numObj.attr("maxValue"))) {
                selectNum = parseInt(numObj.attr("maxValue"));
            }
            numObj.val(selectNum);
        }

        //redony input number
        function checkNumber(e) {
            var keynum = window.event ? e.keyCode : e.which;
            if ((48 <= keynum && keynum <= 57) || keynum == 8) {
                return true;
            } else {
                return false;
            }
        }


        function isCheckNumber() {
            var numObj = $('#<%=txt_counts.ClientID%>');
            if (parseInt(numObj.val()) == 0) {
                alert("This color/version is out of stock");
                return false;
            }
            return true;
        }
    </script>
    <style type="text/css">
        .box
        {
            width: 100%;
            margin: 10px auto 0;
            background: #fff;
        }
        
        .tab_menu
        {
            overflow: hidden;
        }
        
        .tab_menu li
        {
            width: 100px;
            float: left;
            height: 30px;
            line-height: 30px;
            background: #ffffff;
            text-align: center;
            cursor: pointer;
            border: 1px #cccccc solid;
            border-bottom: none;
        }
        
        .tab_menu li.current
        {
            color: #fff;
            background: red;
        }
        
        .tab_menu li a
        {
            color: #fff;
            text-decoration: none;
        }
        
        .tab_menu li.current a
        {
            color: #333;
        }
        
        .tab_box
        {
            padding: 0px;
        }
        
        .tab_box .hide
        {
            display: none;
        }
        .gwc
        {
            height: 167px;
            background: url(../images/pro_xx_06.jpg) no-repeat left bottom;
        }
        .aaa
        {
            margin-left: 2px;
            cursor: pointer;
        }
        .btn
        {
            border: 1px solid red;
        }
        
        
        
        /*Product  specification*/
        /*{ position:relative; margin:30px 0 0 400px; overflow:hidden; overflow:hidden; *zoom:1; }
	 h1{ display:block; color:#555; font-size:18px; font-weight:700; line-height:1.1em; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
	 .subtitle{ margin-top:5px; color:#6c6c6c; font-size:15px; line-height:18px; }
    */
        .spec-box
        {
            position: relative;
            margin-top: 10px;
        }
        .spec-box.line
        {
            padding-top: 10px;
            border-top: 1px solid #efefef;
            clear: both;
        }
        .spec-box:after
        {
            clear: none;
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
        }
        .spec-box dl
        {
            clear: both;
            display: block;
        }
        .spec-box dl:after
        {
            clear: none;
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
        }
        .spec-box dl dt
        {
            float: left;
            width: 40px;
            line-height: 38px;
            min-height: 38px;
            color: #999;
        }
        .spec-box dl dd
        {
            position: relative;
            padding: 5px 0;
            line-height: 26px;
            min-height: 26px;
            color: #6c6c6c;
        }
        .spec-box dl dd s
        {
            display: inline-block;
            text-decoration: line-through;
        }
        .spec-box dl dd .price
        {
            display: inline-block;
            margin-right: 5px;
            color: #f40;
            font-size: 24px;
            font-weight: 700;
        }
        .spec-box dl dd .items li
        {
            position: relative;
            float: left;
            margin: 0 5px 8px 0;
            padding: 1px;
            line-height: 20px;
            vertical-align: middle;
        }
        .spec-box dl dd .items li a
        {
            display: block;
            padding: 6px;
            color: #666;
            min-width: 10px;
            width: auto !important;
            text-align: center;
            text-decoration: none;
            border: 1px solid #eee;
            cursor: pointer;
            white-space: nowrap;
            text-overflow: ellipsis;
            vertical-align: middle;
        }
        .spec-box dl dd .items li a span
        {
            display: inline-block;
            padding: 5px 9px;
            font-style: normal;
            line-height: 20px;
        }
        .spec-box dl dd .items li a img
        {
            width: 36px;
            height: 38px;
            vertical-align: middle;
        }
        .spec-box dl dd .items li a.selected
        {
            margin: -1px;
            color: #333;
            border: 2px solid #f40;
            color: #f40;
        }
        .spec-box dl dd .stock-box
        {
            display: block;
            float: left;
            margin-right: 10px;
            width: 64px;
        }
        .spec-box dl dd .stock-box input
        {
            float: left;
            margin-right: 3px;
            width: 42px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #e8e8e8;
        }
        .spec-box .stock-box a
        {
            display: block;
            float: left;
            margin-bottom: 4px;
            width: 26px;
            height: 24px;
            line-height: 24px;
            color: #333;
            font-size: 20px;
            text-align: center;
            border: 1px solid #e8e8e8;
            cursor: pointer;
            overflow: hidden;
            background: #ffffff;
        }
        .spec-box .stock-box .add
        {
            float: left;
            margin-top: 3px;
        }
        .spec-box .stock-box .remove
        {
            float: left;
            margin-left: 6px;
            margin-top: 3px;
        }
        .toatalnumber
        {
            float: left;
            width: 36px;
            height: 19px;
            line-height: 23px;
            margin-left: 5px;
            text-align: center;
            margin-top: 3px;
        }
        
        
        
        .spec-box .stock-txt
        {
            float: left;
            line-height: 32px;
            height: 32px;
            width: 60px;
            font-size: 12px;
        }
        .spec-box .btn-buy
        {
            margin-top: 15px;
        }
        .spec-box .btn-buy .buy
        {
            display: inline-block;
            margin-right: 10px;
            padding: 0 30px;
            color: #e5511d;
            font-size: 16px;
            line-height: 38px;
            background: #ffe4d0;
            border: 1px solid #f0cab6;
            border-radius: 2px;
            cursor: pointer;
        }
        .spec-box .btn-buy .add
        {
            display: inline-block;
            padding: 0 30px;
            color: #fff;
            font-size: 16px;
            line-height: 38px;
            background: #f40;
            border: 1px solid #f40;
            border-radius: 2px;
            cursor: pointer;
        }
        .spec-box .btn-buy button.over
        {
            color: #999;
            background: #f7f7f7;
            border-color: #e8e8e8;
            cursor: default;
        }
        
        .p-info a.btn-add-chart, .p-info a.btn-buy-now, .p-info a.btn-reservation, .p-info a.btn-presale
        {
            float: left;
            margin-right: 10px;
            border-radius: 2px;
            padding: 10px 25px;
            color: #FFFFFF;
            font-family: Arial;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            background: #89C64E;
        }
        
        .p-info a.btn-add-chart
        {
            background: #F50000;
        }
    </style>
    <div class="neiye">
        <div class="neiye_1">
            <div class="neir3_1">
                <URL:login ID="lo" runat="server" />
            </div>
            <URL:sort ID="sort" runat="server" />
        </div>
        <div class="xx">
            <div class="neiye_23">
                <div class="neiye_231">
                    <img src="images/1.jpg" width="10" height="34" />
                </div>
                <div class="neiye_232" style="color: #ffffff;">
                    <a href="index.aspx" style="padding-left: 3px; padding-right: 3px;">Home</a> > <a
                        href="Products.aspx" style="padding-left: 3px; padding-right: 3px;">PRODUCTS</a>
                    <%=classnamenavs%>
                </div>
                <div class="neiye_233" style="float: left;">
                    <img src="images/3.jpg" width="10" height="34" />
                </div>
                <div class="clear">
                </div>
            </div>
            <div class="pro_xx">
                <%--           <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">--%>
                <%--            <ContentTemplate>--%>
                <div class="pro_tptp">
                    <asp:Repeater ID="rptImageProducts" runat="server">
                        <ItemTemplate>
                            <div class="pro_dt">
                                <ul id="output">
                                    <li>
                                        <img src="<%# Eval("imgUrl1")%>" alt="<%# Eval("title")%>" width="390" height="304" /></li>
                                </ul>
                            </div>
                            <div id="ibody">
                                <div class="xiaotu" id="imglist">
                                    <ul id="tabs">
                                        <li><a href="<%# Eval("imgUrl2")%>">
                                            <img src="<%# Eval("imgUrl2")%>" alt="<%# Eval("title")%>" width="96" height="72" /></a></li>
                                        <li><a href="<%# Eval("imgUrl3")%>">
                                            <img src="<%# Eval("imgUrl3")%>" alt="<%# Eval("title")%>" width="96" height="72" /></a></li>
                                        <li><a href="<%# Eval("imgUrl4")%>">
                                            <img src="<%# Eval("imgUrl4")%>" alt="<%# Eval("title")%>" width="96" height="72" /></a></li>
                                        <li><a href="<%# Eval("imgUrl5")%>">
                                            <img src="<%# Eval("imgUrl5")%>" alt="<%# Eval("title")%>" width="50" height="72" /></a></li>
                                    </ul>
                                </div>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>
                <div class="pro_text1">
                    <asp:Repeater ID="rptPriceProducts" runat="server" OnItemCommand="rptPriceProducts_ItemCommand"
                        OnItemDataBound="rptPriceProducts_ItemDataBound">
                        <ItemTemplate>
                            <h4>
                                <%# Eval("title")%>
                            </h4>
                            <div class="kendie">
                                <strong>Price:</strong><b id="Prices"><%# Convert.ToInt32(Eval("Privce"))%></b><span><%# Eval("num")%>$</span>
                                <strong>Senior Member Price:</strong><b id="vipPrices"><%# Eval("PriceVip")%></b><span><%# Eval("vipNum")%>$</span>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                    <div style="margin-top: 7px; clear: both;">
                        <div style="height: 40px;">
                            Sales promotion: VIP login to confirm whether to enjoy
                            <br />
                            this privilege
                        </div>
                        <div id="goodsSpecBox" class="spec-box line">
                            <!--specification-->
                            <dl>
                                <dt>Color:</dt>
                                <dd>
                                    <ul class="items" id="colorlists" runat="server">
                                        <!--specification tab-->
                                        <li><a specid="9" title="white" href="javascript:;">white</a></li>
                                        <li><a specid="13" title="black" href="javascript:;">black</a> </li>
                                        <!--/specification tabe-->
                                    </ul>
                                </dd>
                            </dl>

                            <input id="TextBox1" type="hidden" value="" runat="server" />
                            <input id="TextBox2" type="hidden" value="" runat="server" />
                            <input id="TextBox3" type="hidden" value="" runat="server" />
                            <input id="colorname" type="hidden" value="default" runat="server" />
                            <div class="gwc gwc_pic stock-box" style="clear: both; margin-top: 20px; height: 60px;
                                padding-top: 10px;">
                                <%--                                    <asp:Button ID="Button1" Height="32" Width="30" runat="server" Text="-" OnClick="Button1_Click1" />
                                    <asp:TextBox ID="txt_count" runat="server" Height="28" Width="40" Text="1" Style="line-height: 30px; height: 30px; text-align: center" ReadOnly="True"></asp:TextBox>
                                    <asp:Button ID="Button2" Height="32" Width="30" runat="server" Text="+" OnClick="Button2_Click" />--%>
                                <a class="add" onclick="addCartNum(-1);">-</a>
                                <input runat="server" id="txt_counts" class="toatalnumber" type="text" maxlength="9"
                                    value="1" maxvalue="30" onkeydown="return checkNumber(event);">
                                <a class="remove" onclick="addCartNum(1);">+</a>
                                <%--                <a class="stock-txt" style="width:68px;font-size:12px;margin-left:5px;">
                Stock:<em id="StockNum">30</em> Pieces
              </a>--%>
                                <span style="margin-right: -35px;" class="p-info">
                                    <asp:ImageButton ID="linkAddtoCart" runat="server" CommandName="Delete" ImageUrl="images/pro_xx_07.jpg"
                                        Width="75" Height="92" OnClientClick="return isCheckNumber()" OnClick="linkAddtoCart_Click" />
                                    <%--                                        <a class="btn-add-chart disable" href="javascript:;" clstag="homepage|keycount|ept|shopaddcart"><img src="/Images/ad_chart.png">Add to Cart</a>--%>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="gwc" style="background: #fff; height: 0px; clear: both;">

                    </div>
                    <div class="emails">
                        <ul>
                            <dd style="border: 1px #848484 solid">
                                <a href="mailto:709047174@qq.com" style="display: block;"
                                    target="_blank"><strong>
                                        <img src="images/sendemail.gif" />
                                        <span style="font-size: 17px;"><span style="color: #000000;">Leave me a message</span>
                                        </span></strong></a>
                                <br>
                            </dd>
                        </ul>
                     
                    </div>
                </div>

                <div class="clear">
                </div>
            </div>
            <script type="text/javascript">
                $(function () {
                    $('.demo2').Tabs({
                        event: 'click', //
                        callback: function (e) {
                        ShowTabComment(e,<%=Request.Params["id"]%>);
                        QueryRelatedList(<%=productId%>);
                        }
                    });
                });	
            </script>
            <div class="box demo2">
                <ul class="tab_menu" style="border-bottom: 3px red solid; clear: both">
                    <li class="current" style="border-right: none;">Product Details</li>
                    <li style="border-right: none;">Feedback(<%=acticecomment%>)</li>
                    <li>seller guarantees</li>
                </ul>
                <div class="tab_box">
                    <div>
                        <div class="xx_2">
                            <asp:Repeater ID="dptContentProducts" runat="server">
                                <ItemTemplate>
                                    <dl>
                                        <dt><a href="#">product Description </a></dt>
                                        <dd>
                                            <%# Eval("ProductDescription")%>
                                    </dl>
                                    <dl>
                                        <dt><a href="#">Specifications </a></dt>
                                        <dd>
                                            <%# Eval("Specifications")%>
                                    </dl>
                                    <dl>
                                        <dt><a href="#">Pack content</a></dt>
                                        <dd>
                                            <%# Eval("PackContent")%>
                                        </dd>
                                    </dl>
                                </ItemTemplate>
                            </asp:Repeater>
                        </div>
                    </div>
                    <div class="hide">
                        <div class="block-content clearfix" style="clear: both;">
                            <!--Get the total number of comments-->
                            <script src="/JS/base.js" type="text/javascript"></script>
                            <link rel="stylesheet" href="/style/validate.css" />
                            <link rel="stylesheet" href="/style/pagination.css" />
                            <script type="text/javascript" src="/JS/jquery.form.min.js"></script>
                            <script type="text/javascript" src="/JS/Validform_v5.3.2_min.js"></script>
                            <script type="text/javascript" src="/JS/lhgdialog/lhgdialog.js?skin=idialog"></script>
                            <script type="text/javascript" src="/JS/jquery.pagination.js"></script>
                            <script type="text/javascript">
          $(function () {
           //init commont list
        $('#maxstar').raty({
          path: "style/img",
          starOff: 'star-off-big.png',
          starOn: 'star-on-big.png', 
          size:24,
          score: '<%=starscore%>' });

         });
                 </script>
                            <div>
                                <div style="float: left; margin-top: 25px; width: 50%;">
                                    <div id="maxstar" style="text-align: center; margin: auto">
                                    </div>
                                    Note:All information displayed is based on feedback received for this product over
                                    the past 6 months. To learn more about our Feedback Rating System
                                </div>
                                <div style="float: left; margin-top: 25px; width: 45%;">
                                    <div class="legend">
                                        Feedback Rating for This Product
                                    </div>
                                    <%=startlist%>
                                </div>
                            </div>
                            <div style="background: #cccccc; height: 3px; width: 100%; margin-top: 10px;">
                            </div>
                            <div class="comment_box" style="clear: both; height: auto; overflow: hidden;">
                                <h3 class="base_tit">
                                </h3>
                                <ol id="comment_list" class="commentslist clearfix" style="margin: 0px; padding: 0px;
                                    list-style: none; clear: both;">
                                    <p style="line-height: 35px;">
                                        No comment, be sure to grab the sofa now!</p>
                                </ol>
                            </div>
                            <div class="line20" style="clear: both;">
                            </div>
                            <div id="pagination" class="flickr" style="clear: both;">
                            </div>
                            <!--放置页码-->
                        </div>
                        <div class="xx_2" style="clear: both;">
                            <dl>
                                <dt><a href="#">What products they purchased</a></dt>
                                <dd style="padding-left: 0px">
                                    <div class="neiye_24" id="proRelated">
                                    </div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                    <div class="hide">
                     <div id="sg_content" class="seller_content"></div>
                    </div>
                </div>
            </div>
            <div class="xx_2" style="clear: both;">
                <dl>
                    <dt><a href="#">Related Products</a></dt>
                    <dd style="padding-left: 0px">
                        <div class="neiye_24">
                            <asp:Repeater ID="rptRelatedProducts" runat="server" OnItemDataBound="rptRelatedProducts_ItemDataBound"
                                OnItemCommand="rptRelatedProducts_ItemCommand">
                                <HeaderTemplate>
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <div class="pro_img" style="width: 212px;">
                                        <div>
                                            <div style="clear: both;">
                                                <a href="xx.aspx?id=<%# Eval("id")%>">
                                                    <img src=" <%# Eval("imgUrl1")%>" alt="<%# Eval("title")%>" width="150" height="104" /></a>
                                            </div>
                                            <div>
                                                <div style="word-break: break-all; text-align: left; height: 50px; overflow: hidden">
                                                    <%# Eval("title")%>
                                                </div>
                                                <%--  Sort:
                               <%# Eval("className")%><br />--%>
                                                <!--ID:
                                <%# Eval("id")%>-->
                                            </div>
                                            <div>
                                                <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="images/pro_07.jpg" Width="95"
                                                    Height="20" CommandArgument='<%#Eval("id")%>' CommandName="Delete" />
                                            </div>
                                        </div>
                                    </div>
                                </ItemTemplate>
                                <FooterTemplate>
                                </FooterTemplate>
                            </asp:Repeater>
                        </div>
                    </dd>
                </dl>
            </div>
            <script type="text/javascript">
                function iShow(objid) {
                    this.iControl = "1"        /*11 is the picture size adaptive*/
                    this.iControlSize = 0.8    /*The ratio of the maximum image size to the visible areathis.iControl=1)*/
                    this.ibody = "ibody";      /*bodyid*/
                    this.bgid = "container"    /*background idid*/
                    this.borderid = "wrap";    /*border id*/
                    this.boxid = "imgwrap";    /*Image container id*/
                    this.listid = objid;       /*Image list idid*/
                    this.borderSize = 10;      /*Border size*/
                    this.titleSize = 22;       /*Title area size*/
                    this.alpha = 3;            /*Transparency---1~10*/
                    this.bgc = "000"           /*Background color*/
                    /*Default popup style*/
                    this.w = 420;
                    this.h = 226;
                    this.c = "#fff";
                    this.w1 = this.w + this.borderSize * 2;
                    this.h1 = this.h + this.borderSize * 2 + this.titleSize;
                    this.c1 = "#eee";
                }
                iShow.prototype.iMouse = function () {
                    /*mouse events*/
                    var iDel = this.iDel;
                    var iLoad = this.iLoad, iStyle = this.iStyle;
                    var ele = { box: this.boxid, bd: this.borderid, bdSize: this.borderSize * 2, tSize: this.titleSize, iCount: this.iCount, iControl: this.iControl, iControlSize: this.iControlSize }
                    var eles = div(this.listid).getElementsByTagName("a");
                    for (var i = 0; i < eles.length; i++) {
                        eles[i].onclick = function () {
                            iStyle(iDel);
                            iLoad(this, ele);
                            return false;
                        }
                    }
                }
                iShow.prototype.iStyle = function (iDel) {
                    /*Object initialization*/
                    this.iShow.call(this)
                    Create(this.ibody, this.bgid, "div");
                    Create(this.ibody, this.borderid, "div");
                    Create(this.ibody, this.boxid, "div");
                    css = { id: this.bgid, width: "100%", height: "50%", opacity: 0.1 * this.alpha, background: "#" + this.bgc, filter: "alpha(opacity=" + 10 * this.alpha + ")", position: "absolute", top: 0, left: 0 }
                    new Obj.css;
                    css = { id: this.borderid, background: this.c1, width: this.w1 + "px", height: this.h1 + "px", position: "absolute", margin: -this.h1 / 2 + "px " + "0 0 " + -this.w1 / 2 + "px", left: "50%", top: "50%", opacity: 0.2, overflow: "hidden", filter: "alpha(opacity=20)" }
                    new Obj.css;
                    css = { id: this.boxid, textAlign: "center", background: this.c, width: this.w + "px", height: this.h + "px", position: "absolute", margin: -(this.h + this.titleSize) / 2 + "px " + "0 0 " + -this.w / 2 + "px", left: "50%", top: "50%" }
                    new Obj.css;
                    inner(this.boxid, "<span style='display:block;margin-top:50px;color:#f30'>Image reading may be slower, please wait……</span>")
                    document.onkeydown = function (e) {
                        var e = e ? e : window.event;
                        if (e.keyCode == "27") {
                            iDel();
                        }
                    }
                    /*mobile*/
                    var obj1 = div(this.borderid);
                    var obj2 = div(this.boxid);
                    var Site = imgshow.Site;
                    var Move = imgshow.Move;
                    obj1.onmousedown = function () { Site(arguments[0], obj1, obj2); this.style.cursor = "move"; document.onmousemove = function () { Move(arguments[0], obj1, obj2) }; }
                    document.onmouseup = function () { this.onmousemove = ""; obj1.style.cursor = "" }
                }
                iShow.prototype.iLoad = function (e, ele) {
                    var image = new Image();
                    image.src = e.href;
                    image.width = 400, image.height = 300;
                    if (image.complete) { Reset(); } else {
                        image.onload = function () { Reset(); }
                    }
                    function Reset() {
                        var iw0 = image.width, ih0 = image.height;
                        //var W0=iw0+ele.bdSize,H0=ih0+ele.bdSize+ele.tSize;
                        var W0 = iw0, H0 = ih0;
                        function curSize() {
                            css = { id: borderid, width: W0 + "px", height: H0 + "px", left: "50%", top: "30px", margin: "0 0 0 " + -W0 / 2 + "px" };
                            new Obj.css;
                            css = { id: boxid, width: iw0 + "px", height: ih0 + "px", left: "50%", top: "30px", margin: ele.tSize / 2 + "px 0 0 " + -(W0 - ele.bdSize) / 2 + "px" };
                            new Obj.css;
                        }
                        var Size = (image.width > document.body.clientWidth * ele.iControlSize || image.height > document.body.clientHeight * ele.iControlSize) ? true : false
                        if (ele.iControl == "1" && Size == true) {
                            var iInfo = ele.iCount(image, ele.iControlSize);

                            image.width = 400, image.height = 300;
                        }
                        var bt1 = "<a href='#' style='color:#fff;left:20px;text-decoration:none;float:right;' onclick='imgshow.iDel()'><img  width='30px' height=20px src='images/close.jpg'  /></a>";
                        var bt2 = "<a href='#' style='color:Black;margin-left:20px;text-decoration:none;' id='iZoom_cur'>Original size</a>"
                        var bt = "<span style='float:right;width:100px;text-align:left;'>" + bt1 + bt2 + "</span>";
                        var text1 = "<img  src='" + image.src + "' style='width:100%' alt='" + e.title + "' />";
                        var text2 = "<span id='imgshow_title'>" + bt + e.title + "</span>"
                        var text = text1 + text2;
                        //var W=image.width+ele.bdSize,H=image.height+ele.bdSize+ele.tSize;
                        var W = 400, H = 300;
                        css = { id: borderid, width: W + "px", height: H + "px", left: "50%", top: "20%", margin: -H / 2 + "px" + " 0 0 " + -W / 2 + "px" };
                        new Obj.css;
                        css = { id: boxid, width: image.width + "px", height: image.height + "px", left: "50%", top: "26%", margin: -(image.height + ele.tSize) / 2 + "px" + " 0 0 " + -image.width / 2 + "px" };
                        new Obj.css;
                        inner(ele.box, text);
                        css = { id: "imgshow_title", width: "100%", height: "22px", position: "absolute", bottom: "-26px", left: 0, lineHeight: "22px", overflow: "hidden", color: "#fff" }
                        new Obj.css;
                        div("iZoom_cur").onclick = curSize;
                    }
                }
                iShow.prototype.iCount = function (e, f) {
                    var doc = document.body, W = doc.clientWidth * f, H = doc.clientHeight * f;
                    var obj = e.width / W > e.height / H ? { iW: W, iH: e.height * W / e.width, iType: 1} : { iW: e.width * H / e.height, iH: H, iTyle: 2 };
                    return obj;
                }
                iShow.prototype.Site = function (e, obj1, obj2) {
                    this.X = oX(arguments[0]);
                    this.Y = oY(arguments[0]);
                    this.oLeft1 = obj1.offsetLeft;
                    this.oTop1 = obj1.offsetTop;
                    this.oLeft2 = obj2.offsetLeft;
                    this.oTop2 = obj2.offsetTop;
                }
                iShow.prototype.Move = function (e, obj1, obj2) {
                    var X = oX(arguments[0]) - this.X, Y = oY(arguments[0]) - this.Y;
                    var Left1 = this.oLeft1 + X, Top1 = this.oTop1 + Y, Left2 = this.oLeft2 + X, Top2 = this.oTop2 + Y;
                    css = { id: obj1.id, left: Left1 + "px", top: Top1 + "px", margin: 0 }
                    new Obj.css;
                    css = { id: obj2.id, left: Left2 + "px", top: Top2 + "px", margin: 0 }
                    new Obj.css;
                }
                iShow.prototype.iDel = function () {
                    del(boxid); del(borderid); del(bgid);
                    document.onkeydown = '';
                }
                var imgshow = new iShow("imglist");
                imgshow.iMouse();

            </script>
</asp:Content>
