var currentBoxout = 0;
var animating = false;
var boxouts;
var menuItems;
var singleWidth;
var emailDefaultHandler;
var nameDefaultHandler;
var hideMessageTimeout;

function initBoxouts() {
	boxouts = $('.boxouts .boxout');
	menuItems = $('.boxouts .menu li');
	
	// Force width to allow IE overflow:hidden to actually work
	$('.boxouts .container').css({
	  width : $('.boxouts .container').width(),
	  position : 'relative'
	});
	
	// Create a wrapper around the boxouts that we can slide around
	// inside the "boxouts" element to create the illusion of a viewfinder
	// moving around
  $('.boxouts .menu li:first').addClass('active');
	boxouts.wrapAll('<div id="boxouts-wrapper"></div>');
	var wrapper = $('#boxouts-wrapper');
	singleWidth = $('.boxouts').width();
	wrapper.css({
		width : singleWidth * boxouts.size(),
		height : $('.boxouts').height(),
		position : 'relative',
		left : 0
	});
	
	// Lock width
	boxouts.css({
		width : singleWidth - 228,
		'float' : 'left'
	});
	
	// Add a click event for every corresponding menu item
	// to allow us to slide around
	menuItems.each(function(i) {
		var me = $(this);
		me.click(function() {
			if(animating)
				return false;
			menuItems.removeClass('active');
			me.addClass('active');
			showBoxout(i);
			return false;
		});
	});

  // Something for the newsletter form
  nameDefaultHandler = new InputDefaultHandler('.newsletters #name', 'Enter your name');
  emailDefaultHandler = new InputDefaultHandler('.newsletters #email', 'Enter your email');
}

// Show a boxout by sliding the wrapper to the right position
function showBoxout(i) {
	if(animating)
		return;
	animating = true;
	$('#boxouts-wrapper').animate(
		{ left : -(i * singleWidth) },
		500,
		'easeOutExpo',
		function() {
			animating = false;
			currentBoxout = i;
		});
}

function submitNewsletter() {
  var msgBox = $('.boxouts .newsletters .message');
  var fields = $('.boxouts .newsletters #name, .boxouts .newsletters #email');
  var submit = $('.boxouts .newsletters .submit');

  // Animate to show the form is now submitting
  fields.attr('readonly', true).animate({ opacity : .5 });
  submit.animate({ opacity : .5 }).attr('disabled', true);
  nameDefaultHandler.disable();
  emailDefaultHandler.disable();
  msgBox.hide().removeClass('error').text('Submitting...').fadeIn();

  $.post('newsletters.php', 
    {
      name : nameDefaultHandler.getValue(),
      email : emailDefaultHandler.getValue()
    }, function(result) {
      if(result.error) {
        // If we have an error then we probably want to show the form again
        // so the user can correct it or at least be aware of it
        nameDefaultHandler.enable();
        emailDefaultHandler.enable();
        fields.attr('readonly', false).animate({ opacity : 1 });
        submit.animate({ opacity : 1 }).attr('disabled', false);

        // Hide the error after 5 seconds, clear any previous attempt to hide
        if(hideMessageTimeout) {
          clearTimeout(hideMessageTimeout);
          delete hideMessageTimeout;
        }
        msgBox.text(result.message).addClass('error');
        hideMessageTimeout = setTimeout(function() {
          msgBox.fadeOut(500, function() {
            msgBox.removeClass('error');
            delete hideMessageTimeout;
          });
        }, 5000);
      } else {
        // Everything went alright, hide the form and just show the success
        // message
        msgBox.fadeOut(500);
        $('.boxouts .newsletters :input').fadeOut(500, function() {
          msgBox.text(result.message).fadeIn(500);
        });
      }
    }, 'json'
  );
}

$(initBoxouts);