<%
  import java.util.List;
  import java.util.ArrayList;
  import javax.jcr.Node;
  import javax.jcr.NodeIterator;
  import org.exoplatform.webui.core.UIComponent;
  import org.exoplatform.services.jcr.util.Text;
  import org.exoplatform.ecm.webui.utils.Utils;
  import org.exoplatform.services.jcr.RepositoryService;
  import java.util.Calendar;
   
  UIComponent uiParent = uicomponent.getParent();
  
  def presentNodes = uicomponent.getPresentNodes();
  def links = new ArrayList<String>();
  def title = "";
  if (presentNodes.size() == 0) {
    def currentNode = uicomponent.getFileLangNode(uiParent.getNode()) ;
    def originalNode = uiParent.getOriginalNode();
    title = Text.unescapeIllegalJcrChars(originalNode.getName());
    presentNodes.add(currentNode);
  }
  RepositoryService rService = uicomponent.getApplicationComponent(RepositoryService.class) ;
  String repository = rService.getCurrentRepository().getConfiguration().getName() ;  
  def link = "";
  def url = "";
  for(nodedata in presentNodes) {
    link = "/".concat(uicomponent.getPortalName()).concat("/").concat(Utils.getRestContextName(uicomponent.getPortalName())).concat("/jcr/").concat(repository).concat("/").concat(nodedata.getSession().getWorkspace().getName()).concat(nodedata.getPath());
    url = url.concat("\n {url: '").concat(link).concat("'},");
    links.add(link);
  }
  url = url.length() == 0 ? url : url.substring(0, url.length() - 1);
  def rqcontext = _ctx.getRequestContext();
  def size = links.size();
  
  Calendar lCDateCalendar = Calendar.getInstance();
  def timeCreated = lCDateCalendar.getTimeInMillis();
%>
<script type="text/javascript" src="/ecmexplorer/javascript/eXo/ecm/flowplayer-3.1.4.min.js"></script>
<script type="text/javascript" src="/ecmexplorer/javascript/eXo/ecm/flowplayer.playlist-3.0.7.js"></script>
  <div class="ContentDetail">
	  <%
		  def style = "float:none; margin:auto;";
		  if (size > 1) {
		    style = "";
		  }
		%>
  	<div id="player-$timeCreated" class="PlayerContent" style="$style ; z-index:0;"></div>
    <script>
    <% print "\$" %> (function() { 
      // install flowplayer into container 
    	flowplayer("player-$timeCreated", {wmode: 'transparent', src: "/ecmexplorer/javascript/eXo/ecm/flowplayer-3.1.5.swf"}, {  
      // fullscreen button not needed here 
        plugins: { 
          controls: { 
            url: '/ecmexplorer/javascript/eXo/ecm/flowplayer.controls-tube-3.1.5.swf',
            fullscreen: true,  
            height: 30,
            // setup auto hide 
            autoHide: 'always',
            playlist: true
          } 
        }, 
     
        playlist: [ ${url} ],
        canvas: { 
          backgroundImage: 'url(/eXoDMSResources/skin/images/file/MP3Player.jpg)' 
        }, 
        clip: { 
            autoPlay: false,  
            autoBuffering: true,
            // optional: when playback starts close the first audio playback 
            onBeforeBegin: function() { 
              flowplayer("player-$timeCreated").close();  
            } 
        }
      });
    /*
      here comes the magic plugin. It uses first div.clips element as the 
      root for as playlist entries. loop parameter makes clips play
      from the beginning to the end.
    */
    <% 
      if (size > 1) {
    %>
        flowplayer("player-$timeCreated").playlist("div.petrol", {loop:true});
    <%
      }
    %>
  });
  </script>
  <% 
    if (size > 1) {
  %>
  	<div class="clips petrol ListPlayer" style="width: 220px;">
  <!-- single playlist entry -->
  <% 
    def name = "";
    for(int i = 0; i < links.size(); i++) {
        link = links.get(i);
        name = presentNodes.get(i).getName();
 %>         
      <a href="${link}" class="first">
        ${name}
      </a>
<%
  } 
 %>
		</div>
<%
  } 
 %>
 </div>
<style>
.NavigationContainer {
  padding-bottom: 5px;
  color: #0e396c;
  background: url('/eXoDMSResources/skin/images/file/TitleBG1x21.gif') repeat-x top;
  border: 1px solid #cbcbcb;
  margin: auto;
}

 .TopTitle {  
  padding-left: 10px;
  height: 22px; line-height: 22px;
  color: #058ee6; font-weight: bold; 
}

 .TextContent pre {  
   white-space: normal;
 }
 
 .ContentDetail {  
   text-align: center;
   overflow: visible;
 }

.ListPlayer{
	float: right;
	overflow-y: auto;
	overflow-x: hidden;
	height: 420px;
}

.PlayerContent{
	padding: 10px;
	display:block;
	float:left;
	height:320px;
	width:475px;
}

div.clips.petrol a.playing {
	width: 242px;
	background: url('/eXoDMSResources/skin/images/file/Selected.gif') no-repeat right center;
	color: black;
	display: block;
	font-family: verdana;
	font-size: 11px;
	font-weight: bold;
	height: 29px;
	line-height: 28px;
	margin: 0 0 0 4px;
	overflow: hidden;
	padding: 0 0 0 8px;
	text-align: left;
}

div.clips.petrol .first {
	background: #F0F0F0;
	width: 238px;
	border: none;
	border-top: 1px solid white;
	color: black;
	display: block;
	font-family: verdana;
	font-size: 11px;
	font-weight: bold;
	height: 29px;
	line-height: 28px;
	margin: 0 0 0 8px;
	overflow: hidden;
	padding: 0 0 0 8px;
	text-align: left;
  outline-style: none;
}

.BackPage{
	background: url('/eXoDMSResources/skin/images/file/BackPage.gif') no-repeat center;
	width: 19px;
	height: 7px;
	cursor: pointer;
	margin: 16px auto;
}

.NextPage{
	background: url('/eXoDMSResources/skin/images/file/NextPage.gif') no-repeat center;
	width: 19px;
	height: 7px;
	cursor: pointer;
	margin: 16px auto;
}

div.clips.petrol a:hover {
	background: url('/eXoDMSResources/skin/images/file/Selected.gif') no-repeat right center;
	width: 242px;
	margin: 0 0 0 4px;
}
 
</style>

    