﻿(function ($) {

	$.fn.funkySlider = function (options) {

		var settings = { interval: 10000, controlsAutoMargin: true };

		return this.each(function () {

			if (options) {
				$.extend(settings, options);
			}


			// if called on a list item add the outer container
			// otherwise assume $(this) is the outer container
			if ($(this).is('ul')) {
				var $OuterContainer = $('<div />');
				var $List = $(this);
				$List.after($OuterContainer);
				$OuterContainer.append($List);
			}
			else {
				var $OuterContainer = $(this);
				var $List = $(this).find('ul').first();
			}

			$OuterContainer.addClass('funkySliderOuterBox');
			$List.addClass('funkySliderList');


			// check list was found and that it has more than 1 element
			if ($List.size() > 0 && $List.children('li').size() > 1) {
				// add the inner container
				var $Container = $('<div class="funkySliderListBox" />');
				$List.after($Container);
				$Container.append($List);
				
				// add controls
				var $Controls = $('<div class="funkySliderControls" />');
				var $ControlsLeft = $('<div class="funkySliderControlsLeft" />');
				var $ControlsMid = $('<div class="funkySliderControlsMid" />');
				var $ControlsRight = $('<div class="funkySliderControlsRight" />');
				$Container.after($Controls);
				$Controls.append($ControlsLeft);
				$Controls.append($ControlsMid);
				$Controls.append($ControlsRight);

				function scrollToIndex(index) {
					$List.stop(true, true).animate({ left: ($List.parent().width() * index * -1) + 'px' });
				}

				function markControlLinkSelected(index) {
					$ControlsMid.children().removeClass('selected');
					$ControlsMid.children().eq(index).addClass('selected');
				}

				$List.children('li').each(function () {
					var idx = $List.children('li').index($(this));
					var $controlLink = $('<a href="#" />')

					$controlLink.click(function () {
						scrollToIndex(idx);
						markControlLinkSelected(idx);
						return false;
					});

					$ControlsMid.append($controlLink);
				});

				markControlLinkSelected(0);


				// auto margin
				if (settings.controlsAutoMargin) {
					var halfWidth = Math.floor($Controls.outerWidth(true) / 2);
					$Controls.css('margin-left', '-' + halfWidth +'px');
				}


				// copy first item to the end so we can cycle around
				$List.append($List.children('li').first().clone());

				var lastSlideIndex = $List.children('li').size() - 1;
				var slideIndex = 0;

				var itemWidth = $List.children('li').first().width();
				var itemHeight = $List.children('li').first().height();

				$List.css('width', (itemWidth * $List.children('li').size()) + 'px');

				$Container.css('height', itemHeight + 'px');
				$Container.css('width', itemWidth + 'px');


				// autoscroll function
				function autoScroll() {
					slideIndex++;

					if (slideIndex == lastSlideIndex) { // if moving to last slide
						$List.stop(true, true).animate({ left: ($List.parent().width() * slideIndex * -1) + 'px' }, 500, function () {
							$List.css('left', 0);
							slideIndex = 0;
							markControlLinkSelected(slideIndex);
						});
					}
					else {
						$List.stop(true, true).animate({ left: ($List.parent().width() * slideIndex * -1) + 'px' });
						markControlLinkSelected(slideIndex);
					}
				}


				// init autoscroll
				var seIntervalID = setInterval(autoScroll, settings.interval);


				// don't scroll on hover
				$OuterContainer.hover(
					function () {
						clearInterval(seIntervalID);
					},
					function () {
						seIntervalID = setInterval(autoScroll, settings.interval);
					}
				);
			}
		});
	};

})(jQuery);

