wtk::wm title . "Feet to Meters"

wtk::grid [wtk::frame .c -padding "3 3 12 12"] -column 0 -row 0 -sticky nwes
wtk::grid columnconfigure .c 0 -weight 1; wtk::grid rowconfigure .c 0 -weight 1
wtk::grid [wtk::button .c.calc -text "Calculate" -radius 7 -bg violet -fg lightgreen -command calculate] -column 0 -row 1 -sticky w
wtk::grid [wtk::entry .c.feet -width 7 -textvariable feet -bg GreenYellow -fg Red] -column 1 -row 1 -sticky we
wtk::grid [wtk::label .c.flbl -text "feet" -bg yellow] -column 2 -row 1 -sticky w
wtk::grid [wtk::label .c.islbl -text "is equivalent to"] -column 0 -row 2 -sticky e
wtk::grid [wtk::label .c.meters -textvariable meters] -column 1 -row 2 -sticky we
wtk::grid [wtk::label .c.mlbl -text "meters"] -column 2 -row 2 -sticky w
foreach w [wtk::winfo children .c] {wtk::grid configure $w -padx 50 -pady 50}; #not working yet

wtk::grid [wtk::textarea .text -rows 4 -cols 40 -bg GreenYellow -fg Red -textvariable textval] -column 0 -row 2 -sticky ew

wtk::grid [wtk::frame .d -padding "3 3 12 12"] -column 0 -row 3 -sticky nwes
wtk::grid columnconfigure .d 0 -weight 1; wtk::grid rowconfigure .d 0 -weight 1
wtk::grid rowconfigure . 3 -weight 1
wtk::grid [wtk::button .d.ib  -text "" -src /images/logo.png -width 63 -height 63 -command swapimages]  -column 0 -row 0 -sticky e
wtk::grid [wtk::label .d.iblbl -text "<-- Click Me"] -column 1 -row 0 -sticky w
wtk::grid [wtk::combobox .d.cb  -text "ComboBox" -options "zero one two three" -variable textval -command selectimg]  -column 2 -row 0 -sticky w

# TextArea widgets
snit::type textarea {
    _wtkwidget -usetextvar
    _wtkoption -cols "" {$JS.cols=$V;}
    _wtkoption -rows "" {$JS.rows=$V;}
    _wtkoption -bg "" {$JS.style.background='$V';}
    _wtkoption -fg "" {$JS.style.color='$V';}
    method _createjs {} {return "wtk.createTextarea('[$self id]','[$self cget -text]');"}
    method _textchangejs {txt} {return "[$self jqobj].val('$txt');"}
    method _event {which args} {if {$which eq "value"} {$self _textchanged -text $args 1}}
}

        wtk.sessionid = sessionid;
        wtk.widgets['obj0'] = document.getElementById('obj0');
        setTimeout(wtk.poller,100);
    },
    
    poller : function() {$.ajax({type:'GET', url:'wtkpoll.html?sessionid='+wtk.sessionid, dataType:'script', 
                                complete: function() {setTimeout(wtk.poller,100);},
                                error: function(jqXHR, textStatus, errorThrown) {alert("Server connection interrupted\nPress OK to reconnect.");console.log('ajax error '+textStatus+' '+errorThrown);setTimeout(location.reload(1),200);}});},

    sendto : function(msg) { $.get('wtkcb.html?sessionid='+wtk.sessionid, {cmd : msg});},
    
    /*
     * Generic widget creation; each widget is an HTML element of a certain type, and is given an
     * id by the wtk code on the server side which is used to uniquely identify it.
     */
    CreateWidget : function(id,type,txt,attr) {

    comboboxClicked : function(id) { wtk.sendto('EVENT '+id+' value '+wtk.widgets[id].value); },

    createLabel   : function(id, txt) { wtk.CreateWidget(id, 'span', txt,'innerHTML'); },

    createEntry   : function(id, txt) { wtk.CreateWidget(id, 'input', txt,'value').onkeyup = function() {wtk.entryChanged(id);}; },
    entryChanged  : function(id) { wtk.sendto('EVENT '+id+' value '+wtk.widgets[id].value); },

    createTextarea   : function(id, txt) { wtk.CreateWidget(id, 'textarea', txt,'value').onkeyup = function() {wtk.textareaChanged(id);}; },
    textareaChanged  : function(id) { wtk.sendto('EVENT '+id+' value '+wtk.widgets[id].value); },
        
    createFrame   : function(id) { wtk.CreateWidget(id, 'div', '', '');},
    
    createCheckButton : function(id,txt) {
        var w = wtk.CreateWidget(id,'span', '', ''); 
        var c = w.appendChild(document.createElement('input'));
        var l = w.appendChild(document.createElement('span'));