functions.js

String.prototype.trim = function ()
{
	return this.replace(/^\s*([\S\s]*?)\s*$/, '$1');
}

function centerMain()
{
	$('#main').css({
		position: 'absolute',
		top: '50%',
		left: '50%',
		marginLeft: '-' + ($('#main').outerWidth() / 2) + 'px',
		marginTop: '-' + ($('#main').outerHeight() / 2 - $('#radios').outerHeight()) + 'px'
	});
}

function prepareForAnimate() {
	submit = $('#sub');
	url = $('#url');
	file = $('#file');
	fileinput = file.children().eq(0);
	$('#main').width($('#main').width()).height($('#main').height());
	$('#radios').css({
		'position': 'relative',
		top: '33px'
	});
	file.css({
		position: 'absolute',
		right: submit.outerWidth() + 10 + 'px',
		top: 0
	});
	submit.css({
		'position': 'absolute',
		'right': '4px'
	});
	url.css({
		position: 'absolute',
		left: 0,
		top: '7px'
	});
}

function changePlaceHolder(ele, placeholder)
{
	ele.val(ele.attr('placeholder')).animate({
		color: ele.css('backgroundColor')
	}, {
		complete: function() {
			ele.val(placeholder);
			ele.animate({
				color: '#777'
			}, {
				complete: function() {
					ele.attr('placeholder', placeholder).val('');
				}
			});
		}
	})
}

function urlToFile(callback) {
	url = $('#url');
	file = $('#file');
	fileinput = file.children().eq(0);
	url.animate({
		'width': url.width() - 80 + 'px'
	}, {
		complete: function() {
			file.fadeIn(600, function() {
				if (callback) callback(url, file);
			});
		}
	});
}

function fileToUrl(callback) {
	url = $('#url')
	file = $('#file');
	file.fadeOut(600, function() {
		url.animate({
			'width': url.width() + 80 + 'px'
		}, {
			complete: function() {
				if (callback) callback(url, file);
			}
		})
	});
}

function urlToText() {
	url = $('#url');
	text = $('textarea');
	main = $('#main');
	
	changePlaceHolder(url, ' ');
	
	url.animate({
		'height': '+=50'
	}, {
		complete: function() {
			text.css({
				position: 'absolute',
				left: main.offset().left - url.offset().left,
				top: main.offset().top - url.offset().top + 16,
				width: url.width(),
				height: url.height()
			}).show();
			url.hide();
		}
	});
	
	$('#radios').animate({
		'top': '+=50'
	});
}

function textToUrl(callback) {
	url = $('#url');
	radios = $('#radios');
	
	$('textarea').hide();
	url.show().animate({
		'height': '-=50'
	}, {
		complete: function() {
			if (callback) callback(url);
		}
	});
	
	radios.animate({
		'top': '-=50'
	});
}

$(document).ready(function() {
	$('#radios li').click(function() {
		if (!$(this).hasClass('selected'))
		{
			a = $('.selected').text().trim();
			s = $(this).text().trim();
			switch (a)
			{
				case 'Link':
					switch (s) {
						case 'File':
							urlToFile(function(url, file) {
								changePlaceHolder(url, 'File');
							});
							break;
						
						case 'Text':
							urlToText();
							break;
					}
					break;
				case 'File':
					switch (s) {
						case 'Link':
							fileToUrl(function(url, file) {
								changePlaceHolder(url, 'Link');
							});
							break;
						case 'Text':
							fileToUrl(function(url, file) {
								urlToText();
							});
					}
					break;
				case 'Text':
					switch(s) {
						case 'Link':
							textToUrl(function(url) {
								changePlaceHolder(url, 'Link')
							});
							break;
						case 'File':
							textToUrl(function(url) {
								urlToFile(function(url, file) {
									changePlaceHolder(url, 'File');
								});
							});
					}
			}
			$('.selected').removeClass('selected');
			$(this).addClass('selected');
			
		}
	});
	
	centerMain();
	prepareForAnimate();
});