//Function sendForm()
//Sends the form, retrieves and outputs the result
function sendForm() {
	//Set the options of the form's Request handler. 
	$('headlineForm').set('send', {onComplete: function(response) { 
		//Decode the JSON Response
		res = JSON.decode(response);
		//Fill the log
		$('log_res').set('html', res.text);
		$('status').set('html', res.status);
	}});
	//Send the form.
	$('headlineForm').send();
}

window.addEvent('domready', function() {
	//Hide the slide divs
	var headlineSlide = new Fx.Slide('slideDivHeadline');
	headlineSlide.hide();
	var paragraphSlide = new Fx.Slide('slideDivParagraph');
	paragraphSlide.hide();
	//Register toggle events for slide divs
	$('toggleHeadline').addEvent('click', function(e){
		e = new Event(e);
		//Toggle active class for highlighting
		this.toggleClass('active');
		headlineSlide.toggle();
		e.stop()
	});
	$('toggleParagraph').addEvent('click', function(e){
		e = new Event(e);
		//Toggle active class for highlighting
		this.toggleClass('active');
		paragraphSlide.toggle();
		e.stop()
	});
	
	//Register submit event
	$('headlineForm').addEvent('submit', function(e) {
		//Prevents the default submit event from loading a new page.
		e.stop();
		//Submit the form
		sendForm();
	});
		
	//Headline Styles

	//Register event for text input
	$('h_textInput').addEvent('keyup', function(e) {
		//Submit the form
		sendForm();
	});
	
	//Register font size slider
	var h_fontSizeSlider = $('h_fontSizeInputSlide');	
	//Create new slider instance for headline
	new Slider(h_fontSizeSlider, h_fontSizeSlider.getElement('.knob'), {		
		range: [8,30],	//Minimum value is 8, Maximum is 72
		wheel: true, //Allow MouseWheel
		onChange: function(value){
			//Everytime the value changes, we set the input field
			$('h_fontSizeInput').setProperty('value', value);
			//Submit the form
			sendForm();
		}
	}).set($('h_fontSizeInput').get('value').toInt());
	
	//Create new color picker for headline
	var h_fontColorPicker = new ColorPicker('h_fontColorInput', 'h_fontColorPreviewDiv', {color:'#000000',
		onComplete: sendForm});

	//Register event for font-family select
	$('h_fontSelect').addEvent('change', function(e) {
		//Submit the form
		sendForm();
	});
	
	//Register toggle events for bold, italic and small-caps
	$('h_toggleHeadlineWeight').addEvent('click', function(e) {
		e.stop();
		var value = ($('h_fontWeight').get('value') == 'normal') ? 'bold' : 'normal';
		$('h_fontWeight').set('value', value);
		//Toggle active class for highlighting
		this.toggleClass('active');
		//Submit the form
		sendForm();
	});
	$('h_toggleHeadlineStyle').addEvent('click', function(e) {
		e.stop();
		var value = ($('h_fontStyle').get('value') == 'normal') ? 'italic' : 'normal';
		$('h_fontStyle').set('value', value);
		//Toggle active class for highlighting
		this.toggleClass('active');
		//Submit the form
		sendForm();
	});
	$('h_toggleHeadlineVariant').addEvent('click', function(e) {
		e.stop();
		var value = ($('h_fontVariant').get('value') == 'normal') ? 'small-caps' : 'normal';
		$('h_fontVariant').set('value', value);
		//Toggle active class for highlighting
		this.toggleClass('active');
		//Submit the form
		sendForm();
	});
	
	//Paragraph Styles

	//Register event for text input
	$('p_textInput').addEvent('keyup', function(e) {
		//Submit the form
		sendForm();
	});

	//Register font size slider
	var p_fontSizeSlider = $('p_fontSizeInputSlide');	
	//Create new slider instance for headline
	new Slider(p_fontSizeSlider, p_fontSizeSlider.getElement('.knob'), {		
		range: [8,24],	//Minimum value is 8, Maximum is 72
		wheel: true, //Allow MouseWheel		
		onChange: function(value){
			//Everytime the value changes, we set the input field
			$('p_fontSizeInput').setProperty('value', value);
			//Submit the form
			sendForm();
		}
	}).set($('p_fontSizeInput').get('value').toInt());

	//Create new color picker for headline
	var p_fontColorPicker = new ColorPicker('p_fontColorInput', 'p_fontColorPreviewDiv', {color:'#000000',
		onComplete: sendForm});
	
	//Register event for font-family select
	$('p_fontSelect').addEvent('change', function(e) {
		//Submit the form
		sendForm();
	});

	//Register toggle events for bold, italic and small-caps
	$('p_toggleHeadlineWeight').addEvent('click', function(e) {
		e.stop();
		var value = ($('p_fontWeight').get('value') == 'normal') ? 'bold' : 'normal';
		$('p_fontWeight').set('value', value);
		//Toggle active class for highlighting
		this.toggleClass('active');
		//Submit the form
		sendForm();
	});
	$('p_toggleHeadlineStyle').addEvent('click', function(e) {
		e.stop();
		var value = ($('p_fontStyle').get('value') == 'normal') ? 'italic' : 'normal';
		$('p_fontStyle').set('value', value);
		//Toggle active class for highlighting
		this.toggleClass('active');
		//Submit the form
		sendForm();
	});
	$('p_toggleHeadlineVariant').addEvent('click', function(e) {
		e.stop();
		var value = ($('p_fontVariant').get('value') == 'normal') ? 'small-caps' : 'normal';
		$('p_fontVariant').set('value', value);
		//Toggle active class for highlighting
		this.toggleClass('active');
		//Submit the form
		sendForm();
	});
	
	// Background Styles
	var bg_ColorPicker = new ColorPicker('bg_colorInput', 'bg_colorPreviewDiv', {color:'#FFFFFF',
		onComplete: sendForm});
	
	// Init after registering all event handlers
	$('h_textInput').focus();
});