3 <![CDATA[<!-- ****************** myopac_summary.xml ***************************** -->]]>
4 <div id='myopac_summary_div' xmlns:xi="http://www.w3.org/2001/XInclude" style="padding:0px;">
6 <div style="width:742px;float:left;">
7 <div class="header_middle">Account Summary</div>
9 <div id="myopac_sum_fines">
10 <div style="position:absolute;"><div style="position:relative;top:-15px;left:-23px;"><img src="<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/acct_sum_fines_tl.png" /></div></div>
11 <div style="position:absolute;"><div style="position:relative;top:-15px;left:172px;"><img src="<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/acct_sum_fines_tr.png" /></div></div>
12 <div style="position:absolute;"><div style="position:relative;top:161px;left:-23px;"><img src="<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/acct_sum_fines_bl.png" /></div></div>
13 <div style="position:absolute;"><div style="position:relative;top:161px;left:172px;"><img src="<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/acct_sum_fines_br.png" /></div></div>
14 Fines: <span id="myopac_sum_fines_bal">$0.00</span><br />
15 <a class="hide_me" href="javascript:;" id="pay_fines_btn1" onclick="showPaymentForm();"><img alt="Pay Fines" onmouseover="this.src='<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/pay-fines-btn-hover.png';" onmouseout="this.src='<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/pay-fines-btn.png';" src="<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/pay-fines-btn.png" style="position:relative;top:5px;" /></a>
18 <div style="width:662px;">
19 <div style="float:left;">
20 <div style="padding:10px 0px;" id="myopac_sum_name"></div>
21 <div class="acct_sum_row"><table width="100%" cellspacing="0" cellpadding="0"><tr><td>Items Currently Checked out <span id="myopac_sum_checked" class="view_link">(0)</span></td><td align="right" class="view_link"><a href="javascript:;" onclick="swapTabs($('acct_checked_out'));myOPACChangePage('checked');" rel="myopac_checked_div">View All</a></td></tr></table></div>
22 <div class="acct_sum_row"><table width="100%" cellspacing="0" cellpadding="0"><tr><td>Items Currently on Hold <span id="myopac_sum_holds" class="view_link">(0)</span></td><td align="right" class="view_link"><a href="javascript:;" onclick="swapTabs($('acct_holds'));myOPACChangePage('holds');" rel="myopac_holds_div">View All</a></td></tr></table></div>
23 <div class="acct_sum_row"><table width="100%" cellspacing="0" cellpadding="0"><tr><td>Items ready for pickup <span id="myopac_sum_pickup" class="view_link">(0)</span></td><td align="right" class="view_link"><a href="javascript:;" onclick="swapTabs($('acct_holds'));myOPACChangePage('holds');" rel="myopac_holds_div">View All</a></td></tr></table></div>
24 <div class="acct_sum_row" id="myopac_sum_fines_slim"><table width="100%" cellspacing="0" cellpadding="0"><tr><td>Fees & Fines</td><td align="right" class="view_link"><a class="hide_me" id="show_fines_link" href="javascript:;" onclick="showFinesDiv(this);">Show Overdue Materials</a></td></tr></table></div>
27 <div style="clear:both;"></div>
28 <div id='myopac_fines_div' xmlns:xi="http://www.w3.org/2001/XInclude" >
30 <table width='100%' class='data_grid data_grid_center hide_me'>
31 <thead class='color_3'>
32 <tr><td colspan='3' style='padding: 6px'><b>&myopac.fines.title;</b></td></tr>
34 <td width='33%'>&myopac.fines.owed;</td>
35 <td width='33%'>&myopac.fines.paid;</td>
36 <td width='33%'>&myopac.fines.balance;</td>
40 <tbody id='myopac_fines_summary_tbody'>
41 <tr id='myopac_fines_summary_loading'><td>&myopac.fines.status;</td></tr>
42 <tr id='myopac_fines_summary_row' class='hide_me'>
43 <td id='myopac_fines_summary_total' >&common.currency;</td>
44 <td id='myopac_fines_summary_paid' >&common.currency;</td>
45 <td id='myopac_fines_summary_balance' style='color:red;font-weight: bold;'>&common.currency;</td>
50 <!-- tab-like options for selection Fines or Payments view -->
51 <div id='fines_payments_wrapper' style='padding-left: 5px; padding-right: 5px;'>
52 <div id='acct_fines_tabs'>
53 <a id='acct_fines_tab' href='javascript:;' onclick='showFinesTab();'></a>
54 <a id='acct_payments_tab' href='javascript:;' onclick='myopacDrawPayments();'></a>
58 <!-- Payments History -->
59 <style>#myopac_payments_table th { text-align: left; }</style>
60 <div id='myopac_payments_div' class='hide_me'>
61 <div><b>Payments</b></div>
62 <table width='100%' class='data_grid' id='myopac_payments_table'>
69 <tbody id='myopac_payments_tbody'>
70 <tr id='myopac_payments_tmpl'>
72 <td name='for'/> <!-- title links? -->
73 <td name='amount'>$</td>
75 <a href='javascript:;' name='print_recpt'>Print</a> / <a href='javascript:;' name='email_recpt'>Email</a>
81 <!-- /Payments History -->
84 <div id='accrue_explanation' class='hide_me'>
85 <span>Transactions whose balances are marked with a</span>
86 <span style='color:red; font-weight: bold'>*</span>
87 <span>will continue to accrue fines until the checked out item is returned.</span>
91 <!-- Table for circulation transactions only -->
92 <div id='myopac_circ_trans_div' class='hide_me'>
94 <style>#myopac_circ_trans_table th { text-align: left; }</style>
95 <table width='100%' class='data_grid' id='myopac_circ_trans_table'>
97 <!-- <tr><td colspan='10' style='padding: 6px'><b>Fines</b></td></tr> -->
99 <th>&common.title;</th>
100 <th>&common.author;</th>
101 <th>&myopac.fines.checkout;</th>
102 <th>&myopac.fines.due;</th>
103 <th>&myopac.fines.returned;</th>
104 <th>&myopac.fines.balance;</th>
105 <th align="center" nowrap="nowrap" style="white-space:nowrap;">
106 <div style='text-align:center'>Pay Fines<br/><input id="pay_fines_box1" type="checkbox"
107 onclick="checkAll($('myopac_circ_trans_tbody'), this, 'selector');" class="" title="Click to (un)select all fines" />
112 <tbody id='myopac_circ_trans_tbody'>
113 <tr id='myopac_circ_trans_row'>
114 <td><a class='classic_link' name='myopac_circ_trans_title'> </a></td>
115 <td name='myopac_circ_trans_author'> </td>
116 <td name='myopac_circ_trans_start'> </td>
117 <td name='myopac_circ_trans_due'> </td>
118 <td name='myopac_circ_trans_finished'><span style='color:red;'>&myopac.fines.accruing;</span></td>
119 <td><span style='color: red; font-weight: bold;' name='myopac_circ_trans_balance'>&common.currency;</span></td>
120 <td align="center"><input type="checkbox" class="" name="selector" title="pay this fine" /></td>
126 <!-- Table for all non-circulation transactions -->
127 <div id='myopac_trans_div' class='hide_me'>
128 <br/><hr style="border-bottom:none;*height:0px;" color="#dcdbdb" /><br/>
129 <style>#myopac_trans_table th { text-align: left; }</style>
130 <table width='100%' class='data_grid' id='myopac_trans_table'>
132 <tr><td colspan='8' style='padding: 6px'><b>&myopac.fines.other;</b></td></tr>
134 <th width='16%'>Date Applied</th>
135 <th width='16%'>&myopac.fines.time.paid;</th>
136 <th width='16%'>&myopac.fines.owed.initial;</th>
137 <th width='16%'>&myopac.fines.paid.amount;</th>
138 <th width='16%'>&myopac.fines.balance;</th>
139 <th width='16%'>&myopac.fines.type;</th>
140 <th width='4%' align="center" nowrap="nowrap" style="white-space:nowrap;">
141 <div style='text-align:center'>Pay Fines<br/>
142 <input id="pay_fines_box2" class="" type="checkbox" onclick="checkAll($('myopac_trans_tbody'), this, 'selector');" title="Click to (un)select all fines" />
148 <tbody id='myopac_trans_tbody'>
149 <tr id='myopac_trans_row'>
150 <td name='myopac_trans_start'> </td>
151 <td name='myopac_trans_last_payment'> </td>
152 <td name='myopac_trans_init_amount'>&common.currency;</td>
153 <td name='myopac_trans_total_paid'>&common.currency;</td>
154 <td style='color:red; font-weight: bold;'>
155 <span name='myopac_trans_balance_recur' class='hide_me'> * </span>
156 <span name='myopac_trans_balance'>&common.currency;</span>
158 <td name='myopac_trans_bill_type'> </td>
159 <td align="center"><input type="checkbox" name='selector' title='pay this fine' /></td>
164 <a id='pay-fines-image' href="javascript:;" onclick="showPaymentForm();"><img alt="Pay Fines" onmouseover="this.src='<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/pay-fines-btn-hover.png';" src="<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/pay-fines-btn.png" style="position:relative;top:5px;" /></a>
171 <div id='receipt-print-frame-wrapper' class='hide_me'>
173 <div dojoType='dijit.Dialog' jsId='receiptPrintDialog'>
175 <button id='receipt-view-print-button'>Print</button>
176 <button id='receipt-view-print-cancel'>Cancel</button>
178 <iframe name='receipt-frame' style='border:1px solid #888; overflow:auto; width:500px; height:500px;'></iframe>
181 <div id='pay_fines_confirm' class='hide_me' style='font-size: 120%; width:100%; text-align: center; padding-top: 20px;'>
182 Amount to pay: $<strong id='pay_fines_confirm_amount'/>. Are you sure?<br/><br/>
183 <button jsId='payConfirmSubmit' dojoType='dijit.form.Button'>Submit Payment</button>
184 <button jsId='payConfirmCancel' dojoType='dijit.form.Button'>Cancel</button>
186 <div id="pay_fines_now" class="hide_me">
187 <div id='cc-payment-error-message' style='font-weight: bold; color: red; padding: 10px; border: 1px solid #888' class='hide_me'/>
188 <table id='oils-selfck-cc-payment-table'>
191 <td colspan="2"><div style="width:324px;"><strong>KCLS only accepts Visa or MasterCard<br/><br/></strong></div></td>
192 <td><div style="width:324px;"></div></td>
195 <td colspan='2'><strong>Billing Information</strong></td>
196 <td rowspan='13' valign='top'>
197 Selected fines you are paying for:
198 <table cellpadding="0" cellspacing="5" border="0">
199 <thead><tr><td><strong>Name</strong></td><td><strong>Amount</strong></td></tr></thead>
200 <tbody id="selectedFines"></tbody></table><br />
201 <div id='oils-selfck-cc-payment-summary'>
202 Total amount to pay: <strong>$<span></span></strong>
204 Click <strong>Cancel</strong> to go back and (un)select other fines.
209 <td><input dojoType='dijit.form.TextBox' jsId='oilsSelfckCCFName' required='true'/></td>
213 <td><input dojoType='dijit.form.TextBox' jsId='oilsSelfckCCLName' required='true'/></td>
216 <td>Email Address</td>
218 <span id='myopac-cc-email'/>
219 <span style='margin-left:5px;'>
220 <a href='javascript:' onclick='myopacReturnToPayment=true;myOPACChangePage("prefs");'>Update</a>
225 <td>Street Address</td>
226 <td><input dojoType='dijit.form.TextBox' jsId='oilsSelfckCCStreet' required='true'/></td>
230 <td><input dojoType='dijit.form.TextBox' jsId='oilsSelfckCCCity' required='true'/></td>
233 <td>State or Province</td>
234 <td><input dojoType='dijit.form.TextBox' jsId='oilsSelfckCCState' required='true'/></td>
237 <td>ZIP or Postal Code</td>
238 <td><input dojoType='dijit.form.TextBox' jsId='oilsSelfckCCZip' required='true'/></td>
241 <td colspan='2'><strong>Credit Card Information</strong></td>
243 <!-- Technically not needed since card type is derived from the CC number
245 <td>Type of Card</td>
247 <select dojoType='dijit.form.FilteringSelect' jsId='oilsSelfckCCType' required='true'>
248 <option value='VISA'>VISA</option>
249 <option value='MasterCard'>MasterCard</option>
250 <option value='American Express'>American Express</option>
256 <td>Credit Card #</td>
257 <td><input dojoType='dijit.form.TextBox' jsId='oilsSelfckCCNumber' required='true'/></td>
260 <td><div style="position:absolute;"><div style="position:relative;left:80px;"><a href="javascript:;" onclick="alert('Also known as a CVV2 code, it is the 3-digit number on the back of the card next to your signature.\nKCLS only accpets VISA and MasterCard.');"><img src="/opac/skin/kcls/graphics/question-mark.png" /></a></div></div> Security Code</td>
261 <td><input dojoType='dijit.form.TextBox' jsId='oilsSelfckCCCVV' required='true'/></td>
264 <td>Exipration Month</td>
266 <select dojoType='dijit.form.FilteringSelect' jsId='oilsSelfckCCMonth' required='true'>
267 <option value='01' selected='selected'>January</option>
268 <option value='02'>February</option>
269 <option value='03'>March</option>
270 <option value='04'>April</option>
271 <option value='05'>May</option>
272 <option value='06'>June</option>
273 <option value='07'>July</option>
274 <option value='08'>August</option>
275 <option value='09'>September</option>
276 <option value='10'>October</option>
277 <option value='11'>November</option>
278 <option value='12'>December</option>
283 <td>Expiration Year</td>
285 <select dojoType='dijit.form.FilteringSelect' jsId='oilsSelfckCCYear' required='true'>
286 <option value='2011'>2011</option>
287 <option value='2012'>2012</option>
288 <option value='2013'>2013</option>
289 <option value='2014'>2014</option>
290 <option value='2015'>2015</option>
291 <option value='2016'>2016</option>
292 <option value='2017'>2017</option>
293 <option value='2018'>2018</option>
294 <option value='2019'>2019</option>
296 <!-- <input dojoType='dijit.form.NumberSpinner' constraints='{pattern:"0000", places:0, maxlength:4}' jsId='oilsSelfckCCYear' required='true'/> -->
300 <td>Edit Billing Address</td>
301 <td><input dojoType='dijit.form.CheckBox' jsId='oilsSelfckEditDetails'/></td>
304 <td colspan='2' align="center">
305 <button dojoType='dijit.form.Button' jsId='oilsSelfckCCSubmit'>Submit Payment</button>
306 <button dojoType='dijit.form.Button' onclick="hideMe($('pay_fines_now'));unHideMe($('acct_sum'));">Cancel</button>
310 <td colspan="3"><br />
311 <strong style="color:red;font-size:16px;">Important! You must have a printed receipt to be eligible for a refund on lost items (regulations allow for no exceptions).</strong><br /><br />
312 <strong>To ensure your necessary receipt information is not lost, enter your email address above and a receipt will be emailed to you. Otherwise, make certain you have a printed receipt in hand before closing the payment receipt screen.</strong><br />Refunds are not available for parts and pieces, overdue fines, or items that do not display a specific title in My Account. For a full list of refundable and non-refundable items, visit <a href="http://www.kcls.org/usingthelibrary/borrowing/refundable.cfm">http://www.kcls.org/usingthelibrary/borrowing/refundable.cfm</a><br /><br />This site uses VeriSign SSL encryption to ensure your privacy.
320 <!--#include virtual="myopac_fines.xml"-->
321 <![CDATA[<!-- ****************** end: myopac_summary.xml ***************************** -->]]>