UA Cool Slide Player widget

ua_cool_slide_widget.vtl

#foreach($inode in $category)
    #if($velocityCount == 1)
         #set($catlist = "+c${inode}c:on")
    #else
         #set($catlist = "$catlist +c${inode}c:on")
    #end
#end
#set($mySlides = $dotcontent.pull("+structureInode:9651b909-b784-4867-bfb8-03049e6269f1 +live:true +deleted:false $catlist", "0", "weightedOrder asc"))
<div class="clear"></div>
<div id="outer_wrap" style="margin-top: 20px;">
<!-- wrapper element for the large image --> 
<div id="content_wrap"> 
 	
</div> 
 
 
<!-- HTML structures --> 
 
 
<!-- "previous page" action --> 
<a class="prev browse left"></a> 
 
<!-- root element for scrollable --> 
<div class="ua-cool">   
   
   <!-- root element for the items --> 
   <div class="items"> 
		#set($numloops = $math.ceil($math.div($mySlides.size(), 5)))
		#foreach($i in [0 .. $math.sub($numloops, 1)])
		<!-- item start -->
      <div id="batch${i}">
			#set($loopcontrol = $math.mul($i , 5))
			#if($math.add($loopcontrol, 5) < $mySlides.size())
			#foreach($x in [$loopcontrol..$math.add($loopcontrol, 4)])
			<img src="/resize_image?id=${mySlides.get($x).slideImage.identifier}&w=100&h=77" alt="$mySlides.get($x).identifier" title="$mySlides.get($x).title" id="image${x}" />
			#end
			</div><!-- item inner batch end -->
			#else
			#foreach($x in [$loopcontrol.. $math.sub($mySlides.size(), 1)])
			<img src="/resize_image?id=${mySlides.get($x).slideImage.identifier}&w=100&h=77" alt="$mySlides.get($x).identifier" title="$mySlides.get($x).title" id="image${x}" />
			#end
			</div>
<!-- item final end -->
			#end
			
		#end
   </div> 
  
</div> 

 
<!-- "next page" action --> 
<a class="next browse right"></a> 
</div>
<div class="clear" style="margin-bottom: 20px;"></div>
 
<script type="text/javascript"> 
jQuery(function() {
addCSS();
jQuery(".ua-cool").scrollable();
 
jQuery(".items img").click(function() {
//  
// see if same thumb is being clicked
	if ($(this).hasClass("active")) { return; }

	// calclulate  URL based on the alt attribute
	var id = $(this).attr("alt");
	
	// activate item
		$(".items img").removeClass("active");
		$(this).addClass("active");

	
	var captionPosition = ${captionPosition};
 	// alert(id);

// 	get the html fragment using ajax
getHtml(id, captionPosition);
expandContentArea();
}).filter(":first").click();

});

function addCSS() {
            var headtg = document.getElementsByTagName('head')[0];
            if (!headtg) {
                return;
            }
            var linktg = document.createElement('link');
            linktg.type = 'text/css';
            linktg.rel = 'stylesheet';
            linktg.href = '/global/css/ua-slide-show.css';
            linktg.title = 'Slide show css';
			linktg.media = 'screen';
            headtg.appendChild(linktg);
        }


function getHtml(id, captionPosition) {
  jQuery.ajax({
    type: "POST",
    url: 'https://www.uakron.edu/ajax_proxy/proxy_pull.php',
  data: {"coolid": id, "captionPosition": captionPosition, "displayCaption": $displayCaptionArea},
  dataType: "html",
success: function(data){
    $('#content_wrap').html(data);
    console.log('Success ' + data + "returned");
  },
  error: function (){
    console.log('Error ');
  }
     });
}



function expandContentArea() {
	#if($displayCaptionArea == '1')
	jQuery("div#content_wrap").height(576);
	#else
	jQuery("div#content_wrap").height(446);
	#end
}
</script>