/*
 * gallery_slideshow.js
 * this little widget allows for the switching of a main image when clicking on thumbnails. Requires the following markup to work:
 * 
 * <div class="uktv-slideshow">
 * 	<img class="uktv-slideshow-mainimage" src=".." />
 *  <span class="uktv-slideshow-counter">x</span> of 12
 * 	<a href="{url returning json info on the image}" class="uktv-slideshow-thumblink">{thumbnail}</a>
 * 	<a href="{url returning json info on the image}" class="uktv-slideshow-thumblink">{thumbnail}</a>
 * 	<a href="{url returning json info on the image}" class="uktv-slideshow-thumblink">{thumbnail}</a>
 	...
 	
 	photo submitted by <a class="userlink" href="{link to user page}">username</a>
 * </div>
 * 
 * Example json to be returned from the thumbnail link:
 * 
 * {title:'Title',filename:'12846.jpg',description:'This is a description',uploadedByAdmin:0,userId:832522,userLink:'/#thisCircuit#/profile/uid/24342',uploadedBy:'mccart'}
 * 
 * ALL IMAGES MUST BE IN THE SAME DIRECTORY
 */


jQuery(document).ready(function(){
	jQuery('.uktv-slideshow').each(function(i){
		var mainImage = jQuery('img.uktv-slideshow-mainimage:first', this);
		var counter = jQuery('.uktv-slideshow-counter:first', this);
		var userLink = jQuery('.uktv-slideshow-userlink:first', this);
		
		jQuery('a.uktv-slideshow-thumblink', this).each(function(i){
			this.position = i+1;
			
		}).click(function(event){
			event.preventDefault();
			var position = this.position;
			var me = this;
			
			var ajaxCallback = function(data){
				me.data = data;
				switcher();
			}
			
			var switcher = function(){
				var arr = mainImage.attr('src').split('/');
				var newFileName = '';
				
				for(var i=0; i<arr.length-1; i++){
					newFileName += arr[i] + '/';
				}
				
				newFileName += me.data.filename;
				
				mainImage.fadeOut('fast', function(){
					counter.html(position);
					userLink.html(me.data.uploadedBy);
					userLink.attr('href', me.data.userLink);
					
					mainImage.attr('src', newFileName);
					mainImage.fadeIn('slow');
				});
			}
			
			if (!me.data) {
				jQuery.get(this.href, {}, ajaxCallback, 'json');
			} else {
				switcher();
			}
			
		});
	});
});