<%
  /**
   * Created by The eXo Platform SARL
   * Author : Hoang Van Hung
   *          hunghvit@exoplatform.com
   * Oct 27, 2009
   * 09:09:29 PM
   */
%>
<%   
  import org.exoplatform.web.application.Parameter;
  import org.exoplatform.services.jcr.util.Text;
  import org.exoplatform.ecm.webui.utils.Utils;
  import org.exoplatform.ecm.webui.component.explorer.UIWorkingArea;
  import org.exoplatform.services.cms.link.LinkManager;
  import org.exoplatform.services.jcr.RepositoryService;
  import org.apache.commons.lang.StringEscapeUtils;
%>
<%
  def linkManager = uicomponent.getComponentInstanceOfType("org.exoplatform.services.cms.link.LinkManager");
  def childList = uicomponent.getChildrenList();
  if(childList.size() > 0) {
    String portalName = uicomponent.getPortalName();
	String restContextName = Utils.getRestContextName(portalName);
	def viewComponentId  = new Date().getTime();
	def rcontext = _ctx.getRequestContext() ;
	def data = "";
	String imgSrc = "";
	rcontext.getJavascriptManager().importJavascript('eXo.ecm.ECMUtils','/ecm-wcm-extension/javascript/');
	rcontext.getJavascriptManager().importJavascript('eXo.ecm.DMSBrowser','/ecm-wcm-extension/javascript/');    
	rcontext.getJavascriptManager().importJavascript('eXo.ecm.UICoverFlow','/ecmexplorer/javascript/');
	rcontext.getJavascriptManager().addOnLoadJavascript("eXo.ecm.UICoverFlow.initEvent('$viewComponentId')");
  RepositoryService rService = uicomponent.getApplicationComponent(RepositoryService.class);
  String repository = rService.getCurrentRepository().getConfiguration().getName();	
%>
  <div id="$uicomponent.id" class="UISlideShowView UICoverFlowView">
    <div class="TLBox">
      <div class="TRBox">
        <div class="TMBox"><span></span></div>
      </div>
    </div>
    <div class="MLBox">
      <div class="MRBox">
        <div id="$viewComponentId" class="MCBox" style="text-align: right;">
          <textarea class="Album" style="display: none">
              <!DOCTYPE html 
                PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
              <head><title>K</title>
                <meta http-equiv="content-type" content="text/html; charset=utf-8">
                <style type="text/css">
                .slideshow {
                  display: block;
                  position: relative;
                  z-index: 0;
                  padding: 10px;
                  height: 300px;
                  margin: 0 auto;
                  width: 400px;
				  border: 1px solid #dddddd;
                }
                .slideshow-images {
                  display: block;
                  overflow: hidden;
                  position: relative;
                }   
                .slideshow-images img {
                  display: block;
                  position: absolute;
                  z-index: 1;
                }   
                .slideshow-thumbnails {
                  overflow: hidden;
                }

                .slideshow-images {
                  height: 300px;
                  width: 400px;
                }   
                .slideshow-images-visible { 
                  opacity: 1;
                } 
                .slideshow-images-prev { 
                  opacity: 0; 
                }
                .slideshow-images-next { 
                  opacity: 0; 
                }
                .slideshow-images img {
                  float: left;
                  left: 0;
                  top: 0;
                } 

                .slideshow a img {
                  border: 0;
                  height: 48px;
                }

                .slideshow-captions {
                  background: #000;
                  bottom: 0;
                  color: #FFF;
                  font: normal 12px/22px Arial, sans-serif;
                  left: 0;
                  overflow: hidden;
                  position: absolute;
                  text-indent: 10px;
                  width: 100%;
                  z-index: 10000;
                }
                .slideshow-captions-hidden {
                  height: 0;
                  opacity: 0;
                }
                .slideshow-captions-visible {
                  height: 22px;
                  opacity: .7;
                }

                .slideshow-controller {
                  background: url('/eXoDMSResources/skin/images/slideshow/controller.png') no-repeat;
                  height: 42px;
                  left: 50%;
                  margin: -21px 0 0 -119px;
                  overflow: hidden;
                  position: absolute;
                  top: 50%;
                  width: 238px;
                  z-index: 10000;
                }
                .slideshow-controller * {
                  margin: 0;
                  padding: 0;
                }
                .slideshow-controller-hidden { 
                  opacity: 0;
                }
                .slideshow-controller-visible {
                  opacity: 1;
                }
                .slideshow-controller a {
                  cursor: pointer;
                  display: block;
                  height: 18px;
                  overflow: hidden;
                  position: absolute;
                  top: 12px;
                }
                .slideshow-controller a.active {
                  background-position: 0 18px;
                }
                .slideshow-controller li {
                  list-style: none;
                }
                .slideshow-controller li.first a {
                  background-image: url('/eXoDMSResources/skin/images/slideshow/controller-first.gif');
                  left: 33px;
                  width: 19px;
                }
                .slideshow-controller li.last a {
                  background-image: url('/eXoDMSResources/skin/images/slideshow/controller-last.gif');
                  left: 186px;
                  width: 19px;
                }
                .slideshow-controller li.next a {
                  background-image: url('/eXoDMSResources/skin/images/slideshow/controller-next.gif');
                  left: 145px;
                  width: 28px;
                }
                .slideshow-controller li.pause a {
                  background-image: url('/eXoDMSResources/skin/images/slideshow/controller-pause.gif');
                  left: 109px;
                  width: 20px;
                }
                .slideshow-controller li.play a {
                  background-position: 20px 0;
                }
                .slideshow-controller li.play a.active {
                  background-position: 20px 18px;
                }
                .slideshow-controller li.prev a {
                  background-image: url('/eXoDMSResources/skin/images/slideshow/controller-prev.gif');
                  left: 65px;
                  width: 28px;
                }
                .slideshow-loader {
                  height: 28px;
                  right: 0;
                  position: absolute;
                  top: 0;
                  width: 28px;
                  z-index: 10001;
                }
                .slideshow-loader-hidden {
                  opacity: 0;
                }
                .slideshow-loader-visible {
                  opacity: 1;
                }

                .slideshow-thumbnails {
                  bottom: -65px;
                  height: 65px;
                  left: 0;
                  position: absolute;
                  width: 100%;
                }
                .slideshow-thumbnails * {
                  margin: 0;
                  padding: 0;
                }
                .slideshow-thumbnails ul {
                  height: 65px;
                  left: 0;
                  position: absolute;
                  top: 0;
                  width: 10000px;
                }
                .slideshow-thumbnails li {
                  float: left;
                  list-style: none;
                  margin: 5px 5px 5px 0;
                  position: relative;
                }
                .slideshow-thumbnails a {
                  display: block;
                  float: left;
                  padding: 3px;
                  position: relative; 
                  border:1px solid #c7c7c7;
                  height: 48px;
                }
                .slideshow-thumbnails a:hover {
                  background-color: #FF9 !important;
                  opacity: 1 !important;
                }
                .slideshow-thumbnails img {
                  display: block;
                }
                .slideshow-thumbnails-active {
                  background-color: #9FF;
                  opacity: 1;
                }
                .slideshow-thumbnails-inactive {
                  background-color: #FFF;
                  opacity: .5;
                }
                </style>
                <script type="text/javascript" src="/ecmexplorer/javascript/eXo/ecm/Mootools.js"></script>
                <script type="text/javascript" src="/ecmexplorer/javascript/eXo/ecm/Slideshow.js"></script>
             <%
              if(uicomponent.isEnableThumbnail()) {
                String imageSize = "";
                def actionLink = "";
                def wsName = "";
                String primaryType = "";
                def uiWorkingArea = uicomponent.getAncestorOfType(UIWorkingArea.class);
                for(image in childList) {
                  wsName = image.getSession().getWorkspace().getName();
                  primaryType = image.getPrimaryNodeType().getName();
                  def title = uiWorkingArea.getTitle(image);
                  title = StringEscapeUtils.escapeHtml(title);
                  def thumbnailNode = uicomponent.getThumbnailNode(image);
                  boolean isShowSlideShow = false;
                  if(thumbnailNode != null && thumbnailNode.hasProperty("exo:bigSize")) {
                    isShowSlideShow = true;
                  } else {
                    isShowSlideShow = false;
                  }
                  imgSrc = "/".concat(portalName).concat("/").concat(restContextName).concat("/thumbnailImage/{size}/").concat(repository).concat("/").concat(wsName).concat(image.getPath());
                  if((!linkManager.isLink(image) || linkManager.isTargetReachable(image)) && uicomponent.isSupportedThumbnailImage(image)) {
                    imgSrc = imgSrc.replace("{size}","origin").concat("/?reloadnum=").concat(String.valueOf(Math.random())); 
                  } else if (isShowSlideShow) {
                    imgSrc = imgSrc.replace("{size}","big").concat("/?reloadnum=").concat(String.valueOf(Math.random()));
                  } else {
                    continue;
                  }
                  data = data.concat("'").concat(imgSrc).concat("' : { caption: '").concat(title).concat(".' },");
                }
                if (data.length() > 0) {
                  data = "{".concat(data.substring(0,data.length() - 1)).concat("}");
                }
              } else {
                println "<image src=\"\" w=\"676\" h=\"429\"/>";
              }
            %>
            <%
            if(data.length() > 0) {
            %>
              <script type="text/javascript">            
              //<![CDATA[
  	            if (window.addEventListener) {
  	              window.addEventListener('load', function(){
  	                var myShow = new Slideshow('show', ${data}, {controller: true, height: 300, hu: '', thumbnails: true, width: 400});
  	              }, false);
  	            } else if (window.attachEvent) {
  	            	window.attachEvent('onload', function(){
  	                var myShow = new Slideshow('show', ${data}, {controller: true, height: 300, hu: '', thumbnails: true, width: 400});
  	              });
  	            }
              //]]>
              </script>
            <%}%>
            </head>
            <body>
               <div id="show" class="slideshow">
               </div>
              </body>
            </html>
          </textarea>
        </div>
        <% int availablePage = uicomponent.getContentPageIterator().getAvailablePage();
           if (availablePage > 1) { %> 
            <div class="PageAvailable" pageAvailable='$availablePage'>
              <%_ctx.renderUIComponent(uicomponent.getContentPageIterator())%>
            </div>
        <% } %>
      </div>
    </div>
    <div class="BLBox">
      <div class="BRBox">
        <div class="BMBox"><span></span></div>
      </div>
    </div>  
  </div>
<%}%> 