1<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="iso-8859-1"%>
2<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
3
4<html><head>
5    <%@ include file="head.jsp" %>
6    <%@ include file="jquery.jsp" %>
7    <script type="text/javascript" src="<c:url value="/script/jquery-migrate-1.2.1.min.js"/>"></script>
8    <script type='text/javascript' src="<c:url value="/script/jquery.scrollTo-1.4.2.js"/>"></script>
9    <script type='text/javascript' src="<c:url value="/script/jquery.dropdownReplacement-0.5.3.js"/>"></script>
10    <link rel="stylesheet" href="<c:url value="/style/jquery.dropdownReplacement.css"/>" type="text/css">
11    <script type="text/javascript">
12    $(document).ready(function() {
13        $("#yearSelect").dropdownReplacement({selectCssWidth: 80});
14        $("#countSelect").dropdownReplacement({selectCssWidth: 70});
15    });
16    </script>
17
18    <c:choose>
19        <c:when test="${model.customScrollbar}">
20            <link href="<c:url value="/style/customScrollbar.css"/>" rel="stylesheet">
21            <script type="text/javascript" src="<c:url value="/script/jquery.mousewheel.min.js"/>"></script>
22            <script type="text/javascript" src="<c:url value="/script/jquery.mCustomScrollbar.concat.min.js"/>"></script>
23        </c:when>
24        <c:otherwise>
25            <link href="<c:url value="/style/customScrollbarAuto.css"/>" rel="stylesheet">
26        </c:otherwise>
27    </c:choose>
28
29<style type="text/css">
30span.off {
31    cursor: pointer;
32    float:left;
33    padding: 5px 10px;
34    margin-right: 5px;
35    margin-bottom: 5px;
36    background: #FFF;
37    color: #000;
38    -webkit-border-radius: 7px;
39    -moz-border-radius: 7px;
40    border-radius: 7px;
41    border: solid 1px #CCC;
42    -webkit-transition-duration: 0.1s;
43    -moz-transition-duration: 0.1s;
44    transition-duration: 0.1s;
45    -webkit-user-select:none;
46    -moz-user-select:none;
47    -ms-user-select:none;
48    user-select:none;
49    white-space: nowrap;
50}
51
52span.on {
53    cursor: pointer;
54    float:left;
55    padding: 5px 10px;
56    margin-right: 5px;
57    margin-bottom: 5px;
58    background: #D2F5FF;
59    color: #000;
60    -webkit-border-radius: 7px;
61    -moz-border-radius: 7px;
62    border-radius: 7px;
63    border: solid 1px #999;
64    -webkit-transition-duration: 0.1s;
65    -moz-transition-duration: 0.1s;
66    transition-duration: 0.1s;
67    -webkit-user-select:none;
68    -moz-user-select:none;
69    -ms-user-select:none;
70    user-select:none;
71    white-space: nowrap;
72}
73
74span.off:hover {
75    background: #D2F5FF;opacity:0.7;
76    border: solid 1px #FFF;
77    text-decoration: none;
78    }
79
80input {
81    margin-right:5px;
82}
83
84    </style>
85
86    <script type="text/javascript">
87
88function changeClass(elem, className1,className2) {
89    elem.className = (elem.className == className1)?className2:className1;
90}
91function playMoodRadio() {
92    var moods = new Array();
93    var e = document.getElementsByTagName("span");
94    for (var i = 0; i < e.length; i++) {
95        if (e[i].className == "on") {
96            moods.push(e[i].firstChild.data);
97        }
98    }
99    var num = document.getElementsByName("MoodRadioPlayCount")[0].selectedIndex;
100    var playcount = document.getElementsByName("MoodRadioPlayCount")[0].options[num].text;
101    var numyear = document.getElementsByName("MoodYear")[0].selectedIndex;
102    var moodsyear = document.getElementsByName("MoodYear")[0].options[numyear].value;
103
104    parent.playQueue.onPlayMoodRadio(moods, playcount, moodsyear);
105}
106    </script>
107</head>
108<body class="mainframe bgcolor1">
109
110<!-- CONTENT -->
111<div id="content_main" class="content_main">
112
113<h1>
114    <img src="<spring:theme code="moodsImage"/>" width="32" alt="">
115    Moods
116</h1>
117<c:choose>
118    <c:when test="${empty model.moods}">
119        <p>Please scan your library before</a>.
120    </c:when>
121    <c:otherwise>
122        <p style="padding:10px">Choose one or more moods.</p>
123
124        <div>
125        <c:forEach items="${model.moods}" var="mood">
126            <span class="off" onclick='changeClass(this,"on","off");'>${mood}</span>
127        </c:forEach>
128        </div>
129        <div style="clear:both"/>
130
131        <br>
132        <form style="display: inline-flex;">
133        <select name="MoodYear" id="yearSelect">
134                <option value="any"><fmt:message key="more.random.anyyear"/></option>
135
136                <c:forEach begin="0" end="${model.currentYear - 2005}" var="yearOffset">
137                    <c:set var="year" value="${model.currentYear - yearOffset}"/>
138                    <option value="${year} ${year}">${year}</option>
139                </c:forEach>
140
141                <option value="2010 2015">2010 &ndash; 2015</option>
142                <option value="2005 2010">2005 &ndash; 2010</option>
143                <option value="2000 2005">2000 &ndash; 2005</option>
144                <option value="1990 2000">1990 &ndash; 2000</option>
145                <option value="1980 1990">1980 &ndash; 1990</option>
146                <option value="1970 1980">1970 &ndash; 1980</option>
147                <option value="1960 1970">1960 &ndash; 1970</option>
148                <option value="1950 1960">1950 &ndash; 1960</option>
149                <option value="0 1949">&lt; 1950</option>
150                <option value="0 1900">&lt; 1900</option>
151        </select>
152
153        <select name="MoodRadioPlayCount" id="countSelect">
154            <option>10</option>
155            <option>15</option>
156            <option>25</option>
157            <option>50</option>
158            <option>75</option>
159            <option>100</option>
160            <option>150</option>
161            <option>200</option>
162            </select>
163
164        <input type="button" value="Play Mood Radio!" onClick="playMoodRadio();">
165        </form>
166
167    </c:otherwise>
168</c:choose>
169<!-- CONTENT -->
170</div>
171
172<c:if test="${model.customScrollbar}">
173<script type="text/javascript">
174    (function($){
175        $(window).load(function(){
176
177                $("#content_main").mCustomScrollbar({
178                axis:"y",
179                scrollInertia:450,
180                mouseWheel:true,
181                mouseWheelPixels:"auto",
182                autoDraggerLength:true,
183                autoHideScrollbar:false,
184                scrollButtons:{ enable:true,
185                                scrollType:"continuous",
186                                scrollSpeed:"auto",
187                                scrollAmount:40 },
188                                theme:"${model.customScrollbarTheme}",
189                                scrollbarPosition:"inside"
190            });
191        });
192    })(jQuery);
193
194    $("#content_main").resize(function(e){
195        $("#content_main").mCustomScrollbar("update");
196    });
197
198</script>
199</c:if>
200
201</body>
202</html>
203