/**
* Science Festival jQuery vertical carousel plugin
*
* @author Brian Coit <www.line.uk.com>
*/
;(function($)
{
	$.fn.verticalCarousel = function(options)
	{
		var defaults = {
            jsonFile: false,
			delay: 5000,
			speed: 800,
			easing: 'easeOutSine'
        };

        var options = $.extend({}, defaults, options);

        return this.each(function()
        {
			var _this = $(this);

			/* load json */
			$.getJSON(options.jsonFile, function(data)
			{
				/* only use the json data if there's more than one image */
				if(data.length > 1)
				{
					buildCarousel(data, _this);
					applyCufon(_this);
					createControls(_this, data);

					/* mark the initial control element */
					$('.controls a:first', _this).addClass('active');

					startRotate(_this);
				}
				else
				{
					applyCufon(_this);
				}
				positionButton(_this);
			});
		});

		var mouseOver = false;
		var interval;

		function startRotate(container)
		{
			var fn = function()
			{
				if(!mouseOver)
				{
					var lim_a = $('.controls a', container).length - 1;
					var cur_a = $('.controls a[class=active]', container).index();

					var next_a = cur_a < lim_a
						? cur_a + 1
						: 0;

					$($('.controls a', container).get(next_a)).click();
				}

			};

			interval = setInterval(fn, options.delay);
		}

		function clickRotate(e, container, jumpLink)
		{
			e.preventDefault();

			clearInterval(interval);

			var scrollTo = jumpLink.index();

			$('.element-container', container)
				.css({
					position: 'relative'
				})
				.stop(false)
				.animate({
					top: parseInt(scrollTo * $('.element', container).height()) * -1 + 'px'
				}, options.speed, options.easing, function() {startRotate(container);});


		}

		function buildCarousel(data, container)
		{
			/* remove existing elements */
			$('.element', container).remove();

			if(container.width() < 400)
			{
				container.addClass('mini');
			}

			var containerInner = $('<div />').addClass('carousel-inner').appendTo(container);
			var elementContainer = $('<div />').addClass('element-container').appendTo(containerInner);

			/* element-container height */
			var height = 0;

			for(var i in data)
			{
				var element = $('<div />').addClass('element');
				var image = $('<div />').addClass('image');
				var imageElement = $('<img />').attr('src', data[i].src);

				imageElement.appendTo(image)

				imageElement.load(function()
				{
					height = height + imageElement.height();
					elementContainer.height(height);

					containerInner.height(imageElement.height());
				});

				/* create the basic carousel element container with image */
				
				image.appendTo(element);
				element.appendTo(elementContainer);

				/*  */
				var overlay = $('<div />').addClass('overlay');
				// title, subtitle, button

				var split_sentence = data[i].title.split(/<br[^>]*>/gi);

				for(var j in split_sentence)
				{
					$('<p />').addClass('title').addClass('title-' + j).html(split_sentence[j]).appendTo(overlay);
				}
				
				if(data[i].subtitle.length)
				{
					$('<p />').addClass('subtitle').html(data[i].subtitle).appendTo(overlay);
				}
				$('<p />').addClass('button').html('<em>' + data[i].link_text + '</em>').appendTo(overlay);

				imageElement.wrap('<a href="'+data[i].link+'" />');
				overlay.find('> *').wrap('<a href="'+data[i].link+'" />');

				/* bind click to each element */

				element.hover(function()
				{
					mouseOver = true;
				},
				function()
				{
					mouseOver = false;
				})
				/* change cursor to pointer */
				.css({
					cursor: 'pointer'
				});

				overlay.appendTo(element);
			}
		}

		function createControls(container, data)
		{
			var c = $('<div />').addClass('controls').appendTo(container);

			for(var i in data)
			{
				var a = $('<a />').text(parseInt(i) + 1).attr('href', '#').appendTo(c);
				a.click(function(e)
				{
					$(this).parent().find('*').removeClass('active');
					$(this).addClass('active');
					clickRotate(e, container, $(this));
				});
			}
		}

		function applyCufon(container)
		{
			Cufon.replace($('p.title, p.button', container), {fontFamily: 'Futura Std Medium'});
		}

		function positionButton(container)
		{
			$('.element', container).each(function()
			{
				var button = $('.button', this);
				var x = $('.subtitle', this).outerWidth();
				var y = button.find('a, em').width();
				var v = y;


				button.find('a, em').css({
					marginLeft: v + 'px'
				});
			});
		}
	}
})
(jQuery);