winapi gui editor for pure c 3% 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">

////////////////////////// UTILITY

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

////////////////////////// HTML RENDER HELPERS

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,onchange) {

    if (onchange)
        return '<input type="text" id="' + name + '" name="' + name + '" value="' + value + '" size="' + size + '" onchange="'+ onchange +'"/>';
    else
        return '<input type="text" id="' + name + '" 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>';
}


////////////////////////// MAIN

var num = 0;

var widgets = [];

$(document).ready( function() {
    $("#properties-form").css("background-color",lightColor());
    var w = new Widget();
    w.init();
});

////////////////////////// HANDLERS

function widgetHandlerPos(event) {
    var id = event.data.id;
    var prop = event.data.prop;
    var val = $("#pos_" + prop + id).val();

    widgets[id][prop] = val;

    switch (prop) {
        case 'x' : $("#w" + id).css("left", val + "px"); break
        case 'y' : $("#w" + id).css("top", val + "px"); break
        case 'w' : $("#w" + id).css("width", val + "px"); break
        case 'h' : $("#w" + id).css("height", val + "px"); break
    }
}

////////////////////////// WIDGET

function Widget() {
    this.id = 0;
    this.x = 0;
    this.y = 0;
    this.w = 100;
    this.h = 100;
}

Widget.prototype.init = function(opt) {

    this.id = widgets.length;
    widgets.push(this);

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

        tr_td(form_text('pos_x'+widget.id,widget.x,3)) +
        tr_td(form_text('pos_y'+widget.id,widget.y,3)) +
        tr_td(form_text('pos_w'+widget.id,widget.w,3)) +
        tr_td(form_text('pos_h'+widget.id,widget.h,3)) +

        tr_td(form_checkbox('anc_l'+widget.id,'l')) +
        tr_td(form_checkbox('anc_t'+widget.id,'t')) +
        tr_td(form_checkbox('anc_r'+widget.id,'r')) +
        tr_td(form_checkbox('anc_b'+widget.id,'b')) +

        '',
        'r'+widget.id
        );
    }

    var html = html_widget(this);
    $("#properties-table").append( $(html) );

    var style = '' +
    'width: ' + this.w + 'px;' +
    'height: ' + this.h + 'px;' +
    'top: ' + this.y + 'px;' +
    'left: ' + this.x + 'px;' +
    'background-color: ' + lightColor() + ';';

    $("#widgets").append( $('<div id="w' + this.id + '" class="widget" style="' + style + '"></div>') );

    $("#pos_x" + this.id).bind('change', {id : this.id, prop : 'x' }, widgetHandlerPos );
    $("#pos_y" + this.id).bind('change', {id : this.id, prop : 'y' }, widgetHandlerPos );
    $("#pos_w" + this.id).bind('change', {id : this.id, prop : 'w' }, widgetHandlerPos );
    $("#pos_h" + this.id).bind('change', {id : this.id, prop : 'h' }, widgetHandlerPos );
}


//type name id position anchors


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

    $('#pos-x' + 1).bind('change', function() { onWidgetResize(1); } );
    $('#pos-y' + 1).bind('change', function() { onWidgetResize(1); } );
    $('#pos-w' + 1).bind('change', function() { onWidgetResize(1); } );
    $('#pos-h' + 1).bind('change', function() { onWidgetResize(1); } );

    $("#widgets").append( $('<div id="w'+1+'" style="background-color: ' + lightColor() + '; position: relative; border: 1px solid black;"></div>') );

}*/


</script>

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

.widget {
    position: relative;
    border: 1px solid black;
}

</style>

</head>
<body>

<div id="widgets">

</div>

<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>