HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html>
<head>
<title>Website Designer Experiment</title>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1.0">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
</head>
<body>
	<table id="main" border="1">
		<tr>
			<td class="wrapper ui-selectable" valign="top"></td>
			<td valign="top">
				<form id='tools'>
					<center>
						<select id="tools">
						  <option value="div" selected="selected">DIV</option>
						  <option value="text">Text</option>
						  <option value="remove">Remove</option>
						</select>
					</center>
				</form>
				
				<div id="divoptions">
					Border Width <select id="divborder">
						  <option value="0px">0px</option>
						  <option value="1px">1px</option>
						  <option value="2px">2px</option>
						  <option value="3px" selected="selected">3px</option>
						  <option value="5px">5px</option>
						  <option value="7px">7px</option>
						  <option value="8px">8px</option>
						  <option value="9px">9px</option>
						  <option value="10px">10px</option>
					</select><br>
					
					Border Style <select id="divborderstyle">
						  <option value="dotted">dotted</option>
						  <option value="dashed">dashed</option>
						  <option value="solid" selected="selected">solid</option>
						  <option value="double">double</option>
						  <option value="groove">groove</option>
						  <option value="ridge">ridge</option>
						  <option value="inset">inset</option>
						  <option value="outset">outset</option>
					</select><br>

Border Color 
					<input id="bcolor" type="text" name="bcolor" value="#f00" /><br>

BG Color
					<input id="bgcolor" type="text" name="bgcolor" value="#000" />
					<input type="button" id="nobg" value="none">
				</div>
				
				<div id="spanoptions">
					<center><textarea id="spantext">Text</textarea></center>
					
					Font <select id="spanfont">
						  <option value="arial" selected="selected">arial</option>
						  <option value="sans-serif">sans-serif</option>
						  <option value="times new roman">times new roman</option>
						  <option value="verdana">verdana</option>
						  <option value="georgia">georgia</option>
					</select><br>
					
					Font size <select id="spansize">
						  <option value="1em" selected="selected">1em</option>
						  <option value="1.5em">1.5em</option>
						  <option value="2em">2em</option>
						  <option value="2.5em">2.5em</option>
						  <option value="3em">3em</option>
						  <option value="3.5em">3.5em</option>
						  <option value="4em">4em</option>
						  <option value="4.5em">4.5em</option>
						  <option value="5em">5em</option>
					</select><br>
					
					Font Color 
					<input id="spancolor" type="text" name="spancolor" value="#000" /><br>
					
					Border Width <select id="spanborder">
						  <option value="0px" selected="selected">0px</option>
						  <option value="1px">1px</option>
						  <option value="2px">2px</option>
						  <option value="3px">3px</option>
						  <option value="5px">5px</option>
						  <option value="7px">7px</option>
						  <option value="8px">8px</option>
						  <option value="9px">9px</option>
						  <option value="10px">10px</option>
					</select><br>
					
					Border Style <select id="spanborderstyle">
						  <option value="dotted">dotted</option>
						  <option value="dashed">dashed</option>
						  <option value="solid" selected="selected">solid</option>
						  <option value="double">double</option>
						  <option value="groove">groove</option>
						  <option value="ridge">ridge</option>
						  <option value="inset">inset</option>
						  <option value="outset">outset</option>
					</select><br>

Border Color 
					<input id="spanbcolor" type="text" name="spanbcolor" value="#f00" /><br>

BG Color
					<input id="spanbgcolor" type="text" name="spanbgcolor" value="none" />
					<input type="button" id="nospanbg" value="none"><br><br>
					
					<input type="button" id="addspantext" value="Add Text">
				</div><br>
								
				<textarea id='code' placeholder="The #canvas acts as page body"></textarea>
			</td>
		</tr>
	</table>
</body>
</html>

