/**
 * when the new state form is submitted, create a new state
 */
fn.state.add = function()
{
	// get new values
	var label = $('.label', this).val();
	var color = $('.color', this).val();

	// error check
	if ( !label.length ) 
	{
		$('.label', this).addClass('error');
		return false;
	};
	
	// default to white
	if ( !color.length ) 
	{
		color = 'White';
	};

	// build our new state
	var state = {
		id: 	'_' + fn.functions.uniqId(),
		label: 	label,
		color: 	color,
		type: 	fn.global.view
	};
	
	// hide and reset the form
	$(this).hide();
	$('.error', this).removeClass('error');
	$('.crayonbox', this).uncolor();
	this.reset();	
	
	// add to dom and save
	fn.states.populate(state);	
	fn.account.save();
	
	delete fn.global.bubbles.newStateForm;
	fn.view.bubble(fn.global.bubbles.firstState);
	delete fn.global.bubbles.firstState;
};

fn.state.edit = function()
{
	// get clicked and ignore if already selected
	var $title = $(this.target);
	if ( !$title.is('a')) 
	{
		return;
	};
	
	$('#' + fn.global.view + 'StatesList .all').trigger('click');
	
	fn.global.unedit();

	// get currect value
	var orig = $title.text();
	var text = fn.functions.htmlEncode(orig);
	
	var bgColor = $title.css('backgroundColor');
	var id = $title.attr('id');

	var tempId = fn.functions.uniqId();
	var $html = $(
		'<span>'
		+ '<label for="_' + tempId + '">State title:</label> '
		+ '<input type="text" id="_' + tempId + '" value="' + text + '" class="editing" maxlength="24" /> '
//		+ 'or <a href="#">Remove it</a>'
		+ '</span>'
	);

	$html.css({backgroundColor: bgColor});

	// replace html and assign save actions
	$title
	.replaceWith($html);
		
	$html
	.find('input:first')
	.attr('data-original', text)
	.blur(function(e) 
	{
		saveEdit.call(this);
	})
	.keyup(function(e) {
		// on escape, restore prev value
		if (e.keyCode == 27) 
		{
			restoreOrig.call(this);
			return false;
		};

		// on 'enter' key, set and save value
		if (e.keyCode == 13) 
		{
			saveEdit.call(this);
			return false;
		};
	})
	.focus();
	
	fn.global.refreshRemove();

	// save edit function
	function saveEdit()
	{
		// get text
		var text = $(this).val();
		text = fn.functions.htmlEncode(text);

		// if empty, remove state
		if ('' === text) 
		{
			fn.state.remove.call($html, id);
			return false;
		};

		// insert our text and save
		$title.html(text);
		$html.replaceWith($title);
		
		$('ul.states a[data-id=' + id + ']')
		.html(text);
		
		$('.project.' + id)
		.find('h3 .state')
		.html(text);
		
		fn.account.save();
	};
	
	// restore orig val
	function restoreOrig() {
		text = $(this).attr('data-original');

		// if previous is empty, remove project
		if ('' === text) 
		{
			fn.state.remove.call($html, id);
			return false;
		};

		$title.html(text);
		
		$html.replaceWith($title);
	};
};

/**
 * create a new state and add it to all states lists
 */
fn.states.populate = function(state)
{
	// build dom element and add to header list
	$('<li><a href="#" id="' + state.id +  '" style="background-color: ' + state.color + ';">' + state.label + '</a></li>')
	.appendTo('#' + fn.global.view + 'StatesList');
	
	// build dom element and add to list items
	$('<li><a href="#" data-id="' + state.id +  '" style="background-color: ' + state.color + ';">' + state.label + '</a></li>')
	.appendTo('.' + fn.global.view + 'List .states');
};

fn.state.remove = function(id) 
{
	// remove from item level menus 
	$('ul.states li:has(a[data-id=' + id + '])')
	.remove();

	// remove from flags and items for sorting
	$('.project.' + id)
	.removeClass(id)
	.find('h3 .state')
	.html('')
	.css({background: 'none'});

	// remove from header menu
	$(this).fadeOut('fast', function(title) 
	{
		$(this).remove();
		
		fn.account.save();
	});
};

fn.state.scheduledCount = function(adjust)
{
	var $scheduled = $('#' + fn.global.view + 'StatesList a.scheduled');
	var scheduledCount = parseInt( $('span', $scheduled).text()) + adjust;
	$('span', $scheduled).text(scheduledCount);
	if ( scheduledCount == 0 )
	{
		$scheduled.addClass('hidden');
	}
	else
	{
		$scheduled.removeClass('hidden');
	};
};