$(document).ready(function() {
	// Toggle header width
	jQuery.fn.slideHorizonToggle = function(duration) {
		return this.animate({width: 'show', opacity: '100'}, duration || 600);
		// return this.animate({width: 'toggle', opacity: 'toggle'}, duration || 600);
	};

	// Close items horizontally
	jQuery.fn.slideHorizonClose = function(duration) {
		return this.animate({width: 'hide', opacity: '0'}, duration || 600);
	};

	// Close items horizontally
	jQuery.fn.slideHorizonOpen = function(duration) {
		return this.animate({width: 'show', opacity: '100'}, duration || 600);
	};

	// Fade Toggle
	jQuery.fn.fadeToggle = function(speed, easing, callback) {
		return this.animate({opacity: 'toggle'}, speed, easing, callback);
	};
	
	// Set body bg position
	$('body').css({backgroundPosition: '716px -20px'});

	// Adds close button to screenshot divs
	$('#screen1').prepend('<a href="#" id="close1" class="close"><span class="hide">Close</span></a>');
	$('#screen2').prepend('<a href="#" id="close2" class="close"><span class="hide">Close</span></a>');
	$('#screen3').prepend('<a href="#" id="close3" class="close"><span class="hide">Close</span></a>');
	$('#screen4').prepend('<a href="#" id="close4" class="close"><span class="hide">Close</span></a>');
	$('#screen5').prepend('<a href="#" id="close5" class="close"><span class="hide">Close</span></a>');
	$('#documentation').prepend('<a href="#" id="closedoc" class="close"><span class="hide">Close</span></a>');
	$('#screens').prepend('<div id="empty">&nbsp;</div>');

	// toggles the slickbox on clicking the noted link
	$('a#starts-screen').click(function() {
		$('#feature1').toggleClass('selected').siblings().removeClass('selected')
		$('#documents-link').removeClass('selected');
		$('div.screenshot.active').removeClass('active').slideHorizonClose();

		if ( $('#feature1').hasClass('selected') )
			$('#screen1').addClass('active')
			.animate({opacity: 0}, 400)
			.slideHorizonOpen(600);
		if ( !$('#feature1').hasClass('selected') )
			$('#screen1').addClass('active')
			.slideHorizonClose(600);

		if ( $('#feature1').hasClass('selected') )
			$('#container').animate({ 'left': '725px' }, 600)
				.addClass('open')
			$('#sidebar').fadeOut();
		if ( !$('#feature1').hasClass('selected') )
			$('#container').animate({ 'left': '500' }, 600)
				.removeClass('open');

		if ( $('#container').hasClass('open') )
			$('#sidebar').fadeOut()
		if ( !$('#container').hasClass('open') )
			$('#sidebar').fadeIn()

		if ( $('#container').hasClass('open') )
			$('#empty').fadeIn();
		if ( !$('#container').hasClass('open') )
			$('#empty').fadeOut();

		$("body").animate({backgroundPosition: '(714px 39px)'}, {duration:0});
		return false;
	});

	$('a#button1').click(function() {
		$('#feature1').toggleClass('selected').siblings().removeClass('selected')
		$('#documents-link').removeClass('selected');
		$('div.screenshot.active').removeClass('active').slideHorizonClose();

		if ( $('#feature1').hasClass('selected') )
			$('#screen1').addClass('active')
			.animate({opacity: 0}, 400)
			.slideHorizonOpen(600);
		if ( !$('#feature1').hasClass('selected') )
			$('#screen1').addClass('active')
			.slideHorizonClose(600);

		if ( $('#feature1').hasClass('selected') )
			$('#container').animate({ 'left': '725px' }, 600)
				.addClass('open')
			$('#sidebar').fadeOut();
		if ( !$('#feature1').hasClass('selected') )
			$('#container').animate({ 'left': '500' }, 600)
				.removeClass('open');

		if ( $('#container').hasClass('open') )
			$('#sidebar').fadeOut()
		if ( !$('#container').hasClass('open') )
			$('#sidebar').fadeIn()

		if ( $('#container').hasClass('open') )
			$('#empty').fadeIn();
		if ( !$('#container').hasClass('open') )
			$('#empty').fadeOut();

		$("body").animate({backgroundPosition: '(714px 40px)'}, {duration:0});
		return false;
	});
	$('a#button2').click(function() {
		$('#feature2').toggleClass('selected').siblings().removeClass('selected')
		$('#documents-link').removeClass('selected');
		$('div.screenshot.active').removeClass('active').slideHorizonClose();

		if ( $('#feature2').hasClass('selected') )
			$('#screen2').addClass('active')
			.animate({opacity: 0}, 400)
			.slideHorizonOpen(600);
		if ( !$('#feature2').hasClass('selected') )
			$('#screen2').addClass('active')
			.slideHorizonClose(600);

		if ( $('#feature2').hasClass('selected') )
			$('#container').animate({ 'left': '725px' }, 600)
				.addClass('open')
			$('#sidebar').fadeOut();
		if ( !$('#feature2').hasClass('selected') )
			$('#container').animate({ 'left': '500' }, 600)
				.removeClass('open');

		if ( $('#container').hasClass('open') )
			$('#sidebar').fadeOut()
		if ( !$('#container').hasClass('open') )
			$('#sidebar').fadeIn()

		if ( $('#container').hasClass('open') )
			$('#empty').fadeIn();
		if ( !$('#container').hasClass('open') )
			$('#empty').fadeOut();

		$("body").animate({backgroundPosition: '(714px 97px)'}, {duration:0});
		return false;
	});
	$('a#button3').click(function() {
		$('#feature3').toggleClass('selected').siblings().removeClass('selected')
		$('#documents-link').removeClass('selected');
		$('div.screenshot.active').removeClass('active').slideHorizonClose();

		if ( $('#feature3').hasClass('selected') )
			$('#screen3').addClass('active')
			.animate({opacity: 0}, 400)
			.slideHorizonOpen(600);
		if ( !$('#feature3').hasClass('selected') )
			$('#screen3').addClass('active')
			.slideHorizonClose(600);

		if ( $('#feature3').hasClass('selected') )
			$('#container').animate({ 'left': '725px' }, 600)
				.addClass('open')
			$('#sidebar').fadeOut();
		if ( !$('#feature3').hasClass('selected') )
			$('#container').animate({ 'left': '500' }, 600)
				.removeClass('open');

		if ( $('#container').hasClass('open') )
			$('#sidebar').fadeOut()
		if ( !$('#container').hasClass('open') )
			$('#sidebar').fadeIn()

		if ( $('#container').hasClass('open') )
			$('#empty').fadeIn();
		if ( !$('#container').hasClass('open') )
			$('#empty').fadeOut();

		$("body").animate({backgroundPosition: '(714px 156px)'}, {duration:0});
		return false;
	});
	$('a#button4').click(function() {
		$('#feature4').toggleClass('selected').siblings().removeClass('selected')
		$('#documents-link').removeClass('selected');
		$('div.screenshot.active').removeClass('active').slideHorizonClose();

		if ( $('#feature4').hasClass('selected') )
			$('#screen4').addClass('active')
			.animate({opacity: 0}, 400)
			.slideHorizonOpen(600);
		if ( !$('#feature4').hasClass('selected') )
			$('#screen4').addClass('active')
			.slideHorizonClose(600);

		if ( $('#feature4').hasClass('selected') )
			$('#container').animate({ 'left': '725px' }, 600)
				.addClass('open')
			$('#sidebar').fadeOut();
		if ( !$('#feature4').hasClass('selected') )
			$('#container').animate({ 'left': '500' }, 600)
				.removeClass('open');

		if ( $('#container').hasClass('open') )
			$('#sidebar').fadeOut()
		if ( !$('#container').hasClass('open') )
			$('#sidebar').fadeIn()

		if ( $('#container').hasClass('open') )
			$('#empty').fadeIn();
		if ( !$('#container').hasClass('open') )
			$('#empty').fadeOut();

		$("body").animate({backgroundPosition: '(714px 212px)'}, {duration:0});
		return false;
	});
	$('a#button5').click(function() {
		$('#feature5').toggleClass('selected').siblings().removeClass('selected')
		$('#documents-link').removeClass('selected');
		$('div.screenshot.active').removeClass('active').slideHorizonClose();

		if ( $('#feature5').hasClass('selected') )
			$('#screen5').addClass('active')
			.animate({opacity: 0}, 400)
			.slideHorizonOpen(600);
		if ( !$('#feature5').hasClass('selected') )
			$('#screen5').addClass('active')
			.slideHorizonClose(600);

		if ( $('#feature5').hasClass('selected') )
			$('#container').animate({ 'left': '725px' }, 600)
				.addClass('open')
			$('#sidebar').fadeOut();
		if ( !$('#feature5').hasClass('selected') )
			$('#container').animate({ 'left': '500' }, 600)
				.removeClass('open');

		if ( $('#container').hasClass('open') )
			$('#sidebar').fadeOut()
		if ( !$('#container').hasClass('open') )
			$('#sidebar').fadeIn()

		if ( $('#container').hasClass('open') )
			$('#empty').fadeIn();
		if ( !$('#container').hasClass('open') )
			$('#empty').fadeOut();

		$("body").animate({backgroundPosition: '(714px 272px)'}, {duration:0});
		return false;
	});
	$('a#documentsbutton').click(function() {
		$('#documents-link').toggleClass('selected');
		$('.featured-item').removeClass('selected');
		$('div.screenshot.active').removeClass('active').slideHorizonClose();

		if ( $('#documents-link').hasClass('selected') )
			$('#documentation').addClass('active')
			.animate({opacity: 0}, 400)
			.slideHorizonOpen(600);
		if ( !$('#documents-link').hasClass('selected') )
			$('#documentation').addClass('active')
			.slideHorizonClose(600);

		if ( $('#documents-link').hasClass('selected') )
			$('#container').animate({ 'left': '725px' }, 600)
				.addClass('open')
			$('#sidebar').fadeOut();
		if ( !$('#documents-link').hasClass('selected') )
			$('#container').animate({ 'left': '500' }, 600)
				.removeClass('open');

		if ( $('#container').hasClass('open') )
			$('#sidebar').fadeOut()
		if ( !$('#container').hasClass('open') )
			$('#sidebar').fadeIn()

		if ( $('#container').hasClass('open') )
			$('#empty').fadeIn();
		if ( !$('#container').hasClass('open') )
			$('#empty').fadeOut();

		$("body").animate({backgroundPosition: '(714px 516px)'}, {duration:0});
		return false;
	});

	// X Buttons
	$('a#close1').click(function() {
		$('#feature1').toggleClass('selected').siblings().removeClass('selected');
		$('#screen1').slideHorizonClose(600).removeClass('active');
		$('#container').animate({ 'left': '500' }, 600);
		$('#sidebar').fadeIn();
		$('#empty').fadeOut();
		return false;
	});

	$('a#close2').click(function() {
		$('#feature2').toggleClass('selected').siblings().removeClass('selected');
		$('#screen2').slideHorizonClose(600).removeClass('active');
		$('#container').animate({ 'left': '500' }, 600);
		$('#sidebar').fadeIn();
		$('#empty').fadeOut();
		return false;
	});
	$('a#close3').click(function() {
		$('#feature3').toggleClass('selected').siblings().removeClass('selected');
		$('#screen3').slideHorizonClose(600).removeClass('active');
		$('#container').animate({ 'left': '500' }, 600);
		$('#sidebar').fadeIn();
		$('#empty').fadeOut();
		return false;
	});
	$('a#close4').click(function() {
		$('#feature4').toggleClass('selected').siblings().removeClass('selected');
		$('#screen4').slideHorizonClose(600).removeClass('active');
		$('#container').animate({ 'left': '500' }, 600);
		$('#sidebar').fadeIn();
		$('#empty').fadeOut();
		return false;
	});
	$('a#close5').click(function() {
		$('#feature5').toggleClass('selected').siblings().removeClass('selected');
		$('#screen5').slideHorizonClose(600).removeClass('active');
		$('#container').animate({ 'left': '500' }, 600);
		$('#sidebar').fadeIn();
		$('#empty').fadeOut();
		return false;
	});
	$('a#closedoc').click(function() {
		$('#documents-link').toggleClass('selected').siblings().removeClass('selected');
		$('#documentation').slideHorizonClose(600).removeClass('active');
		$('#container').animate({ 'left': '500' }, 600);
		$('#sidebar').fadeIn();
		$('#empty').fadeOut();
		return false;
	});

	// hides the screenshots as soon as the DOM is ready
	// (a little sooner than page load)
	// $('#empty.screenshot').show();
	$('.screenshot').hide();
	$('#empty').hide();
	$('#container').css('left',500);

});