FontView = {

 initialize : function(){
	//register events
	$('form input[name=on], form select').each(
		function(i, el){
			$(el).change(FontView.setFont);
		}
	);
	$('form input[name=value]').each(
		function(i, el){
			$(el).keyup(FontView.setFont);
		}
	);
	
	$('#picker').farbtastic(FontView.picker);
	
	// initialize the earlier choosen options
	this.setFont();
 },
 
 picker: function(color){
 	$('#colorvalue').attr('value', color);
 	FontView.setFont();
 },

 set: function(style, value, entity){
	$('#outLook').css(style, value+entity);
 },

 setFont: function(){
	var cssout = "";
	// each elements	
	$('#configWrap div.fontConfig').each(
		function(i, el){
			var id = el.id;
			if ($('#'+id+' form [name=on]').attr('checked') == true){	// activated ?
				$('#'+id+' .display').css({display:'block'});
				
				//get the entity if any
				var entity = $('#'+id+' form [name=entity]');
				if (entity.get(0)) {
					entity = entity.get(0).value;
				} else {
					entity = '';
				}
				
				//get value
				var value = $('#'+id+' form [name=value]').get(0).value;
				
				FontView.set(id, value, entity); // set the choosen value
				cssout += id+': '+value+entity+'; '; // add the css code
			}
			else{	// if not checked
				var entity = '';
				var value = 'none';
				
				// hide
				$('#'+id+' .display').css({display:'none'});
			
				// reset the value
				switch(id){
					case 'direction':
						value = 'ltr';
					break;
					
					case 'text-indent':
					case 'word-spacing':
						value = '0';
					break;
					
					
					case 'font-family':
						value = 'Arial';
					break;
					
					case 'font-size':
						value = 'medium';
					break;

					case 'letter-spacing':
					case 'font-weight':
					case 'line-height':
					case 'font-variant':
					case 'font-style':
					case 'white-space':
					
						value = 'normal';
					break;
					case 'text-align':
						value = 'left';
					break;
					case 'color':
						value = '#000000';
					break;
				}
				FontView.set(id, value, entity);
			}
		}
	);
	FontView.printCSS(cssout);
 },
 
 printCSS: function(cssout){
  $("#outputCSS").html("body{"+cssout+" }"); 
 }

}

$(document).ready(function(){
	FontView.initialize();
});