<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Room1.aspx.cs" Inherits="Display.Room1" %>
  <!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title>会议室</title>  
     <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
   
     <script src="template1/date.js?v=2"></script> 
    <script src="../javascript/jquery-1.12.4.min.js"></script> 

    <script src="../javascript/layer/layer.js"></script>

      <script> 
          TimeSpan = 120;
      </script>

      <style> 
   .busy .left{ min-height:2000px;   } 
  .busy #status { margin-top:30px;   
                  margin-left:85px;  
                  padding-top:150px; 
                  font-size:150px;   
                  letter-spacing:40px;   
                  color:#f2aa34;
                 text-shadow: 3px 3px 7px #111;  }


  .busy .right {   border-left:solid 5px #eaa633;    }
  .busy  .right_top{ background: linear-gradient(to right, #eaa633, #f2aa34);  padding-left:10px; padding-top:20px;   }
  
  .busy  .room{  margin-top:24px; margin-bottom:24px; font-size:40px; text-shadow:2px 2px 2px #000 } 

  .busy  .clock{ font-size:45px; padding-top:20px;    }
  .busy  .clock .day{ font-size:24px ;    margin-left:5px;}

 .busy  .curr{ background-color:#eaa633; margin-left:2px; }
  .busy  .time{ color:#eaa633} 
  .busy  .intro{}

  .busy .nexttime{color:#eaa633 }
   


  .free  .left{ min-height:2000px;   } 
  .free #status { margin-top:30px;   
                  margin-left:85px;  
                  padding-top:150px; 
                  font-size:150px;   
                  letter-spacing:40px;    
                  color:#01a99c;
                  text-shadow: 3px 3px 3px #000;  
  } 

  .free  .right {   border-left:solid 5px #01a99c;   } 
  .free  .right_top{  background: linear-gradient(to right, #01a58c, #5dc7ba);   padding-left:10px; padding-top:20px;   }  
  .free  .clock{ font-size:45px; padding-top:20px;    }
  .free  .clock .day{ font-size:24px ;     margin-left:5px;}
  .free  .room{  margin-top:24px; margin-bottom:24px; font-size:40px; text-shadow:2px 2px 2px #000 } 
 

    .free  .curr{ background-color:#01a99c; margin-left:2px; }
  .free  .time{ color:#01a99c}
  .free  .intro{}

  .free .nexttime{color:#01a99c }


      .layui-btn {
              display: inline-block;
    vertical-align: middle;
    height: 38px;
    line-height: 38px;
    border: 1px solid transparent;
    padding: 0 18px;
    text-decoration:none;
    color: #ffffff;
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
    border-radius: 2px;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    border-color: #ffffff;
  
          }


  </style>

    
</head>
<body  id="thebody" class="free" style=" overflow:hidden; background-color:#808080;  background-image:url(template1/<%=picid%>.png);  margin:0px; padding:0px; font-family:'Segoe UI'; color:#ffffff;   " >
    
  
    <form id="form1" runat="server">     
     
        <div class="left"   >  
                <div id="status">
                </div>  
        </div>
       
      
     <div class="right" style="  position:absolute; right:0px; top:0px; width:30%;height:100%;  background-color:#353f48 ">

        <div  class="right_top"  > 



              <div style=" position:absolute;right:10px; top:10px; display:none " >
            <a href="###"
                 onclick="layer.open({
                type:2,
                 area: ['500px', '400px'],
                title:'会议签到',
                content: 'chkin.aspx?roomid=1' })"
                
                class="layui-btn layui-btn-normal"> 会议签到 </a>
         </div>


        


         <div class="clock">   
             <span id="bgclock" ></span>
         </div>

         <div class="room">
               <asp:Label style=" text-shadow:none; " ID="lbl_roomname" runat="server" ></asp:Label>  
        </div>
           
         <div style="height:20px;"> 
         </div>

     </div>
     
          
     
     
     <br />
        
     <span  class="curr" style="font-size:15px; padding:3px;  text-shadow:none " >
     当前会议
     </span>
        
     <div style="font-size:40px;margin:10px 5px;"> 

            <span id="intro"></span>    

             <div class="time" style=" margin-top:20px;  ">
                   <span id="time"></span>  
             </div>

     </div>


  


  
  
     <div style="border:solid 2px #ffffff; padding:20px 0px 20px 2px; border-left:0px; border-right:0px; position:absolute;bottom:50px; width:100%;   ">
        NEXT   <span id="nexttime"  class="nexttime"></span>  <span id="nextintro"></span>  
     </div>
    
      
        
      </div>

         
    </form>
    
     
</body>

   

<script>








    function setbook(o) {
    
        if (o.ends=="0") {
            $("#status").html("空闲中");
            $("#thebody").removeClass("busy").addClass("free");
        }
        else {
            
            $("#status").html("会议中");
            $("#intro").html(o["intro"]);
            $("#time").html(o["begintime"] + '-' + o["endtime"]); 
            $("#thebody").removeClass("free").addClass("busy");

        }

    }


    function setnextbook(o) {
        if (o.length==0) { 
            $("#nexttime").html("无");
        }
        else { 
            o = o[0]; 
            $("#nexttime").html(o["begintime1"] + '-' + o["endtime1"]);
            $("#nextintro").html(o["intro"]); 
        }

    }

     


    function GetBook() {
        GetCurrentBook();
        GetNextBook();

        if (TimeSpan < 60) {
            TimeSpan = 60;
        }

        setTimeout("GetBook()", TimeSpan * 1000);
    }


    $(document).ready(function () {
        GetBook();
    });





</script> 
      
 

<script>

    function GetCurrentBook() {

        $.getJSON(  "ajax/GetCurrentBook.aspx", {
            "roomid":<%=roomid %>,
             random: Math.random()
        },

            function (d) { 
                setbook(d);
            });
    };

    function GetNextBook() {

        $.getJSON(
            "ajax/GetBookList.aspx",
            {
                "roomid":<%=roomid %>,
                 random: Math.random()
            },

            function (d) {
                setnextbook(d);
            }); 
    };

     

</script>
    
      
   <script> 
       clock();
   </script>

     
</html>