<%@ page language="C#" autoeventwireup="true" inherits="Menu, App_Web_dncsgd3r" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script src="JScript/jquery-2.1.4.js" type="text/javascript"></script>
    <style type="text/css">
        body,html,form {
        margin:0;
        width:100%;
        height:100%;
        font-family:'B Titr';
            background: #F7976A url(Images/Dashboard/tile2.png) repeat 0% 0%;
        }
        input[type="submit"],input[type="text"]
        {
            font-family:'B Titr';
            }
        .Title{    font-size: 38px;
    text-align: center;
    padding: 10px;
    color: #704431;
    font-weight: bold;
    text-shadow: 0 0 5px #FFF;}
        #container {
            /*background:url('Images/Dashboard/sea.jpg');*/
            background-size:100%;
            height:100%;
            display:block;
            
        }
        #panelFood {
            width:30%;
            margin-top: 50px;
        }
            #panelFood div {
                width:350px;
                float:left;
               margin-top:-30px;
               margin-left:30px;
                height:250px;
                position:relative;
                  -webkit-transform: rotate(10deg);
                -moz-transform: rotate(10deg);
                -o-transform: rotate(10deg);
                -ms-transform: rotate(10deg);
                transform: rotate(10deg);
            }
                #panelFood div .div1 {
                    background:url('Images/Dashboard/Bakhtiari.jpg') ;
                    background-size:cover;
                    
         border-radius:50%;
                border:2px solid #fff;
                }
                #panelFood div .div2 {
                    background:url('Images/Dashboard/chiken.jpg');
                   background-size:cover;
                   
         border-radius:50%;
                border:2px solid #fff;
                }
                #panelFood div .div3 {
                    background:url('Images/Dashboard/tahchin.jpg') ;
                     background-size:cover;
                  
         border-radius:50%;
                border:2px solid #fff;
                }
        fieldset 
        {
            width:30%;
            height:90%;
                background: rgba(232, 87, 0, 0.4);
            border:3px solid #fff;
                border-radius:10px;
                float:right;
                overflow: hidden;
                    margin-right: 5px;
                    margin-left: 5px;
        }
            fieldset legend {
                    width: 80%;
    text-align: center;
    padding: 10px 5px;
    border: 3px solid #000;
    border-radius: 10px;
    background: #B4FF00;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
            }
        .row {
            background: #fff;
            border: 2px solid #888;
            border-radius: 50px;
            margin:2px 5px auto;
            width: 95%;
            height:30px;
            padding: 5px 5px;
            display: table;
            direction:rtl;
        }
        .ListItem {
            height:100%;
        }
        .ListItem .Price,.ListItem .ItemName{
            font-family:'B Titr';
            font-size:18px;
        }
            .ListItem .Price {
                text-align:right;
                float:left;
                 display:block;
                 padding-right:5px;
                 width:150px;
                 height:100%;
                 border-right:3px solid #888;
            }
            .ListItem .HasTedad {
                text-align:right;
                float:left;
                 display:block;
                 padding-right:5px;
                 height:100%;
                 color:red;
                 border-right:3px solid #888;
            }
             .ListItem .ItemName {
                 text-align:right;
                 float:right;
                 display:block;
            }
            .btnClose
            {
                display: block;
                width: 35px;
                height: 35px;
                float: right;
                background-color:#FF471D;
                border:1px solid #888;
            }
            .btnSave
            {
                display: block;
                width: 200px;
                height: 35px;
                float: left;
            }
    </style>
    <script type="text/javascript">
        $(document).ready(function () 
        {
            var TimeShow=parseInt('<%= Session["TimeShow"] %>')*1000;
            setInterval(function () { GetItem(); }, TimeShow);
            GetItem();
        });


        function GetItem() {

            $.ajax({
                type: "POST",
                url: "Menu.aspx/GetItem",
                data: "{height:" + $("#Group_1").height() + "}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);

                }
            });
        }

        function OnSuccess(response) {
            ListItems = response.d
            //$("#ListMenuFood").html("");

            var IndexGroup = 0;
            var GroupName = "#Group_1";
            $("#Group_1").html("");
            $("#Group_2").html("");
            $("#Group_3").html("");
            $("#LegendGroup_1").html("");
            $("#LegendGroup_2").html("");
            $("#LegendGroup_3").html("");

            $("#fieldset_1").hide();
            $("#fieldset_2").hide();
            $("#fieldset_3").hide();

            $.each(ListItems, function (index, val) {

                if (parseInt(val.IsGroup) == 1) 
                {
                    IndexGroup++;
                    GroupName = "#Group_" + IndexGroup;
                    var LegendGroup = "#LegendGroup_" + IndexGroup;
                    $(LegendGroup).html(val.ItemGroupName);
                    var fieldset = "#fieldset_" + IndexGroup;
                    $(fieldset).show();
                    //$("#ListMenuFood").append("<fieldset><legend>" + val.ItemGroupName + "</legend><div id=\"Group_" + val.ItemGroupCode + "\" class=\"ListItem\"></div></fieldset>");
                } else {
                    var item = $("<div class=\"row\"><span class=\"Price\">" + parseFloat(val.Price).toLocaleString().replace(",", "/") + " ريال " + "</span><span class=\"HasTedad\">" + val.HasTedad + "</span><span class=\"ItemName\">" + val.ItemName + "</span></div>").hide();

                    $(GroupName).append(item);
                    item.delay(300 + (index * 50)).fadeIn(500);
                }
            });
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
    <div style="position:absolute;top:10px;right:10px;width:40px;height:40px;" onmouseover="javascript:$('#btnSetting').show();" onmouseout="javascript:$('#btnSetting').hide();">
    <img id="btnSetting" src="Images/setting.png" width="40px" style="display:none;" onclick="javascript:$('#panelSetting').show();" />
    </div>
    <div id="panelSetting" style="display:none;padding:5px;background:#fff;z-index:1000;width:300px;height:350px;right:50px;position:absolute;border-radius: 5px;direction:rtl;overflow:auto;" >
            <div style="background:#eee;width:100%;display: table;">
                <asp:Button Text="ذخیره" ID="btnSave" runat="server" CssClass="btnSave" onclick="btnSave_Click" />
                <input value="X" class="btnClose" type="button" onclick="javascript:$('#panelSetting').hide();" />
            </div>
            <div style="background:#eee;border-bottom:1px solid #444;width:100%;display: table;">
            <asp:Label runat="server" ID="lbl1" Text=" زمان نمایش : "></asp:Label>
            <asp:TextBox ID="txtTimeShow" runat="server" Width="40px" MaxLength="2"></asp:TextBox>
            <asp:RangeValidator ControlToValidate="txtTimeShow" ID="RangeValidator1" Type=Integer MinimumValue="5" MaximumValue="60" ForeColor="red" runat="server" Text="5 الی 60"></asp:RangeValidator>
            <br />
            <asp:CheckBox ID="checkBox_OnlyHasTedad" runat="server" Text="فقط کالاهای دارای موجودی" />
            <br />
            <asp:CheckBox ID="checkBox_ShowHasTedad" runat="server" Text="نمایش تمام شد" />
            </div>
        <asp:CheckBoxList ID="ListItemGroup" runat="server" Width="100%" 
            DataTextField="ItemGroupName" DataValueField="ItemGroupCode"></asp:CheckBoxList>
    </div>
    <div class="Title"></div>
    <div id="ListMenuFood"></div>
        <fieldset id="fieldset_1"><legend id="LegendGroup_1"></legend><div id="Group_1" class="ListItem"></div></fieldset>
        <fieldset id="fieldset_2"><legend id="LegendGroup_2"></legend><div id="Group_2" class="ListItem"></div></fieldset>
        <fieldset id="fieldset_3"><legend id="LegendGroup_3"></legend><div id="Group_3" class="ListItem"></div></fieldset>
    </form>
</body>
</html>


