Ticket #473: html5-v2.patch

include/inflate.min.js

@@ -1 @@
-/** @license zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License */(function() {'use strict';function m(b){throw b;}var n=void 0,r=this;function s(b,d){var a=b.split("."),c=r;!(a[0]in c)&&c.execScript&&c.execScript("var "+a[0]);for(var f;a.length&&(f=a.shift());)!a.length&&d!==n?c[f]=d:c=c[f]?c[f]:c[f]={}};var u="undefined"!==typeof Uint8Array&&"undefined"!==typeof Uint16Array&&"undefined"!==typeof Uint32Array;function v(b){var d=b.length,a=0,c=Number.POSITIVE_INFINITY,f,e,g,h,k,l,q,p,t;for(p=0;p<d;++p)b[p]>a&&(a=b[p]),b[p]<c&&(c=b[p]);f=1<<a;e=new (u?Uint32Array:Array)(f);g=1;h=0;for(k=2;g<=a;){for(p=0;p<d;++p)if(b[p]===g){l=0;q=h;for(t=0;t<g;++t)l=l<<1|q&1,q>>=1;for(t=l;t<f;t+=k)e[t]=g<<16|p;++h}++g;h<<=1;k<<=1}return[e,a,c]};function w(b,d){this.g=[];this.h=32768;this.d=this.f=this.a=this.l=0;this.input=u?new Uint8Array(b):b;this.m=!1;this.i=x;this.r=!1;if(d||!(d={}))d.index&&(this.a=d.index),d.bufferSize&&(this.h=d.bufferSize),d.bufferType&&(this.i=d.bufferType),d.resize&&(this.r=d.resize);switch(this.i){case y:this.b=32768;this.c=new (u?Uint8Array:Array)(32768+this.h+258);break;case x:this.b=0;this.c=new (u?Uint8Array:Array)(this.h);this.e=this.z;this.n=this.v;this.j=this.w;break;default:m(Error("invalid inflate mode"))}}
-var y=0,x=1,z={t:y,s:x};
-w.prototype.k=function(){for(;!this.m;){var b=A(this,3);b&1&&(this.m=!0);b>>>=1;switch(b){case 0:var d=this.input,a=this.a,c=this.c,f=this.b,e=n,g=n,h=n,k=c.length,l=n;this.d=this.f=0;e=d[a++];e===n&&m(Error("invalid uncompressed block header: LEN (first byte)"));g=e;e=d[a++];e===n&&m(Error("invalid uncompressed block header: LEN (second byte)"));g|=e<<8;e=d[a++];e===n&&m(Error("invalid uncompressed block header: NLEN (first byte)"));h=e;e=d[a++];e===n&&m(Error("invalid uncompressed block header: NLEN (second byte)"));h|=
-e<<8;g===~h&&m(Error("invalid uncompressed block header: length verify"));a+g>d.length&&m(Error("input buffer is broken"));switch(this.i){case y:for(;f+g>c.length;){l=k-f;g-=l;if(u)c.set(d.subarray(a,a+l),f),f+=l,a+=l;else for(;l--;)c[f++]=d[a++];this.b=f;c=this.e();f=this.b}break;case x:for(;f+g>c.length;)c=this.e({p:2});break;default:m(Error("invalid inflate mode"))}if(u)c.set(d.subarray(a,a+g),f),f+=g,a+=g;else for(;g--;)c[f++]=d[a++];this.a=a;this.b=f;this.c=c;break;case 1:this.j(B,C);break;case 2:aa(this);
-break;default:m(Error("unknown BTYPE: "+b))}}return this.n()};
-var D=[16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15],E=u?new Uint16Array(D):D,F=[3,4,5,6,7,8,9,10,11,13,15,17,19,23,27,31,35,43,51,59,67,83,99,115,131,163,195,227,258,258,258],G=u?new Uint16Array(F):F,H=[0,0,0,0,0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,0,0,0],I=u?new Uint8Array(H):H,J=[1,2,3,4,5,7,9,13,17,25,33,49,65,97,129,193,257,385,513,769,1025,1537,2049,3073,4097,6145,8193,12289,16385,24577],K=u?new Uint16Array(J):J,L=[0,0,0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,
-13],M=u?new Uint8Array(L):L,N=new (u?Uint8Array:Array)(288),O,P;O=0;for(P=N.length;O<P;++O)N[O]=143>=O?8:255>=O?9:279>=O?7:8;var B=v(N),Q=new (u?Uint8Array:Array)(30),R,S;R=0;for(S=Q.length;R<S;++R)Q[R]=5;var C=v(Q);function A(b,d){for(var a=b.f,c=b.d,f=b.input,e=b.a,g;c<d;)g=f[e++],g===n&&m(Error("input buffer is broken")),a|=g<<c,c+=8;g=a&(1<<d)-1;b.f=a>>>d;b.d=c-d;b.a=e;return g}
-function T(b,d){for(var a=b.f,c=b.d,f=b.input,e=b.a,g=d[0],h=d[1],k,l,q;c<h;){k=f[e++];if(k===n)break;a|=k<<c;c+=8}l=g[a&(1<<h)-1];q=l>>>16;b.f=a>>q;b.d=c-q;b.a=e;return l&65535}
-function aa(b){function d(a,b,c){var d,e,f,g;for(g=0;g<a;)switch(d=T(this,b),d){case 16:for(f=3+A(this,2);f--;)c[g++]=e;break;case 17:for(f=3+A(this,3);f--;)c[g++]=0;e=0;break;case 18:for(f=11+A(this,7);f--;)c[g++]=0;e=0;break;default:e=c[g++]=d}return c}var a=A(b,5)+257,c=A(b,5)+1,f=A(b,4)+4,e=new (u?Uint8Array:Array)(E.length),g,h,k,l;for(l=0;l<f;++l)e[E[l]]=A(b,3);g=v(e);h=new (u?Uint8Array:Array)(a);k=new (u?Uint8Array:Array)(c);b.j(v(d.call(b,a,g,h)),v(d.call(b,c,g,k)))}
-w.prototype.j=function(b,d){var a=this.c,c=this.b;this.o=b;for(var f=a.length-258,e,g,h,k;256!==(e=T(this,b));)if(256>e)c>=f&&(this.b=c,a=this.e(),c=this.b),a[c++]=e;else{g=e-257;k=G[g];0<I[g]&&(k+=A(this,I[g]));e=T(this,d);h=K[e];0<M[e]&&(h+=A(this,M[e]));c>=f&&(this.b=c,a=this.e(),c=this.b);for(;k--;)a[c]=a[c++-h]}for(;8<=this.d;)this.d-=8,this.a--;this.b=c};
-w.prototype.w=function(b,d){var a=this.c,c=this.b;this.o=b;for(var f=a.length,e,g,h,k;256!==(e=T(this,b));)if(256>e)c>=f&&(a=this.e(),f=a.length),a[c++]=e;else{g=e-257;k=G[g];0<I[g]&&(k+=A(this,I[g]));e=T(this,d);h=K[e];0<M[e]&&(h+=A(this,M[e]));c+k>f&&(a=this.e(),f=a.length);for(;k--;)a[c]=a[c++-h]}for(;8<=this.d;)this.d-=8,this.a--;this.b=c};
-w.prototype.e=function(){var b=new (u?Uint8Array:Array)(this.b-32768),d=this.b-32768,a,c,f=this.c;if(u)b.set(f.subarray(32768,b.length));else{a=0;for(c=b.length;a<c;++a)b[a]=f[a+32768]}this.g.push(b);this.l+=b.length;if(u)f.set(f.subarray(d,d+32768));else for(a=0;32768>a;++a)f[a]=f[d+a];this.b=32768;return f};
-w.prototype.z=function(b){var d,a=this.input.length/this.a+1|0,c,f,e,g=this.input,h=this.c;b&&("number"===typeof b.p&&(a=b.p),"number"===typeof b.u&&(a+=b.u));2>a?(c=(g.length-this.a)/this.o[2],e=258*(c/2)|0,f=e<h.length?h.length+e:h.length<<1):f=h.length*a;u?(d=new Uint8Array(f),d.set(h)):d=h;return this.c=d};
-w.prototype.n=function(){var b=0,d=this.c,a=this.g,c,f=new (u?Uint8Array:Array)(this.l+(this.b-32768)),e,g,h,k;if(0===a.length)return u?this.c.subarray(32768,this.b):this.c.slice(32768,this.b);e=0;for(g=a.length;e<g;++e){c=a[e];h=0;for(k=c.length;h<k;++h)f[b++]=c[h]}e=32768;for(g=this.b;e<g;++e)f[b++]=d[e];this.g=[];return this.buffer=f};
-w.prototype.v=function(){var b,d=this.b;u?this.r?(b=new Uint8Array(d),b.set(this.c.subarray(0,d))):b=this.c.subarray(0,d):(this.c.length>d&&(this.c.length=d),b=this.c);return this.buffer=b};function U(b,d){var a,c;this.input=b;this.a=0;if(d||!(d={}))d.index&&(this.a=d.index),d.verify&&(this.A=d.verify);a=b[this.a++];c=b[this.a++];switch(a&15){case V:this.method=V;break;default:m(Error("unsupported compression method"))}0!==((a<<8)+c)%31&&m(Error("invalid fcheck flag:"+((a<<8)+c)%31));c&32&&m(Error("fdict flag is not supported"));this.q=new w(b,{index:this.a,bufferSize:d.bufferSize,bufferType:d.bufferType,resize:d.resize})}
-U.prototype.k=function(){var b=this.input,d,a;d=this.q.k();this.a=this.q.a;if(this.A){a=(b[this.a++]<<24|b[this.a++]<<16|b[this.a++]<<8|b[this.a++])>>>0;var c=d;if("string"===typeof c){var f=c.split(""),e,g;e=0;for(g=f.length;e<g;e++)f[e]=(f[e].charCodeAt(0)&255)>>>0;c=f}for(var h=1,k=0,l=c.length,q,p=0;0<l;){q=1024<l?1024:l;l-=q;do h+=c[p++],k+=h;while(--q);h%=65521;k%=65521}a!==(k<<16|h)>>>0&&m(Error("invalid adler-32 checksum"))}return d};var V=8;s("Zlib.Inflate",U);s("Zlib.Inflate.prototype.decompress",U.prototype.k);var W={ADAPTIVE:z.s,BLOCK:z.t},X,Y,Z,$;if(Object.keys)X=Object.keys(W);else for(Y in X=[],Z=0,W)X[Z++]=Y;Z=0;for($=X.length;Z<$;++Z)Y=X[Z],s("Zlib.Inflate.BufferType."+Y,W[Y]);}).call(this); //# sourceMappingURL=inflate.min.js.map
+/** @license zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License */(function() {'use strict';var m=this;function q(c,d){var a=c.split("."),b=m;!(a[0]in b)&&b.execScript&&b.execScript("var "+a[0]);for(var e;a.length&&(e=a.shift());)!a.length&&void 0!==d?b[e]=d:b=b[e]?b[e]:b[e]={}};var s="undefined"!==typeof Uint8Array&&"undefined"!==typeof Uint16Array&&"undefined"!==typeof Uint32Array&&"undefined"!==typeof DataView;function t(c){var d=c.length,a=0,b=Number.POSITIVE_INFINITY,e,f,g,h,k,l,p,n,r,K;for(n=0;n<d;++n)c[n]>a&&(a=c[n]),c[n]<b&&(b=c[n]);e=1<<a;f=new (s?Uint32Array:Array)(e);g=1;h=0;for(k=2;g<=a;){for(n=0;n<d;++n)if(c[n]===g){l=0;p=h;for(r=0;r<g;++r)l=l<<1|p&1,p>>=1;K=g<<16|n;for(r=l;r<e;r+=k)f[r]=K;++h}++g;h<<=1;k<<=1}return[f,a,b]};function u(c,d){this.g=[];this.h=32768;this.d=this.f=this.a=this.l=0;this.input=s?new Uint8Array(c):c;this.m=!1;this.i=v;this.s=!1;if(d||!(d={}))d.index&&(this.a=d.index),d.bufferSize&&(this.h=d.bufferSize),d.bufferType&&(this.i=d.bufferType),d.resize&&(this.s=d.resize);switch(this.i){case w:this.b=32768;this.c=new (s?Uint8Array:Array)(32768+this.h+258);break;case v:this.b=0;this.c=new (s?Uint8Array:Array)(this.h);this.e=this.A;this.n=this.w;this.j=this.z;break;default:throw Error("invalid inflate mode");
+}}var w=0,v=1,x={u:w,t:v};
+u.prototype.k=function(){for(;!this.m;){var c=y(this,3);c&1&&(this.m=!0);c>>>=1;switch(c){case 0:var d=this.input,a=this.a,b=this.c,e=this.b,f=d.length,g=void 0,h=void 0,k=b.length,l=void 0;this.d=this.f=0;if(a+1>=f)throw Error("invalid uncompressed block header: LEN");g=d[a++]|d[a++]<<8;if(a+1>=f)throw Error("invalid uncompressed block header: NLEN");h=d[a++]|d[a++]<<8;if(g===~h)throw Error("invalid uncompressed block header: length verify");if(a+g>d.length)throw Error("input buffer is broken");switch(this.i){case w:for(;e+
+g>b.length;){l=k-e;g-=l;if(s)b.set(d.subarray(a,a+l),e),e+=l,a+=l;else for(;l--;)b[e++]=d[a++];this.b=e;b=this.e();e=this.b}break;case v:for(;e+g>b.length;)b=this.e({p:2});break;default:throw Error("invalid inflate mode");}if(s)b.set(d.subarray(a,a+g),e),e+=g,a+=g;else for(;g--;)b[e++]=d[a++];this.a=a;this.b=e;this.c=b;break;case 1:this.j(z,A);break;case 2:B(this);break;default:throw Error("unknown BTYPE: "+c);}}return this.n()};
+var C=[16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15],D=s?new Uint16Array(C):C,E=[3,4,5,6,7,8,9,10,11,13,15,17,19,23,27,31,35,43,51,59,67,83,99,115,131,163,195,227,258,258,258],F=s?new Uint16Array(E):E,G=[0,0,0,0,0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,0,0,0],H=s?new Uint8Array(G):G,I=[1,2,3,4,5,7,9,13,17,25,33,49,65,97,129,193,257,385,513,769,1025,1537,2049,3073,4097,6145,8193,12289,16385,24577],J=s?new Uint16Array(I):I,L=[0,0,0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,
+13],M=s?new Uint8Array(L):L,N=new (s?Uint8Array:Array)(288),O,P;O=0;for(P=N.length;O<P;++O)N[O]=143>=O?8:255>=O?9:279>=O?7:8;var z=t(N),Q=new (s?Uint8Array:Array)(30),R,S;R=0;for(S=Q.length;R<S;++R)Q[R]=5;var A=t(Q);function y(c,d){for(var a=c.f,b=c.d,e=c.input,f=c.a,g=e.length,h;b<d;){if(f>=g)throw Error("input buffer is broken");a|=e[f++]<<b;b+=8}h=a&(1<<d)-1;c.f=a>>>d;c.d=b-d;c.a=f;return h}
+function T(c,d){for(var a=c.f,b=c.d,e=c.input,f=c.a,g=e.length,h=d[0],k=d[1],l,p;b<k&&!(f>=g);)a|=e[f++]<<b,b+=8;l=h[a&(1<<k)-1];p=l>>>16;c.f=a>>p;c.d=b-p;c.a=f;return l&65535}
+function B(c){function d(a,c,b){var d,e=this.q,f,g;for(g=0;g<a;)switch(d=T(this,c),d){case 16:for(f=3+y(this,2);f--;)b[g++]=e;break;case 17:for(f=3+y(this,3);f--;)b[g++]=0;e=0;break;case 18:for(f=11+y(this,7);f--;)b[g++]=0;e=0;break;default:e=b[g++]=d}this.q=e;return b}var a=y(c,5)+257,b=y(c,5)+1,e=y(c,4)+4,f=new (s?Uint8Array:Array)(D.length),g,h,k,l;for(l=0;l<e;++l)f[D[l]]=y(c,3);if(!s){l=e;for(e=f.length;l<e;++l)f[D[l]]=0}g=t(f);h=new (s?Uint8Array:Array)(a);k=new (s?Uint8Array:Array)(b);c.q=0;
+c.j(t(d.call(c,a,g,h)),t(d.call(c,b,g,k)))}u.prototype.j=function(c,d){var a=this.c,b=this.b;this.o=c;for(var e=a.length-258,f,g,h,k;256!==(f=T(this,c));)if(256>f)b>=e&&(this.b=b,a=this.e(),b=this.b),a[b++]=f;else{g=f-257;k=F[g];0<H[g]&&(k+=y(this,H[g]));f=T(this,d);h=J[f];0<M[f]&&(h+=y(this,M[f]));b>=e&&(this.b=b,a=this.e(),b=this.b);for(;k--;)a[b]=a[b++-h]}for(;8<=this.d;)this.d-=8,this.a--;this.b=b};
+u.prototype.z=function(c,d){var a=this.c,b=this.b;this.o=c;for(var e=a.length,f,g,h,k;256!==(f=T(this,c));)if(256>f)b>=e&&(a=this.e(),e=a.length),a[b++]=f;else{g=f-257;k=F[g];0<H[g]&&(k+=y(this,H[g]));f=T(this,d);h=J[f];0<M[f]&&(h+=y(this,M[f]));b+k>e&&(a=this.e(),e=a.length);for(;k--;)a[b]=a[b++-h]}for(;8<=this.d;)this.d-=8,this.a--;this.b=b};
+u.prototype.e=function(){var c=new (s?Uint8Array:Array)(this.b-32768),d=this.b-32768,a,b,e=this.c;if(s)c.set(e.subarray(32768,c.length));else{a=0;for(b=c.length;a<b;++a)c[a]=e[a+32768]}this.g.push(c);this.l+=c.length;if(s)e.set(e.subarray(d,d+32768));else for(a=0;32768>a;++a)e[a]=e[d+a];this.b=32768;return e};
+u.prototype.A=function(c){var d,a=this.input.length/this.a+1|0,b,e,f,g=this.input,h=this.c;c&&("number"===typeof c.p&&(a=c.p),"number"===typeof c.v&&(a+=c.v));2>a?(b=(g.length-this.a)/this.o[2],f=258*(b/2)|0,e=f<h.length?h.length+f:h.length<<1):e=h.length*a;s?(d=new Uint8Array(e),d.set(h)):d=h;return this.c=d};
+u.prototype.n=function(){var c=0,d=this.c,a=this.g,b,e=new (s?Uint8Array:Array)(this.l+(this.b-32768)),f,g,h,k;if(0===a.length)return s?this.c.subarray(32768,this.b):this.c.slice(32768,this.b);f=0;for(g=a.length;f<g;++f){b=a[f];h=0;for(k=b.length;h<k;++h)e[c++]=b[h]}f=32768;for(g=this.b;f<g;++f)e[c++]=d[f];this.g=[];return this.buffer=e};
+u.prototype.w=function(){var c,d=this.b;s?this.s?(c=new Uint8Array(d),c.set(this.c.subarray(0,d))):c=this.c.subarray(0,d):(this.c.length>d&&(this.c.length=d),c=this.c);return this.buffer=c};function U(c,d){var a,b;this.input=c;this.a=0;if(d||!(d={}))d.index&&(this.a=d.index),d.verify&&(this.B=d.verify);a=c[this.a++];b=c[this.a++];switch(a&15){case V:this.method=V;break;default:throw Error("unsupported compression method");}if(0!==((a<<8)+b)%31)throw Error("invalid fcheck flag:"+((a<<8)+b)%31);if(b&32)throw Error("fdict flag is not supported");this.r=new u(c,{index:this.a,bufferSize:d.bufferSize,bufferType:d.bufferType,resize:d.resize})}
+U.prototype.k=function(){var c=this.input,d,a;d=this.r.k();this.a=this.r.a;if(this.B){a=(c[this.a++]<<24|c[this.a++]<<16|c[this.a++]<<8|c[this.a++])>>>0;var b=d;if("string"===typeof b){var e=b.split(""),f,g;f=0;for(g=e.length;f<g;f++)e[f]=(e[f].charCodeAt(0)&255)>>>0;b=e}for(var h=1,k=0,l=b.length,p,n=0;0<l;){p=1024<l?1024:l;l-=p;do h+=b[n++],k+=h;while(--p);h%=65521;k%=65521}if(a!==(k<<16|h)>>>0)throw Error("invalid adler-32 checksum");}return d};var V=8;q("Zlib.Inflate",U);q("Zlib.Inflate.prototype.decompress",U.prototype.k);var W={ADAPTIVE:x.t,BLOCK:x.u},X,Y,Z,$;if(Object.keys)X=Object.keys(W);else for(Y in X=[],Z=0,W)X[Z++]=Y;Z=0;for($=X.length;Z<$;++Z)Y=X[Z],q("Zlib.Inflate.BufferType."+Y,W[Y]);}).call(this); //@ sourceMappingURL=inflate.min.js.map

