1/*
2 * noVNC: HTML5 VNC client
3 * Copyright (C) 2012 Joel Martin
4 * Licensed under MPL 2.0 (see LICENSE.txt)
5 *
6 * See README.md for usage and integration instructions.
7 */
8
9/*jslint browser: true, white: false */
10/*global Util, Base64, changeCursor */
11
12var Display;
13
14(function () {
15    "use strict";
16
17    Display = function (defaults) {
18        this._drawCtx = null;
19        this._c_forceCanvas = false;
20
21        this._renderQ = [];  // queue drawing actions for in-oder rendering
22
23        // the full frame buffer (logical canvas) size
24        this._fb_width = 0;
25        this._fb_height = 0;
26
27        // the visible "physical canvas" viewport
28        this._viewportLoc = { 'x': 0, 'y': 0, 'w': 0, 'h': 0 };
29        this._cleanRect = { 'x1': 0, 'y1': 0, 'x2': -1, 'y2': -1 };
30
31        this._prevDrawStyle = "";
32        this._tile = null;
33        this._tile16x16 = null;
34        this._tile_x = 0;
35        this._tile_y = 0;
36
37        Util.set_defaults(this, defaults, {
38            'true_color': true,
39            'colourMap': [],
40            'scale': 1.0,
41            'viewport': false,
42            'render_mode': ''
43        });
44
45        Util.Debug(">> Display.constructor");
46
47        if (!this._target) {
48            throw new Error("Target must be set");
49        }
50
51        if (typeof this._target === 'string') {
52            throw new Error('target must be a DOM element');
53        }
54
55        if (!this._target.getContext) {
56            throw new Error("no getContext method");
57        }
58
59        if (!this._drawCtx) {
60            this._drawCtx = this._target.getContext('2d');
61        }
62
63        Util.Debug("User Agent: " + navigator.userAgent);
64        if (Util.Engine.gecko) { Util.Debug("Browser: gecko " + Util.Engine.gecko); }
65        if (Util.Engine.webkit) { Util.Debug("Browser: webkit " + Util.Engine.webkit); }
66        if (Util.Engine.trident) { Util.Debug("Browser: trident " + Util.Engine.trident); }
67        if (Util.Engine.presto) { Util.Debug("Browser: presto " + Util.Engine.presto); }
68
69        this.clear();
70
71        // Check canvas features
72        if ('createImageData' in this._drawCtx) {
73            this._render_mode = 'canvas rendering';
74        } else {
75            throw new Error("Canvas does not support createImageData");
76        }
77
78        if (this._prefer_js === null) {
79            Util.Info("Prefering javascript operations");
80            this._prefer_js = true;
81        }
82
83        // Determine browser support for setting the cursor via data URI scheme
84        var curDat = [];
85        for (var i = 0; i < 8 * 8 * 4; i++) {
86            curDat.push(255);
87        }
88        try {
89            var curSave = this._target.style.cursor;
90            Display.changeCursor(this._target, curDat, curDat, 2, 2, 8, 8);
91            if (this._target.style.cursor) {
92                if (this._cursor_uri === null || this._cursor_uri === undefined) {
93                    this._cursor_uri = true;
94                }
95                Util.Info("Data URI scheme cursor supported");
96            } else {
97                if (this._cursor_uri === null || this._cursor_uri === undefined) {
98                    this._cursor_uri = false;
99                }
100                Util.Warn("Data URI scheme cursor not supported");
101            }
102            this._target.style.cursor = curSave;
103        } catch (exc) {
104            Util.Error("Data URI scheme cursor test exception: " + exc);
105            this._cursor_uri = false;
106        }
107
108        Util.Debug("<< Display.constructor");
109    };
110
111    Display.prototype = {
112        // Public methods
113        viewportChange: function (deltaX, deltaY, width, height) {
114            var vp = this._viewportLoc;
115            var cr = this._cleanRect;
116            var canvas = this._target;
117
118            if (!this._viewport) {
119                Util.Debug("Setting viewport to full display region");
120                deltaX = -vp.w;  // clamped later of out of bounds
121                deltaY = -vp.h;
122                width = this._fb_width;
123                height = this._fb_height;
124            }
125
126            if (typeof(deltaX) === "undefined") { deltaX = 0; }
127            if (typeof(deltaY) === "undefined") { deltaY = 0; }
128            if (typeof(width) === "undefined") { width = vp.w; }
129            if (typeof(height) === "undefined") { height = vp.h; }
130
131            // Size change
132            if (width > this._fb_width) { width = this._fb_width; }
133            if (height > this._fb_height) { height = this._fb_height; }
134
135            if (vp.w !== width || vp.h !== height) {
136                // Change width
137                if (width < vp.w &&  cr.x2 > vp.x + width - 1) {
138                    cr.x2 = vp.x + width - 1;
139                }
140                vp.w = width;
141
142                // Change height
143                if (height < vp.h &&  cr.y2 > vp.y + height - 1) {
144                    cr.y2 = vp.y + height - 1;
145                }
146                vp.h = height;
147
148                var saveImg = null;
149                if (vp.w > 0 && vp.h > 0 && canvas.width > 0 && canvas.height > 0) {
150                    var img_width = canvas.width < vp.w ? canvas.width : vp.w;
151                    var img_height = canvas.height < vp.h ? canvas.height : vp.h;
152                    saveImg = this._drawCtx.getImageData(0, 0, img_width, img_height);
153                }
154
155                canvas.width = vp.w;
156                canvas.height = vp.h;
157
158                if (saveImg) {
159                    this._drawCtx.putImageData(saveImg, 0, 0);
160                }
161            }
162
163            var vx2 = vp.x + vp.w - 1;
164            var vy2 = vp.y + vp.h - 1;
165
166            // Position change
167
168            if (deltaX < 0 && vp.x + deltaX < 0) {
169                deltaX = -vp.x;
170            }
171            if (vx2 + deltaX >= this._fb_width) {
172                deltaX -= vx2 + deltaX - this._fb_width + 1;
173            }
174
175            if (vp.y + deltaY < 0) {
176                deltaY = -vp.y;
177            }
178            if (vy2 + deltaY >= this._fb_height) {
179                deltaY -= (vy2 + deltaY - this._fb_height + 1);
180            }
181
182            if (deltaX === 0 && deltaY === 0) {
183                return;
184            }
185            Util.Debug("viewportChange deltaX: " + deltaX + ", deltaY: " + deltaY);
186
187            vp.x += deltaX;
188            vx2 += deltaX;
189            vp.y += deltaY;
190            vy2 += deltaY;
191
192            // Update the clean rectangle
193            if (vp.x > cr.x1) {
194                cr.x1 = vp.x;
195            }
196            if (vx2 < cr.x2) {
197                cr.x2 = vx2;
198            }
199            if (vp.y > cr.y1) {
200                cr.y1 = vp.y;
201            }
202            if (vy2 < cr.y2) {
203                cr.y2 = vy2;
204            }
205
206            var x1, w;
207            if (deltaX < 0) {
208                // Shift viewport left, redraw left section
209                x1 = 0;
210                w = -deltaX;
211            } else {
212                // Shift viewport right, redraw right section
213                x1 = vp.w - deltaX;
214                w = deltaX;
215            }
216
217            var y1, h;
218            if (deltaY < 0) {
219                // Shift viewport up, redraw top section
220                y1 = 0;
221                h = -deltaY;
222            } else {
223                // Shift viewport down, redraw bottom section
224                y1 = vp.h - deltaY;
225                h = deltaY;
226            }
227
228            // Copy the valid part of the viewport to the shifted location
229            var saveStyle = this._drawCtx.fillStyle;
230            this._drawCtx.fillStyle = "rgb(255,255,255)";
231            if (deltaX !== 0) {
232                this._drawCtx.drawImage(canvas, 0, 0, vp.w, vp.h, -deltaX, 0, vp.w, vp.h);
233                this._drawCtx.fillRect(x1, 0, w, vp.h);
234            }
235            if (deltaY !== 0) {
236                this._drawCtx.drawImage(canvas, 0, 0, vp.w, vp.h, 0, -deltaY, vp.w, vp.h);
237                this._drawCtx.fillRect(0, y1, vp.w, h);
238            }
239            this._drawCtx.fillStyle = saveStyle;
240        },
241
242        // Return a map of clean and dirty areas of the viewport and reset the
243        // tracking of clean and dirty areas
244        //
245        // Returns: { 'cleanBox': { 'x': x, 'y': y, 'w': w, 'h': h},
246        //            'dirtyBoxes': [{ 'x': x, 'y': y, 'w': w, 'h': h }, ...] }
247        getCleanDirtyReset: function () {
248            var vp = this._viewportLoc;
249            var cr = this._cleanRect;
250
251            var cleanBox = { 'x': cr.x1, 'y': cr.y1,
252                             'w': cr.x2 - cr.x1 + 1, 'h': cr.y2 - cr.y1 + 1 };
253
254            var dirtyBoxes = [];
255            if (cr.x1 >= cr.x2 || cr.y1 >= cr.y2) {
256                // Whole viewport is dirty
257                dirtyBoxes.push({ 'x': vp.x, 'y': vp.y, 'w': vp.w, 'h': vp.h });
258            } else {
259                // Redraw dirty regions
260                var vx2 = vp.x + vp.w - 1;
261                var vy2 = vp.y + vp.h - 1;
262
263                if (vp.x < cr.x1) {
264                    // left side dirty region
265                    dirtyBoxes.push({'x': vp.x, 'y': vp.y,
266                                     'w': cr.x1 - vp.x + 1, 'h': vp.h});
267                }
268                if (vx2 > cr.x2) {
269                    // right side dirty region
270                    dirtyBoxes.push({'x': cr.x2 + 1, 'y': vp.y,
271                                     'w': vx2 - cr.x2, 'h': vp.h});
272                }
273                if(vp.y < cr.y1) {
274                    // top/middle dirty region
275                    dirtyBoxes.push({'x': cr.x1, 'y': vp.y,
276                                     'w': cr.x2 - cr.x1 + 1, 'h': cr.y1 - vp.y});
277                }
278                if (vy2 > cr.y2) {
279                    // bottom/middle dirty region
280                    dirtyBoxes.push({'x': cr.x1, 'y': cr.y2 + 1,
281                                     'w': cr.x2 - cr.x1 + 1, 'h': vy2 - cr.y2});
282                }
283            }
284
285            this._cleanRect = {'x1': vp.x, 'y1': vp.y,
286                               'x2': vp.x + vp.w - 1, 'y2': vp.y + vp.h - 1};
287
288            return {'cleanBox': cleanBox, 'dirtyBoxes': dirtyBoxes};
289        },
290
291        absX: function (x) {
292            return x + this._viewportLoc.x;
293        },
294
295        absY: function (y) {
296            return y + this._viewportLoc.y;
297        },
298
299        resize: function (width, height) {
300            this._prevDrawStyle = "";
301
302            this._fb_width = width;
303            this._fb_height = height;
304
305            this._rescale(this._scale);
306
307            this.viewportChange();
308        },
309
310        clear: function () {
311            if (this._logo) {
312                this.resize(this._logo.width, this._logo.height);
313                this.blitStringImage(this._logo.data, 0, 0);
314            } else {
315                if (Util.Engine.trident === 6) {
316                    // NB(directxman12): there's a bug in IE10 where we can fail to actually
317                    //                   clear the canvas here because of the resize.
318                    //                   Clearing the current viewport first fixes the issue
319                    this._drawCtx.clearRect(0, 0, this._viewportLoc.w, this._viewportLoc.h);
320                }
321                this.resize(640, 20);
322                this._drawCtx.clearRect(0, 0, this._viewportLoc.w, this._viewportLoc.h);
323            }
324
325            this._renderQ = [];
326        },
327
328        fillRect: function (x, y, width, height, color) {
329            this._setFillColor(color);
330            this._drawCtx.fillRect(x - this._viewportLoc.x, y - this._viewportLoc.y, width, height);
331        },
332
333        copyImage: function (old_x, old_y, new_x, new_y, w, h) {
334            var x1 = old_x - this._viewportLoc.x;
335            var y1 = old_y - this._viewportLoc.y;
336            var x2 = new_x - this._viewportLoc.x;
337            var y2 = new_y - this._viewportLoc.y;
338
339            this._drawCtx.drawImage(this._target, x1, y1, w, h, x2, y2, w, h);
340        },
341
342        // start updating a tile
343        startTile: function (x, y, width, height, color) {
344            this._tile_x = x;
345            this._tile_y = y;
346            if (width === 16 && height === 16) {
347                this._tile = this._tile16x16;
348            } else {
349                this._tile = this._drawCtx.createImageData(width, height);
350            }
351
352            if (this._prefer_js) {
353                var bgr;
354                if (this._true_color) {
355                    bgr = color;
356                } else {
357                    bgr = this._colourMap[color[0]];
358                }
359                var red = bgr[2];
360                var green = bgr[1];
361                var blue = bgr[0];
362
363                var data = this._tile.data;
364                for (var i = 0; i < width * height * 4; i += 4) {
365                    data[i] = red;
366                    data[i + 1] = green;
367                    data[i + 2] = blue;
368                    data[i + 3] = 255;
369                }
370            } else {
371                this.fillRect(x, y, width, height, color);
372            }
373        },
374
375        // update sub-rectangle of the current tile
376        subTile: function (x, y, w, h, color) {
377            if (this._prefer_js) {
378                var bgr;
379                if (this._true_color) {
380                    bgr = color;
381                } else {
382                    bgr = this._colourMap[color[0]];
383                }
384                var red = bgr[2];
385                var green = bgr[1];
386                var blue = bgr[0];
387                var xend = x + w;
388                var yend = y + h;
389
390                var data = this._tile.data;
391                var width = this._tile.width;
392                for (var j = y; j < yend; j++) {
393                    for (var i = x; i < xend; i++) {
394                        var p = (i + (j * width)) * 4;
395                        data[p] = red;
396                        data[p + 1] = green;
397                        data[p + 2] = blue;
398                        data[p + 3] = 255;
399                    }
400                }
401            } else {
402                this.fillRect(this._tile_x + x, this._tile_y + y, w, h, color);
403            }
404        },
405
406        // draw the current tile to the screen
407        finishTile: function () {
408            if (this._prefer_js) {
409                this._drawCtx.putImageData(this._tile, this._tile_x - this._viewportLoc.x,
410                                           this._tile_y - this._viewportLoc.y);
411            }
412            // else: No-op -- already done by setSubTile
413        },
414
415        blitImage: function (x, y, width, height, arr, offset) {
416            if (this._true_color) {
417                this._bgrxImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset);
418            } else {
419                this._cmapImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset);
420            }
421        },
422
423        blitRgbImage: function (x, y , width, height, arr, offset) {
424            if (this._true_color) {
425                this._rgbImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset);
426            } else {
427                // probably wrong?
428                this._cmapImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset);
429            }
430        },
431
432        blitStringImage: function (str, x, y) {
433            var img = new Image();
434            img.onload = function () {
435                this._drawCtx.drawImage(img, x - this._viewportLoc.x, y - this._viewportLoc.y);
436            }.bind(this);
437            img.src = str;
438            return img; // for debugging purposes
439        },
440
441        // wrap ctx.drawImage but relative to viewport
442        drawImage: function (img, x, y) {
443            this._drawCtx.drawImage(img, x - this._viewportLoc.x, y - this._viewportLoc.y);
444        },
445
446        renderQ_push: function (action) {
447            this._renderQ.push(action);
448            if (this._renderQ.length === 1) {
449                // If this can be rendered immediately it will be, otherwise
450                // the scanner will start polling the queue (every
451                // requestAnimationFrame interval)
452                this._scan_renderQ();
453            }
454        },
455
456        changeCursor: function (pixels, mask, hotx, hoty, w, h) {
457            if (this._cursor_uri === false) {
458                Util.Warn("changeCursor called but no cursor data URI support");
459                return;
460            }
461
462            if (this._true_color) {
463                Display.changeCursor(this._target, pixels, mask, hotx, hoty, w, h);
464            } else {
465                Display.changeCursor(this._target, pixels, mask, hotx, hoty, w, h, this._colourMap);
466            }
467        },
468
469        defaultCursor: function () {
470            this._target.style.cursor = "default";
471        },
472
473        // Overridden getters/setters
474        get_context: function () {
475            return this._drawCtx;
476        },
477
478        set_scale: function (scale) {
479            this._rescale(scale);
480        },
481
482        set_width: function (w) {
483            this.resize(w, this._fb_height);
484        },
485        get_width: function () {
486            return this._fb_width;
487        },
488
489        set_height: function (h) {
490            this.resize(this._fb_width, h);
491        },
492        get_height: function () {
493            return this._fb_height;
494        },
495
496        // Private Methods
497        _rescale: function (factor) {
498            var canvas = this._target;
499            var properties = ['transform', 'WebkitTransform', 'MozTransform'];
500            var transform_prop;
501            while ((transform_prop = properties.shift())) {
502                if (typeof canvas.style[transform_prop] !== 'undefined') {
503                    break;
504                }
505            }
506
507            if (transform_prop === null) {
508                Util.Debug("No scaling support");
509                return;
510            }
511
512            if (typeof(factor) === "undefined") {
513                factor = this._scale;
514            } else if (factor > 1.0) {
515                factor = 1.0;
516            } else if (factor < 0.1) {
517                factor = 0.1;
518            }
519
520            if (this._scale === factor) {
521                return;
522            }
523
524            this._scale = factor;
525            var x = canvas.width - (canvas.width * factor);
526            var y = canvas.height - (canvas.height * factor);
527            canvas.style[transform_prop] = 'scale(' + this._scale + ') translate(-' + x + 'px, -' + y + 'px)';
528        },
529
530        _setFillColor: function (color) {
531            var bgr;
532            if (this._true_color) {
533                bgr = color;
534            } else {
535                bgr = this._colourMap[color[0]];
536            }
537
538            var newStyle = 'rgb(' + bgr[2] + ',' + bgr[1] + ',' + bgr[0] + ')';
539            if (newStyle !== this._prevDrawStyle) {
540                this._drawCtx.fillStyle = newStyle;
541                this._prevDrawStyle = newStyle;
542            }
543        },
544
545        _rgbImageData: function (x, y, vx, vy, width, height, arr, offset) {
546            var img = this._drawCtx.createImageData(width, height);
547            var data = img.data;
548            for (var i = 0, j = offset; i < width * height * 4; i += 4, j += 3) {
549                data[i]     = arr[j];
550                data[i + 1] = arr[j + 1];
551                data[i + 2] = arr[j + 2];
552                data[i + 3] = 255;  // Alpha
553            }
554            this._drawCtx.putImageData(img, x - vx, y - vy);
555        },
556
557        _bgrxImageData: function (x, y, vx, vy, width, height, arr, offset) {
558            var img = this._drawCtx.createImageData(width, height);
559            var data = img.data;
560            for (var i = 0, j = offset; i < width * height * 4; i += 4, j += 4) {
561                data[i]     = arr[j + 2];
562                data[i + 1] = arr[j + 1];
563                data[i + 2] = arr[j];
564                data[i + 3] = 255;  // Alpha
565            }
566            this._drawCtx.putImageData(img, x - vx, y - vy);
567        },
568
569        _cmapImageData: function (x, y, vx, vy, width, height, arr, offset) {
570            var img = this._drawCtx.createImageData(width, height);
571            var data = img.data;
572            var cmap = this._colourMap;
573            for (var i = 0, j = offset; i < width * height * 4; i += 4, j++) {
574                var bgr = cmap[arr[j]];
575                data[i]     = bgr[2];
576                data[i + 1] = bgr[1];
577                data[i + 2] = bgr[0];
578                data[i + 3] = 255;  // Alpha
579            }
580            this._drawCtx.putImageData(img, x - vx, y - vy);
581        },
582
583        _scan_renderQ: function () {
584            var ready = true;
585            while (ready && this._renderQ.length > 0) {
586                var a = this._renderQ[0];
587                switch (a.type) {
588                    case 'copy':
589                        this.copyImage(a.old_x, a.old_y, a.x, a.y, a.width, a.height);
590                        break;
591                    case 'fill':
592                        this.fillRect(a.x, a.y, a.width, a.height, a.color);
593                        break;
594                    case 'blit':
595                        this.blitImage(a.x, a.y, a.width, a.height, a.data, 0);
596                        break;
597                    case 'blitRgb':
598                        this.blitRgbImage(a.x, a.y, a.width, a.height, a.data, 0);
599                        break;
600                    case 'img':
601                        if (a.img.complete) {
602                            this.drawImage(a.img, a.x, a.y);
603                        } else {
604                            // We need to wait for this image to 'load'
605                            // to keep things in-order
606                            ready = false;
607                        }
608                        break;
609                }
610
611                if (ready) {
612                    this._renderQ.shift();
613                }
614            }
615
616            if (this._renderQ.length > 0) {
617                requestAnimFrame(this._scan_renderQ.bind(this));
618            }
619        },
620    };
621
622    Util.make_properties(Display, [
623        ['target', 'wo', 'dom'],       // Canvas element for rendering
624        ['context', 'ro', 'raw'],      // Canvas 2D context for rendering (read-only)
625        ['logo', 'rw', 'raw'],         // Logo to display when cleared: {"width": w, "height": h, "data": data}
626        ['true_color', 'rw', 'bool'],  // Use true-color pixel data
627        ['colourMap', 'rw', 'arr'],    // Colour map array (when not true-color)
628        ['scale', 'rw', 'float'],      // Display area scale factor 0.0 - 1.0
629        ['viewport', 'rw', 'bool'],    // Use a viewport set with viewportChange()
630        ['width', 'rw', 'int'],        // Display area width
631        ['height', 'rw', 'int'],       // Display area height
632
633        ['render_mode', 'ro', 'str'],  // Canvas rendering mode (read-only)
634
635        ['prefer_js', 'rw', 'str'],    // Prefer Javascript over canvas methods
636        ['cursor_uri', 'rw', 'raw']    // Can we render cursor using data URI
637    ]);
638
639    // Class Methods
640    Display.changeCursor = function (target, pixels, mask, hotx, hoty, w0, h0, cmap) {
641        var w = w0;
642        var h = h0;
643        if (h < w) {
644            h = w;  // increase h to make it square
645        } else {
646            w = h;  // increase w to make it square
647        }
648
649        var cur = [];
650
651        // Push multi-byte little-endian values
652        cur.push16le = function (num) {
653            this.push(num & 0xFF, (num >> 8) & 0xFF);
654        };
655        cur.push32le = function (num) {
656            this.push(num & 0xFF,
657                      (num >> 8) & 0xFF,
658                      (num >> 16) & 0xFF,
659                      (num >> 24) & 0xFF);
660        };
661
662        var IHDRsz = 40;
663        var RGBsz = w * h * 4;
664        var XORsz = Math.ceil((w * h) / 8.0);
665        var ANDsz = Math.ceil((w * h) / 8.0);
666
667        cur.push16le(0);        // 0: Reserved
668        cur.push16le(2);        // 2: .CUR type
669        cur.push16le(1);        // 4: Number of images, 1 for non-animated ico
670
671        // Cursor #1 header (ICONDIRENTRY)
672        cur.push(w);            // 6: width
673        cur.push(h);            // 7: height
674        cur.push(0);            // 8: colors, 0 -> true-color
675        cur.push(0);            // 9: reserved
676        cur.push16le(hotx);     // 10: hotspot x coordinate
677        cur.push16le(hoty);     // 12: hotspot y coordinate
678        cur.push32le(IHDRsz + RGBsz + XORsz + ANDsz);
679                                // 14: cursor data byte size
680        cur.push32le(22);       // 18: offset of cursor data in the file
681
682        // Cursor #1 InfoHeader (ICONIMAGE/BITMAPINFO)
683        cur.push32le(IHDRsz);   // 22: InfoHeader size
684        cur.push32le(w);        // 26: Cursor width
685        cur.push32le(h * 2);    // 30: XOR+AND height
686        cur.push16le(1);        // 34: number of planes
687        cur.push16le(32);       // 36: bits per pixel
688        cur.push32le(0);        // 38: Type of compression
689
690        cur.push32le(XORsz + ANDsz);
691                                // 42: Size of Image
692        cur.push32le(0);        // 46: reserved
693        cur.push32le(0);        // 50: reserved
694        cur.push32le(0);        // 54: reserved
695        cur.push32le(0);        // 58: reserved
696
697        // 62: color data (RGBQUAD icColors[])
698        var y, x;
699        for (y = h - 1; y >= 0; y--) {
700            for (x = 0; x < w; x++) {
701                if (x >= w0 || y >= h0) {
702                    cur.push(0);  // blue
703                    cur.push(0);  // green
704                    cur.push(0);  // red
705                    cur.push(0);  // alpha
706                } else {
707                    var idx = y * Math.ceil(w0 / 8) + Math.floor(x / 8);
708                    var alpha = (mask[idx] << (x % 8)) & 0x80 ? 255 : 0;
709                    if (cmap) {
710                        idx = (w0 * y) + x;
711                        var rgb = cmap[pixels[idx]];
712                        cur.push(rgb[2]);  // blue
713                        cur.push(rgb[1]);  // green
714                        cur.push(rgb[0]);  // red
715                        cur.push(alpha);   // alpha
716                    }
717                }
718            }
719        }
720
721        // XOR/bitmask data (BYTE icXOR[])
722        // (ignored, just needs to be the right size)
723        for (y = 0; y < h; y++) {
724            for (x = 0; x < Math.ceil(w / 8); x++) {
725                cur.push(0);
726            }
727        }
728
729        // AND/bitmask data (BYTE icAND[])
730        // (ignored, just needs to be the right size)
731        for (y = 0; y < h; y++) {
732            for (x = 0; x < Math.ceil(w / 8); x++) {
733                cur.push(0);
734            }
735        }
736
737        var url = 'data:image/x-icon;base64,' + Base64.encode(cur);
738        target.style.cursor = 'url(' + url + ')' + hotx + ' ' + hoty + ', default';
739    };
740})();
741