1<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="iso-8859-1" %>
2<%@ include file="include.jsp" %>
3
4<link rel="stylesheet" href="<c:url value="/script/fontawesome/css/font-awesome.min.css"/>" type="text/css">
5
6<%--
7PARAMETERS
8  albumId: ID of album.
9  playlistId: ID of playlist.
10  podcastChannelId: ID of podcast channel
11  auth: Authentication token
12  coverArtHQ: HD Coverart
13  coverArtSize: Height and width of cover art.
14  caption1: Caption line 1
15  caption2: Caption line 2
16  caption3: Caption line 3
17  captionCount: Number of caption lines to display (default 0)
18  showLink: Whether to make the cover art image link to the album page.
19  showZoom: Whether to display a link for zooming the cover art.
20  showChange: Whether to display a link for changing the cover art.
21  appearAfter: Fade in after this many milliseconds, or nil if no fading in should happen.
22  showSmoother: more opacity effect
23--%>
24
25<c:choose>
26    <c:when test="${empty param.coverArtSize}">
27        <c:set var="size" value="auto"/>
28    </c:when>
29    <c:otherwise>
30        <c:set var="size" value="${param.coverArtSize}px"/>
31    </c:otherwise>
32</c:choose>
33
34<c:set var="captionCount" value="${empty param.captionCount ? 0 : param.captionCount}"/>
35
36<str:randomString count="5" type="alphabet" var="divId"/>
37<str:randomString count="5" type="alphabet" var="imgId"/>
38<str:randomString count="5" type="alphabet" var="playId"/>
39<str:randomString count="5" type="alphabet" var="addId"/>
40<str:randomString count="5" type="alphabet" var="backId"/>
41
42<div class="coverart">
43    <div style="width:${size};max-width:${size};height:${size};max-height:${size};cursor:pointer" title="${param.caption1}" id="${divId}">
44
45        <c:if test="${not empty param.albumId}">
46            <c:url value="main.view" var="targetUrl">
47                <c:param name="id" value="${param.albumId}"/>
48            </c:url>
49        </c:if>
50        <c:if test="${not empty param.playlistId}">
51            <c:url value="playlist.view" var="targetUrl">
52                <c:param name="id" value="${param.playlistId}"/>
53            </c:url>
54        </c:if>
55        <c:if test="${not empty param.podcastChannelId}">
56            <c:url value="podcastChannel.view" var="targetUrl">
57                <c:param name="id" value="${param.podcastChannelId}"/>
58            </c:url>
59        </c:if>
60
61        <c:url value="/coverArt.view" var="coverArtUrl">
62            <c:if test="${not empty param.coverArtSize}">
63                <c:choose>
64                    <c:when test="${param.coverArtHQ}">
65                        <c:param name="size" value="${param.coverArtSize * 2}"/>
66                    </c:when>
67                    <c:otherwise>
68                        <c:param name="size" value="${param.coverArtSize}"/>
69                    </c:otherwise>
70                </c:choose>
71            </c:if>
72            <c:if test="${not empty param.albumId}">
73                <c:param name="id" value="${param.albumId}"/>
74            </c:if>
75            <c:if test="${not empty param.podcastChannelId}">
76                <c:param name="id" value="pod-${param.podcastChannelId}"/>
77            </c:if>
78            <c:if test="${not empty param.playlistId}">
79                <c:param name="id" value="pl-${param.playlistId}"/>
80            </c:if>
81        <c:if test="${not empty param.auth}">
82            <c:param name="auth" value="${param.auth}"/>
83        </c:if>
84        </c:url>
85        <c:url value="/coverArt.view" var="zoomCoverArtUrl">
86            <c:param name="id" value="${param.albumId}"/>
87        </c:url>
88
89        <div style="position: relative; width: 0; height: 0">
90            <a href="#" onclick="parent.playQueue.onPlay(${param.albumId}); return false;">
91            <img src="icons/default/playalbum.png" id="${playId}" style="position: relative; top: ${param.coverArtSize -30}px; left: ${param.coverArtSize -52}px; z-index:100; display:none;" ></a>
92        </div>
93
94        <div style="position: relative; width: 0; height: 0">
95            <a href="#" onclick="parent.playQueue.onAdd(${param.albumId}); return false;">
96            <img src="icons/default/addalbum.png" id="${addId}" style="position: relative; top: ${param.coverArtSize -30}px; left: ${param.coverArtSize -29}px; z-index:100; display:none;" ></a>
97        </div>
98
99        <c:choose>
100        <c:when test="${param.showLink}"><a href="${targetUrl}" title="${param.caption1}"></c:when>
101        </c:choose>
102
103        <div style="position: relative; width: 0; height: 0">
104            <c:if test="${param.typVideo}">
105                <img src="icons/default/test.png" id="${backId}" width="${param.coverArtSize +1}" height="${param.coverArtSize * 1.3 +1}" style="position: relative; bottom: 0px; left: 0px;z-index:90; display:none; opacity: 0.5;" >
106            </c:if>
107
108            <c:if test="${not param.typVideo}">
109                <img src="icons/default/test.png" id="${backId}" width="${param.coverArtSize +1}" height="${param.coverArtSize +1}" style="position: relative; bottom: 0px; left: 0px;z-index:90; display:none; opacity: 0.5;" >
110            </c:if>
111        </div>
112
113        <img src="${coverArtUrl}" id="${imgId}" width="${param.coverArtSize}" class="dropshadow" alt="${param.albumName}">
114        <c:if test="${param.showLink}"></a></c:if>
115    </div>
116
117    <c:if test="${captionCount gt 0}">
118        <div class="caption1" style="width:${param.coverArtSize - 16}px;margin-top:5px"><a href="${targetUrl}" title="${param.caption1}">${param.caption1}</a></div>
119    </c:if>
120    <c:if test="${captionCount gt 1}">
121        <div class="caption2" style="width:${param.coverArtSize - 16}px">${param.caption2}&nbsp;</div>
122    </c:if>
123    <c:if test="${captionCount gt 2}">
124        <div class="caption3" style="width:${param.coverArtSize - 16}px">${param.caption3}&nbsp;</div>
125    </c:if>
126</div>
127
128<c:if test="${param.showChange or param.showZoom}">
129    <div style="padding-top:6px;text-align:right">
130        <c:if test="${param.showChange}">
131            <c:url value="/changeCoverArt.view" var="changeCoverArtUrl">
132                <c:param name="id" value="${param.albumId}"/>
133            </c:url>
134            <a class="detail" href="${changeCoverArtUrl}"><fmt:message key="coverart.change"/></a>
135        </c:if>
136
137        <c:if test="${param.showZoom and param.showChange}">
138            |
139        </c:if>
140
141        <c:if test="${param.showZoom}">
142            <a class="detail" rel="zoom" title="${param.caption1}" href="${zoomCoverArtUrl}"><fmt:message key="coverart.zoom"/></a>
143        </c:if>
144    </div>
145</c:if>
146
147<script type="text/javascript">
148    $(document).ready(function () {
149        setTimeout("$('#${imgId}').fadeIn(500)", ${empty param.appearAfter ? 0 : param.appearAfter});
150    });
151
152    $("#${divId}").mouseover(function () {
153        $("#${playId}").stop(1,1).fadeIn(600);
154        $("#${addId}").stop(1,1).fadeIn(500);
155        $("#${imgId}").animate({opacity: 0.8}, 150);
156    });
157
158    $("#${divId}").mouseleave(function () {
159        $("#${playId}").stop(1,1).fadeOut(1200);
160        $("#${addId}").stop(1,1).fadeOut(1000);
161        $("#${imgId}").animate({opacity: 1.0}, 150);
162    });
163
164    $("#${playId}").click(function () {
165        <c:choose>
166        <c:when test="${not empty param.albumId}">
167        parent.playQueue.onPlay(${param.albumId});
168        </c:when>
169        <c:otherwise>
170        parent.playQueue.onPlayPlaylist('${param.playlistId}', false);
171        </c:otherwise>
172        </c:choose>
173
174        <c:if test="${not empty param.podcastChannelId}">
175        parent.playQueue.onPlayPodcastChannel(${param.podcastChannelId});
176        </c:if>
177    });
178
179
180    $("#${addId}").click(function () {
181        <c:choose>
182        <c:when test="${not empty param.albumId}">
183        parent.playQueue.onAdd(${param.albumId});
184        </c:when>
185        <c:otherwise>
186        parent.playQueue.onAddPlaylist('${param.playlistId}', false);
187        </c:otherwise>
188        </c:choose>
189    });
190</script>
191
192