1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
\r
2 <html xmlns='http://www.w3.org/1999/xhtml'>
\r
4 <link rel='stylesheet' type='text/css' href='style.css' />
\r
5 <title>OPAC Self Check-out</title>
\r
7 <script type="text/javascript">
\r
8 function switchTo(str,subpage) {
\r
10 var sidebarLinks = [];
\r
11 pages['step1'] = document.getElementById('step1');
\r
12 pages['step2'] = document.getElementById('step2');
\r
13 pages['step3'] = document.getElementById('step3');
\r
14 pages['step3a'] = document.getElementById('step3a');
\r
15 //pages['step3b'] = document.getElementById('step3b');
\r
16 pages['step3c'] = document.getElementById('step3c');
\r
17 pages['step3d'] = document.getElementById('step3d');
\r
18 pages['step3e'] = document.getElementById('step3e');
\r
19 pages['step3f'] = document.getElementById('step3f');
\r
20 pages['step4'] = document.getElementById('step4');
\r
21 pages['step5'] = document.getElementById('step5');
\r
23 sidebarLinks['sidebar_step3c'] = document.getElementById('sidebar_step3c');
\r
24 sidebarLinks['sidebar_step3d'] = document.getElementById('sidebar_step3d');
\r
25 sidebarLinks['sidebar_step3e'] = document.getElementById('sidebar_step3e');
\r
26 sidebarLinks['sidebar_step3f'] = document.getElementById('sidebar_step3f');
\r
28 for(var i in pages) pages[i].style.display="none";
\r
29 for(var i in sidebarLinks) sidebarLinks[i].className="";
\r
32 pages[subpage].style.display="block";
\r
33 sidebarLinks['sidebar_'+subpage].className="selected";
\r
35 pages[str].style.display="block";
\r
36 if(str=='step3' && !subpage) pages['step3a'].style.display="block";
\r
42 <div style="height:66px;background:#ae2c2a;"><div id='header'>
\r
43 <a href='javascript:;'><img src='graphics/KCLS_logo_horiz.gif' /></a>
\r
44 <span style="font-size:36px;color:white;position:relative;top:-10px;left:15px;">CHECK OUT HERE</span>
\r
47 <div id='content-wrapper'>
\r
48 <div id='main-content'>
\r
49 <div style='clear:both;'></div>
\r
51 <div id="step1" class="checkout" style="padding-top:15px;">
\r
52 <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr>
\r
53 <td align="center"><h1>Scan your library card barcode<br />OR type your library card number/username</h1></td></tr></table>
\r
54 <table cellpadding="0" cellspacing="0" border="0" style="margin:20px auto;"><tr>
\r
55 <td><img src="graphics/libcard_barcode.jpg" /></td><td style="padding-left:10px;"><span style="font-size:10px;">Example 0017620030</span><br /><input type="text" /></td>
\r
56 <td><a href="javascript:;" onclick="switchTo('step2')" style="position:relative;top:7px;left:5px;"><img src="graphics/gobutton.jpg" /></a></td></tr></table>
\r
58 <div id="step2" class="checkout" style="display:none;padding-top:15px;">
\r
59 <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr>
\r
60 <td align="center"><h1>Enter your PIN or password</h1></td></tr></table>
\r
61 <table cellpadding="0" cellspacing="0" border="0" style="margin:20px auto;"><tr>
\r
62 <td style="padding-left:10px;"><span style="font-size:10px;">Example 0926</span><br /><input type="password" /></td>
\r
63 <td><a href="javascript:;" onclick="switchTo('step3')" style="position:relative;top:7px;left:5px;"><img src="graphics/gobutton.jpg" /></a></td></tr></table>
\r
65 <div id="step3" class="checkout" style="display:none;">
\r
66 <table cellpadding="0" cellspacing="0" border="0" width="694" height="260">
\r
67 <tr><td valign="top" width="444" style="padding:3px;" rowspan="2">
\r
68 <img src="graphics/barcodedetailbook.jpg" style="float:left;" />
\r
69 <div class="header1">
\r
70 <h2>Scan your library item to begin checkout</h2>
\r
73 <div id="step3a" style="">
\r
74 <a href="javascript:;"><img src="graphics/printlist.jpg" /></a><br /><br />
\r
75 <div class="userid" id="user_id"></div><br />
\r
76 <table cellpadding="5" cellspacing="0" border="0" class="item_table" width="100%">
\r
78 <table align="center" cellpadding="2" cellspacing="0" border="0">
\r
79 <tr><td class="label">BARCODE:</td><td name="current_barcode"></td></tr>
\r
80 <tr><td class="label">TITLE:</td><td name="current_title"></td></tr>
\r
81 <tr><td class="label">DUE DATE:</td><td name="current_due"></td></tr>
\r
87 <div id="step3c" style="display:none;">
\r
88 <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="center" style="font-weight:bold;font-size:18px;">Fines</td></tr></table><br />
\r
89 <a href="javascript:;"><img src="graphics/printlist.jpg" /></a><br /><br />
\r
90 <table cellpadding="5" cellspacing="0" border="0" class="item_table" width="100%">
\r
92 <table align="center" cellpadding="2" cellspacing="0" border="0">
\r
93 <tr><td class="label">TITLE:</td><td name="fines_title"></td></tr>
\r
94 <tr><td class="label">DUE DATE:</td><td name="fines_due"></td></tr>
\r
95 <tr><td class="label">DATE RETURN:</td><td name="fines_return"></td></tr>
\r
96 <tr><td class="label">BALANCE OWED:</td><td name="fines_owed"></td></tr>
\r
102 <div id="step3d" style="display:none;">
\r
103 <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="center" style="font-weight:bold;font-size:18px;">Items Checked Out</td></tr></table><br />
\r
104 <a href="javascript:;"><img src="graphics/printlist.jpg" /></a><br /><br />
\r
105 <table cellpadding="5" cellspacing="0" border="0" class="item_table" width="100%">
\r
107 <table align="center" cellpadding="2" cellspacing="0" border="0">
\r
108 <tr><td class="label">BARCODE:</td><td name="checked_bar"></td></tr>
\r
109 <tr><td class="label">TITLE:</td><td name="checked_title"></td></tr>
\r
110 <tr><td class="label">AUTHOR:</td><td name="checked_author"></td></tr>
\r
111 <tr><td class="label">DUE DATE:</td><td name="checked_due"></td></tr>
\r
112 <tr><td class="label">FORMAT:</td><td name="checked_format"></td></tr>
\r
118 <div id="step3e" style="display:none;">
\r
119 <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="center" style="font-weight:bold;font-size:18px;">Items Ready for Pickup</td></tr></table><br />
\r
120 <a href="javascript:;"><img src="graphics/printlist.jpg" /></a><br /><br />
\r
121 <table cellpadding="5" cellspacing="0" border="0" class="item_table" width="100%">
\r
123 <table align="center" cellpadding="2" cellspacing="0" border="0">
\r
124 <tr><td class="label">TITLE:</td><td name="pickup_title"></td></tr>
\r
125 <tr><td class="label">FORMAT:</td><td name="pickup_format"></td></tr>
\r
126 <tr><td class="label">PICKUP LOCATION:</td><td name="pickup_lib"></td></tr>
\r
127 <tr><td class="label">PICK UP BY:</td><td name="pickup_date"></td></tr>
\r
133 <div id="step3f" style="display:none;">
\r
134 <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="center" style="font-weight:bold;font-size:18px;">Holds</td></tr></table><br />
\r
135 <a href="javascript:;"><img src="graphics/printlist.jpg" /></a><br /><br />
\r
136 <table cellpadding="5" cellspacing="0" border="0" class="item_table" width="100%">
\r
138 <table align="center" cellpadding="2" cellspacing="0" border="0">
\r
139 <tr><td class="label">TITLE:</td><td name="holds_title"></td></tr>
\r
140 <tr><td class="label">AUTHOR:</td><td name="holds_author"></td></tr>
\r
141 <tr><td class="label">FORMAT:</td><td name="holds_format"></td></tr>
\r
142 <tr><td class="label">STATUS:</td><td name="holds_status"></td></tr>
\r
149 <td class="sidebar" valign="top" width="226">
\r
150 <h3 class="top" id="date"></h3>
\r
151 <div class="greet">Hello, <span id="user_name"></span></div>
\r
152 <h3>Your Account</h3>
\r
153 <p id="sidebar_step3c">Fines: <span id="acct_fines"></span><br /><a href="javascript:;" onclick="switchTo('step3','step3c')">View Details</a></p>
\r
154 <p id="sidebar_step3d">(<span id="items_checked"></span>) Items Checked Out<br /><a href="javascript:;" onclick="switchTo('step3','step3d')">View Details</a></p>
\r
155 <p id="sidebar_step3e">(<span id=""items_pickup></span>) Items ready for pickup<br /><a href="javascript:;" onclick="switchTo('step3','step3e')">View Details</a></p>
\r
156 <p id="sidebar_step3f">(<span id="items_hold"></span>) Items on Hold (25 max.)<br /><a href="javascript:;" onclick="switchTo('step3','step3f')">View Details</a></p>
\r
158 <tr><td class="sidebar" valign="bottom">
\r
159 <div style="padding-left:3px;">
\r
160 <div style="float:left;"><a href="javascript:;" onclick="switchTo('step4')"><img src="graphics/finish_printreceipt.jpg" style="float:left;margin-right:3px;" /> <span>Logout</span></a></div>
\r
161 <div style="float:left;width:120px;padding-left:30px;"><a href="javascript:;" onclick="switchTo('step5')"><img src="graphics/finish.jpg" style="float:left;margin-right:3px;" /> <span>Logout<br />without receipt</span></a></div>
\r
163 <div style="clear:both;padding-top:15px;padding-left:3px;">
\r
164 <a href="javascript:;" id="back_button" onclick="switchTo('step3')"><img src="graphics/arrow.gif" /></a> <a href="javascript:;" onclick="switchTo('step3')"><span style="position:relative;top:-4px;left:2px;">Back</span></a>
\r
170 <div id="step4" class="checkout" style="padding-top:15px;display:none;">
\r
171 <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="center"><h1>Checkout Complete.<br />Please take your reciept.</h1></td></tr></table>
\r
174 <div id="step5" class="checkout" style="padding-top:15px;display:none;">
\r
175 <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="center"><h1>Checkout Complete.</h1></td></tr></table>
\r
179 <div style='clear:both;'></div>
\r