$(document).ready(function(){
	
	$('form.red input.text')
	.live('focus', function(){
		$(this).parent('span').addClass('active');
		
		if($(this).hasClass('default'))
		{
			if(this.value == this.defaultValue)
			{
				$(this).removeClass('default');
				$(this).addClass('new_value');
				this.value = '';
			}
		}
	})
	.live('blur', function(){
		$(this).parent('span').removeClass('active');
		
		if($(this).hasClass('new_value'))
		{
			if(this.value == '')
			{
				$(this).addClass('default');
				$(this).removeClass('new_value');
				this.value = this.defaultValue;
			} 
		}
	});
	
	$('div.red-checkbox').live('click', function(){
		if($(this).hasClass('checked'))
		{
			$(this).removeClass('checked');
			$(this).next('input:checkbox').attr('checked', false);
		}else{
			$(this).addClass('checked');
			$(this).next('input:checkbox').attr('checked', true);
		}
	});
	
	$('div.red-radio').live('click', function(){
		$('div[title="'+$(this).attr('title')+'"]').removeClass('checked');
		$(this).addClass('checked');
		$(this).next('input:radio').attr('checked', true);
	});
	
	stylize();
	
});


/**
 * stylize()
 *
 * This should be called after each ajax request to stylize
 * new form elements as they appear.
 */
function stylize()
{
	$('select:visible').selectmenu({
		style:'dropdown',
		maxHeight:200,
		handleWidth:25
	});

	//checkboxes
	$('form.red input:checkbox:visible').each(function(){
		
		$this = $(this);
		
		checked = $this.attr('checked') == true ? ' checked' : '' ;
		
		red_checkbox = ('<div class="red-checkbox'+checked+'"></div>');
		$this.hide().before(red_checkbox);
		
	});
	
	//radio buttons
	$('form.red input:radio:visible').each(function(){
		
		$this = $(this);
		
		checked = $this.attr('checked') == true ? ' checked' : '' ;
		title = 'title="'+$this.attr('name').split('[]')[0]+'"';
		
		red_radio = ('<div class="red-radio'+name+checked+'" '+title+'></div>');
		$this.hide().before(red_radio);
		
	});
	
	//selects
	/*
	$('form.red select:visible').each(function(){
		
		$this = $(this);
		
		red_select = $('<div class="red-container" tabindex="'+$this.attr('tabindex')+'"></div>');
		control = $('<div class="red-control"><div class="red-control-left"><div class="red-control-right" style="width:auto">'+$this.find('option:selected').text()+'</div></div></div>');
		
		list = $('<div class="red-list"><ul></ul></div>');
		
		red_select
		.focus(
			function()
			{
				$(this).find('.red-list').fadeIn('fast');
				$(this).find('.red-control-right').css('background-position', '100% 100%');
				$(this).find('.red-control-left').css('background-position', '0 100%');
			}
		).blur(
			function()
			{
				$(this).find('.red-list').fadeOut('fast');
				$(this).find('.red-control-right').css('background-position', '100% 0');
				$(this).find('.red-control-left').css('background-position', '0 0');
			}
		);
		
		control.click(
			function()
			{
				$(this).next('.red-list').fadeIn('fast');
				$(this).find('.red-control-right').css('background-position', '100% 100%');
				$(this).find('.red-control-left').css('background-position', '0 100%');
			}
		);
		
		red_select.append(control).append(list);
		
		options = $this.find('option');
		options.each(function(e){
			li = $('<li id="'+$(this).val()+'">'+$(this).text()+'</li>');
			li.click(function(){
				$(this).parents('div').eq(0).fadeOut('fast');
				$(this).parents('div').eq(0).prev('.red-control').eq(0).find('.red-control-right').html($(this).text())
				.css({
					'background-position': '100% 0'
				});
				$(this).parents('div.red-container').next('select').val($(this).attr('id'));
			})
			.appendTo(list.find('ul'));
		});
		
		$this.hide().before(red_select);
		
	});
	*/
}