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 – 2015</option> 142 <option value="2005 2010">2005 – 2010</option> 143 <option value="2000 2005">2000 – 2005</option> 144 <option value="1990 2000">1990 – 2000</option> 145 <option value="1980 1990">1980 – 1990</option> 146 <option value="1970 1980">1970 – 1980</option> 147 <option value="1960 1970">1960 – 1970</option> 148 <option value="1950 1960">1950 – 1960</option> 149 <option value="0 1949">< 1950</option> 150 <option value="0 1900">< 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