$(document).ready(function()
{
	$('#messageBox .showDetails').click(function()
	{
		if(this.getAttribute('data-state') == 0)
		{
			$('#messageBox .details').slideDown();
			$(this).text('- Hide Details').attr('data-state', 1);
		}
		else
		{
			$('#messageBox .details').slideUp();
			$(this).text('+ Show Details').attr('data-state', 0);
		}
	});
});

function showMessage(message, title, details, controls, callback)
{	
	$('#messageBox .title').text(title);
	$('#messageBox .message').text(message);
	$('#messageBox .details').html(details).attr('data-visible', false);
	$('#messageBox .showDetails').text('+ Show Details').attr('data-state', 0);
	$('#messageBox .controlBar *').remove();
	
	if(details.length == 0)
		$('#messageBox .showDetails').attr('data-visible', false);
	else
		$('#messageBox .showDetails').attr('data-visible', true);
	
	for(var i in controls)
	{
		$('<div class="control">' + controls[i] + '</div>').attr('data-control', controls[i]).click(function()
		{
			if(callback == null || callback(this.getAttribute('data-control'), $('#messageBox')))
				closeMessageBox();
		}).appendTo('#messageBox .controlBar');
	}
	
	var box = $('#messageBox .box');
	var minWidth = box.css('min-width');
	var minHeight = box.css('min-height');
	var padding = { left : box.css('padding-left'), right : box.css('padding-right'), top : box.css('padding-top'), bottom : box.css('padding-bottom') };
	var targetWidth = Math.max(box.innerWidth(), parseInt(minWidth));
	var targetHeight = Math.max(box.innerHeight(), parseInt(minHeight));
	
	$('#messageBox .box *').hide();
	box.css({ 'width' : 0, 'height' : 0, 'min-width' : 0, 'min-height' : 0, 'padding' : 0 });
	$('#messageBox').show();
	box.animate({ 'width' : targetWidth, 'padding-left' : padding.left, 'padding-right' : padding.right }, 150).animate({ 'height' : targetHeight, 'padding-top' : padding.top, 'padding-bottom' : padding.bottom }, 250, function()
	{
		$(this).css({'width' : '', 'height' : '', 'min-width' : '', 'minHeight' : ''});
		$('#messageBox .box *:not(canvas):not([data-visible=false])').fadeIn('fast');
	});
}

function closeMessageBox()
{
	$('#messageBox .ok, #messageBox .cancel').unbind('click');
	$('#messageBox canvas').attr('data-show', 'false');
	
	$('#messageBox .box *').fadeOut('fast', function()
	{
		if($('#messageBox .box *:animated').length == 1)
		{
			var width = $('#messageBox .box').innerWidth();
			var height = $('#messageBox .box').innerHeight();
			
			$('#messageBox .box').css({ 'width' : width, 'height' : height, 'min-width' : 0, 'min-height' : 0, 'padding' : 0 }).animate({ 'height' : 0 }, 200).animate({ 'width' : 0 }, 150, function()
			{
				$(this).css({ 'min-height' : '', 'min-width' : '', 'width' : '', 'height' : '', 'padding' : '' });
				$('#messageBox').hide();
			});
		}
	});
}

function showMessageSpinner()
{
	var canvas = $('#messageBox canvas').attr('data-show', 'true').fadeIn().get(0);
	var context = canvas.getContext('2d');
	var midX = canvas.width / 2;
	var midY = canvas.height / 2;
	var numSegments = 4;
	var segmentSpacing = Math.PI / 6;
	var segmentSize = 2 * Math.PI / numSegments;
	
	$('#messageBox .box *:not(canvas)').fadeOut();
	update(0, 0);
	
	function update(pos, midSize)
	{
		if(canvas.getAttribute('data-show') == 'true')
		{
			context.clearRect(0, 0, canvas.width, canvas.height);
			
			context.save();
			context.beginPath();
			context.fillStyle = 'white';
			context.arc(midX, midY, Math.sin(midSize) + 5, 0, Math.PI * 2, false);
			context.fill();
			context.restore();
			
			context.save();
			context.lineWidth = 6;
			context.strokeStyle = 'white';
			
			for(var i = 0; i < numSegments; i++)
			{
				context.beginPath();
				context.arc(midX, midY, 20, segmentSize * i + segmentSpacing + pos, segmentSize * (i+1) + pos, false);
				context.stroke();
			}
			
			context.restore();
			setTimeout(function(){update(pos + (Math.PI / 90) % (Math.PI * 2), midSize + Math.PI / 50)}, 15);
		}
	}
}