pure c wysiwyg winapi gui 1% done

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="robots" content="index,follow" />
    <!-- <link rel="stylesheet" type="text/css" href="styles.css" /> -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

var num = 0;


function form_select(name,options) {
    var s = "";
    for (var i=0;i<options.length;i++) {
        s = s + '<option selected="selected">' + options[i] + '</option>';
    }
    return '<select name="' + name + '">' + s + '</select>';
}

function form_text(name,value,size) {
    return '<input type="text" name="' + name + '" value="' + value + '" size="' + size + '"/>';
}

function form_checkbox(name,caption) {
    return '<input type="checkbox" name="' + name + '" checked="checked" value="' + caption + '" />';
}

function div_table(html) {
    return '<table>' + html + '</table>';
}

function table_tr(html,id) {
    if (!id)
        return '<tr>' + html + '</tr>';
    else
        return '<tr id="'+id+'">' + html + '</tr>';
}

function tr_td(html) {
    return '<td>' + html + '</td>';
}

//type name id position anchors
function widget(n) {
    var types = ['form','button','edit','label'];
    return table_tr(
        tr_td(form_select('type'+n,types)) +
        tr_td(form_text('name'+n,'',10)) +
        tr_td(form_text('id'+n,'',10)) +

        tr_td(form_text('pos-x'+n,'0',3)) +
        tr_td(form_text('pos-y'+n,'0',3)) +
        tr_td(form_text('pos-w'+n,'0',3)) +
        tr_td(form_text('pos-h'+n,'0',3)) +

        tr_td(form_checkbox('anc-l'+n,'l')) +
        tr_td(form_checkbox('anc-t'+n,'t')) +
        tr_td(form_checkbox('anc-r'+n,'r')) +
        tr_td(form_checkbox('anc-b'+n,'b')) +

        '',
        'r'+n
        );
}

function createWidget() {
    var tr = $( widget(1) );
    $("#properties-table").append( tr );
}

$(document).ready( function() {
    $("#properties-form").css("background-color",lightColor());
    createWidget();
});

function lightColor() {
  function c() {
    var d = 20;
    return Math.floor(Math.random()*d+256-d).toString(16);
  }
  return "#"+c()+c()+c();
}

</script>

<style type="text/css">
#properties-form {
    position: absolute;
    width: 600px;
    height: 400px;
    bottom: 0;
    right: 0;
}

</style>

</head>
<body>

    <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%">

</table>


<form id="properties-form">
    <table id="properties-table">
        <tr>
            <!-- type name id position anchors -->
        <th>widget</th><th>name</th><th>id</th><th colspan="4">position</th><th colspan="4">anchors</th>
        </tr>
    </table>
</form>

</body>
</html>