$(document).ready(function()
{
	(function($)
	{
		/**
		 * Create responsive media slider
		 *
		 * @date		2012-04-13
		 * @author		SIESQO <info@siesqo.be>
		 */
		$.fn.mediaSlider = function()
		{
			// count galleries
			var counter = 0;
	
			// loop for all slider galleries
			return this.each(function()
			{
				// define elements
				var $gallery		= $(this);
				var $indicatorBox	= $(this).find('.widgetGallerySliderIndicators');
				var indicatorsAdded	= false;
				var options			= {};
				var currentSlide	= -1;
				var width			= 0;
				var height			= 0;
				var indicators		= true;
				var clickedOnIndicator = false; // needed so the indicator click isn't interfered with the before function
			
				/**
				 * Start one gallery
				 */
				function init()
				{
					// add gallery to counter
					counter += 1;
	
					// redefine ids of prev and next
					$gallery.attr('id', 'mediaSlider-' + counter);
	
					// resize
					resize();
	
					// define options
					options = 
					{
						delay: -1000, 
						timeout: 4000, 
						fx: 'fade',
						prev: '#mediaSlider-' + counter + ' .prev', 
						next: '#mediaSlider-' + counter + ' .next', 
						pause: true, 
						pauseOnPagerHover: true,
						before: function(currSlideElement, nextSlideElement, options, forwardFlag)
						{
							// set current slide
							currentSlide = options.currSlide;
	
							// load only for start image
							if(currentSlide < 1)
							{
								// define next
								var next = $(nextSlideElement).find('.imageContainer');
	
								// load image
								if(next != null) jsFrontendResponsive.loadElementAsImage(next);
							}
	
							// change indicator
							if(indicators && !clickedOnIndicator)
							{
								// get indicator number
								showIndicatorNumber = (options.elements.length - 1 == currentSlide) ? 0 : currentSlide + 1;
	
								// update indicator
								updateIndicators(showIndicatorNumber);
							}
	
							// redefine always to false
							clickedOnIndicator = false;
						},
						after: function(currSlideElement, nextSlideElement, options, forwardFlag)
						{
							// remove preloaded class
							$(currSlideElement).find('.imageContainer').removeClass('imagePreloaded');
	
							// get the image after the next one
							var afterNext = (forwardFlag) ? $(nextSlideElement).next().find('.imageContainer') : $(nextSlideElement).prev().find('.imageContainer');
	
							// load image
							jsFrontendResponsive.loadElementAsImage(afterNext);
						}
					};
	
					// startup slider
					$gallery.find('.content ul').cycle(options);
	
					// add indicator
					if(indicators) addIndicators();
	
					// bind document resize handler
					$(window).on('smartresize', resize);
				};
	
				/**
				 * Add indicators
				 */
				function addIndicators()
				{
					// init count
					var count = $gallery.find('.imageContainer').length;
	
					// stop here: to less images, or indicators already added
					if(count <= 1 || indicatorsAdded)
					{
						indicators = false
						return false;
					}
	
					// indicators added
					indicatorsAdded = true;
	
					// init html for indicators
					var html = '<ul>';
	
					// loop
					for(var i = 0; i < count; i += 1)
					{
						html += '<li class="widgetGallerySliderIndicator"><a href="#/" data-id="' + i + '"></a></li>';
					}
	
					// add ending
					html += '</ul>';
	
					// add html for indicators
					$indicatorBox.html(html);
	
					// change indicator to first
					updateIndicators(0);
	
					// bind click
					$indicatorBox.on('click', 'a', indicatorClicked);
				};
	
				/**
				 * Indicator clicked, so we show other image
				 */
				function indicatorClicked(e)
				{
					// redefine
					clickedOnIndicator = true;
					
					// get clicked id
					var id = $(e.target).data('id');
	
					// update indicator
					updateIndicators($(e.target).parent());
	
					// get image
					var $image = $($gallery.find('.imageContainer').get(id));
	
					// load image
					jsFrontendResponsive.loadElementAsImage($image);
	
					// show clicked id
					$gallery.find('.content ul').cycle(id);
	
					// do nothing further
					return false;
				};
	
				/**
				 * Triggered when resize found place
				 */
				function resize()
				{
					// get new width from the parent element
					var newWidth = $gallery.parent().width();
	
					// only do this when image size has changed
					if(width != newWidth)
					{
						// define height and width at start
						if(height == 0)
						{
							width = $gallery.find('.inner').width();
							height = $gallery.find('.inner').height();
						}
	
						// calculate height
						height = parseInt(((height * newWidth) / width).toFixed(0));
	
						// define width
						width = newWidth;
	
						// redefine cycle width and height
						$gallery.find('.content ul').cycle({width : width, height : height});
	
						// add width and height because fader needs this (fix for the absolute positioning)
						$gallery.find('.inner').css({width : width, height : height, overflow: 'hidden'});
						$gallery.find('.inner ul').css({width : width, height : height});
						$gallery.find('.imageContainer').css({width : width, height : height});
	
						// add width to indicators box
						if(indicators) $indicatorBox.css('width', width);
	
						// reset the slider (stop - start)
						if(currentSlide != -1)
						{
							// stop gallery
							$gallery.find('.content ul').cycle('stop');
	
							// set starting slide where we stopped
							var defaults = $.extend({}, options, {delay : -options.timeout, startingSlide : currentSlide});
	
							// start gallery
							$gallery.find('.content ul').cycle(defaults);
						}
					}	
				};
	
				/**
				 * Update current indicator
				 *
				 * @param mixed $newCurrentIndicator	This can be the id, or the indicator <a> object.
				 */
				function updateIndicators($newCurrentIndicator)
				{
					if(!$newCurrentIndicator.length)
					{
						// get indicator object
						$newCurrentIndicator = $($($indicatorBox).find('li').get($newCurrentIndicator));
					}
	
					// remove previous selected classes
					$indicatorBox.find('li').removeClass('selected');
	
					// change indicator
					$($newCurrentIndicator).addClass('selected');
				};
	
				// startup
				init();
			});
		};
	})(jQuery);
	
	
	/**
	 * Slider for media
	 *
	 * @author Jeroen Desloovere <info@jeroendesloovere.be>
	 */
	jsFrontend.slider =
	{
		init: function()
		{
			// init fader
			if($('.widgetGallerySlider').length > 0)
			{
				$('.widgetGallerySlider').mediaSlider();
			}
		}
	}
	
	$(jsFrontend.slider.init);
});