/*----------------------------------------------------------------------------

[WebVision Scrolling Gallery]

Project:	    	Emap Templates
Version:	    	1.1.0
Primary use:		For use on article pages of WebVision 3.0
Original Author: 	Darren Waddell
Last change:		06/04/10 [See change history]
Last Assigned to:	Qasim Alyas

Change history:
+ 1.1.0
	- Amended element creation
	- Removed animated height
	- Added credit and setCredit method
	- Added target_blank attribute

-----------------------------------------------------------------------------*/


(function($) {
		
	$.fn.extend({
		createGallery: function(options) {
			return this.each(function() {
				var $this = $(this);
				$(window).load(function()	{
					$.wvGallery.init($this, $.extend({}, $.fn.createGallery.defaults, options));
				});
			});
		}
	});
			
	$.fn.createGallery.defaults = {
		url: '/AJAX/gallery_contents.aspx',
		onLoad: null,
		imageList: {},
		images: 'div.showing li',
		thumbsContainer: 'div.thumbs',
		thumbs: 'div.thumbs li',
		thumbFade: 0.7,
		thumbFadeDuration: 200,
		numThumbsShown: 5,
		currentPosition: 0,
		scrollDuration: 500,
		fixHeight: true,
		maxHeight: 0,
		loadingClass: 'ajax_loading',
		loadingOpacity: 0.7
	};

	$.extend({
		
		wvGallery: {
			
			_uID: 0,
			settings: [],
			
			init: function(jQobj, settings)	{
				var pointer = this;
				var inst = this._uID;
				// Save settings
				this.settings[inst] = settings;
				// First, get and save the max height, and set up the required padding on the first item
				this.setupFirstPicture(jQobj, this.settings[inst]);
				// Add in the left and right arrows
				this.createScrollButtons(jQobj, inst);
				// Fetch results
				$.getJSON(this.settings[inst].url, function(reply)	{
					$.each(reply.images, function(i, image)	{
						// create list container
						var list = $('<li></li>');

							// create preview link
							var previewLink = $('<a href=""></a>').appendTo(list);
								// create preview image
								var previewLinkImage = $('<img />').attr('src', image.filename).appendTo(previewLink);

							// create preview data container
							var imageDataContainer = $('<div></div>')
								.addClass('previewData').appendTo(list);

								// create image caption
								var imageDataCaption = $('<p></p>')
									.text(image.caption || '').appendTo(imageDataContainer);

								// create source container
								var imageDataSource = $('<span></span>')
									.addClass('credit')
									.text('Source: ').appendTo(imageDataContainer);
									// create source link
									var imageDataLink = $('<a href="#"></a>')
										.attr('target','_blank')
										.attr('href',image.creditlink || '')
										.text(image.credittext || '').appendTo(imageDataSource);

						// apend list to
						list.appendTo($(pointer.settings[inst].images).parent());
					});
					pointer.calculateScrollDistance(jQobj, pointer, inst);
					// Set the width of the thumb container
					pointer.setThumbContainerWidth(jQobj, pointer.settings[inst]);
					// Position captions
					pointer.positionCaptions(jQobj, pointer.settings[inst]);
					// Set up the thumbnail fading
					pointer.setThumbFade(jQobj, pointer.settings[inst]);
					// Set up show/hide for captions
					pointer.setCaptionFade(jQobj, pointer.settings[inst]);
					// Set up show/hide for credit
					pointer.setCredit(jQobj, pointer.settings[inst]);
					// Set up selection of new image
					pointer.showNewPicture(jQobj, pointer.settings[inst]);
					// Click for next image
					pointer.clickForNextImage(jQobj, pointer.settings[inst]);
					// Hide the loader!
					$(pointer.settings[inst].images).addClass('loaded');
					pointer.settings[inst].loadScreen.fadeOut(1000, function()	{	$(this).remove();	});
					pointer._uID++;
				});
			},
			
			setupFirstPicture: function(jQobj, settings)	{
				// Set the CSS to include 'zoom: 1' for ie
				$(jQobj).find(settings.images).css('zoom', 1);
				this.createLoader(jQobj, settings);
				settings.loadScreen.animate({
					'height': settings.maxHeight			
				}, 1000);
			},
			
			createLoader: function(jQobj, settings)	{
				var pointer = this;
				settings.loadScreen = $('<div></div>').addClass(settings.loadingClass).appendTo(document.body);	
				settings.loadScreen.css({
					'top': $(jQobj).find(settings.images).eq(0).offset().top,
					'left': $(jQobj).find(settings.images).eq(0).offset().left,
					'width': $(jQobj).find(settings.images).eq(0).width(),
					'height': $(jQobj).find(settings.images).eq(0).height(),
					'opacity': settings.loadingOpacity
				});
			},
		
			createScrollButtons: function(jQobj, inst)	{
				// Save a reference to this plugin
				var pointer = this;
				var settings = this.settings[inst];
				// Check to see if the number of thumbs is greater than the required thumbs shown
				if($(jQobj).find(settings.thumbs).length > settings.numThumbsShown)	{
					// Create buttons
					settings.previousButton = $('<span class="previousButton">Previous thumbnails</span>');
					settings.nextButton = $('<span class="nextButton">Next thumbnails</span>');
					// Stick them in at the beginning and end of the thumb container
					$(jQobj).find(settings.thumbsContainer).prepend(settings.previousButton).append(settings.nextButton);
					// Add functionality
					settings.previousButton.click(function()	{	
						pointer.scrollLeft(jQobj, pointer, inst)	
					});
					settings.nextButton.click(function()	{	
						pointer.scrollRight(jQobj, pointer, inst)	
					});
				}
			},
		
			scrollLeft: function(jQobj, pointer, inst)	{
				if(pointer.settings[inst].currentPosition < 0)	{
					pointer.settings[inst].currentPosition = parseInt($(pointer.settings[inst].thumbs).parent().css('left')) + pointer.settings[inst].scrollDistance;
					// Temporarily remove the click event from the button
					pointer.settings[inst].previousButton.unbind('click');
					// Animate the scrolling...
					$(jQobj).find(pointer.settings[inst].thumbs).parent().animate({
						left: '+=' + pointer.settings[inst].scrollDistance + 'px'
					},
					{
						duration: pointer.settings[inst].scrollDuration,
						complete: function()	{
							pointer.settings[inst].previousButton.click(function()	{	pointer.scrollLeft(jQobj, pointer, inst)	});
						}
					});
				}
			},
			
			scrollRight: function(jQobj, pointer, inst)	{
				if(-(pointer.settings[inst].currentPosition - pointer.settings[inst].scrollDistance) < pointer.settings[inst].totalThumbContainerWidth)	{
					// Save the new position
					pointer.settings[inst].currentPosition = parseInt($(pointer.settings[inst].thumbs).parent().css('left')) - pointer.settings[inst].scrollDistance;
					// Temporarily remove the click event from the button
					pointer.settings[inst].nextButton.unbind('click');
					// Animate the scrolling...
					$(jQobj).find(pointer.settings[inst].thumbs).parent().animate({
						left: '-=' + pointer.settings[inst].scrollDistance + 'px'
					},
					{
						duration: pointer.settings[inst].scrollDuration,
						complete: function()	{
							pointer.settings[inst].nextButton.click(function()	{	pointer.scrollRight(jQobj, pointer, inst)	});
						}
					});
				}
			},
			
			calculateScrollDistance: function(jQobj, pointer, inst)	{
				// Get the width of one of the thumbs
				pointer.settings[inst].thumbWidth = $(jQobj).find(pointer.settings[inst].thumbs).eq(0).width();
				// Add on any margin and padding
				pointer.settings[inst].thumbWidth += parseInt($(jQobj).find(pointer.settings[inst].thumbs).eq(0).css('margin-left'));
				pointer.settings[inst].thumbWidth += parseInt($(jQobj).find(pointer.settings[inst].thumbs).eq(0).css('margin-right'));
				pointer.settings[inst].thumbWidth += parseInt($(jQobj).find(pointer.settings[inst].thumbs).eq(0).css('padding-left'));
				pointer.settings[inst].thumbWidth += parseInt($(jQobj).find(pointer.settings[inst].thumbs).eq(0).css('padding-right'));
				// Calculate how much to scroll the thumbs
				pointer.settings[inst].scrollDistance = pointer.settings[inst].numThumbsShown * pointer.settings[inst].thumbWidth;
			},
		
			setThumbContainerWidth: function(jQobj, settings)	{
				settings.totalThumbs = $(jQobj).find(settings.thumbs).length;
				settings.totalThumbContainerWidth = settings.totalThumbs * settings.thumbWidth;
				$(jQobj).find(settings.thumbs).parent().css('width', settings.totalThumbContainerWidth + "px");
			},
			
			setThumbFade: function(jQobj, settings)	{
				$(jQobj).find(settings.thumbs).find('img').hover(
					function()	{
						$(this).animate(
							{	opacity: settings.thumbFade	},
							{	duration: settings.thumbFadeDuration,	queue: false	});
					},
					function()	{
						$(this).animate(
							{	opacity: 1	},
							{	duration: settings.thumbFadeDuration,	queue: false	});
					}
				);
			},
			
			showNewPicture: function(jQobj, settings)	{
				// Loop through all the thumbs
				$(jQobj).find(settings.thumbs).find('a').click(function()	{
					// Calculate which thumbnail was clicked on
					var index = $(this).parents('ul').children().index(this.parentNode);
					// Hide the existing image and show the new one
					$(jQobj).find(settings.images).removeClass('current').css('display', '').eq(index).addClass('current');
					return false;							 
				});
			},
		
			positionCaptions: function(jQobj, settings)	{
				$(jQobj).find(settings.images).css({
					'position': 'relative',
					'zoom': 1
				}).find('div').css({
					'position': 'absolute',
					'bottom': '0'
				});
			},
		
			setCaptionFade: function(jQobj, settings)	{
				$(jQobj).find(settings.images).find('div').each(function()	{
					if($(this).children('p').text() == '')	$(this).children('p').css('display', 'none');
				});
				$(jQobj).find(settings.images).hover(
					function()	{	$(this).find('div').fadeIn();		},
					function()	{	$(this).find('div').fadeOut();	}
				);
			},

			setCredit: function(jQobj, settings)	{
				$(jQobj).find(settings.images).find('span').each(function()	{
					if($(this).children('a').text() == '')	$(this).css('display', 'none');
					else if($(this).children('a').attr('href') == '') $(this).children('a').replaceWith($(this).children('a').text());
				});
			},
			
			clickForNextImage: function(jQobj, settings)	{
				var index, length = $(jQobj).find(settings.images).length - 1;
				$(jQobj).find(settings.images).find('A').click(function()	{
					$(jQobj).find(settings.images).each(function(i)	{
						if($(this).is(':visible'))	{
							index = i;
						}
					});
					/*If this link is a credit link, go to the page.*/
					if ( $(this).parent().attr('class') == 'credit') return;
					if(index >= length)	{
						$(jQobj).find(settings.thumbs).eq(0).find('a').click();
					}
					else	{
						$(jQobj).find(settings.thumbs).eq(index + 1).find('a').click();
					}
					return false;
				});
			}
		
		}
		
	});
	

$(function()	{
	$('div.gallery').createGallery({
		url: '/AJAX/gallery_contents.aspx?storycode=' + Config.get('storycode'),
			numThumbsShown:6,
			maxHeight: 370
		});
});

})(jQuery);