var BD = BD || {};

BD.TopWowBlockController = function(elementId)
{
	var element = $(elementId);
		
	// Check that element exists before continuing
	if (element.length == 0)
	{
		return;
	}
	
	var slides = new BD.Stack();
	var currentSlideIndex = 0;
	var slideWidth = 0;
	var slideHeight = 0;
	var slideDuration = 300;	// In milliseconds
	var dimmedOpacity = 0.4;
	
	var showThumbsElement = element.find("[rel='show-thumbs']");
	var showSlidesElement = element.find("[rel='show-slides']");
	var zoomInElement = element.find("[rel='zoom-in']");
	var zoomOutElement = element.find("[rel='zoom-out']");
	var scrollLeftElement = element.find("[rel='scroll-left']");
	var scrollRightElement = element.find("[rel='scroll-right']");
	
	var leftCaptionElement = element.find(".left-caption .content");
	var rightCaptionElement = element.find(".right-caption .content");
	
	var thumbsElement = element.find('.thumbs');

	function show_thumbs()
	{
		thumbsElement.css('opacity', 0);
		thumbsElement.removeClass('hidden');
		thumbsElement.animate({opacity: 1}, slideDuration);
		showThumbsElement.addClass('hidden');
		showSlidesElement.removeClass('hidden');
	}
	
	function show_slides()
	{
		thumbsElement.animate(
			{opacity: 0},
			slideDuration,
			function() {
				thumbsElement.addClass('hidden');
				showThumbsElement.removeClass('hidden');
				showSlidesElement.addClass('hidden');
			}
		);
	}
	
	function zoom_in()
	{
		var currentSlide = slides.current();
		currentSlide.find('.small').addClass('hidden');
		currentSlide.addClass('zoomed-in');
		
		zoomInElement.addClass('hidden');
		zoomOutElement.removeClass('hidden');
	}
	
	function zoom_out()
	{
		var currentSlide = slides.current();
		currentSlide.find('.small').removeClass('hidden');
		currentSlide.removeClass('zoomed-in');
		
		zoomInElement.removeClass('hidden');
		zoomOutElement.addClass('hidden');
	}
	
	function set_captions()
	{
		var prevSlide = slides.relativeAt(-1);
		var nextSlide = slides.relativeAt(1);
		
		var leftContent = prevSlide.has('.caption') ? prevSlide.find('.caption').html() : '';
		var rightContent = nextSlide.has('.caption') ? nextSlide.find('.caption').html() : '';
		
		leftCaptionElement.html(leftContent);
		rightCaptionElement.html(rightContent);
	}
	
	function scroll_left()
	{
		var prevSlide = slides.relativeAt(-1);
		var currentSlide = slides.relativeAt(0);
		var nextSlide = slides.relativeAt(1);
		var nextNextSlide = slides.relativeAt(2);
		
		reset_current();
		
		nextNextSlide.css({
			'left': slideWidth*2+'px',
			'opacity': dimmedOpacity
		});
		
		// Animate
		prevSlide.animate(
			{'left': -slideWidth*2+'px'},
			slideDuration
		);
		
		currentSlide.animate(
			{
				'left': -slideWidth+'px',
				'opacity': dimmedOpacity
			},
			slideDuration
		);
		
		nextSlide.animate(
			{
				'left': '0px',
				'opacity': 1
			},
			slideDuration,
			reset_current
		);
		
		nextNextSlide.animate(
			{'left': slideWidth+'px'},
			slideDuration
		);
		
		slides.setRelativeOffset(1);
		set_captions();
	}
	
	function scroll_right()
	{
		var prevPrevSlide = slides.relativeAt(-2);
		var prevSlide = slides.relativeAt(-1);
		var currentSlide = slides.relativeAt(0);
		var nextSlide = slides.relativeAt(1);
		
		reset_current();
		
		prevPrevSlide.css({
			'left': -slideWidth*2+'px',
			'opacity': dimmedOpacity
		});
		
		// Animate
		prevPrevSlide.animate(
			{'left': -slideWidth+'px'},
			slideDuration
		);
		
		prevSlide.animate(
			{
				'left': '0px',
				'opacity': 1
			},
			slideDuration,
			reset_current
		);
		
		currentSlide.animate(
			{
				'left': slideWidth+'px',
				'opacity': dimmedOpacity
			},
			slideDuration
		);
		
		nextSlide.animate(
			{'left': slideWidth*2+'px'},
			slideDuration
		);
		
		slides.setRelativeOffset(-1);
		set_captions();
	}
	
	function reset_current()
	{
		var currentSlide = slides.relativeAt(0);
		
		// Reset zoom
		currentSlide.find('.small').removeClass('hidden');
		
		// Reset buttons
		showThumbsElement.toggleClass('hidden', currentSlide.hasClass('main'));
		zoomInElement.toggleClass('hidden', currentSlide.has('.large').length==0);
		zoomOutElement.addClass('hidden');
	}
	
	function on_drag(event, ui)
	{
		console.log(ui);
	}
	
	// Initialize
	showThumbsElement.click(show_thumbs);
	showSlidesElement.click(show_slides);
	zoomInElement.click(zoom_in);
	zoomOutElement.click(zoom_out);
	scrollLeftElement.click(scroll_left);
	scrollRightElement.click(scroll_right);
	
	showSlidesElement.addClass('hidden');

	// Collect slides
	element.find('.slides>li').each(function(key, e){
		slides.add($(e));
	});
	
	// Position slides
	slideWidth = slides.at(0).width();
	var offset = 0;
	var parentWidth = element.width();
	var parentHeight = element.height();
	slides.each(function(slide){
		slide.css('left', (slideWidth*offset)+'px');
		
		var large = slide.find('.large');
		if (large.length)
		{
			new BD.DraggingController(large, parentWidth, parentHeight);
		}
		
		// Touch events
		new BD.TouchController(
			slide.find('.small'),
			{
				swipeLeft: scroll_left,
				swipeRight: scroll_right
			}
		);

		offset++;
	});
	
	// Apply styles
	slides.at(-1).css({
		'left': -slideWidth+'px',
		'opacity': dimmedOpacity
	});
	slides.at(1).css('opacity', dimmedOpacity);
	
	reset_current();
	set_captions();
}