1<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="iso-8859-1" %>
2<%--@elvariable id="command" type="org.madsonic.command.PersonalSettingsCommand"--%>
3
4<html><head>
5    <%@ include file="head.jsp" %>
6    <%@ include file="jquery.jsp" %>
7
8    <c:choose>
9        <c:when test="${customScrollbar}">
10            <link href="<c:url value="/style/customScrollbar.css"/>" rel="stylesheet">
11            <script type="text/javascript" src="<c:url value="/script/jquery.mousewheel.min.js"/>"></script>
12            <script type="text/javascript" src="<c:url value="/script/jquery.mCustomScrollbar.concat.min.js"/>"></script>
13        </c:when>
14        <c:otherwise>
15            <link href="<c:url value="/style/customScrollbarAuto.css"/>" rel="stylesheet">
16        </c:otherwise>
17    </c:choose>
18
19    <script type="text/javascript" src="<c:url value="/script/scripts.js"/>"></script>
20    <script type='text/javascript' src="<c:url value="/script/jquery.scrollTo-1.4.2.js"/>"></script>
21    <script type='text/javascript' src="<c:url value="/script/jquery.dropdownReplacement-0.5.3.js"/>"></script>
22
23    <link rel="stylesheet" href="<c:url value="/style/jquery.dropdownReplacement.css"/>" type="text/css">
24
25    <script type="text/javascript" language="javascript">
26        function enableLastFmFields() {
27            $("#lastFm").is(":checked") ? $("#lastFmTable").show() : $("#lastFmTable").hide();
28        }
29
30        function showShortcut() {
31            $('#avatarSettings').show('blind');
32            $('#showSettings').hide();
33            $('#hideSettings').show();
34            }
35
36        function hideShortcut() {
37            $('#avatarSettings').hide('blind');
38            $('#hideSettings').hide();
39            $('#showSettings').show();
40            }
41        function changePreview(theme) {
42             $('#preview1').show();
43             $('#preview1').attr('src','icons/preview/' + theme + '1.png');
44        }
45
46    </script>
47</head>
48
49<body class="mainframe bgcolor1">
50
51<script type="text/javascript" src="<c:url value="/script/wz_tooltip.js"/>"></script>
52<script type="text/javascript" src="<c:url value="/script/tip_balloon.js"/>"></script>
53
54<div id="content_main" class="content_main">
55<!-- CONTENT -->
56
57<c:import url="settingsHeader.jsp">
58    <c:param name="cat" value="default"/>
59    <c:param name="restricted" value="false"/>
60    <c:param name="toast" value="${command.reloadNeeded}"/>
61</c:import>
62<br>
63
64<madsonic:url value="avatar.view" var="avatarUrl">
65    <madsonic:param name="username" value="${command.user.username}"/>
66</madsonic:url>
67
68<h1><fmt:message key="personalsettings.title"><fmt:param>${command.user.username}</fmt:param></fmt:message> <img src="${avatarUrl}" alt="${command.user.username}" width="24" height="24"></h1>
69
70<fmt:message key="common.default" var="defaultLabel"/>
71        <fmt:message key="common.rows" var="rows"/>
72        <fmt:message key="common.columns" var="columns"/>
73
74<form:form method="post" action="defaultSettings.view" commandName="command">
75
76     <div style="float:right;">
77        <img id="preview1" src="" alt="" style="display:none">
78    </div>
79
80    <p style="padding-top:1em;padding-bottom:1em">
81        <input type="submit" value="<fmt:message key="common.save"/>" style="margin-right:0.3em"/>
82        <input type="button" value="<fmt:message key="common.cancel"/>" onclick="location.href='nowPlaying.view'">
83    </p>
84
85    <table style="white-space:nowrap" class="indent">
86
87        <tr>
88            <td><fmt:message key="personalsettings.language"/></td>
89            <td>
90                <form:select path="localeIndex" cssStyle="display:none">
91                    <form:option value="-1" label="${defaultLabel}"/>
92                    <c:forEach items="${command.locales}" var="locale" varStatus="loopStatus">
93                        <form:option value="${loopStatus.count - 1}" label="${locale}"/>
94                    </c:forEach>
95                </form:select>
96                <c:import url="helpToolTip.jsp"><c:param name="topic" value="language"/></c:import>
97            </td>
98        </tr>
99
100        <tr>
101            <td><fmt:message key="personalsettings.theme"/></td>
102            <td>
103                <form:select path="themeIndex" cssStyle="display:none" onchange="changePreview(this.options[selectedIndex].label)">
104                    <form:option value="-1" label="${defaultLabel}"/>
105                    <c:forEach items="${command.themes}" var="theme" varStatus="loopStatus">
106                        <form:option value="${loopStatus.count - 1}" label="${theme.name}"/>
107                    </c:forEach>
108                </form:select>
109                <c:import url="helpToolTip.jsp"><c:param name="topic" value="theme"/></c:import>
110                    </td>
111                </tr>
112                <tr>
113                    <td><fmt:message key="personalsettings.listtype"/></td>
114                    <td>
115                        <form:select path="listType" cssStyle="display:none">
116                            <c:forTokens items="random newest hot allArtist starredArtist starred tip highest alphabetical frequent recent top new" delims=" " var="cat" varStatus="loopStatus">
117                                <form:option value="${cat}"><fmt:message key="home.${cat}.text"/></form:option>
118                            </c:forTokens>
119                        </form:select>
120                        <c:import url="helpToolTip.jsp"><c:param name="topic" value="listtype"/></c:import>
121                    </td>
122                </tr>
123    </table>
124
125    <table class="indent">
126        <tr>
127            <h2><fmt:message key="personalsettings.displaysettings"/>:</h2>
128
129            <td><form:checkbox path="customScrollbarEnabled" id="customScrollbar" cssClass="checkbox"/></td>
130            <td><label for="customScrollbar">CustomScrollbar Enabled</label></td>
131        </tr>
132        <tr>
133            <td><form:checkbox path="customAccordionEnabled" id="customAccordion" cssClass="checkbox"/></td>
134            <td><label for="customAccordion">CustomAccordion Enabled</label><br></td>
135        </tr>
136        <tr>
137            <td><br></td>
138        </tr>
139        <tr>
140            <td><form:checkbox path="showNowPlayingEnabled" id="nowPlaying" cssClass="checkbox"/></td>
141            <td><label for="nowPlaying"><fmt:message key="personalsettings.shownowplaying"/></label></td>
142        </tr>
143	<tr>
144            <td><form:checkbox path="nowPlayingAllowed" id="nowPlayingAllowed" cssClass="checkbox"/></td>
145            <td><label for="nowPlayingAllowed"><fmt:message key="personalsettings.nowplayingallowed"/></label></td>
146	</tr>
147        <tr>
148            <td><br></td>
149        </tr>
150        <tr>
151            <td><form:checkbox path="showLeftPanelEnabled" id="leftPanel" cssClass="checkbox"/></td>
152            <td><label for="leftPanel"><fmt:message key="personalsettings.showleftpanel"/></label></td>
153
154            <td><form:checkbox path="showLeftBarShrinked" id="leftBarShrinked" cssClass="checkbox"/></td>
155            <td><label for="leftBarShrinked"><fmt:message key="personalsettings.showleftbarshrinked"/></label></td>
156        </tr>
157        <tr>
158            <td><form:checkbox path="showRightPanelEnabled" id="rightPanel" cssClass="checkbox"/></td>
159            <td><label for="rightPanel"><fmt:message key="personalsettings.showrightpanel"/></label></td>
160
161            <td><form:checkbox path="showChatEnabled" id="chat" cssClass="checkbox"/></td>
162            <td><label for="chat"><fmt:message key="personalsettings.showchat"/></label></td>
163        </tr>
164        <tr>
165            <td><form:checkbox path="showSidePanelEnabled" id="sidePanel" cssClass="checkbox"/></td>
166            <td><label for="sidePanel"><fmt:message key="personalsettings.showsidepanel"/></label></td>
167        </tr>
168    </table>
169
170    <table class="indent">
171        <tr>
172            <h2><fmt:message key="personalsettings.notificationsettings"/>:</h2>
173        </tr>
174        <tr>
175            <td><form:checkbox path="songNotificationEnabled" id="song" cssClass="checkbox"/></td>
176            <td><label for="song"><fmt:message key="personalsettings.songnotification"/></label></td>
177        </tr>
178    </table>
179
180    <table class="indent">
181        <tr>
182            <h2><fmt:message key="personalsettings.lastfmsettings"/>:</h2>
183        </tr>
184        <tr>
185            <td><form:checkbox path="artistInfoEnabled" id="artistInfo" cssClass="checkbox"/></td>
186            <td><label for="artistInfo"><fmt:message key="personalsettings.showartistinfo"/></label></td>
187        </tr>
188        <tr>
189            <td><form:checkbox path="lastFmEnabled" id="lastFm" cssClass="checkbox" onclick="enableLastFmFields()"/></td>
190            <td><label for="lastFm"><fmt:message key="personalsettings.lastfmenabled"/></label></td>
191        </tr>
192    </table>
193
194    <table id="lastFmTable" style="padding-left:2em">
195        <tr>
196            <td><fmt:message key="personalsettings.lastfmusername"/></td>
197            <td><form:input path="lastFmUsername" size="24"/></td>
198        </tr>
199        <tr>
200            <td><fmt:message key="personalsettings.lastfmpassword"/></td>
201            <td><form:password path="lastFmPassword" size="24"/></td>
202        </tr>
203    </table>
204
205    <table class="indent">
206        <tr>
207            <h2><fmt:message key="personalsettings.othersettings"/>:</h2>
208        <tr>
209            <td><form:checkbox path="partyModeEnabled" id="partyModeEnabled" cssClass="checkbox"/></td>
210            <td><label for="partyModeEnabled"><fmt:message key="personalsettings.partymode"/></label>
211                <c:import url="helpToolTip.jsp"><c:param name="topic" value="partymode"/></c:import>
212            </td>
213        </tr>
214    </table>
215    <table>
216    <tr>
217    <td style="min-width: 250px; vertical-align:top"><!-- inner -->
218
219    <table class="indent" style="line-height: 200%;">
220        <tr>
221            <h2><fmt:message key="personalsettings.visibilitysettings"/>:</h2>
222
223            <th style="padding:0 0.5em 0.5em 0;text-align:left;"><fmt:message key="personalsettings.display"/> </th>
224            <th style="padding:0 0.5em 0.5em 0.5em;text-align:center;"><fmt:message key="personalsettings.browse"/></th>
225            <th style="padding:0 0 0.5em 0.5em;text-align:center;"><fmt:message key="personalsettings.playlist"/></th>
226            <th style="padding:0 0 0.5em 0.5em">
227                <c:import url="helpToolTip.jsp"><c:param name="topic" value="visibility"/></c:import>
228            </th>
229        </tr>
230        <tr>
231            <td><fmt:message key="personalsettings.discnumber"/></td>
232            <td style="text-align:center"><form:checkbox path="mainVisibility.discNumberVisible" cssClass="checkbox"/></td>
233            <td style="text-align:center"><form:checkbox path="playlistVisibility.discNumberVisible" cssClass="checkbox"/></td>
234        </tr>
235        <tr>
236            <td><fmt:message key="personalsettings.tracknumber"/></td>
237            <td style="text-align:center"><form:checkbox path="mainVisibility.trackNumberVisible" cssClass="checkbox"/></td>
238            <td style="text-align:center"><form:checkbox path="playlistVisibility.trackNumberVisible" cssClass="checkbox"/></td>
239        </tr>
240        <tr>
241            <td><fmt:message key="personalsettings.artist"/></td>
242            <td style="text-align:center"><form:checkbox path="mainVisibility.artistVisible" cssClass="checkbox"/></td>
243            <td style="text-align:center"><form:checkbox path="playlistVisibility.artistVisible" cssClass="checkbox"/></td>
244        </tr>
245        <tr>
246            <td><fmt:message key="personalsettings.composer"/></td>
247            <td style="text-align:center"><form:checkbox path="mainVisibility.composerVisible" cssClass="checkbox"/></td>
248            <td style="text-align:center"><form:checkbox path="playlistVisibility.composerVisible" cssClass="checkbox"/></td>
249        </tr>
250        <tr>
251            <td><fmt:message key="personalsettings.album"/></td>
252            <td style="text-align:center"><form:checkbox path="mainVisibility.albumVisible" cssClass="checkbox"/></td>
253            <td style="text-align:center"><form:checkbox path="playlistVisibility.albumVisible" cssClass="checkbox"/></td>
254        </tr>
255        <tr>
256            <td><fmt:message key="personalsettings.mood"/></td>
257            <td style="text-align:center"><form:checkbox path="mainVisibility.moodVisible" cssClass="checkbox"/></td>
258            <td style="text-align:center"><form:checkbox path="playlistVisibility.moodVisible" cssClass="checkbox"/></td>
259        </tr>
260        <tr>
261            <td><fmt:message key="personalsettings.genre"/></td>
262            <td style="text-align:center"><form:checkbox path="mainVisibility.genreVisible" cssClass="checkbox"/></td>
263            <td style="text-align:center"><form:checkbox path="playlistVisibility.genreVisible" cssClass="checkbox"/></td>
264        </tr>
265        <tr>
266            <td><fmt:message key="personalsettings.year"/></td>
267            <td style="text-align:center"><form:checkbox path="mainVisibility.yearVisible" cssClass="checkbox"/></td>
268            <td style="text-align:center"><form:checkbox path="playlistVisibility.yearVisible" cssClass="checkbox"/></td>
269        </tr>
270        <tr>
271            <td><fmt:message key="personalsettings.bpm"/></td>
272            <td style="text-align:center"><form:checkbox path="mainVisibility.bpmVisible" cssClass="checkbox"/></td>
273            <td style="text-align:center"><form:checkbox path="playlistVisibility.bpmVisible" cssClass="checkbox"/></td>
274        </tr>
275        <tr>
276            <td><fmt:message key="personalsettings.bitrate"/></td>
277            <td style="text-align:center"><form:checkbox path="mainVisibility.bitRateVisible" cssClass="checkbox"/></td>
278            <td style="text-align:center"><form:checkbox path="playlistVisibility.bitRateVisible" cssClass="checkbox"/></td>
279        </tr>
280        <tr>
281            <td><fmt:message key="personalsettings.duration"/></td>
282            <td style="text-align:center"><form:checkbox path="mainVisibility.durationVisible" cssClass="checkbox"/></td>
283            <td style="text-align:center"><form:checkbox path="playlistVisibility.durationVisible" cssClass="checkbox"/></td>
284        </tr>
285        <tr>
286            <td><fmt:message key="personalsettings.format"/></td>
287            <td style="text-align:center"><form:checkbox path="mainVisibility.formatVisible" cssClass="checkbox"/></td>
288            <td style="text-align:center"><form:checkbox path="playlistVisibility.formatVisible" cssClass="checkbox"/></td>
289        </tr>
290        <tr>
291            <td><fmt:message key="personalsettings.filesize"/></td>
292            <td style="text-align:center"><form:checkbox path="mainVisibility.fileSizeVisible" cssClass="checkbox"/></td>
293            <td style="text-align:center"><form:checkbox path="playlistVisibility.fileSizeVisible" cssClass="checkbox"/></td>
294        </tr>
295    <tr>
296       <td>
297       <br>
298       </td>
299    </tr>
300        <tr>
301            <td><fmt:message key="personalsettings.captioncutoff"/></td>
302            <td style="text-align:center"><form:input path="mainVisibility.captionCutoff" size="3"/></td>
303            <td style="text-align:center"><form:input path="playlistVisibility.captionCutoff" size="3"/></td>
304        </tr>
305    </table>
306
307    </td>
308    <td style="min-width: 250px; vertical-align:top">
309
310    <table class="indent" style="line-height: 200%;">
311        <tr>
312            <h2><fmt:message key="personalsettings.playersettings"/>:</h2>
313
314            <th style="padding:0 0.5em 0.5em 0;text-align:left;"><fmt:message key="personalsettings.display"/></th>
315            <th style="padding:0 0.5em 0.5em 0.5em;text-align:center;">Icon</th>
316            <th style="padding:0 0 0.5em 0.5em;text-align:center;">Option</th>
317        </tr>
318        <tr>
319            <td>Rank</td>
320            <td>
321            <div class="icon-wrapper"><i class="fa custom-icon-nohover">
322            <span class="custom-icon-rank starred">1
323                <span class="fix-editor">&nbsp;</span></i>
324            </span>
325            </div>
326            </td>
327            <td style="text-align:center"><form:checkbox path="buttonVisibility.rankVisible" cssClass="checkbox"/></td>
328        </tr>
329        <tr>
330            <td>Loved</td>
331            <td>
332            <div class="icon-wrapper"><i class="fa fa-heart custom-icon-nohover"></i></div>
333            </td>
334            <td style="text-align:center"><form:checkbox path="buttonVisibility.lovedVisible" cssClass="checkbox"/></td>
335        </tr>
336        <tr>
337            <td>Starred</td>
338            <td>
339            <div class="icon-wrapper"><i class="fa fa-star custom-icon-nohover"></i></div>
340            </td>
341            <td style="text-align:center"><form:checkbox path="buttonVisibility.starredVisible" cssClass="checkbox"/></td>
342        </tr>
343        <tr>
344            <td>Play</td>
345            <td>
346            <div class="icon-wrapper"><i class="fa fa-play custom-icon-nohover"></i></div>
347            </td>
348            <td style="text-align:center"><form:checkbox path="buttonVisibility.playVisible" cssClass="checkbox"/></td>
349        </tr>
350        <tr>
351            <td>Play + Add</td>
352            <td>
353            <div class="icon-wrapper">
354            <span class="fa-stack custom-icon-nohover">
355              <i class="fa fa-play fa-stack-1x" style="margin-left:-2px;margin-top:-3px"></i>
356              <i class="fa fa-plus fa-stack-1x" style="margin-left:4px;margin-top:2px"></i>
357            </span>
358            </div>
359            </td>
360            <td style="text-align:center"><form:checkbox path="buttonVisibility.playAddVisible" cssClass="checkbox"/></td>
361        </tr>
362        <tr>
363            <td>Play + Add more</td>
364            <td>
365            <div class="icon-wrapper">
366            <span class="fa-stack custom-icon-nohover">
367              <i class="fa fa-play fa-stack-1x" style="margin-left:-2px;margin-top:-3px"></i>
368              <i class="fa fa-file-text-o fa-stack-1x" style="margin-left:4px;margin-top:2px"></i>
369            </span>
370            </div>
371            </td>
372            <td style="text-align:center"><form:checkbox path="buttonVisibility.playMoreVisible" cssClass="checkbox"/></td>
373        </tr>
374        <tr>
375            <td>Add Context menu</td>
376            <td>
377            <div class="icon-wrapper"><i class="fa fa-plus custom-icon-nohover"></i></div>
378            </td>
379            <td style="text-align:center"><form:checkbox path="buttonVisibility.addContextVisible" cssClass="checkbox"/></td>
380        </tr>
381        <tr>
382            <td>Add next</td>
383            <td>
384            <div class="icon-wrapper"><i class="fa fa-plus-circle custom-icon-nohover"></i></div>
385            </td>
386            <td style="text-align:center"><form:checkbox path="buttonVisibility.addNextVisible" cssClass="checkbox"/></td>
387        </tr>
388        <tr>
389            <td>Add last</td>
390            <td>
391            <div class="icon-wrapper"><i class="fa fa-plus-circle custom-icon-nohover"></i></div>
392            </td>
393            <td style="text-align:center"><form:checkbox path="buttonVisibility.addLastVisible" cssClass="checkbox"/></td>
394        </tr>
395        <tr>
396            <td>Download</td>
397            <td>
398            <div class="icon-wrapper"><i class="fa fa-download custom-icon-nohover"></i></div>
399            </td>
400            <td style="text-align:center"><form:checkbox path="buttonVisibility.downloadVisible" cssClass="checkbox"/></td>
401        </tr>
402        <tr>
403            <td>Youtube</td>
404            <td>
405            <div class="icon-wrapper"><i class="fa fa-youtube custom-icon-nohover"></i></div>
406            </td>
407            <td style="text-align:center"><form:checkbox path="buttonVisibility.youtubeVisible" cssClass="checkbox"/></td>
408        </tr>
409        <tr>
410            <td>Lyric</td>
411            <td>
412            <div class="icon-wrapper"><i class="fa fa-file-text-o custom-icon-nohover"></i></div>
413            </td>
414            <td style="text-align:center"><form:checkbox path="buttonVisibility.lyricVisible" cssClass="checkbox"/></td>
415        </tr>
416    </table>
417    </td>
418    </tr>
419    </table>
420
421    <p style="padding-top:1em;padding-bottom:1em">
422        <input type="submit" value="<fmt:message key="common.save"/>" style="margin-right:0.3em"/>
423        <input type="button" value="<fmt:message key="common.cancel"/>" onclick="location.href='nowPlaying.view'">
424    </p>
425
426
427	<span id="showSettings" style="display:inline;">
428	<div class="forward" style="margin-top:10px;" ><a href="javascript:noop()"onclick="showShortcut()">Show Avatar Settings</a></div></span>
429
430	<span id="hideSettings" style="display:none;">
431	<div class="forward" style="margin-top:10px;" ><a href="javascript:noop()"onclick="hideShortcut()">Hide Avatar Settings</a></div></span>
432
433	<div id="avatarSettings" style="display:none;margin-top:5px;">
434
435    <h2><fmt:message key="personalsettings.avatar.title"/></h2>
436
437    <p style="padding-top:1em; width:80%;">
438        <c:forEach items="${command.avatars}" var="avatar">
439            <c:url value="avatar.view" var="avatarUrl">
440                <c:param name="id" value="${avatar.id}"/>
441            </c:url>
442            <span style="white-space:nowrap;">
443                <form:radiobutton id="avatar-${avatar.id}" path="avatarId" value="${avatar.id}"/>
444                <label for="avatar-${avatar.id}"><img src="${avatarUrl}" alt="${avatar.name}" width="${avatar.width}" height="${avatar.height}" style="padding-right:2em;padding-bottom:1em"/></label>
445            </span>
446        </c:forEach>
447    </p>
448    <p>
449        <form:radiobutton id="noAvatar" path="avatarId" value="-1"/>
450        <label for="noAvatar"><fmt:message key="personalsettings.avatar.none"/></label>
451    </p>
452    <p>
453        <form:radiobutton id="customAvatar" path="avatarId" value="-2"/>
454        <label for="customAvatar"><fmt:message key="personalsettings.avatar.custom"/>
455            <c:if test="${not empty command.customAvatar}">
456                <madsonic:url value="avatar.view" var="avatarUrl">
457                    <madsonic:param name="username" value="${command.user.username}"/>
458                    <madsonic:param name="forceCustom" value="true"/>
459                </madsonic:url>
460                <img src="${avatarUrl}" alt="${command.customAvatar.name}" width="${command.customAvatar.width}" height="${command.customAvatar.height}" style="padding-right:2em"/>
461            </c:if>
462        </label>
463    </p>
464</form:form>
465
466	<form method="post" enctype="multipart/form-data" action="avatarUpload.view">
467		<table>
468			<tr>
469				<td style="padding-right:1em"><fmt:message key="personalsettings.avatar.changecustom"/></td>
470				<td style="padding-right:1em"><input type="file" id="file" name="file" size="40"/></td>
471				<td style="padding-right:1em"><input type="submit" value="<fmt:message key="personalsettings.avatar.upload"/>"/></td>
472			</tr>
473		</table>
474	</form>
475
476	</div>
477<br>
478<!--
479<p class="detail" style="text-align:right">
480    <fmt:message key="personalsettings.avatar.courtesy"/>
481</p>
482-->
483
484<c:if test="${command.reloadNeeded}">
485    <script language="javascript" type="text/javascript">
486		    parent.frames.main.location.href="defaultSettings.view?";
487    </script>
488</c:if>
489
490<!-- CONTENT -->
491</div>
492
493<script type="text/javascript">
494$(document).ready(function() {
495    $("#localeIndex").dropdownReplacement({selectCssWidth: 250, optionsDisplayNum: 10 });
496    $("#themeIndex").dropdownReplacement({selectCssWidth: 250, optionsDisplayNum: 15, });
497    $("#listType").dropdownReplacement({selectCssWidth: 250, optionsDisplayNum: 15, });
498});
499</script>
500
501
502<c:if test="${customScrollbar}">
503<script type="text/javascript">
504
505        (function($){
506            $(window).load(function(){
507
508                $("#content_main").mCustomScrollbar({
509                    axis:"y",
510                    scrollInertia:450, /*scrolling inertia: integer (milliseconds)*/
511                    mouseWheel:true, /*mousewheel support: boolean*/
512                    mouseWheelPixels:"auto", /*mousewheel pixels amount: integer, "auto"*/
513                    autoDraggerLength:true, /*auto-adjust scrollbar dragger length: boolean*/
514                    autoHideScrollbar:false, /*auto-hide scrollbar when idle*/
515                    alwaysShowScrollbar:true,
516                    advanced:{      updateOnBrowserResize:true, /*update scrollbars on browser resize (for layouts based on percentages): boolean*/
517                                    updateOnContentResize:true, /*auto-update scrollbars on content resize (for dynamic content): boolean*/
518                                    autoExpandHorizontalScroll:false }, /*auto expand width for horizontal scrolling: boolean*/
519                    scrollButtons:{ enable:true, /*scroll buttons support: boolean*/
520                                    scrollType:"continuous", /*scroll buttons scrolling type: "continuous", "pixels"*/
521                                    scrollSpeed:"auto", /*scroll buttons continuous scrolling speed: integer, "auto"*/
522                                    scrollAmount:40 },  /*scroll buttons pixels scroll amount: integer (pixels)*/
523                                    theme:"${customScrollbarTheme}",
524                                    scrollbarPosition:"inside"
525                });
526            });
527        })(jQuery);
528
529$("#content_main").resize(function(e){
530	$("#content_main").mCustomScrollbar("update");
531});
532</script>
533</c:if>
534</body>
535</html>
536
537