$().ready(function() {

	$('li.step-3 span.fancybox, li.step-2 span.clickable').fancybox({
		onStart: function() {
			$('div#composer-wrapper').css('display', 'block');
			$('div#composer-wrapper img').css('display', 'none');
		},
		onComplete: function() {
			$('div#composer-wrapper img').css('display', 'block');
		},
		padding: 0,
		content: $('div#composer-wrapper'),
		modal: true,
		scrolling: 'no',
		width: 1049,
		height: 638,
		autoDimensions: false
	});

	if($('div#composer-wrapper').length)
		$('li.step-3 span.fancybox').trigger('click');

	var image = $('div#composer img');

	$('div#ghost').draggable({
		start: function(event, ui) {
			setTimeout(function(){ $('span.drag-to-position').fadeOut(); }, 500);
		},
		// Position image during drag
		drag: function(event, ui) {
			var left = $(this).css('left');
			var top = $(this).css('top');
			var right = $(this).css('right');
			var bottom = $(this).css('bottom');

			if(parseInt(top) > 61)
				top = '61px';

			if(parseInt(left) > 49)
				left = '49px';

			if(parseInt(right) > 314)
			{
				right = '314px';
				left = 'auto';
			}

			if(parseInt(bottom) > 57)
			{
				bottom = '57px';
				top = 'auto';
			}

			image.css('left', left);
			image.css('top', top);
			image.css('bottom', bottom);
			image.css('right', right);
		},
		// Just to be sure
		stop: function(event, ui) {
			var left = $(this).css('left');
			var top = $(this).css('top');
			var right = $(this).css('right');
			var bottom = $(this).css('bottom');

			if(parseInt(top) > 61)
				top = '61px';

			if(parseInt(left) > 49)
				left = '49px';

			if(parseInt(right) > 314)
			{
				right = '314px';
				left = 734 - parseInt(image.width()) + 'px';
			}

			if(parseInt(bottom) > 57)
			{
				bottom = '57px';
				top = 580 - parseInt(image.height()) + 'px';
			}

			image.css('left', left);
			image.css('top', top);
			image.css('bottom', bottom);
			image.css('right', right);

			$(this).css('left', left);
			$(this).css('top', top);
			$(this).css('bottom', bottom);
			$(this).css('right', right);

			$('input#xy').val(parseInt(left) + ',' + parseInt(top));
		}
		// containment: parent
	});

	$('div#ghost').resizable({
		start: function() {
			setTimeout(function(){ $('span.resize-me').fadeOut(); }, 500);
		},
		stop: function() {
			$('input#dimensions').val(image.width() + ',' + image.height());
		},
		alsoResize: 'div#composer img',
		aspectRatio: true,
		// containment: 'parent',
		// ghost: true,
		handles: 'ne, se, sw, nw',
		minWidth: 700,
		minHeight: (image.height() / image.width()) * 700
	});
	
	/**
	 * Open external links in new window
	 */
	$('a[rel="external"]').click(function() {
		window.open(this.href);
		return false;
	});

	/**
	 * Show throbber after submitting form
	 */
 	$('form#store').submit(function() {
		$('div#composer-wrapper').fadeOut();

		var content = $('<div id="lightbox-loading"><p>Uploading your images to Facebook! <strong>Please be patient, it may take some time!</strong> Meanwhile, why don\'t you like us on Facebook?</p><div id="like-button"></div></div>');

		$('div#like-button', content).append($('ul#share'));

		$.fancybox({
			width: 400,
			height: 125,
			content: content,
			padding: 0,
			modal: true,
			scrolling: 'no',
			autoDimensions: false
		});
	});
	
	/**
	 * Trigger form submit in last step
	 */
	$('li.step-4.current a').click(function(e) {
		var form = $('form#setprofilepicture');
		
		if(!form)
			return false;

		form.submit();
			
		e.preventDefault();
	});
});