include/protocol.js

@@ -107 +107 @@
 function process_buffer() {
         "use strict";
 
-        if (buf[0]!=ord("P"))
+        if (buf[0]!=ord("P")) {
                 throw "invalid packet header format: "+hex2(buf[0]);
+        }
 
         var proto_flags = buf[1];
         if (proto_flags!=0)
@@ -169 +170 @@
         var fn = "";
         try {
                 packet_type = packet[0];
+                show("received a " + packet_type + " packet");
                 fn = packet_handlers[packet_type];
                 if (fn==undefined)
                         error("no packet handler for "+packet_type+"!");

include/window.js

@@ -7 +7 @@
  * Based on shape.js
  */
 
-var window_icons = {};
-//load the window icons
-var image_names = ["maximize", "minimize", "close"];
-function load_icon(name) {
-        console.log("loading "+name);
-        var tmp_canvas = document.createElement('canvas');
-        var tmp_context = tmp_canvas.getContext('2d');
-        var image = new Image();
-        image.onload = function() {
-                show(""+name+"="+image);
-                tmp_context.drawImage(image, 0, 0);
-                var image_data = tmp_context.getImageData(0, 0, image.width, image.height);
-                window_icons[name] = image_data;
-        };
-        image.src = '/include/'+name+'.png';
-}
-
-for (var i in image_names) {
-        load_icon(image_names[i]);
-}
-
 /**
- * A simple button we use to decorate the window.
- */
-function Button(canvas_state, name, x, y, w, h, fill, icon_name, click_callback) {
-        "use strict";
-        this.state = canvas_state;
-        this.name = name;
-        this.x = x || 0;
-        this.y = y || 0;
-        this.w = w || 1;
-        this.h = h || 1;
-        var ctx = canvas_state.canvas.getContext('2d');
-        this.image = ctx.createImageData(w, h);
-        //var data = this.image.data;
-        for (var i=0; i<w*h*4; i++) {
-                this.image.data[i] = (fill || 0xAA) &0xFF;
-        }
-        var icon = window_icons[icon_name];
-        if (icon) {
-                this.update_image(icon.width, icon.height, "premult_argb32", icon.data);
-        }
-        this.click_callback = click_callback;
-}
-Button.prototype.draw_at = function(ctx, x, y) {
-        "use strict";
-        //draw the window pixels:
-        ctx.putImageData(this.image, this.x + x, this.y + y);
-};
-function rectangle_contains(rect, mx, my) {
-        "use strict";
-        // All we have to do is make sure the Mouse X,Y fall in the area between
-        // the shape's X and (X + Height) and its Y and (Y + Height)
-        return  (rect.x <= mx) && (rect.x + rect.w >= mx) &&
-                                        (rect.y <= my) && (rect.y + rect.h >= my);
-};
-Button.prototype.get_geometry = function() {
-        "use strict";
-        return { x : this.x, y : this.y, w : this.w, h : this.h };
-};
-Button.prototype.contains = function(mx, my) {
-        "use strict";
-        return rectangle_contains(this.get_geometry(), mx, my);
-};
-Button.prototype.update_image = function(w, h, pixel_format, data) {
-        "use strict";
-        if (pixel_format!="premult_argb32") {
-                return;
-        }
-        var s, d, i;
-        //to make this faster and better looking,
-        //we could draw to a temporary canvas to scale it,
-        //as per: http://stackoverflow.com/a/3449416/428751
-        //here we just scale it by hand
-        for (var x=0; x<this.w; x++) {
-                for (var y=0; y<this.h; y++) {
-                        //destination index (simple)
-                        d = ((y*this.w) + x) * 4;
-                        //source index (scaled)
-                        s = (Math.round(y*h/this.h)*w + Math.round(w*x/this.w)) * 4;
-                        for (i=0; i<4; i++) {
-                                this.image.data[d+i] = data[s+i];
-                        }
-                }
-        }
-}
-
-/**
- * toString allows us to identify buttons:
- */
-Button.prototype.toString = function() {
-        "use strict";
-        return "Button("+this.name+")";
-};
-
-
-
-/**
  * This is the class representing a window we draw on the canvas.
  * It has a geometry, it may have borders and a top bar.
  * The contents of the window is an image, which gets updated
  * when we receive pixels from the server.
  */
-function XpraWindow(canvas_state, wid, x, y, w, h, metadata, override_redirect, client_properties,
-                geometry_cb, mouse_move_cb, mouse_click_cb, window_closed) {
+function XpraWindow(canvas_state, wid, x, y, w, h, metadata, override_redirect, client_properties, geometry_cb, mouse_move_cb, mouse_click_cb, set_focus_cb, window_closed_cb, htmldiv) {
         "use strict";
+        // use me in jquery callbacks as we lose 'this'
+        var me = this;
         //keep reference to the canvas:
-        this.state = canvas_state;
+        this.canvas = canvas_state;
+        this.div = jQuery("#" + String(wid));
+
         //callbacks start null until we finish init:
         this.geometry_cb = null;
         this.mouse_move_cb = null;
@@ -121 +27 @@
         this.mouse_click_cb = null;
         this.window_closed_cb = null;
 
-        //styling:
-        this.borderColor = '#101028';
-        this.topBarColor = '#B8B8C0';
-
         //the window "backing":
         this.image = null;
 
@@ -136 +38 @@
 
         //window attributes:
         this.title = null;
+        this.windowtype = null;
         this.fullscreen = false;
         this.saved_geometry = null;
         this.maximized = false;
         this.focused = false;
 
-        //not the real geometry we will use,
-        //but enough to avoid errors if update_metadata fires changes
+        //these values represent the internal geometry
+        //i.e. geometry as windows appear to the compositor
         this.x = x;
         this.y = y;
         this.w = w;
         this.h = h;
 
-        this.buttons = {};
+        // get offsets
+        this.leftoffset = parseInt(jQuery(this.div).css('border-left-width'), 10);
+        this.rightoffset = parseInt(jQuery(this.div).css('border-right-width'), 10);
+        this.topoffset = parseInt(jQuery(this.div).css('border-top-width'), 10);
+        this.bottomoffset = parseInt(jQuery(this.div).css('border-bottom-width'), 10);
 
+        // update metadata
         this.update_metadata(metadata);
 
-        // the space taken by window decorations:
-        this.calculate_offsets();
-
-        if (!this.fullscreen && !this.maximized) {
-                // if fullscreen or maximized, the metadata update will have set the new size already
-                // account for borders, and try to make the image area map to (x,y):
-                var rx = (x || 0) - this.borderWidth;
-                var ry = (y || 0) - this.topBarHeight + this.borderWidth;
-                var rw = (w || 1) + this.borderWidth*2;
-                var rh = (h || 1) + this.borderWidth*2 + this.topBarHeight;
-                this.move_resize(rx, ry, rw, rh);
-                //show("after move resize: ("+this.w+", "+this.h+")");
+        // Hook up the events we want to receive:
+        this.event_listeners = []
+        var listeners = [
+                        ['mousedown'    , true],
+                        ['mouseup'              , true],
+                        ['mousemove'    , true]
+                        ];
+        for (i = 0; i < listeners.length; i += 1) {
+                var l = listeners[i];
+                this.registerEventListener(l[0], l[1]);
         }
 
         // now safe to assign the callbacks:
@@ -170 +76 @@
         this.geometry_cb = geometry_cb || null;
         this.mouse_move_cb = mouse_move_cb || null;
         this.mouse_click_cb = mouse_click_cb || null;
-        this.window_closed_cb = window_closed || null;
+        this.window_closed_cb = window_closed_cb || null;
 
-        //create the buttons:
-        if (!this.override_redirect) {
-                this.create_buttons();
+        // create the decoration as part of the window, style is in CSS
+        jQuery(this.div).addClass("window");
+        jQuery(this.div).addClass("window-" + this.windowtype);
+        // add a title bar to this window if we need to
+        if((this.windowtype == "NORMAL") || (this.windowtype == "DIALOG") || (this.windowtype == "UTILITY")) {
+                if(!this.override_redirect) {
+                        // create header
+                        jQuery(this.div).prepend('<div id="head' + String(wid) + '" class="windowhead"> <span class="windowtitle" id="title' + String(wid) + '">' + this.title + '</span> <span class="windowbuttons"> <span id="close' + String(wid) + '"><img src="include/close.png" /></span> </span></div>');
+                        // make draggable
+                        jQuery(this.div).draggable({
+                                cancel: "canvas",
+                                stop: function(e, ui) {
+                                        me.handle_moved(ui);
+                                }
+                        });
+                        // attach resize handles
+                        jQuery(this.div).resizable({
+                      helper: "ui-resizable-helper",
+                      stop: function(e, ui) {
+                        me.handle_resized(ui);
+                      }
+                    });
+                        this.d_header = '#head' + String(wid);
+                        this.d_closebtn = '#close' + String(wid);
+                        // adjust top offset
+                        this.topoffset = this.topoffset + parseInt(jQuery(this.d_header).css('height'), 10);
+                        // assign some interesting callbacks
+                        jQuery('#head' + String(wid)).click(function() {
+                                set_focus_cb(wid);
+                        });
+                        jQuery('#close' + String(wid)).click(function() {
+                                window_closed_cb(wid);
+                        });
+                }
         }
+
+        // need to update the CSS geometry
+        this.ensure_visible();
+        this.updateCSSGeometry();
+        //show("placing new window at "+this.x+","+this.y);
+
         //create the image holding the pixels (the "backing"):
         this.create_image_backing();
-        canvas_state.addShape(this);
 };
 
-/**
- * Creates the minimize, maximize and close buttons.
- */
-XpraWindow.prototype.create_buttons = function() {
-        "use strict";
-        var w = 24;
-        var h = 24;
-        var self = this;
-        this.buttons["icon"] = new Button(this.state, "icon",           this.borderWidth,       this.borderWidth, w, h, 0x11, null, null);
-        /*this.buttons["minimize"] = new Button(this.state, "minimize", this.w-(w+2)*3,         this.borderWidth, w, h, 0x44, function() {
-                //TODO!
-        });*/
-        this.buttons["maximize"] = new Button(this.state, "maximize",   this.w-(w+2)*2,         this.borderWidth, w, h, 0x66, "maximize", function() {
-                var m = !self.maximized;
-                self.client_properties["maximized"] = m;
-                self.set_maximized(m);
-        });
-        this.buttons["close"] = new Button(this.state, "close",         this.w-(w+2)*1,         this.borderWidth, w, h, 0x99, "close", function() {
-                if (self.window_closed_cb) {
-                        self.window_closed_cb(self);
-                }
-        });
-};
-/**
- * Ensures that the buttons are always in the same place
- * after a resize.
- */
-XpraWindow.prototype.move_buttons = function() {
-        var w = 24;
-        if ("maximize" in this.buttons) {
-                this.buttons["maximize"].x = this.w-(w+2)*2;
+XpraWindow.prototype.ensure_visible = function() {
+        var oldx = this.x;
+        var oldy = this.y;
+        // for now make sure we don't out of top left
+        // this will be much smarter!
+        if(oldx <= 0) {
+                this.x = 0 + this.leftoffset;
         }
-        if ("close" in this.buttons) {
-                this.buttons["close"].x = this.w-(w+2)*1;
+        if(oldy <= 10) {
+                this.y = 0 + this.topoffset;
         }
+        if((oldx != this.x) || (oldy != this.y)) {
+                this.updateCSSGeometry();
+                return false;
+        }
+        return true;
 }
 
+XpraWindow.prototype.updateCSSGeometry = function() {
+        // set size of canvas if needed
+        if(this.canvas.width != this.w) {
+                this.canvas.width = this.w;
+        }
+        if(this.canvas.height != this.h) {
+                this.canvas.height = this.h;
+        }
+        // work out outer size
+        this.outerH = this.h + this.topoffset + this.bottomoffset;
+        this.outerW = this.w + this.leftoffset + this.rightoffset;
+        // set width and height
+        jQuery(this.div).css('width', this.outerW);
+        jQuery(this.div).css('height', this.outerH);
+        // set CSS attributes to outerX and outerY
+        this.outerX = this.x - this.leftoffset;
+        this.outerY = this.y - this.topoffset;
+        jQuery(this.div).css('left', this.outerX);
+        jQuery(this.div).css('top', this.outerY);
+}
 
+XpraWindow.prototype.updateFocus = function() {
+        if(this.focused) {
+                // set focused style to div
+                jQuery(this.div).addClass("windowinfocus");
+
+        } else {
+                // set not in focus style
+                jQuery(this.div).removeClass("windowinfocus");
+        }
+}
+
+XpraWindow.prototype.registerEventListener = function(event_type, useCapture) {
+        var self = this;
+        var fn_name = "on_"+event_type;
+        var handler = self[fn_name];
+        var fn = function(e) {
+                handler.call(self, e);
+        };
+        this.event_listeners[event_type] = fn;
+        this.canvas["on"+event_type] = fn;
+};
+
+XpraWindow.prototype.getMouse = function(e) {
+        "use strict";
+
+        // get mouse position take into account scroll
+        var mx = e.clientX + jQuery(document).scrollLeft();
+        var my = e.clientY + jQuery(document).scrollTop();
+
+        var mbutton = 0;
+        if ("which" in e)  // Gecko (Firefox), WebKit (Safari/Chrome) & Opera
+                mbutton = Math.max(0, e.which);
+        else if ("button" in e)  // IE, Opera (zero based)
+                mbutton = Math.max(0, e.button)+1;
+        //show("getmouse: button="+mbutton+", which="+e.which+", button="+e.button);
+
+        // We return a simple javascript object (a hash) with x and y defined
+        return {x: mx, y: my, button: mbutton};
+};
+
+XpraWindow.prototype.on_mousemove = function(e) {
+        var mouse = this.getMouse(e),
+                        mx = mouse.x,
+                        my = mouse.y;
+
+                        var modifiers = [];
+                        var buttons = [];
+                        this.handle_mouse_move(mx, my, modifiers, buttons);
+
+};
+
+XpraWindow.prototype.on_mousedown = function(e) {
+        var mouse, mx, my, shapes, l, i, mySel;
+
+        mouse = this.getMouse(e);
+        mx = mouse.x;
+        my = mouse.y;
+
+        // pass the click to the area:
+        var modifiers = [];
+        var buttons = [];
+        this.handle_mouse_click(mouse.button, true, mx, my, modifiers, buttons);
+        return;
+};
+
+XpraWindow.prototype.on_mouseup = function(e) {
+        // if not handling it ourselves, pass it down:
+        var mouse = this.getMouse(e),
+                        mx = mouse.x,
+                        my = mouse.y;
+        if (!this.dragging) {
+                var modifiers = [];
+                var buttons = [];
+                this.handle_mouse_click(mouse.button, false, mx, my, modifiers, buttons);
+        }
+
+        this.dragging = false;
+};
+
 /**
  * toString allows us to identify windows by their unique window id.
  */
@@ -235 +257 @@
         var previous_image = this.image;
         var img_geom = this.get_internal_geometry();
         //show("createImageData: "+img_geom.toSource());
-        this.image = canvas_state.canvas.getContext('2d').createImageData(img_geom.w, img_geom.h);
+        this.image = this.canvas.getContext('2d').createImageData(img_geom.w, img_geom.h);
         if (previous_image) {
                 //copy previous pixels to new image, ignoring bit gravity
-                //TODO!
+                this.canvas.getContext('2d').putImageData(previous_image, 0, 0);
         }
 };
 
 /**
- * Depending on the type of window (OR, fullscreen)
- * we calculate the offsets from the edge of the window
- * to the contents of the window.
- */
-XpraWindow.prototype.calculate_offsets = function() {
-        "use strict";
-        if (this.override_redirect || this.fullscreen) {
-                //no borders or top bar at all:
-                this.borderWidth = 0;
-                this.topBarHeight = 0;
-        }
-        else {
-                //regular borders and top bar:
-                this.borderWidth = 2;
-                this.topBarHeight = 24;
-        }
-        this.offsets = [this.borderWidth+this.topBarHeight, this.borderWidth, this.borderWidth, this.borderWidth];
-};
-
-/**
  * Update our metadata cache with new key-values,
  * then call set_metadata with these new key-values.
  */
@@ -288 +290 @@
     }
     if ("title" in metadata) {
         this.title = metadata["title"];
-        //redraw everything (a bit wasteful):
-        this.state.invalidate();
+        jQuery('#title' + this.wid).html(this.title);
     }
+    if ("window-type" in metadata) {
+        this.windowtype = metadata["window-type"][0];
+    }
 };
 
 /**
@@ -299 +303 @@
  */
 XpraWindow.prototype.save_geometry = function() {
         "use strict";
+        /*
+
+        TODO
+
+        * probably won't need to do this just use CSS to display: none;
+        * see restore_geometry
+
         if (this.x==undefined || this.y==undefined)
                 return;
     this.saved_geometry = {
@@ -308 +319 @@
                 "h" : this.h,
                 "maximized"     : this.maximized,
                 "fullscreen" : this.fullscreen};
+    */
 }
 /**
  * Restores the saved geometry (if it exists).
@@ -314 +326 @@
  */
 XpraWindow.prototype.restore_geometry = function() {
         "use strict";
+        /*
+
+        TODO
+
+        * we probably won't need to do this since we can just change CSS to
+        * display: none; to hide it!
+
         if (this.saved_geometry==null) {
                 return;
         }
@@ -323 +342 @@
         this.h = this.saved_geometry["h"];
         this.maximized = this.saved_geometry["maximized"];
         this.fullscreen = this.saved_geometry["fullscreen"];
+        */
 };
 
 /**
@@ -330 +350 @@
  */
 XpraWindow.prototype.set_maximized = function(maximized) {
         "use strict";
+        /*
+
+        TODO
+
         //show("set_maximized("+maximized+")");
         if (this.maximized==maximized) {
                 return;
@@ -338 +362 @@
         this.maximized = maximized;
         this.calculate_offsets();
         this.handle_resize();
+        */
 };
 /**
  * Fullscreen / unfullscreen the window.
@@ -344 +369 @@
  */
 XpraWindow.prototype.set_fullscreen = function(fullscreen) {
         "use strict";
+        /*
+
+        TODO
+
         //show("set_fullscreen("+fullscreen+")");
         if (this.fullscreen==fullscreen) {
                 return;
@@ -352 +381 @@
         this.fullscreen = fullscreen;
         this.calculate_offsets();
         this.handle_resize();
+        */
 };
 
 /**
@@ -361 +391 @@
  */
 XpraWindow.prototype.max_save_restore = function(use_all_space) {
         "use strict";
+        /*
+
+        TODO
+
+        * again see save|restore_geometry
+
         if (use_all_space) {
                 this.save_geometry();
                 this.fill_canvas();
@@ -368 +404 @@
         else {
                 this.restore_geometry();
         }
+        */
 };
 
 /**
@@ -375 +412 @@
  */
 XpraWindow.prototype.fill_canvas = function() {
         "use strict";
+        /*
+
+        TODO
+
         this.x = 0;
         this.y = 0;
-        this.w = this.state.width;
-        this.h = this.state.height;
+        this.w = 640;
+        this.h = 480;
+        */
 };
 
 /**
  * We have resized the window, so we need to:
+ * - work out new position of internal canvas
+ * - update external CSS position
  * - resize the backing image
- * - tell the canvas to repaint us
  * - fire the geometry_cb
  */
-XpraWindow.prototype.handle_resize = function() {
+XpraWindow.prototype.handle_resized = function(e) {
         "use strict";
+        // this function is called on local resize only,
+        // remote resize will call this.resize()
+        // need to update the internal geometry
+        this.w = e.size.width - this.leftoffset - this.rightoffset;
+        this.h = e.size.height - this.topoffset - this.bottomoffset;
+        // then update CSS and redraw backing
+        this.updateCSSGeometry();
         this.create_image_backing();
-        this.state.invalidate();
-        this.move_buttons();
-        if (this.geometry_cb!=null) {
-                this.geometry_cb(this);
-        }
+        // send geometry callback
+        this.geometry_cb(this);
 };
 
 /**
+ * Like handle_resized, except we should
+ * store internal geometry, external is always in CSS left and top
+ */
+XpraWindow.prototype.handle_moved = function(e) {
+        "use strict";
+        // add on padding to the event position so that
+        // it reflects the internal geometry of the canvas
+        this.x = e.position.left + this.leftoffset;
+        this.y = e.position.top + this.topoffset;
+        // make sure we are visible after move
+        this.ensure_visible();
+        // tell remote we have moved window
+        this.geometry_cb(this);
+}
+
+/**
  * The canvas ("screen") has been resized, we may need to resize our window to match
  * if it is fullscreen or maximized.
  */
 XpraWindow.prototype.canvas_resized = function() {
         "use strict";
+        /*
+
+        TODO
+
         if (this.fullscreen || this.maximized) {
                 this.fill_canvas();
                 this.handle_resize();
         }
+        */
 };
 
-XpraWindow.prototype.move_resize = Shape.prototype.move_resize;
-XpraWindow.prototype.move = Shape.prototype.move;
-XpraWindow.prototype.resize = Shape.prototype.resize;
-XpraWindow.prototype.get_window_geometry = Shape.prototype.get_window_geometry;
+/**
+ * Things ported from original shape
+ */
 
+XpraWindow.prototype.move_resize = function(x, y, w, h) {
+        "use strict";
+        // only do it if actually changed!
+        if(!(this.w == w) || !(this.h == h) || !(this.x == x) || !(this.y == y)) {
+                this.w = w;
+                this.h = h;
+                this.x = x;
+                this.y = y;
+                if(!this.ensure_visible()) {
+                        // we had to move the window so that it was visible
+                        // is this the right thing to do?
+                        this.geometry_cb(this);
+                }
+                this.updateCSSGeometry();
+                this.create_image_backing();
+        }
+};
+
+XpraWindow.prototype.move = function(x, y) {
+        "use strict";
+        this.move_resize(x, y, this.w, this.h);
+};
+
+XpraWindow.prototype.resize = function(w, h) {
+        "use strict";
+        this.move_resize(this.x, this.y, w, h);
+};
+
 /**
  * Returns the geometry of the window backing image,
  * the inner window geometry (without any borders or top bar).
  */
-XpraWindow.prototype.get_internal_geometry = function(ctx) {
+XpraWindow.prototype.get_internal_geometry = function() {
         "use strict";
-        // This should always be true:
-        //this.image.width = this.w - this.borderWidth*2;
-        //this.image.height = this.h - (this.borderWidth*2 + this.topBarHeight);
-        return { x : this.x+this.borderWidth,
-                         y : this.y+this.borderWidth+this.topBarHeight,
-                         w : this.w - this.borderWidth*2,
-                         h : this.h - (this.borderWidth*2 + this.topBarHeight)};
+        /* we store the internal geometry only
+         * and work out external geometry on the fly whilst
+         * updating CSS
+         */
+        return { x : this.x,
+                         y : this.y,
+                         w : this.w,
+                         h : this.h};
 };
 
 /**
- * If the click is in the "internal_geometry" (see above),
+ * Handle mouse click from this window's canvas,
  * then we fire "mouse_click_cb" (if it is set).
  */
 XpraWindow.prototype.handle_mouse_click = function(button, pressed, mx, my, modifiers, buttons) {
         "use strict";
-        var igeom = this.get_internal_geometry();
-        if (this.mouse_click_cb!=null && rectangle_contains(igeom, mx, my)) {
-                this.mouse_click_cb(this, button, pressed, mx, my, modifiers, buttons);
-                return;
-        }
-        //maybe one of the buttons:
-        //(use relative coordinates)
-        var x = mx-this.x;
-        var y = my-this.y
-        for (var name in this.buttons) {
-                var button = this.buttons[name];
-                if (button.contains(x, y)) {
-                        show("clicked on button "+name);
-                        var cb = button.click_callback;
-                        if (cb) {
-                                cb();
-                        }
-                        return;
-                }
-        }
+        console.log("got mouse click at ", mx, my)
+        // mouse click event is from canvas just for this window so no need to check
+        // internal geometry anymore
+        this.mouse_click_cb(this, button, pressed, mx, my, modifiers, buttons);
 };
 
 /**
- * If the click is in the "internal_geometry" (see above),
+ * Handle mouse move from this window's canvas,
  * then we fire "mouse_move_cb" (if it is set).
  */
 XpraWindow.prototype.handle_mouse_move = function(mx, my, modifiers, buttons) {
         "use strict";
-        var igeom = this.get_internal_geometry();
-        if (this.mouse_move_cb!=null && rectangle_contains(igeom, mx, my)) {
-                this.mouse_move_cb(this, mx, my, modifiers, buttons);
-        }
+        this.mouse_move_cb(this, mx, my, modifiers, buttons);
 };
 
 
 XpraWindow.prototype.update_icon = function(w, h, pixel_format, data) {
         "use strict";
-        var icon = this.buttons["icon"];
-        if (icon) {
-                icon.update_image(w, h, pixel_format, data);
-                this.state.invalidate();
-        }
+        // update icon
+        // TODO
 }
 
 /**
@@ -487 +561 @@
  */
 XpraWindow.prototype.draw = function(ctx) {
         "use strict";
-
-        if (!this.override_redirect && !this.fullscreen) {
-                //draw window frame:
-                this.draw_frame(ctx);
-        }
-
         //draw the window pixels:
-        ctx.putImageData(this.image, this.x + this.borderWidth, this.y + this.borderWidth + this.topBarHeight);
-
-        if (this.state.selection === this && !this.override_redirect) {
-                //window.alert("Shape.prototype.draw_selection="+Shape.prototype.draw_selection);
-                this.draw_selection(ctx);
-        }
+        var ctx = this.canvas.getContext('2d');
+        ctx.putImageData(this.image, 0, 0);
 };
 
-/**
- * Draws the window frame:
- * a simple rectangle around the edge.
- */
-XpraWindow.prototype.draw_frame = function(ctx) {
-        "use strict";
 
-        // draw border:
-        ctx.strokeStyle = this.borderColor;
-        ctx.lineWidth = this.borderWidth;
-        var hw = this.borderWidth/2;
-        ctx.strokeRect(this.x+hw,this.y+hw,this.w-this.borderWidth,this.h-this.borderWidth);
-
-        // draw top bar:
-        ctx.fillStyle = this.topBarColor;
-        ctx.fillRect(this.x+this.borderWidth, this.y+this.borderWidth, this.w-this.borderWidth*2, this.topBarHeight);
-        // draw title:
-        if (this.title) {
-                var size = 18;
-                ctx.font = ""+size+"px sans-serif";
-                ctx.fillStyle = "#FFFFFF";
-                ctx.fillText(this.title, this.x+32, this.y+this.borderWidth+this.topBarHeight-size/3);
-        }
-
-        // draw buttons:
-        for (var name in this.buttons) {
-                var button = this.buttons[name];
-                button.draw_at(ctx, this.x, this.y);
-        }
-};
-
-
 /**
- * Draws border and selection rectangles
- * which indicate that the window is selected
- */
-XpraWindow.prototype.draw_selection = function(ctx) {
-        "use strict";
-        if (this.maximized || this.fullscreen) {
-                return;
-        }
-        var i, cur, half;
-
-        ctx.strokeStyle = this.state.selectionColor;
-        ctx.lineWidth = this.state.selectionWidth;
-        ctx.strokeRect(this.x,this.y,this.w,this.h);
-
-        // draw the boxes
-        half = this.state.selectionBoxSize / 2;
-
-        // 0  1  2
-        // 3     4
-        // 5  6  7
-
-        // top left, middle, right
-        this.state.selectionHandles[0].x = this.x-half;
-        this.state.selectionHandles[0].y = this.y-half;
-
-        this.state.selectionHandles[1].x = this.x+this.w/2-half;
-        this.state.selectionHandles[1].y = this.y-half;
-
-        this.state.selectionHandles[2].x = this.x+this.w-half;
-        this.state.selectionHandles[2].y = this.y-half;
-
-        //middle left
-        this.state.selectionHandles[3].x = this.x-half;
-        this.state.selectionHandles[3].y = this.y+this.h/2-half;
-
-        //middle right
-        this.state.selectionHandles[4].x = this.x+this.w-half;
-        this.state.selectionHandles[4].y = this.y+this.h/2-half;
-
-        //bottom left, middle, right
-        this.state.selectionHandles[6].x = this.x+this.w/2-half;
-        this.state.selectionHandles[6].y = this.y+this.h-half;
-
-        this.state.selectionHandles[5].x = this.x-half;
-        this.state.selectionHandles[5].y = this.y+this.h-half;
-
-        this.state.selectionHandles[7].x = this.x+this.w-half;
-        this.state.selectionHandles[7].y = this.y+this.h-half;
-
-        ctx.fillStyle = this.state.selectionBoxColor;
-        for (i = 0; i < 8; i += 1) {
-                cur = this.state.selectionHandles[i];
-                ctx.fillRect(cur.x, cur.y, this.state.selectionBoxSize, this.state.selectionBoxSize);
-        }
-};
-
-/**
  * Updates the window image with new pixel data
  * we have received from the server.
  */
@@ -625 +601 @@
         var stride = this.image.width*4;
         //and we can paint the canvas with it
         //(if we have transparency, we should probably repaint what is underneath...)
-        var ctx = this.state.ctx;
+        var ctx = this.canvas.getContext('2d');
 
         if (x==0 && width==this.image.width && y+height<=this.image.height) {
                 //take a shortcut: copy all lines
@@ -633 +609 @@
 
                 if (this.focused) {
                         //shortcut: paint canvas directly
-                        ctx.putImageData(this.image, this.x + this.borderWidth, this.y + this.borderWidth + this.topBarHeight);
+                        ctx.putImageData(this.image, 0, 0);
                         return;
+                } else {
+                        // window is not in focus but should we draw it anyway?
+                        ctx.putImageData(this.image, 0, 0);
+                        return;
                 }
         }
         else if (x+width<=this.image.width && y+height<=this.image.height) {
@@ -650 +630 @@
 
                 if (this.focused) {
                         //shortcut: paint canvas directly
-                        ctx.putImageData(img, this.x + this.borderWidth + x, this.y + this.borderWidth + this.topBarHeight + y);
+                        ctx.putImageData(img, x, y);
                         return;
+                } else {
+                        // window is not in focus but should we draw it anyway?
+                        ctx.putImageData(img, x, y);
+                        return;
                 }
         }
         else {
@@ -658 +642 @@
                 //no action taken, no need to invalidate
                 return;
         }
-        this.state.invalidate();
+        //this.state.invalidate();
 };
 
 /**
@@ -666 +650 @@
  */
 XpraWindow.prototype.destroy = function destroy() {
         "use strict";
-        if (this.state!=null) {
-                this.state.removeShape(this);
-                this.state = null;
-        }
+        // remove div
+        this.div.remove()
 };
-
-/**
- * Determine if a point is inside the window's contents
- */
-XpraWindow.prototype.contains = function(mx, my) {
-        "use strict";
-        // All we have to do is make sure the Mouse X,Y fall in the area between
-        // the shape's X and (X + Height) and its Y and (Y + Height)
-        return  (this.x <= mx) && (this.x + this.w >= mx) &&
-                                        (this.y <= my) && (this.y + this.h >= my);
-};
-
-/**
- * Determine if a point is inside the window's grab area.
- * (the edges that are not part of the image backing)
- */
-XpraWindow.prototype.is_grab_area = function(mx, my) {
-        "use strict";
-        if (!this.contains(mx, my)) {
-                return false;
-        }
-        // use window relative values from here on:
-        var x = mx - this.x;
-        var y = my - this.y;
-
-        // must be in the border area:
-        if (!(y<=this.offsets[0] || my>=(this.h-this.offsets[2]) ||
-                        x<=this.offsets[3] || x>=(this.w-this.offsets[1]))) {
-                return false;
-        }
-
-        // check that this isn't one of the buttons:
-        for (var name in this.buttons) {
-                var button = this.buttons[name];
-                if (button.contains(x, y)) {
-                        return false;
-                }
-        }
-        return true;
-};

index.html

@@ -19 +19 @@
                             width: 100%;
                             padding: 0;
                             margin: 0;
-                            color: white;
+                            overflow: hidden;
                         }
-                        div.form {
-                                background-color: #708090;
-                                border: 4px solid #506070;
-                                box-sizing: border-box;
-                        }
                         div#disconnect_form {
                                 display: none;
                         }
-                        fieldset {
-                                margin: 0px;
-                                border: 0px solid black;
-                        }
                         canvas {
-                                border: 0px solid black;
-                                display: none;
+                                border: none;
+                                padding: 0;
+                                margin: 0;
                         }
+                        .window {
+                                border: 1px;
+                                position: absolute;
+                                box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.5);
+                                padding: 0;
+                                overflow: hidden; /* required for radius clip */
+                        }
+                        .window-NORMAL {
+                                border-radius: 6px;
+                        }
+                        .window-DROPDOWN_MENU {
+                                z-index: 20000;
+                        }
+                        .window-TOOLTIP {
+                                z-index: 20000;
+                        }
+                        .window-POPUP_MENU {
+                                z-index: 20000;
+                        }
+                        .window-COMBO {
+                                z-index: 20000;
+                        }
+                        .window-UTILITY {
+                                z-index: 15000;
+                        }
+                        .windowhead {
+                                height: 30px;
+                                color: #000000;
+                                background-color: #c0c0c0;
+                        }
+                        .windowtitle {
+                                display: inline-block;
+                                float: left;
+                                width: 80%;
+                                overflow: hidden;
+                                text-overflow:ellipsis;
+                                white-space: nowrap;
+                                padding: 5px;
+                                cursor: default;
+                        }
+                        .windowbuttons {
+                            display: inline-block;
+                            float: right;
+                            padding-right: 5px;
+                            cursor: pointer;
+                            padding-top: 7px;
+                        }
+                        .windowinfocus {
+                                z-index: 10000;
+                        }
+                        .ui-resizable-helper { 
+                                border: 2px dotted #00F; 
+                                z-index: 30000 !important;
+                        }
+                        .ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; }
+                        .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
+                        .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
+                        .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
+                        .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
+                        .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
+                        .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
+                        .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
+                        .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
+                        .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
                 </style>
 
+                <script type="text/javascript" src="include/util.js"></script>
                 <script type="text/javascript" src="include/websock.js"></script>
                 <script type="text/javascript" src="include/bencode.js"></script>
                 <script type="text/javascript" src="include/inflate.min.js"></script>
                 <script type="text/javascript" src="include/protocol.js"></script>
                 <script type="text/javascript" src="include/keycodes.js"></script>
-                <script type="text/javascript" src="include/shapes.js"></script>
                 <script type="text/javascript" src="include/window.js"></script>
-                <script type="text/javascript" src="include/util.js"></script>
+                <script type="text/javascript" src="include/jquery.min.js"></script>
+                <script type="text/javascript" src="include/jqueryui.min.js"></script>
 
                 <script>
                         var protocol;
                         var status = "ready";
 
+                        var topwindow = null;
+                        var topindex = 0;
+
                         var id_to_window = {};
                         var window_to_id = {};
                         var focus = -1;
                         var screen_size_change_pending = false;
 
+                        // from http://stackoverflow.com/a/11744120
+                        var w = window,
+                            d = document,
+                            e = d.documentElement,
+                            g = d.getElementsByTagName('body')[0];
+
+                        var screen_width = w.innerWidth || e.clientWidth || g.clientWidth;
+                        var screen_height = w.innerHeight|| e.clientHeight|| g.clientHeight;
+
                         var OLD_ENCODING_NAMES_TO_NEW = {"x264" : "h264", "vpx" : "vp8"};
                         var RGB_FORMATS = ["RGBX", "RGBA"];
-                        var canvas_state = null;
 
                         var caps_lock = null;
                         var alt_modifier = null;
                         var meta_modifier = null;
 
+                        // disable right click menu:
+                        window.oncontextmenu = function(e) {
+                                //showCustomMenu();
+                                return false;
+                        }
+
                         /**
                          * Returns the modifiers set for the current event.
                          * We get the list of modifiers using "get_event_modifiers"
@@ -95 +169 @@
                          */
                         function processKeyEvent(pressed, event) {
                                 "use strict";
-                                if (canvas_state==null)
-                                        return;
                                 // MSIE hack
                                 if (window.event)
                                         event = window.event;
@@ -125 +197 @@
                                 if ((caps_lock && shift) || (!caps_lock && !shift))
                                         str = str.toLowerCase();
 
-                                var win = canvas_state.topOfStack();
-                                if (win != null) {
+                                if (topwindow != null) {
                                         //show("win="+win.toSource()+", keycode="+keycode+", modifiers=["+modifiers+"], str="+str);
-                                        var wid = window_to_id[win];
-                                        var packet = ["key-action", wid, keyname, pressed, modifiers, keyval, str, keycode, group];
+                                        var packet = ["key-action", topwindow, keyname, pressed, modifiers, keyval, str, keycode, group];
                                         send(packet);
                                 }
                         }
@@ -256 +326 @@
                         //These are callbacks from XpraWindow to us
                         //to notify us of window clicks and events:
 
-                        function window_closed(win) {
+                        function window_closed(wid) {
                                 "use strict";
-                                var wid = window_to_id[win];
                                 send(["close-window", wid]);
                         }
                         function window_geometry_changed(win) {
                                 "use strict";
-                                //show("window_geometry_changed("+win+") geometry="+win.get_window_geometry().toSource());
+                                show("geometry changed");
+                                //show("window_geometry_changed="+win.get_window_geometry().toSource());
                                 var geom = win.get_internal_geometry();
-                                var wid = window_to_id[win];
+                                var wid = win.wid;
                                 if (!win.override_redirect)
                                         self.set_focus(wid);
                                 send(["configure-window", wid, geom.x, geom.y, geom.w, geom.h, get_client_properties(win)]);
@@ -278 +348 @@
                         function mouse_click(win, button, pressed, x, y, modifiers, buttons) {
                                 "use strict";
                                 var wid = window_to_id[win];
-                                //show("mouse_click(..) wid("+win+")="+wid);
-                                check_focus();
+                                set_focus(wid);
                                 send(["button-action", wid, button, pressed, [x, y], modifiers, buttons]);
                         };
 
@@ -286 +355 @@
                         function check_focus() {
                                 "use strict";
                                 var wid = -1;
-                                var win = canvas_state.topOfStack();
                                 if (win != null)
                                         wid = window_to_id[win];
                                 //show("check_focus() window_to_id["+win+"]="+wid+", focus="+wid+", window_to_id="+window_to_id.toSource());
@@ -298 +366 @@
                                 "use strict";
                                 focus = wid;
                                 send(["focus", focus, []]);
+                                topwindow = wid;
                                 //set the focused flag on all windows:
                 var win;
                                 for (var i in id_to_window) {
                                         win = id_to_window[i];
                                         win.focused = (i==wid);
+                                        win.updateFocus();
                                 }
                         }
 
+                        function refresh_window(wid) {
+                                "use strict";
+                                // refresh the window
+                                show("send buffer-refresh");
+                                send(['buffer-refresh', wid, true, 95]);
+                        }
+
                         function get_client_properties(win) {
                                 "use strict";
                                 var cp = win.client_properties;
@@ -315 +392 @@
 
                         function make_new_window(wid, x, y, w, h, metadata, override_redirect, client_properties) {
                                 "use strict";
-                                var win = new XpraWindow(canvas_state, wid, x, y, w, h, metadata, override_redirect, client_properties,
-                                                window_geometry_changed, mouse_move, mouse_click, window_closed);
-                                //show("make_new_window("+wid+", "+x+", "+y+", "+w+", "+h+", "+metadata+", "+override_redirect+", "+client_properties+")="+win);
+                                // each window needs their own DIV that contains a canvas
+                                var mydiv = document.createElement("div");
+                                mydiv.id = String(wid);
+                                var mycanvas = document.createElement("canvas");
+                                mydiv.appendChild(mycanvas);
+                                document.body.appendChild(mydiv);
+                                // set initial sizes
+                                mycanvas.width = w;
+                                mycanvas.height = h;
+                                // create the XpraWindow object to own the new div
+                                var win = new XpraWindow(mycanvas, wid, x, y, w, h, metadata, override_redirect, client_properties,
+                                                window_geometry_changed, mouse_move, mouse_click, set_focus, window_closed);
                                 id_to_window[wid] = win;
                                 window_to_id[win] = wid;
                                 var geom = win.get_internal_geometry();
@@ -414 +500 @@
                                 var win = id_to_window[wid];
                                 if (win!=null) {
                                         win.destroy();
-                                        check_focus();
                                 }
                         }
 
@@ -423 +508 @@
                                 var wid = packet[1];
                                 var win = id_to_window[wid];
                                 if (win!=null) {
-                                        canvas_state.raiseShape(win);
-                                        focus = wid;
-                                        check_focus();
+                                        set_focus(wid);
                                 }
                         }
 
                         function process_window_resized(packet) {
-                                //TODO
+                                var wid = packet[1];
+                                var width = packet[2];
+                                var height = packet[3];
+                                var win = id_to_window[wid];
+                                if (win!=null) {
+                                        win.resize(width, height);
+                                }
                         }
+
                         function process_new_tray(packet) {
                                 //TODO
                         }
@@ -462 +552 @@
                                 return 96;
                         }
 
-
                         function get_desktop_size() {
                                 "use strict";
-                                var canvas = document.getElementById('screen');
-                                return [canvas.width, canvas.height];
+                                return [screen_width, screen_height];
                         }
                         function get_screen_sizes() {
                                 "use strict";
-                                var canvas = document.getElementById('screen');
                                 var dpi = get_DPI();
                                 /*
                                 equivallent GTK code:
@@ -482 +569 @@
                                                 monitors,
                                                 work_x, work_y, work_width, work_height)
                                 */
-                                var wmm = Math.round(canvas.width*25.4/dpi);
-                                var hmm = Math.round(canvas.height*25.4/dpi);
-                                var monitor = ["Canvas", 0, 0, canvas.width, canvas.height, wmm, hmm];
-                                var screen = ["HTML", canvas.width, canvas.height,
+                                var wmm = Math.round(screen_width*25.4/dpi);
+                                var hmm = Math.round(screen_height*25.4/dpi);
+                                var monitor = ["Canvas", 0, 0, screen_width, screen_height, wmm, hmm];
+                                var screen = ["HTML", screen_width, screen_height,
                                                         wmm, hmm,
                                                         [monitor],
-                                                        0, 0, canvas.width, canvas.height
+                                                        0, 0, screen_width, screen_height
                                                 ];
                                 //just a single screen:
                                 return [screen];
@@ -593 +680 @@
 
                         function do_send_new_screen_size() {
                                 //show("do_send_new_screen_size()");
-                                if (protocol==null || canvas_state==null)
+                                if (protocol==null)
                                         return;
                                 screen_size_change_pending = false;
                                 var ds = get_desktop_size();
@@ -607 +694 @@
                                 }
                         }
 
-                        function onresize() {
-                                var container = document.getElementById('screen_container');
-                                var d_form = document.getElementById('disconnect_form');
-                                var c_form = document.getElementById('connect_form');
-                                /*show("onresize() container size: "+container.clientWidth+"x"+container.clientHeight+
-                                                                ", window size: "+window.innerWidth+"x"+window.innerHeight+
-                                                                ", d form size: "+d_form.offsetWidth+"x"+d_form.offsetHeight+
-                                                                ", c form size: "+c_form.offsetWidth+"x"+c_form.offsetHeight);*/
-                                if (canvas_state!=null) {
-                                        var width = Math.min(container.clientWidth, window.innerWidth);
-                                        var height = Math.max(0, window.innerHeight-d_form.offsetHeight-c_form.offsetHeight);
-                                        canvas_state.canvas.width = width;
-                                        canvas_state.canvas.height = height;
-                                        canvas_state.width = width;
-                                        canvas_state.height = height;
-                                        canvas_state.invalidate();
-                                }
-                                send_new_screen_size();
-                        }
-
                         function do_start(params) {
                                 "use strict";
                                 show("start()");
-                                onresize();
 
                                 //hook document and window events:
                                 document.onkeydown = onkeydown;
                                 document.onkeyup = onkeyup;
                                 document.onkeypress = onkeypress;
-                                window.addEventListener("resize", onresize, false);
-
-                                var canvas = document.getElementById('screen');
-                                canvas.style.display = "block";
-
-                                if (canvas_state==null)
-                                        canvas_state = new CanvasState(canvas);
                                 protocol = new Protocol();
                                 protocol.set_packet_handler("open", process_open);
                                 protocol.set_packet_handler("close", process_close);
@@ -657 +716 @@
                                         show("opening connection to "+uri);
                                         set_ui_message("connecting to "+uri);
                                         protocol.open(uri);
+                                        // dismiss connection dialog
+                                        $('#connectModal').modal('hide');
                                 }
                                 catch (e) {
                                         set_ui_message("error connecting to "+uri+": "+e, "red");
@@ -672 +733 @@
                                 document.onkeydown = null;
                                 document.onkeyup = null;
                                 document.onkeypress = null;
-                                window.removeEventListener("resize", onresize);
                                 if (protocol!=null) {
                                         protocol.close();
                                         protocol = null;
                                 }
-                                if (canvas_state!=null) {
-                                        canvas_state.destroy();
-                                        canvas_state = null;
-                                }
+
                                 document.getElementById('connect_form').style.display = "block";
                                 document.getElementById('disconnect_form').style.display = "none";
 
-                                var canvas = document.getElementById('screen');
-                                canvas.style.display = "none";
                                 status = "ready";
                         }
 
@@ -714 +769 @@
                                         document.getElementById('disconnect_form').style.display = "block";
                                 else
                                         document.getElementById('disconnect_form').style.display = "none";
-                                onresize();
                                 set_ui_message("");
 
                                 show("connected to server - sending hello");
@@ -848 +902 @@
                                         else
                                                 do_start(params);
                                 }
+
+                                $('#connectModal').modal('show');
                         }
                 </script>
         </head>
@@ -877 +933 @@
                                                         <td><input id="options" type="checkbox" /></td>
                                                 </tr>
                                         </table>
-                                        <button id="connect" value="true" onclick="start();">Connect</button>
-                                        <button id="popup" value="true" onclick="new_popup();">Popup</button>
                                 </fieldset>
-                        </form>
+                                <button id="connect" value="true" class="btn btn-primary" onclick="start();">Connect</button>
+                </form>
                 </div>
+
                 <div class="form" id="disconnect_form">
                         <form onsubmit="return false;">
                                 <fieldset>
@@ -891 +947 @@
                                 </fieldset>
                         </form>
                 </div>
-                <div id="screen_container">
-                        <canvas id="screen" width="800" height="600"></canvas>
-                </div>
                 <div id="dpi" style="width: 1in; height: 1in; left: -100%; top: -100%; position: absolute;">
                 </div>
         </body>