$(window).load(function() {
	var code = $('#code'),
		preview = $(".wrapper");
		
	$('#divoptions, #spanoptions').hide();
	
	// Live Keyup wrapper
	code.val(preview.html());
	$('#main #sitename').text($('#main #inputsitename').val());
	code.keyup(function(e) {preview.html(code.val());});
	
	// Using the <TAB>
	code.keydown(function(e) {
		if(e.keyCode == 9) {
			var start = $(this).get(0).selectionStart;
			$(this).val($(this).val().substring(0, start) + '	' + $(this).val().substring($(this).get(0).selectionEnd));
			$(this).get(0).selectionStart = $(this).get(0).selectionEnd = start + 1;
			return false;
		}
	});
    
	function wrappertools(e) {
		
		// Tools
		$("select#tools").each(function() {
			
			// DIV Tool
			if ($(this).val() === 'div') {
				$('#divoptions').show();
				$('#spanoptions').hide();
				
				// No Background Option
				$('#nobg').click(function() {
					$('input[name=bgcolor]').val('none');
				});
				
				var bcolor = $('input[name=bcolor]').val(),
					bgcolor = $('input[name=bgcolor]').val(),
					divborderstyle = $('#divborderstyle').val(),
					divborder = $('#divborder').val(),
					drawdiv = $('<div style="position: absolute; border: ' + divborder + ' ' + divborderstyle + ' ' + bcolor + '; background: '+ bgcolor +';">');
				
				var main_content = $('.wrapper'),
					gen_box = null,
					i  = 1;
				
				//make wrapper div selectable and...
				main_content.selectable({ 
					start: function(e) {
							//get the mouse position on start
							x_begin = e.pageX,
							y_begin = e.pageY;
						},
					stop: function(e) {
							//get the mouse position on stop
							x_end = e.pageX,
							y_end = e.pageY;

/***  if dragging mouse to the right direction, calcuate width/height  ***/
							if( x_end - x_begin >= 1 ) {
								width  = x_end - x_begin,
								height = y_end - y_begin;
							/***  if dragging mouse to the left direction, calcuate width/height (only change is x) ***/
							} else {
								width  = x_begin - x_end,
								height =  y_end - y_begin;
								var drag_left = true;
							}
							
							// append a new div and increment the class and turn it into jquery selector
							$(this).append('<div class="gen_box_' + i + '"></div>');
							gen_box = $('.gen_box_' + i);

// add css to generated div and make it resizable & draggable
							$(gen_box).css({
								'background' : '#fff',
								 'width'     : width,
								 'height'    : height,
								 'position'  : 'absolute',
								 'left'      : x_begin,
								 'top'       : y_begin
							})
							.draggable({ snap: ".wrapper" })
							.resizable();

// if the mouse was dragged bottom left, offset the gen_box position 
							drag_left ? $(gen_box).offset({ left: x_end, top: y_begin }) : false;
							console.log( 'width: ' + width + 'px');
							console.log( 'height: ' + height + 'px' );
							// add thr styles of generated div into .inner_col_one
							i++;
							code.val(preview.html());
					}
				});
			}
			
			// Text Tool
			if ($(this).val() === 'text'){
				$('#spanoptions').show();
				$('#divoptions').hide();
				
				// No Background Option
				$('#nospanbg').click(function() {
					$('input[name=spanbgcolor]').val('none');
				});
				
				$('#addspantext').on('click', function() {
					var spanbcolor = $('input[name=spanbcolor]').val(),
						spanbgcolor = $('input[name=spanbgcolor]').val(),
						spanborderstyle = $('#spanborderstyle').val(),
						spanborder = $('#spanborder').val(),
						spanfont = $('#spanfont').val(),
						spancolor = $('#spancolor').val(),
						spansize = $('#spansize').val(),
						spantext = $('#spantext').val(),
						placespan = $('<span style="position: relative; font-family: ' + spanfont + '; font-size: ' + spansize + '; font-color: ' + spancolor + '; border: ' + spanborder + ' ' + spanborderstyle + ' ' + spanbcolor + '; background: '+ spanbgcolor +';">' + spantext + '</span>');
						
					placespan.css({
						top: e.pageY + 'px',
						left: e.pageX + 'px'
					});
					
					$('.wrapper').append(placespan);
					code.val(preview.html());
				});
				return false;
			}
			
			// Remove Tool
			if ($(this).val() === 'remove') {
				$('#divoptions').hide();
				$('#spanoptions').hide();
				$('.wrapper div, .wrapper span').on('click', function() {
					$(this).remove();
					code.val(preview.html());
				});
				return false;
			}
		});
	}
	
	$(document).ready(function(e) { 
		wrappertools(e);
	});
	
	$(document).change(function(e) { 
		wrappertools(e);
	});
});