<?php
session_start();
//unset($_SESSION['username']);
if(isset($_SESSION['username']))
  {$username='<a href="profile.php">'.$_SESSION['username'].'</a>';}else
  {$username='<a href="../loading/cloading.php">登录</a>
<em>|</em>
<a href="../loading/signUp.php">注册</a>';}
?>
<!DOCTYPE html >
<html>
  <head>
    <meta charset="utf-8" />
    <title>天津最新上映电影、电影票网上预订、在线购票</title>
    <link type="text/css" rel="stylesheet" href="../Css/common1.css">
    <meta name="keywords" content="天津影讯,电影,电影排期,电影票,电影票预订,票价,在线选座购票,网上购票">
    <meta name="description" content="提供天津各大影院最新影讯、影片介绍、电影院影片排期信息,并提供电影票网上预订、在线选座购票、服务">
    <style type="text/css">
.demo {
width: 700px;
margin: 40px auto 0 auto;
min-height: 450px;
}
@media screen and (max-width: 360px) {
.demo {
width: 340px
}
}
.front {
width: 300px;
margin: 5px 32px 45px 32px;
background-color: #f0f0f0;
color: #666;
text-align: center;
padding: 3px;
border-radius: 5px;
}
.booking-details {
float: right;
position: relative;
width: 200px;
height: 450px;
}
.booking-details h3 {
margin: 5px 5px 0 0;
font-size: 16px;
}
.booking-details p {
line-height: 26px;
font-size: 16px;
color: #999
}
.booking-details p span {
color: #666
}
div.seatCharts-cell {
color: #182C4E;
height: 25px;
width: 25px;
line-height: 25px;
margin: 3px;
float: left;
text-align: center;
outline: none;
font-size: 13px;
}
div.seatCharts-seat {
color: #fff;
cursor: pointer;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
div.seatCharts-row {
height: 35px;
}
div.seatCharts-seat.available {
background-color: #B9DEA0;
}
div.seatCharts-seat.focused {
background-color: #76B474;
border: none;
}
div.seatCharts-seat.selected {
background-color: #E6CAC4;
}
div.seatCharts-seat.unavailable {
background-color: #472B34;
cursor: not-allowed;
}
div.seatCharts-container {
border-right: 1px dotted #adadad;
width: 400px;
padding: 20px;
float: left;
}
div.seatCharts-legend {
padding-left: 0px;
position: absolute;
bottom: 16px;
}
ul.seatCharts-legendList {
padding-left: 0px;
}
.seatCharts-legendItem {
float: left;
width: 90px;
margin-top: 10px;
line-height: 2;
}
span.seatCharts-legendDescription {
margin-left: 5px;
line-height: 30px;
}
.checkout-button {
display: block;
width: 80px;
height: 24px;
line-height: 20px;
margin: 10px auto;
border: 1px solid #999;
font-size: 14px;
cursor: pointer
}
#selected-seats {
max-height: 150px;
overflow-y: auto;
overflow-x: none;
width: 200px;
}
#selected-seats li {
float: left;
width: 72px;
height: 26px;
line-height: 26px;
border: 1px solid #d3d3d3;
background: #f7f7f7;
margin: 6px;
font-size: 14px;
font-weight: bold;
text-align: center
}
</style>
  </head>
  <body>
    <div id=login>
      <div class="section_r" style="">
        <span class="user"></span>
        <?php
echo $username;
?>
      </div>
    </div>
    <div id="container">
      <div id="header">
        <img src="../image/logo.jpg" width="100" height="100">
        <ul id=nav>
          <li>
            <a href="index.php">首页</a>
          </li>
          <li>
            <a href="hotMovie.php">影片</a>
          </li>
          <li>
            <a href="filmReview.php">影评</a>
          </li>
          <li>
            <a href="orderTicket.php ">快速购票</a>
          </li>
        </ul>
      </div>
      <div id="poster">
        <img src="../image/poster.jpg" alt="开启不死模式" width="100%">
      </div>
      <div style="height:800px;"  id="main">        <div id="main">
   <div class="demo">
    <div id="seat-map">
