/*
Ten4 Slideshow
Ten4 Design Ltd
April 2011
*/

function refreshBackgrounds(selector) {
  // Chrome shim to fix http://groups.google.com/a/chromium.org/group/chromium-bugs/browse_thread/thread/1b6a86d6d4cb8b04/739e937fa945a921
  // Remove this once Chrome fixes its bug.
  if (/chrome/.test(navigator.userAgent.toLowerCase())) {
    $(selector).each(function() {
      var $this = $(this);
      if ($this.css("background-image")) {
        var oldBackgroundImage = $this.css("background-image");
        setTimeout(function() {
          $this.css("background-image", oldBackgroundImage);
        }, 1);
      }
    });
  }
}

var panels = [],
	move,
	i = 0,
	j = 1,
	t,
	trigger = false,
	$element = $('.slider');
	
function slideForwards()
{
//		Disable the slides until this one's done
	if (trigger == true)
	{
		return;
	}
	window.clearTimeout(t);
	trigger = true;

	hideDetails(panels[j]);
	
	if (j >= panels.length-1)
	{
		j = 0;
	}
	else
	{
		j += 1;
	}
	
	showDetails(panels[j]);
	
	$element.animate({
		marginLeft: '-=960'
	}, 900, function(){
			move = $(panels[i]).detach();
			$element.css('margin-left', -1440);
			move.appendTo($element);
			if (i >= panels.length-1)
			{
				i = 0;
			}
			else
			{
				i += 1;
			}
			trigger = false;
			
			t = window.setTimeout(slideForwards, 6000);
		});
	refreshBackgrounds(".panel");
};

function slideBackwards()
{
//		Disable the slides until this one's done
	if (trigger == true)
	{
		return;
	}
	window.clearTimeout(t);
	trigger = true;

	hideDetails(panels[j]);
	
	if (j == 0)
	{
		j = panels.length-1;
	}
	else
	{
		j -= 1;
	}
	
	showDetails(panels[j]);

	if (i == 0)
	{
		i = panels.length-1;
	}
	else
	{
		i -= 1;
	}

	move = $(panels[i]).detach();
	$element.css('margin-left', -2400);
	move.prependTo($element);
	$element.animate({
		marginLeft: '-1440'
	}, 1400, function(){
			trigger = false;
			t = window.setTimeout(slideForwards, 6000);
		});
		
	refreshBackgrounds(".panel");
};

function showDetails(panel)
{

	var text = $(panel).find('.panel-text')[0],
		image = $(panel).find('img')[0];
		
	image.style.top = (image.height * -1) + 'px';
	$(image).css({ opacity: 1 });

	$(text).animate({
		opacity: '1'
	}, 500);
		
	$(image).animate({
		top: '30px'
	}, 1500);

};

function hideDetails(panel)
{

	var text = $(panel).find('.panel-text')[0],
		image = $(panel).find('img')[0];
	
	$(text).animate({
		opacity: '0'
	}, 500);
	
	$(image).animate({
		top: '400px'
	//	opacity: '0'
	}, 700, function(){
		$(image).css({ opacity: 0 });
		image.style.top = '30px';
	});

};

$(document).ready(function(){
	
	$('.featured-slideshow img').css({ opacity: 0 });
	$('.panel-text').css({ opacity: 0 });

//		Store all the panels in an array
	$element
		.children()
		.each(function(){
			panels.push(this);
	});
	
	
//		Hide the slideshow
	$element.css('opacity', '0');
	
//		Set up the slide navigation
	$('#slide-prev').click(function(e){
		e.preventDefault();
		slideBackwards();
		refreshBackgrounds(".panel");
	});

	$('#slide-next').click(function(e){
		e.preventDefault();
		slideForwards();
		refreshBackgrounds(".panel");
	});

});

//	When all the images have loaded
$(window).load(function(){

//Remove the throbber, fade the slides in, and start the show
	$('section.featured-slideshow').css('background-image', 'none');
	$element.animate({
		opacity: 1
	}, 500, function(){
			showDetails(panels[1]);
			t = window.setTimeout(slideForwards, 4000);
		});

});