﻿$(document).ready(function(){
	if(isPage('featuregallery.html')){
		
		 $().SPServices({
    		operation: "GetListItems",
    		async: true,
    		listName: "Feature Images",
    		CAMLViewFields: "<ViewFields><FieldRef Name='Order' /><FieldRef Name='Title' /><FieldRef Name='Description' /><FieldRef Name='Feature_x0020_Link' /><FieldRef Name='Call_x0020_to_x0020_Action' /></ViewFields>",
    		CAMLRowLimit:5,
    		
    		completefunc: function (xData, Status) {
    		
    		  // holder for html to be rendered to the page
    		  var slideshowhtml='<div class="jflow-content-slider">'; 
    		  slideshowhtml+='<div class="mask"> <div id="slides">';
    		  
    		  // loop through all XML rows
    		  $(xData.responseXML).find("[nodeName=z:row]").each(function() {
    		  
    		  	// grab image path and split into an array
    		    var imagepath = $(this).attr("ows_FileRef").split("#");
    		    var featurelink=$(this).attr("ows_Feature_x0020_Link");
    		    var ca=$(this).attr("ows_Call_x0020_to_x0020_Action");
  				// grab the url not the garbage at the beginning
				imagepath=imagepath[1];    		  
				
				//
				var imageheading=$(this).attr("ows_Title");
				var imagedescription=$(this).attr("ows_Description");
				//$("#images").append('<img src="/'+imagepath+'" width="260">');
    		 		slideshowhtml+='<div class="slide-wrapper">';
					slideshowhtml+='<div class="slide-thumbnail"> <img src="/'+imagepath+'" alt="'+imageheading+'"/> </div>';
					// This is the image mask.
					slideshowhtml+='<div id="right-corners"><img src="images/hero-badge-mask.png" width="673px" height="392px"></div>';
					slideshowhtml+='<div class="slide-details">';
					slideshowhtml+='<h1>'+imageheading+'</h1>';
					slideshowhtml+='<div class="description">';
					slideshowhtml+='<p>'+imagedescription+'</p>';
					slideshowhtml+='<div class="featureLink"><a href="'+featurelink+'" target="_parent" title="'+imageheading+'">'+ca+'</a></div>';
					slideshowhtml+='</div></div></div>';

				});
			/*	slideshowhtml+='<div id="myController"> <span class="jFlowPrev">Prev</span>';
				slideshowhtml+='<span class="jFlowControl">1</span> <span class="jFlowControl">2</span>';
				slideshowhtml+='<span class="jFlowControl">3</span> <span class="jFlowControl">4</span>';
				slideshowhtml+='<span class="jFlowNext">Next</span> </div>';*/
				slideshowhtml+='</div></div></div>';
				
				// now populate div with html
				$("#featureslideshow").html(slideshowhtml);
				initGallery();
				// Remove text from Feature Gallery Navigation
				var nixIt = "";
				nixIt += "&nbsp;"
				$("#featurenav a:contains('1')").html(nixIt);
				$("#featurenav a:contains('2')").html(nixIt);
				$("#featurenav a:contains('3')").html(nixIt);
				$("#featurenav a:contains('4')").html(nixIt);
				$("#featurenav a:contains('5')").html(nixIt);
				$("#featurenav a:contains('6')").html(nixIt);
				$("#featurenav a:contains('7')").html(nixIt);
				$("#featurenav a:contains('8')").html(nixIt);
				$("#featurenav a:contains('9')").html(nixIt);
				$("#featurenav a:contains('10')").html(nixIt);
			}
 	 });
	}
});




function isPage(URL) {
    if (window.location.href.indexOf(URL) != -1) {
        return true;
    }
    else {
        return false;
    }
}

function initGallery(){
  $('#slides').cycle({pager:'#featurenav',fx:'fade',cleartype:  1,speed: 1000,timeout: 4000})
}

