// Xmas Tree Decorate
//
// Douglas Thrift
//
// decorate.js

$(function()
{
	var star_ornaments = $('#star, #ornaments');
	var events = 'afterpaste change input keyup';

	if ($.browser.msie)
		events += ' cut paste';

	star_ornaments.find(':text[name=character]').bind(events, function()
	{
		var input = $(this);
		var character = input.val();
		var p = input.parent('p').siblings('.star, .ornament');
		var span = p.find('span');

		if (character != '')
			span.text(character);
		else
			span.html(' ');
	}).change();
	star_ornaments.find(':input[name=size]').change(function()
	{
		var select = $(this);

		select.parent('p').siblings('.star, .ornament').find('span').css('font-size', select.val() + 'px');
	}).change();
	star_ornaments.find('.colors td').click(function()
	{
		var td = $(this);

		td.parents('table.colors').siblings('.star, .ornament').find('span').css('color', td.css('background-color'));
	}).filter('#star [title=gold], #ornaments [title=snow]').click();

	var tolerance = $.browser.msie || $.browser.opera ? 'touch' : 'intersect';

	star_ornaments.find('.star span, .ornament span').draggable({containment: '#decorate', cursor: 'move', helper: function()
	{
		return $(this).clone().css('background-color', 'transparent');
	}}).droppable({accept: '.suggestions span', activeClass: 'decorate-active', hoverClass: 'decorate-hover', tolerance: tolerance, drop: function(event, ui)
	{
		$(this).parent('p').siblings().find(':text[name=character]').val(ui.draggable.text()).change();
	}}).addTouch();
	star_ornaments.find('.suggestions span').click(function()
	{
		var span = $(this);

		span.parent('p').siblings('p').find(':text[name=character]').val(span.text()).change();
	}).draggable({containment: '#decorate', cursor: 'move', helper: 'clone'}).addTouch();

	var tree = $('#decorate .tree');
	var save = $('#save');

	function TreeDrop(e, ui)
	{
		var span = ui.draggable;
		var color = span.css('color');
		var size = span.css('font-size');
		var character = span.text();

		$(this).css({'color': color, 'font-size': size}).text(character);

		var star = span.is('.star span');
		var id = (star ? 'star' : 'ornaments');

		var ornament = star ? 'star' : 'ornament_' + $(this).attr('class').match(/ornament-([02-9]|1[01]?)/)[1];

		save.find(':hidden[name=' + ornament + '_character]').val(character);
		save.find(':hidden[name=' + ornament + '_size]').val($('#' + id + '_size').val());
		save.find(':hidden[name=' + ornament + '_color]').val(color);
	}

	tree.find('.star').droppable({accept: 'p.star span', activeClass: 'decorate-active', drop: TreeDrop, hoverClass: 'decorate-hover', tolerance: tolerance}).addTouch();
	tree.find('.ornament').droppable({accept: 'p.ornament span', activeClass: 'decorate-active', drop: TreeDrop, hoverClass: 'decorate-hover', tolerance: tolerance}).addTouch();
	save.find(':hidden[name^=star_], :hidden[name^=ornament_]').each(function()
	{
		var input = $(this);
		var match = /^(star|ornament_\d+)_(character|size|color)$/.exec(input.attr('name'));
		var ornament = tree.find('.' + match[1].replace('_', '-'));
		var value = input.val();

		if (value != '')
			switch (match[2])
			{
			case 'character':
				ornament.text(value);
				break;
			case 'size':
				ornament.css('font-size', value + 'px');
				break;
			case 'color':
				ornament.css('color', value);
			}
	});
});