<div class="front">屏幕</div>
</div>
<div class="booking-details">
<p>影片:<span>美国队长3</span></p>
<p>时间:<span>6月4日 21:00</span></p>
<p>座位:</p>
<ul id="selected-seats"></ul>
<p>票数:<span id="counter">0</span></p>
<p>总计:<b>¥<span id="total">0</span></b></p>
<form name="ticket" method="post" action="ticket.php">
                <input id="moviename" type="hidden" name="moviename" value="美国队长3">
                <input id="movieprice"type="hidden" name="movieprice" value="30">
                <input  id="ticketnum"type="hidden" name="ticketnum" value="">
                <input id="zonge" type="hidden" name="total" value="">
                <input id="time" type="hidden" name="time" value="June 4th">
                <input  id="seat"type="hidden" name="seat" value="">
    <button class="checkout-button">确认购买</button>
</form>
<div id="legend"></div>
</div>
<div style="clear:both"></div>
   </div>

  <br/>
</div>
<script src="../js/jquery-1.11.0.min.js"></script> 
<script type="text/javascript" src="../js/jquery.seat-charts.min.js"></script>
<script type="text/javascript">var price = 30; //票价
$(document).ready(function() { //将函数绑定到文档的就绪事件(当文档完成加载时)
//定义三个变量来存储数据
var $cart = $('#selected-seats'), //座位区 id为selected-seats的元素
    $counter = $('#counter'), //票数
    $total = $('#total'); //总计金额
//$("#ticketnum")=$counter;

var sc = $('#seat-map').seatCharts({
map: [ //座位结构图 下划线 "_" 代表过道
'aaaaaaaaaa',
            'aaaaaaaaaa',
            '__________',
            'aaaaaaaaaa',
            'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
            'aa__aa__aa'
],
naming : {//设置行列等信息
top : false,//不显示顶部横坐标(行)
getLabel : function (character, row, column) {//获取
return column;
}
},
legend : { //定义图例
node : $('#legend'),
items : [
[ 'a', 'available',   '可选座' ],
[ 'a', 'unavailable', '已售出']
]
},
click: function () { //点击事件
if (this.status() == 'available') { //可选座
$('<li>'+(this.settings.row+1)+'排'+this.settings.label+'座</li>')//规定要插入的内容(可包含 HTML 标签)。
.attr('id', 'cart-item-'+this.settings.id)//设置被选元素的属性和值。。
.data('seatId', this.settings.id)//向被选元素附加数据。
.appendTo($cart);//规定把内容追加到$cart上。 $counter.text(sc.find('selected').length+1);
$total.text(recalculateTotal(sc)+price);

return 'selected';
} else if (this.status() == 'selected') { //已选中
//更新数量
$counter.text(sc.find('selected').length-1);
//更新总计
$total.text(recalculateTotal(sc)-price);

//删除已预订座位
$('#cart-item-'+this.settings.id).remove();
//可选座
return 'available';
} else if (this.status() == 'unavailable') { //已售出
return 'unavailable';
} else {
return this.style();
}
}

});
//已售出的座位
sc.get([ '4_4','4_5','6_6','6_7','8_5','8_6','8_7','8_8', '10_1', '10_2']).status('unavailable');});
$('#ticketnum').attr(value,ticketnum(sc));
//计算总金额
function recalculateTotal(sc) {
var total = 0;
sc.find('selected').each(function () {
total += price;
});

return total;
}
function ticketnum(sc) {
var counter = 0;
sc.find('selected').each(function () {
counter += counter;
});

return counter;
}
function seat(sc) {
var seats = 0;
sc.find('selected').each(function () {
seats = seats+$('<li>'+(this.settings.row+1)+'排'+this.settings.label+'座</li>')//规定要插入的内容(可包含 HTML 标签)。
.attr('id', 'cart-item-'+this.settings.id)//设置被选元素的属性和值。。
.data('seatId', this.settings.id)//向被选元素附加数据。;
});

return seats;
}
function button1(){
    document.getElementById('ticketnum')="ticketnum(sc)";
    //document.getElementById("total");
    //document.getElementById("seat"); }
</script>
      </div>
      <div id="process"></div>
      <div id="footer">
        <p>天津</p>
      </div>
    </div>
  </body>
</html>