(function(){
/*
	-------------------------------------------------------------
		GALLERY OBJECT
	-------------------------------------------------------------
	*/

		var 	glow;
	        window.vision = window.vision || {};
	
		var htmlNavBoth = '<p class="back" title="Back"><a href="#" onclick="vision.gallery.getGallery(\'back\');return false;"><span></span>Back</a></p>' +
				  '<p class="forward" title="Next"><a href="#" onclick="vision.gallery.getGallery(\'next\');return false;"><span></span>Next</a></p>',
				  
		htmlNavNone = '<p class="back backoff" title="Back"><span></span>Back</p>' +
					  '<p class="forward forwardoff" title="Next"><span></span>Next</p>',
					  
		htmlNavBack = '<p class="back" title="Back"><a href="#" onclick="vision.gallery.getGallery(\'back\');return false;"><span></span>Back</a></p>' +
					  '<p class="forward forwardoff" title="Next"><span></span>Next</p></p>',
					  				  
		htmlNavNext = '<p class="back backoff" title="Back"><span></span>Back</p>' +
					  '<p class="forward" title="Next"><a href="#" onclick="vision.gallery.getGallery(\'next\');return false;"><span></span>Next</a></p>',
	
		
		getElementById = document.getElementById;
		
		var lightboxRedesign;
		
		var wallpaperPanel;
		
		var myAnim;
		
		var ratingsForm;

	vision.gallery = {
		init:function(){
			if (glow.isSupported) {
		
				/* add pagination  */
				if(document.getElementById("vision-gallery-view")) {
				vision.gallery.initPagination();
				vision.gallery.initActions();
				vision.gallery.setupLightbox();
				vision.gallery.onLoad();
				}
			}
			
		},
		order: "DESC",
		source: null, //SET IN CORE.SSSI
		currentPage: 1,
		requestedPage: 1,
		highestPageVisited: 1,
		slideshowState:"play",
		totalPages: 1,	//total number of comments divided by page size. Updated after first xhr to queryengine
		totalImages: null,
		empsource: null,
		empdescription: null,
		pagesInCache: 0, // Updated after each xhr to queryengine
		imagesInPage: 10, //OVERIDEABLE IN CORE.SSSI
		queryEnginePageSize: 20, //OVERIDEABLE IN CORE.SSSI
		queryEnginePage: 1, //incremented after each xhr to queryengine
		queryengineData: {}, //object to hold queryengine json after an xhr
		action: null,
		cache: [],
		cacheContainsAllData: false,
		config: null,
		onLoad:function(){}, //callback function that is called when gallery is displayed
		
		/*  add back text and next link */		
		initPagination: function(){
			var gallery = vision.gallery;
			/* create div to insert navigation into */
			var elNav = document.createElement('div');
			elNav.id = "vision-gallery-nav";
			
			/* insert the div after the gallery */
			var elemView = document.getElementById("vision-gallery-view");
			var insertionPoint = document.getElementById("vision-gallery-moreinfo");
			elemView.insertBefore(elNav, insertionPoint);

			/* insert nav: provide a next link unless there are less than a page worth of galleries*/
			var htmlNav = htmlNavNext;
			if (gallery.totalImages <= gallery.imagesInPage) {
				var htmlNav = htmlNavNone;
			}	

			document.getElementById("vision-gallery-nav").innerHTML = htmlNav;
			gallery.getQueryengineData();
		},
		
		
		getGallery: function(button){
			var gallery = vision.gallery, requestedPage;
			
			/* work out what page is being requested*/
			if (button =="next") {
				requestedPage = vision.gallery.currentPage + 1;
			}
			else {
				requestedPage = vision.gallery.currentPage - 1;
			}
			
			/* ONLY PROCEED IF REQUESTED PAGE EXISTS- i.e in the range 1 to totalPages - this may not be neccessary and next and back links will not appear when out of range */
			if ((gallery.pagesInCache > 0 && requestedPage > gallery.totalPages) || requestedPage == 0) return;
	
			
			/* update currentpage and if necessary highestPageVisited */
			if (button =="next") {
				/* increment currentPage */
				gallery.currentPage++;
				
				/* increment highestPageVisited if needed */
				if (gallery.currentPage > gallery.highestPageVisited){
					gallery.highestPageVisited = gallery.currentPage;
				}
			}
			else {
				/* decrement currentPage */
				gallery.currentPage--;
			}
						
			
			gallery.displayGalleryFromCache();
			if(button != "back" && !gallery.cacheContainsAllData){
				gallery.getQueryengineData();
			}
			return false;
			document.getElementById('vision-gallery-view').scrollintoview();
		},

		//queryEngine template for queryEngine data.Data output format is JSON
		getQueryengineData: function(){
			/* If this is a Gallery with Ratings enabled we need to ensure it's using the ratings config */
			if (vision.gallery.rating == "true"){
				var config = 'ratings';
			}
			else {
				var config = '';
			}
			var gallery = vision.gallery,
				getRef = glow.net.get("/cgi-perl/apps/ifl/queryengine.pl/apps/vision/gallery?config=" + config + ";pagesize=" + vision.gallery.queryEnginePageSize + ";page=" + vision.gallery.queryEnginePage +";sort_1=user_priority;sortsense_1=ASC;sort_2=submit_date;attrib_1=source;oper_1=contains;val_1_1=" + vision.gallery.source + ";OutputFormat=JSON;OutputContent=UTF-8", {
				//getRef = glow.net.get("/cgi-perlx/apps/ifl/queryengine.pl/apps/vision/gallery?Config=ratings;pagesize=" + vision.gallery.queryEnginePageSize + ";page=" + vision.gallery.queryEnginePage +";sort_1=moderation_lastupdate;sortsense_1=" + vision.gallery.order + ";sort_2=user_priority;attrib_1=source;oper_1=contains;val_1_1= 	 /testsite/visionapps/ugc/dev/ugc-uploadbridge.shtml ;OutputFormat=JSON;OutputContent=ISO-8859-1;JSEscape=1", {
			onLoad: function(response) {
					gallery.queryengineData = eval("(" + response.text() +")");
					var oData = vision.gallery.queryengineData;
					gallery.cache = gallery.cache.concat(oData.RECORD);
					gallery.totalPages = Math.ceil(oData.total_hits / gallery.imagesInPage);
					gallery.pagesInCache = Math.ceil(gallery.cache.length / gallery.imagesInPage);
					gallery.queryEnginePage++;
					if (gallery.pagesInCache == gallery.totalPages){
						gallery.cacheContainsAllData = true;
					}
					//gallery.displayGalleryFromCache();
				},
				onError: function(response) {
					alert("Error getting Gallery file: " + response.statusText());
				}
			});	
		},
		
		//Import cache images into gallery template from queryEngine 
		displayGalleryFromCache: function(){
			var elGallery = document.getElementById("vision-gallery-view"),
				gallery = vision.gallery;
			if(vision.gallery.type == "badge"){
				var titleHTML = '<h2>'+vision.gallery.viewtitle+'</h2><p class="vision-gallery-subtitle">'+vision.gallery.subtitle+'</p>';
			}
			else{
				var titleHTML = '<h2>'+vision.gallery.viewtitle+'</h2>'
			}
			/* work out what gallery need to be displayed */
			var firstImage = (gallery.currentPage - 1) * gallery.imagesInPage;
			var lastImage = firstImage + gallery.imagesInPage;
			var leftOver = 0;
			if (lastImage > gallery.totalImages){
				lastImage = gallery.totalImages;
				leftOver = gallery.imagesInPage - (gallery.totalImages%gallery.imagesInPage);
			}
			
			/* use cache to insert data into gallery template  */
			var galleryHTML = '<ul id="vision-gallery-grid">';
			for (var i = firstImage; i < lastImage; i++) {
				if(vision.gallery.namelength != "off"){
					var trimname = vision.gallery.trimData(gallery.cache[i].user_name, vision.gallery.namelength);
				}
				var trimtitle = vision.gallery.trimData(gallery.cache[i].user_title, vision.gallery.titlelength);		
				if(vision.gallery.namelength != "off"){
					if(vision.gallery.type == "badge"){
						var nameTitle = '<p><span class="user">By '+trimname+'</span></p>';
					}
					else if(vision.gallery.type == "stacked"){
						var nameTitle = '<p><a href="/apps/vision/gallery/assets/'+ gallery.cache[i].site +'/actual/' + gallery.cache[i].file_root +'.jpg" class="vision-gallery-'+vision.gallery.action+'"><span class="title">'+trimtitle+'</span></a><span class="user">By '+trimname+'</span></p><p>'+vision.gallery.cache[i].user_description+'</p>';
					}
					else{
						var nameTitle = '<p><a href="/apps/vision/gallery/assets/'+ gallery.cache[i].site +'/actual/' + gallery.cache[i].file_root +'.jpg" class="vision-gallery-'+vision.gallery.action+'"><span class="title">'+trimtitle+'</span></a><span class="user">By '+trimname+'</span></p>';
					}
				}
				else{
					var nameTitle = '<p><a href="/apps/vision/gallery/assets/'+ gallery.cache[i].site +'/actual/' + gallery.cache[i].file_root +'.jpg" class="vision-gallery-'+vision.gallery.action+'"><span class="title">'+trimtitle+'</span></a></p>';
				}
				imgType = gallery.cache[i].file_type;
				
				if (vision.gallery.pageperasset == "true") {
					if(vision.gallery.action == "nolightbox") {
						if (vision.gallery.assetpage !="") { //custom asset page was set
							galleryHTML += '<li><div class="'+imgType+'"><span></span><a href="' + vision.gallery.assetpage + gallery.cache[i].id + '"><img title="" alt="" src="/apps/vision/gallery/assets/'+ gallery.cache[i].site +'/thumb_'+vision.gallery.thumb+'/'+ gallery.cache[i].file_root+'.jpg" /></a></div>'+nameTitle;
						}
						else { //give asset unique URL but open in lightbox
							galleryHTML += '<li><div class="'+imgType+'"><span></span><a href="/testsite/visionapps/gallery/assetpage.shtml' + gallery.cache[i].id +'"><img title="" alt="" src="/apps/vision/gallery/assets/'+ gallery.cache[i].site +'/thumb_'+vision.gallery.thumb+'/'+ gallery.cache[i].file_root+'.jpg" /></a></div>'+nameTitle;
						}
					}
					else {
						galleryHTML += '<li><div class="'+imgType+'"><span></span><a href="/testsite/visionapps/gallery/assetpage.shtml?' + gallery.cache[i].id +'" class="vision-gallery-'+vision.gallery.action+'"><img title="" alt="" src="/apps/vision/gallery/assets/'+ gallery.cache[i].site +'/thumb_'+vision.gallery.thumb+'/'+ gallery.cache[i].file_root+'.jpg" /></a></div>'+nameTitle;
					}
				}
				else {
					galleryHTML += '<li><div class="'+imgType+'"><span></span><a href="/apps/vision/gallery/assets/'+ gallery.cache[i].site +'/actual/' + gallery.cache[i].file_root +'.jpg" class="vision-gallery-'+vision.gallery.action+'"><img title="" alt="" src="/apps/vision/gallery/assets/'+ gallery.cache[i].site +'/thumb_'+vision.gallery.thumb+'/'+ gallery.cache[i].file_root+'.jpg" /></a></div>'+nameTitle;
				}
				
				/* Check whether or not to insert Rating values */
				if(vision.gallery.rating == 'true'){
					var ratingHTML = vision.gallery.displayRatingValue(vision.gallery.cache[i].id, vision.gallery.cache[i].ratings_mean, vision.gallery.cache[i].ratings_maxchoice);               
					galleryHTML += ratingHTML + '</li>';
				}
				else {
					galleryHTML += '</li>';
				}
			}
			galleryHTML += '</li>';
			
			/* fill in any empty spaces when there's not a full page of images to show */
			if (lastImage == gallery.totalImages){
				for (var i = 0; i < leftOver; i++) {
					if (vision.gallery.rating == "true"){
						var noimageClass = "noimage noratings";
					}
					else{
						var noimageClass = "noimage";
					}
				galleryHTML += '<li class="'+noimageClass+'"><div class="image"></div><p><span class="title"></span><span class="user"></span></p></li>'
				}	
			}
			galleryHTML += '</ul>';
			 
			//end
			
			/* work out what links should be in pagination navigation */ 
			if (gallery.currentPage == 1){
				var htmlNav = htmlNavNext;
			}
			else if (gallery.currentPage == vision.gallery.totalPages){
				var htmlNav = htmlNavBack;
			}
			else {
				var htmlNav = htmlNavBoth;
			}
			
			var linksHTML = '<div id="vision-gallery-nav">' + htmlNav + '</div>';

			/* insert all html */
			elGallery.innerHTML = titleHTML + galleryHTML + linksHTML;
			vision.gallery.onLoad();
			vision.gallery.initActions();
			if(vision.gallery.rating == "true"){
				vision.ratings.rankstars();
			};
		},
		
		
		//check which type of action to use
		initActions:function(){
			if(vision.gallery.bookmarks != "true"){
			var lightboxable = glow.dom.get("a.vision-gallery-lightbox");
			var popoverable = glow.dom.get("a.vision-gallery-popover");
					for (var i=0;i<lightboxable.length;i++){
						lightboxable[i].id = "thumb-"+i;
						var listener = glow.events.addListener(
						        lightboxable[i],
						        'click',
						        function (event) {
								var id = this.id.split("-")[1];
								if(vision.gallery.type != "badge"){
									nid = parseFloat(id);
									if(nid%2 == 0){
									nid = nid / 2;
									}
									else{
										nid = (nid - 1) / 2;
									}
								}
								else{
									nid = parseFloat(id);
								}
								
								newID = nid+ ((vision.gallery.currentPage - 1)*vision.gallery.imagesInPage);					
								vision.gallery.getLightboxData(newID);
								return false;
						        }
						);
					}
					for (var i=0;i<popoverable.length;i++){
						popoverable[i].id = "thumb-"+i;
						popoverable[i].onclick = function() {
								var id = this.id.split("-")[1];
								nid = parseFloat(id);
								newID = nid+ ((vision.gallery.currentPage - 1)*vision.gallery.imagesInPage);					
									vision.gallery.getPopoverData(newID);
									return false;
						}
						/*var listener = vision.events.addListener(
						        popoverable[i],
						        'click',
						        function (event) {
								alert("clickd!");
								var id = this.id.split("-")[1];
								nid = parseFloat(id);
								newID = nid+ ((vision.gallery.currentPage - 1)*vision.gallery.imagesInPage);					
									vision.gallery.getPopoverData(newID);
									return false;
						        }
						);*/
					}
			}
			else{
				/*
				 
				 If this is a bookmarkable video gallery - we need to know what the ID should be of the EMP video, and where to show it.
				 We get the ID from the URL
				 The element ID should be set as vision-gallery-emp XSSI option
				 
				*/
				vision.gallery.showEMP(vision.gallery.empsource, vision.gallery.clipid);
			}
		},
		
		
		//set up lightbox - run once onload
		setupLightbox:function(){
		
		lightboxRedesign = new glow.widgets.Panel("#lightboxRedesign", {
				width: 715,
				x:"50%",
				y:"20%",
				closeOnMaskClick:false,
				template:
				    '<div class="custom-panel">' +
				      '<div class="panel-hd"></div>' +
				      '<a class="panel-close"  id="vision-lightbox-close" href="#" title="Close">X</a>' +
				      '<div class="panel-bd"></div>' +
				    '</div>'
			});
		glow.events.addListener(lightboxRedesign, "show",  function() {
			setTimeout(function() {
				if (lightboxRedesign.container.height() > glow.dom.get(window).height()) {
					lightboxRedesign.autoPosition = false;
					lightboxRedesign.container.css("top", glow.widgets._scrollPos().y + "px").css("position", "absolute");
					
				}	
			}, 0)
			
		});
		wallMask = new glow.widgets.Mask({
			color:'#333333',
			zIndex:'9990',
			opacity:'0.4'
		});
		wallpaperPanel = new glow.widgets.Panel("#wallpaperPanel", {
				width: 348,
				height: 400,
				x:"50%",
				y:"20%",
				closeOnMaskClick:false,
				mask:wallMask,
				template:
				    '<div class="wallpaper-custom-panel">' +
				      '<div class="panel-hd"></div>' +
				      '<a class="panel-close"  id="vision-lightbox-close" href="#" title="Close">X</a>' +
				      '<div class="panel-bd"></div>' +
				      '<div class="panel-ft"></div>' +
				    '</div>'
			});
			glow.events.addListener(lightboxRedesign, "hide",  function() {
			lightboxRedesign.autoPosition = true;
		});
			return true;
		},
		
		/* Function to get each asset ID and their associated rating values
		then display rating stars accordingingly using CSS
		Mimics what's going on in IFL::Template (main_ratings.tmpl)*/
		
		displayRatingValue: function (id, ratings_mean, ratings_maxchoice) {
			if (ratings_mean > 0 ) {
				var ratingsHTML =
				'<div class="vision-ratings-view">' +
					'<h3>' + vision.ratings.viewtitle + '</h3>' +
					'<div class="vision-ratings-rank">' +
						'<span class="vision-ratings-score">' + ratings_mean + '</span> out of <span class="vision-ratings-maxscore">' + ratings_maxchoice + '</span>' +
					'</div>' +
				'</div>';
			}
			else {
				var ratingsHTML =
				'<div class="vision-ratings-view">' +
					'<h3>' + vision.ratings.viewtitle + '</h3>' +
					'<p>Item not yet rated</p>' +
				'</div>';
			}
			return(ratingsHTML);
		},
		
		
		/*
		
		Function to do trimming of names and titles to desired length
		Mimics what's going on in IFL::Template (main.tmpl) too
		
		*/
		trimData:function(text, length){
			if(text != null){
				trim = new RegExp('^(.{0,'+length+'}[^ ]+)'); /* matches any characters between 0 and length, followed by 1 or more characters that are not a whitespace to stop truncation in middle of a word */
		
				trimtext = trim.exec(text);
				if(text.length < length){
					text = trimtext[0];
				}
				else{
					text = trimtext[0] +"...";
				}
			}
			else{
				text = "Unknown";
			}
			return(text);
		},
		
		/*
		 
		 Function to build and popup a lightbox
		 Just needs an ID of the asset
		 
		*/
		getLightboxData:function(id){
			var wallpaperStatus = vision.gallery.cache[id].is_wallpaper;
		
			//console.log(wallpaperStatus);
			var count = id+1;
			if(vision.gallery.slideshowState != "none"){
				var slideshowControls = '<p id="vision-gallery-slideshowcontrols"><a class="pause" href="#" onclick="vision.gallery.stopSlideshow('+id+');return false;" title="Pause">pause</a><a class="play"  href="#" onclick="vision.gallery.restartSlideshow('+id+');return false;" title="Play">play</a></p>';
			}
			else{
				var slideshowControls = "<span id='vision-slideshow-placeholder'></span>";
			}
			if(vision.gallery.wallpaper == "true" && wallpaperStatus != "N"){
				var wallpaperLink = '<p id="vision-gallery-wallpaperlink"><a href="#">Download as wallpaper</a></p>';
				glow.dom.get(".custom-panel").addClass("wallpaper-lb");
				glow.dom.get(".custom-panel").removeClass("normal-lb");
			}
			else{
				var wallpaperLink = '';
				glow.dom.get(".custom-panel").addClass("normal-lb");
				glow.dom.get(".custom-panel").removeClass("wallpaper-lb");
			}
		
			/*
			
			Get lightbox naviation
			
			*/
			
			if(count == vision.gallery.totalImages){
				var htmlNav = '<div id="vision-gallery-lightboxnav">'+wallpaperLink+'<p class="back" title="Back"><a href="#" onclick="vision.gallery.swapLightbox(\'back\','+id+');return false;">Back</a></p>' + slideshowControls
				+ '<p class="forward forwardoff" title="Next"><a href="#">Next</a></p><p id="vision-gallery-lightboxcount">Image '+count+' of '+vision.gallery.totalImages+'</p></div>';
			}
			else if(count == 1){
				var htmlNav = '<div id="vision-gallery-lightboxnav">'+wallpaperLink+'<p class="back backoff" title="Back"><a href="#">Back</a></p>' + slideshowControls
				+  '<p class="forward" title="Next"><a href="#" onclick="vision.gallery.swapLightbox(\'next\','+id+');return false;">Next</a></p><p id="vision-gallery-lightboxcount">Image '+count+' of '+vision.gallery.totalImages+'</p></div>' ;
			}
			else if(count == 0){
				var htmlNav = '<div id="vision-gallery-lightboxnav">'+wallpaperLink+'<p class="back backoff" title="Back"><a href="#">Back</a></p>' + slideshowControls
				+ '<p class="forward forwardoff" title="Next"><a href="#"></a>Next</p><p id="vision-gallery-lightboxcount">Image '+count+' of '+vision.gallery.totalImages+'</p></div>';
			}
			else{
			var htmlNav = '<div id="vision-gallery-lightboxnav">'+wallpaperLink+'<p class="back" title="Back"><a href="#" onclick="vision.gallery.swapLightbox(\'back\','+id+');return false;">Back</a></p>' + slideshowControls
				+ '<p class="forward" title="Next"><a href="#" onclick="vision.gallery.swapLightbox(\'next\','+id+');return false;">Next</a></p><p id="vision-gallery-lightboxcount">Image '+count+' of '+vision.gallery.totalImages+'</p></div>';
			}
			
			
			/*
			 
			Build the contents of the lightbox from the cache
			
			*/			
			var type = vision.gallery.cache[id].file_type;
			var description = vision.gallery.cache[id].user_description;
			
			if(description != null){
				description = description.replace(/\n/g, "<br />");
			}
			
			var name = vision.gallery.cache[id].user_name;
			var title = vision.gallery.cache[id].user_title;
			var itemid = vision.gallery.cache[id].id;
			if(description == null){
				description = " ";
			};
			if(vision.gallery.namelength != "off"){
				if(name ==null){
					name = " ";
				}
				else{
					name = "by " + name;
				}
			}
			else{
				name = "";
			}
			if(title == null){
				title= " ";
			};
			if(type == "Image"){
				
				if(vision.gallery.format == "widescreen"){
					if(count == vision.gallery.totalImages){
					var img = '<div id="vision-gallery-lightboximg"><span></span><img src="/apps/vision/gallery/assets/'+ vision.gallery.cache[id].site +'/widescreen/'+ vision.gallery.cache[id].file_root +'.jpg" alt="'+title+'" /></div>'+htmlNav;
					}
					else{
					var img = '<div id="vision-gallery-lightboximg-trans"><span></span><img src="/apps/vision/gallery/assets/'+ vision.gallery.cache[id+1].site +'/widescreen/'+ vision.gallery.cache[id+1].file_root +'.jpg"  alt="'+title+'" /></div><div id="vision-gallery-lightboximg"><span></span><img src="/apps/vision/gallery/assets/'+ vision.gallery.cache[id].site +'/widescreen/'+ vision.gallery.cache[id].file_root +'.jpg" alt="'+title+'" /></div>'+htmlNav;
					}
				
				}
				else if (vision.gallery.rating == "true")
				{
					if(count == vision.gallery.totalImages) {
						var img = '<div id="vision-gallery-lightboximg"><span></span><img src="/apps/vision/gallery/assets/'+ vision.gallery.cache[id].site +'/actual_386/'+ vision.gallery.cache[id].file_root +'.jpg" alt="'+title+'" /></div><div id="vision-gallery-lightboxdesc"><p>'+ description +'</p></div>';
					}
					else {
						var img = '<div id="vision-gallery-lightboximg-trans"><span></span><img src="/apps/vision/gallery/assets/'+ vision.gallery.cache[id+1].site +'/actual_386/'+ vision.gallery.cache[id+1].file_root +'.jpg"  alt="'+title+'" /></div><div id="vision-gallery-lightboximg"><span></span><img src="/apps/vision/gallery/assets/'+ vision.gallery.cache[id].site +'/actual_386/'+ vision.gallery.cache[id].file_root +'.jpg" alt="'+title+'" /></div><div id="vision-gallery-lightboxdesc"><p>'+ description +'</p></div>';
					}
				}
				//Need to check if we're on the last image, since we don't need the transition image overlay
				else if(count == vision.gallery.totalImages){
					var img = '<div id="vision-gallery-lightboximg"><span></span><img src="/apps/vision/gallery/assets/'+ vision.gallery.cache[id].site +'/actual_386/'+ vision.gallery.cache[id].file_root +'.jpg" alt="'+title+'" /></div><div id="vision-gallery-lightboxdesc"><p>'+ description +'</p></div>'+htmlNav;
					
				}
				else{
					var img = '<div id="vision-gallery-lightboximg-trans"><span></span><img src="/apps/vision/gallery/assets/'+ vision.gallery.cache[id+1].site +'/actual_386/'+ vision.gallery.cache[id+1].file_root +'.jpg"  alt="'+title+'" /></div><div id="vision-gallery-lightboximg"><span></span><img src="/apps/vision/gallery/assets/'+ vision.gallery.cache[id].site +'/actual_386/'+ vision.gallery.cache[id].file_root +'.jpg" alt="'+title+'" /></div><div id="vision-gallery-lightboxdesc"><p>'+ description +'</p></div>'+htmlNav;
				}
			}
			else if(type == "Video"){
				if(vision.gallery.rating == "true") {
					var img = '<div id="vision-gallery-lightboximg"><div id="vision-gallery-empLB" class="player"><a href="http://www.adobe.com/go/getflash">Download the Adobe Flash player</a></div></div>';	
				}
				else {
					var img = '<div id="vision-gallery-lightboximg"><div id="vision-gallery-empLB" class="player"><a href="http://www.adobe.com/go/getflash">Download the Adobe Flash player</a></div></div>'+htmlNav;
				}
			}
			

			imgtitle = '<h2>'+title+' '+name+'</h2>';

				
			var ratingsForm =
				'<div id="vision-gallery-lightboxrating">'+
					'<h2>Rate this item</h2>' +
					'<form method="get" action="/apps/ifl/apps/vision/opinion/log2results/" class="vision-ratings-form" id="formArea-0">' +
						'<div>' +
							'<input type="hidden" name="L2REndPage" value="' + vision.gallery.thanksurl + '" />' +
							'<input type="hidden" name="source" value="' + vision.gallery.source + '::vapp::gallery::' + itemid + '" />' + /* notation ::vapp::gallery::itemid  used to extract correct values into DB table fields */
							'<input type="hidden" name="title" value="' + vision.gallery.source + '" />' +
							'<input type="hidden" name="max_choice" value="5" />' +
							'<input type="hidden" name="L2REndPage-non-js" value="" />' +
							'<input type="hidden" name="axis" value="default" />' +
						'</div>' +
						'<div class="vision-ratings-rating">' +
							'<div id="ratingArea-0" class="vision-rating-stars">' +
								'<div class="jsrate">' +
									'<a id="ratingArea-0-rate1" class="" title="1" onfocus="vision.ratings.rater.highlight(\'ratingArea-0\',1);" onclick="return vision.ratings.rater.chooseAction(\'ratingArea-0\',1);" onmouseover="vision.ratings.rater.highlight(\'ratingArea-0\',1);" onmouseout="vision.ratings.rater.reset(\'ratingArea-0\');" href="#"></a>' +
									'<a id="ratingArea-0-rate2" class="" title="2" onfocus="vision.ratings.rater.highlight(\'ratingArea-0\',2);" onclick="return vision.ratings.rater.chooseAction(\'ratingArea-0\',2);" onmouseover="vision.ratings.rater.highlight(\'ratingArea-0\',2);" onmouseout="vision.ratings.rater.reset(\'ratingArea-0\');" href="#"></a>' +
									'<a id="ratingArea-0-rate3" class="" title="3" onfocus="vision.ratings.rater.highlight(\'ratingArea-0\',3);" onclick="return vision.ratings.rater.chooseAction(\'ratingArea-0\',3);" onmouseover="vision.ratings.rater.highlight(\'ratingArea-0\',3);" onmouseout="vision.ratings.rater.reset(\'ratingArea-0\');" href="#"></a>' +
									'<a id="ratingArea-0-rate4" class="" title="4" onfocus="vision.ratings.rater.highlight(\'ratingArea-0\',4);" onclick="return vision.ratings.rater.chooseAction(\'ratingArea-0\',4);" onmouseover="vision.ratings.rater.highlight(\'ratingArea-0\',4);" onmouseout="vision.ratings.rater.reset(\'ratingArea-0\');" href="#"></a>' +
									'<a id="ratingArea-0-rate5" class="" title="5" onfocus="vision.ratings.rater.highlight(\'ratingArea-0\',5);" onclick="return vision.ratings.rater.chooseAction(\'ratingArea-0\',5);" onmouseover="vision.ratings.rater.highlight(\'ratingArea-0\',5);" onmouseout="vision.ratings.rater.reset(\'ratingArea-0\');" href="#"></a>' +
								'</div>' +
							'</div>' +
						'</div>' +
						'<div class="vision-rating-stars"></div>' +
						'<div class="vision-ratings-rating">' +
							/* adding class="vision-ratings-select" below to <select> makes select box disappear - ratings CSS */
							'<select name="choice" class="vision-ratings-select" id="ratingSelect-0"><option value="" selected="selected">- - Select one - -</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select>' +
						'</div>' +
						'<div class="vision-ratings-submit">' +
							'<input type="submit" value="Submit" title="Submit" class="vision-ratings-submit-btn" src="/apps/vision/ratings/css/f/submit.gif" />' +
						'</div>' +
					'</form>' +
				'</div>' + htmlNav;
				
			
			/*
			Put lightbox content into the lightbox itself
			*/
			
			lightboxRedesign.header.html(imgtitle);
			
			/* Determine whether or not to include Form inside lightbox */
			if(vision.gallery.rating == "true") {
				lightboxRedesign.body.html(img+ratingsForm);
			}
			else {
				lightboxRedesign.body.html(img);
			}
			
			/*
			  Checks to see what sort of lightbox we'll be needing
			  
			*/
			 if(type == "Video"){
				if(vision.gallery.empsource != "default"){
					lightboxRedesign.hide();
					vision.gallery.showEMP(vision.gallery.empsource, itemid);
					if(vision.gallery.empdescription != "default"){
						vision.gallery.showEMPDesc(vision.gallery.empdescription, id);
					}
				}
				else{
				lightboxRedesign.show();
				glow.dom.get(".custom-panel").addClass("widescreen-emp");
				vision.gallery.showEMP("vision-gallery-empLB", itemid);
				}
			 }
			 else if(vision.gallery.format == "widescreen"){
				glow.dom.get(".custom-panel").addClass("widescreen-emp");
				lightboxRedesign.show();
			}
			 else{
				glow.dom.get(".custom-panel").removeClass("widescreen-emp");
				lightboxRedesign.show();
			 }
			 
			 /*
			  
			   Add a click event to the close link - will also stop any animations in progress if the lightbox is shut and one is running
			   
			 */
			var closebutton = glow.dom.get("#vision-lightbox-close");
				var closer = glow.events.addListener(
						closebutton,
						 'click',
						function (event) {
							if(myAnim){
								myAnim.stop();
							}
							return false;
						        }
						);
			/*
			 
			 Setup a click event if the download as wallpaper link is available
			 
			*/
			if(vision.gallery.wallpaper == "true"){
				var wallpaperClickLink = glow.dom.get("#vision-gallery-wallpaperlink a");
				var wallpaperListener = glow.events.addListener(
								wallpaperClickLink,
								'click',
								function (event) {
									vision.gallery.wallpaperDownload(id);
									return false;
								}
							);
			}
			if(vision.gallery.slideshowState != "pause"){
				if(vision.gallery.slideshowState != "none"){
				vision.gallery.playSlideshow(id);
				}
			}
		
			if(vision.gallery.empsource == "default"){
					glow.dom.get("#vision-lightbox-close")[0].focus();
			}
		},
		
		/*
		 
		 function for wallpaper download process
		 requires ID of item to be downloaded
		 
		 */
		wallpaperDownload:function(id){	
			var assetID = vision.gallery.cache[id].id;
			var assetSite = vision.gallery.cache[id].site;
			var assetRoot = vision.gallery.cache[id].file_root;
			wallpaperPanel.header.html("<h2>Download as wallpaper <span class='wallpaper-steps'>Step 1 of 2</span></h2>");
			wallpaperPanel.body.html("<h3>What type of screen do you use?</h3> <ul><li><a href='#' class='wallpaper-option wallpaper-standard'>Standard</a></li><li><a href='#' class='wallpaper-option wallpaper-wide'>Wide</a></li></ul><p id='wallpaper-nav'><a href='#' id='wallpaper-cancel'>Cancel</a> <a href='#'id='wallpaper-continue'>Continue</a></p>");
			wallpaperPanel.show();
			
			/* need to stop the slideshow animation if that's going */
			if(myAnim){
				myAnim.stop();
				}
			/*
			 
			  Need to let user pick size wanted, and save that so we know which download to go and get
			  Get the two links, if the first is clicked (0) it's standard, if the second (1) it's wide.
			  
			*/
			
			var downloadLinks = glow.dom.get(".wallpaper-option");
			var len = downloadLinks.length;
			for (var i = 0; i < len; i++) {
			downloadLinks[i].id = i;
			var downloadLinksListener = glow.events.addListener(
				downloadLinks[i],
				'click',
				function(event){
					
					/* remove any highlight already applied*/
					glow.dom.get(".wallpaper-option").removeClass("wallpaper-standard-selected");
					glow.dom.get(".wallpaper-option").removeClass("wallpaper-wide-selected");
					/* highlight option selected */
					if(this.id == 0){
						glow.dom.get(".wallpaper-standard").addClass("wallpaper-standard-selected");
						var path = "wall_sxga";
						var height = "112px";
						var width = "149px";
					}
					else{
						glow.dom.get(".wallpaper-wide").addClass("wallpaper-wide-selected");
						var path = "wall_uxga";
						var height = "84px";
						var width = "149px";
					}
					/* highlight continue button */
					glow.dom.get("#wallpaper-continue").addClass("option-selected");
					glow.dom.get("#wallpaper-cancel").addClass("option-selected");
					
					
					var contLink = glow.dom.get("#wallpaper-continue");
					var contLinkListener = glow.events.addListener(
						contLink,
						'click',
						function(event){
							wallpaperPanel.header.html("<h2>Download as wallpaper <span class='wallpaper-steps'>Step 2 of 2</span></h2>");
							wallpaperPanel.body.html("<h3>Please wait while the image below loads</h3><p><img class='wallpaperThumb' height='"+height+"' width='"+width+"' /></p><p id='wallpaper-nav'><a href='#' id='wallpaper-back'>Back</a> <a href='#'id='wallpaper-done'>Done</a></p>");
							var wallpaperThumb = wallpaperPanel.body.get("img.wallpaperThumb");
							glow.events.addListener(wallpaperThumb, "load", function() {
								glow.dom.get(".wallpaper-custom-panel .panel-bd h3").html("Right-click the image below and select to save the image to your computer");
							});
							wallpaperThumb.attr('src', "http://" + vision.gallery.downloadserver + "/apps/vision/gallery/assets/"+ assetSite +"/"+path+"/"+ assetRoot +".jpg");
							
								/*
									  
								 Finally add listeners for back and done buttons
									
								*/
							
								glow.dom.get("#wallpaper-back").addClass("option-selected");
								glow.dom.get("#wallpaper-done").addClass("option-selected");
							
								var backLink = glow.dom.get("#wallpaper-back");
								var backLinkListener = glow.events.addListener(
									backLink,
									'click',
									function(event){
										/* hide the lightbox and start over! */
										wallpaperPanel.hide();
										vision.gallery.wallpaperDownload(id);
									}						
									);
								
								
								var doneLink = glow.dom.get("#wallpaper-done");
								var doneLinkListener = glow.events.addListener(
									doneLink,
									'click',
									function(event){
										wallpaperPanel.hide();
									}						
								);
							
						}
						);
					
					/*
						setup cancel link on first page - removes selection of wallpaper size and the event listener
					
					*/
					var cancelLink = glow.dom.get("#wallpaper-cancel");
					var cancelLinkListener = glow.events.addListener(
						cancelLink,
						'click',
						function(event){
							glow.dom.get("#wallpaper-continue").removeClass("option-selected");
							glow.dom.get("#wallpaper-cancel").removeClass("option-selected");
							glow.dom.get(".wallpaper-option").removeClass("wallpaper-standard-selected");
							glow.dom.get(".wallpaper-option").removeClass("wallpaper-wide-selected");
							glow.events.removeListener(contLinkListener);
						}
						
						);
					
					
					
					
					
					
				return false;	
				}
			
			)
			}
		},
		
		/*
		 
		 Function to build a popover (for the badge) and show it
		 Just needs an ID of an asset
		 
		*/
		getPopoverData:function(id){
			count = id+1;
			var grid = document.getElementById("vision-gallery-grid").innerHTML;
			var nav = document.getElementById("vision-gallery-nav").innerHTML;
			var type = vision.gallery.cache[id].file_type;
			var description = vision.gallery.cache[id].user_description;
			var name = vision.gallery.cache[id].user_name;
			var title = vision.gallery.cache[id].user_title;
			var itemid = vision.gallery.cache[id].id;
			if(description == null){
				description = " ";
			};
			if(name ==null){
				name = " ";
			}
			else{
				name = "by " + name;
			};
			if(title == null){
				title= " ";
			};
			closeButton = "<a href='#' class='vision-gallery-close'><img src='/apps/vision/gallery/css/badge/f/close.gif' alt='Close'></a>"
			img = '<li class="vision-gallery-popoverarea">'+closeButton+'<div id="vision-gallery-lightboximg"><span></span><img src="/apps/vision/gallery/assets/'+ vision.gallery.cache[id].site +'/thumb_286/'+ vision.gallery.cache[id].file_root +'.jpg" alt="Close lightbox" title="Close lightbox" /></div></li>';
			
			document.getElementById("vision-gallery-grid").innerHTML = img;
			//document.getElementById("vision-gallery-nav").innerHTML = "<p>"+title+" "+name+"</p>";
			document.getElementById("vision-gallery-nav").innerHTML = "";
			imgtitle = '<h2>'+title+' '+name+'</h2>';
			
			
			
			/*
			 
			 Wire close button up to replace the popover with the saved contents of the grid on click
			 
			*/
			closebutton = glow.dom.get(".vision-gallery-close");
				var returngrid = glow.events.addListener(
						closebutton,
						 'click',
						function (event) {
							document.getElementById("vision-gallery-grid").innerHTML = grid;
							document.getElementById("vision-gallery-nav").innerHTML = nav;
							vision.gallery.initActions();
							return false;
						        }
						);
			
					
		},
		
		
		/*
		
		EMP JS - shows the EMP vid in an element we specify
		Needs a valid element ID and an asset ID
		
		*/
		
		showEMP:function(element, itemid){
				
			var emp = new bbc.Emp();  
				emp.setWidth(vision.gallery.empwidth);  
				emp.setHeight(vision.gallery.empheight);    
				emp.setDomId(element);
				emp.setPlaylist("http://"+vision.gallery.domain+"bbc.co.uk/apps/ifl/apps/vision/gallery/queryengine?config=emp;attrib_1=source;oper_1=eq;val_1_1="+vision.gallery.source+";attrib_2=id;oper_2=eq;val_2_1="+itemid+";");  
				emp.write();
		},
		
		showEMPDesc:function(element, itemid){
			document.getElementById(element).innerHTML = "<p class='vision-emp-title'>"+vision.gallery.cache[itemid].user_title+"</p><p class='vision-emp-name'>"+vision.gallery.cache[itemid].user_name+"</p><p class='vision-emp-description'>"+vision.gallery.cache[itemid].user_description+"</p>";
			
		},
		
		/*
		 
		 Function to swap the contents of the lightbox on paging
		 Needs to know which way it's going and what the current id is
		 
		*/
		swapLightbox:function(direction,id){
				//get value for swapping page behind lightbox next
				if(direction == "back"){
					pageSwap = id;
				}
				else if(direction == "next"){
					pageSwap = id+1;
				}
				//pick which way to go next and swap page if on last
				if(pageSwap%vision.gallery.imagesInPage == 0){			
					if(direction == "back"){
						nextid = id-1
						vision.gallery.getGallery('back');
					}
					else if(direction == "next"){
						nextid = id+1
						vision.gallery.getGallery('next');
					}
				}
				else if(direction == "back"){
					nextid = id-1
				}
				else if(direction == "next"){
					nextid = id+1
				}
				vision.gallery.getLightboxData(nextid);
				return false;
		},
		
		/*
		 
		 Slide show functions
		 Need to know current asset ID
		 
		*/
		playSlideshow:function(id){			
			check = id+1;
			if(vision.gallery.totalImages != check){
				if(myAnim){
					myAnim.stop();
				}
				
				animObj = glow.anim.css("#vision-gallery-lightboximg-trans", 0.5, {"opacity": {from: "0", to: "1"}});
				myAnim = new glow.anim.Timeline([vision.gallery.slideshowpause, animObj]);
				myAnim.start();
				
				glow.events.addListener(myAnim, "complete", function() {						 
						vision.gallery.swapLightbox("next",id);
				});				
			}
			
		},
		
		
		stopSlideshow:function(id){
			vision.gallery.slideshowState = "pause";
			if(myAnim){
				myAnim.stop();
			}
		},
		
		
		restartSlideshow:function(id){
			vision.gallery.slideshowState = "play";
			vision.gallery.swapLightbox("next",id);
		}
		
		
	}//end gallery object
	
	//Gets glow - sets what modules we need for comments from glow. Add any new ones here. Calls vision.gallery.init when done to do onload functions
	gloader.load(["glow", "1", "glow.dom", "glow.events", "glow.anim", "glow.data", "glow.net", "glow.widgets.Panel", "glow.widgets.Mask"], {
			async: true,
			onLoad: function(glowInstance) {
			glow = glowInstance;
			glow.ready(vision.gallery.init);
		     }
		     });
	
	
})();//endenclosure