<%
import org.exoplatform.services.wcm.utils.WCMCoreUtils;
def currentPageData = uicomponent.getCurrentPageData();
%>

<div id="slider">
	<div id="flexslider">
		<ul class="slides clearfix">
			<%
			for (viewNode in currentPageData) {
				if (viewNode != null && viewNode.hasProperty("jcr:content/jcr:mimeType") && viewNode.getProperty("jcr:content/jcr:mimeType").getString().startsWith("image/")) {
					def imgUrl = WCMCoreUtils.generateImageURI(viewNode, null);
					def imgTitle = viewNode.hasProperty("jcr:content/dc:title")? 
                         viewNode.getProperty("jcr:content/dc:title").getValues()[0].getString() : "";
					def imgSubtitle = viewNode.hasProperty("jcr:content/dc:description")? 
					                  viewNode.getProperty("jcr:content/dc:description").getValues()[0].getString() : "";
					%>
        
					<li>
<%=uicomponent.addQuickEditDiv("Column1 media ",, viewNode)%>
<img alt="" src="$imgUrl" />
</div><!-- QuickEditDiv -->
						<div class="flex-caption">
							<div>
							<p class="title1">$imgTitle</p>

							<p class="title2">$imgSubtitle</p>
							</div>
						</div>		
					</li>
      
					<%
				}
			}
			%>		
		</ul>
	</div>
</div>

<script type="text/javascript">
if (jQuery) {
  
	jQuery(window).on('load',function() {
	    jQuery('#slides-pagination').flexslider({
		animation: "fade",
		controlNav: false,
		animationLoop: false,
		slideshow: false,
		    prevText: "",
		    nextText: "",
		itemWidth: 253,
		itemMargin: 1,
		asNavFor: '#flexslider'
	      });										
		jQuery('#flexslider').flexslider({
		animation: "fade",			
		slideshow: true,			
		slideshowSpeed: 7000,
		animationDuration: 600,				
		prevText: "",
		nextText: "",
		controlNav: false,
		sync: "#slides-pagination"					
		})
	    jQuery('#tab_preview a').click(function (e) {
			e.preventDefault();
			jQuery(this).tab('show');
		}) 	 				
	});
}
</script>