<!DOCTYPE html>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>ERSTE SCHRITTE MIT BRACKETS</title>
        <meta name="description" content="Ein interaktiver Wegweiser für die ersten Schritte mit Brackets.">
        <link rel="stylesheet" href="main.css">

ERSTE SCHRITTE MIT BRACKETS

Dies ist Ihre Anleitung!

            Willkommen zu einer frühen Vorschau von Brackets, einem neuen Open-Source-Editor für die
            nächste Generation des Webs. Wir sind große Fans von Standards und wollen bessere Tools für
            JavaScript, HTML und CSS sowie verwandte offene Web-Technologien bauen. Dies ist erst
            der Anfang von dem, was wir noch vorhaben.

            Brackets ist eine andere Art Editor.
            Ein entscheidender Unterschied ist, dass dieser Editor in JavaScript, HTML und CSS geschrieben ist.
            Das heißt, dass die meisten von euch Brackets-Nutzern die nötigen Fähigkeiten haben, Brackets selbst
            zu verändern und erweitern.
            Tatsächlich benutzen wir Brackets täglich, um Brackets zu verbessern.
            Es hat außerdem einige einzigartige Funktionen wie Schnelles Bearbeiten, die Live-Vorschau und andere,
            die sie wahrscheinlich nicht in anderen Editoren finden werden.
            Lesen Sie weiter, um zu erfahren, wie sie diese Funktionen nutzen können.

Wir probieren ein paar neue Dinge aus

Schnelles Bearbeiten für CSS und JavaScript

            Kein Wechsel zwischen Dokumenten mehr - so verlieren Sie nie den Überblick. Wenn Sie HTML editieren,
            können Sie die Tastenkombination Cmd/Strg + E verwenden, um einen Inline-Editor anzuzeigen,
            der Ihnen alle relevanten CSS-Regeln zum Schnellen Bearbeiten anzeigt.
            Ändern Sie etwas in dem CSS, drücken Sie ESC und schon sind Sie zurück im HTML-Code. Oder
            lassen Sie die CSS-Regeln einfach offen und sie werden Teil ihres HTML-Editors. Sobald Sie ESC
            außerhalb eines solchen Editors drücken, schließen sich all diese.

        <samp>
            Sie wollen das in Aktion sehen? Setzen Sie Ihren Cursor auf den -Tag oben und drücken
            Sie Cmd/Strg + E. Sie sollten einen Editor zum Schnellen Bearbeiten von CSS erscheinen sehen,
            der die geltenden CSS-Regeln anzeigt. Das Schnelle Bearbeiten funktioniert genauso in Klassen- und
            ID-Attributen.

            Sie können auf die selbe Weise neue Regeln erstellen. Klicken Sie in einen der -Tags weiter
            oben und drücken Sie Cmd/Strg + E. Es gibt noch keine Regeln dafür, aber Sie können den
            "Neue Regel"-Button nutzen, um eine neue Regel für  hinzuzufügen.
        </samp>

            Sie können die selbe Tastenkombination nutzen, um andere Dinge auf die selbe Weise zu bearbeiten - wie
            JavaScript-Funktionen, Farben und Animations-Timing-Funktionen - und wir fügen ständig mehr hinzu.
            Im Augenblick können solche Editoren allerdings nicht verschachtelt werden. Sie können das
            Schnelle Bearbeiten also nur nutzen, während der Cursor sich im Haupteditor befindet.

Vorschau auf HTML- und CSS-Änderungen live im Browser anzeigen

            Sie kennen den "Speichern/Neu laden-Tanz", den wir seit Jahren aufführen? Der, in dem Sie
            Änderungen in Ihrem Editor machen, Speichern drücken, zum Browser schalten und dann neu laden,
            um schließlich das Ergebnis zu sehen? Mit Brackets müssen Sie diesen Tanz nicht aufführen.

            Brackets öffnet eine Live-Verbindung zu Ihrem lokalen Browser und sendet HTML- und CSS-Updates,
            während Sie tippen! Eventuell tun Sie etwas Ähnliches bereits heute mit browserbasierten Tools,
            doch mit Brackets ist kein Kopieren und Einfügen des endgültigen Codes im Editor mehr nötig.
            Ihr Code läuft im Browser, aber lebt in Ihrem Editor!

Hervorheben von HTML-Elementen und CSS-Regeln - live!

            Brackets macht es Ihnen leicht, zu sehen, welche Auswirkungen Ihre Änderungen in HTML und CSS auf die
            Seite haben werden. Wenn Ihr Cursor auf einer CSS-Regel platziert ist, hebt Brackets alle zugehörigen
            Elemente im Browser hervor. Genauso wird Brackets beim Editieren einer HTML-Datei die entsprechenden
            HTML-Elemente im Browser markieren.

        <samp>
            Falls Sie Google Chrome installiert haben, können Sie das selbst ausprobieren. Klicken Sie auf
            das Blitz-Symbol oben rechts oder drücken Sie Cmd/Strg + Alt + P. Wenn die Live-Vorschau
            für ein HTML-Dokument aktiviert ist, können alle verknüpften CSS-Dokumente in Echtzeit bearbeitet
            werden. Das Symbol ändert die Farbe von grau nach gold, sobald Brackets eine Verbindung zu Ihrem
            Browser hergestellt hat.

            Platzieren Sie Ihren Cursor jetzt auf dem -Tag oben. Sie sehen in Chrome eine blaue
            Markierung, die um das Bild herum erscheint. Nutzen Sie nun Cmd/Strg + E, um die
            definierten CSS-Regeln anzuzeigen.
            Probieren Sie, die Stärke des Rahmens von 1px auf 10px zu ändern, oder ändern Sie die
            Hintergrundfarbe von "dimgray" zu "hotpink". Falls Sie Brackets und Ihren Browser nebeneinander
            laufen haben, können Sie die Änderungen sofort in Ihrem Browser erkennen. Cool, was?
        </samp>

            Derzeit unterstützt Brackets die Live-Vorschau nur für HTML und CSS. Allerdings werden in der aktuellen
            Version Änderungen an JavaScript-Dateien automatisch neu geladen, wenn Sie diese speichern. Wir arbeiten
            momentan an der Unterstützung der Live-Vorschau für JavaScript.
            Die Live-Vorschau ist außerdem nur mit Google Chrome möglich, doch wir hoffen, diese Funktionalität
            zukünftig zu allen wichtigen Browsern hinzuzufügen.

Schnelle Farbansicht

            Für die unter uns, die immer noch nicht die Farb-Äquivalente von HEX- und RGB-Werten kennen, macht es
            Brackets einfach und schnell, exakt zu sehen, welche Farbe genutzt wird. Fahren Sie in HTML oder CSS
            einfach über einen Farbwert oder -verlauf und Brackets wird Ihnen automatisch eine Vorschau davon
            anzeigen. Das selbe gilt für Bilder: Platzieren Sie den Cursor im Brackets-Editor über einem Link zu
            einem Bild und er wird ein Miniaturansicht von diesem Bild zeigen.

        <samp>
            Um die Schnelle Farbansicht selbst auszuprobieren, können Sie Ihren Cursor auf dem
            -Tag am Anfang dieses Dokuments platzieren und Cmd/Strg + E drücken, um einen
            CSS-Schnell-Editor zu öffnen. Fahren Sie nun einfach mit dem Cursor über einen der Farbwerte im
            CSS-Code. Sie können das auch mit Farbverläufen sehen, wenn Sie einen Schnell-Editor für den
            -Tag anzeigen lassen und über irgendeinen der "background-image"-Farbwerte fahren. Um
            die Bildvorschau auszuprobieren, können Sie Ihren Cursor auf dem Screenshot-Link platzieren, den Sie
            weiter oben in diesem Dokument finden.
        </samp>

Sie benötigen etwas anderes? Probieren Sie es mit einer Erweiterung!

            Zusätzlich zu all dem, was in Brackets eingebaut ist, hat unsere große und wachsende Community der
            Erweiterungs-Entwickler über hundert Erweiterungen erstellt, die nützliche Funktionen bringen. Wenn
            Sie etwas brauchen, was es nicht in Brackets gibt, ist es sehr wahrscheinlich, dass bereits jemand
            eine Erweiterung dafür geschrieben hat. Um die Liste der verfügbaren Erweiterungen zu durchstöbern
            oder zu durchsuchen nutzen Sie Datei > Erweiterungs-Verwaltung und klicken auf
            den Tab "Verfügbar". Wenn Sie eine Erweiterung finden, die Sie nutzen wollen, klicken Sie einfach
            auf den "Installieren"-Button daneben.

Machen Sie mit

            Brackets ist ein Open-Source-Projekt. Web-Entwickler rund um die Welt helfen mit, einen besseren
            Code-Editor zu bauen. Noch mehr erstellen Erweiterungen, die die Möglichkeiten von Brackets erweitern.
            Lassen Sie uns wissen, was Sie denken, teilen Sie Ihre Ideen oder tragen
            Sie direkt zu dem Projekt bei.

Brackets.io

Brackets Team-Blog

Brackets auf GitHub

Brackets Erweiterungs-Verzeichnis

Brackets Wiki

Brackets Developer-Mailingliste

@brackets auf Twitter

Mit Brackets-Entwicklern per IRC in #brackets auf Freenode chatten


(offsetY >= scaleDivTop && offsetY <= scaleDivBottom)) {

// But hide it only if the pixel under mouse is also in the image.

if (offsetX < (imagePos.left + imgWidth) &&

// See whether the cursor is no longer inside the hidden scale div.

if ((offsetX < scaleDivLeft || offsetX > scaleDivRight) ||

(offsetY < scaleDivTop || offsetY > scaleDivBottom)) {

} else if ((offsetX >= scaleDivLeft && offsetX <= scaleDivRight) &&

var mkdirp = require('../').mkdirp;
var path = require('path');
var fs = require('fs');
var test = require('tap').test;

var ps = [ '', 'tmp' ];

for (var i = 0; i < 25; i++) {
    var dir = Math.floor(Math.random() * Math.pow(16,4)).toString(16);
    ps.push(dir);
}

var file = ps.join('/');

// a file in the way
var itw = ps.slice(0, 3).join('/');

test('clobber-pre', function (t) {
    console.error("about to write to "+itw)
    fs.writeFileSync(itw, 'I AM IN THE WAY, THE TRUTH, AND THE LIGHT.');

    fs.stat(itw, function (er, stat) {
        t.ifError(er)
        t.ok(stat && stat.isFile(), 'should be file')
        t.end()
    })
})

test('clobber', function (t) {
    t.plan(2);
    mkdirp(file, 0755, function (err) {
        t.ok(err);
        t.equal(err.code, 'ENOTDIR');
        t.end();
    });
});


keep keep keep replace replace replace replace replace replace replace replace keep keep keep

/*
 * Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a
 * copy of this software and associated documentation files (the "Software"),
 * to deal in the Software without restriction, including without limitation
 * the rights to use, copy, modify, merge, publish, distribute, sublicense,
 * and/or sell copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 * DEALINGS IN THE SOFTWARE.
 *
 */

/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
/*global define, $, window, Mustache */
define(function (require, exports, module) {
    "use strict";

    var DocumentManager     = require("document/DocumentManager"),
        EditorManager       = require("editor/EditorManager"),
        ImageHolderTemplate = require("text!htmlContent/image-holder.html"),
        PanelManager        = require("view/PanelManager"),
        ProjectManager      = require("project/ProjectManager"),
        Strings             = require("strings"),
        StringUtils         = require("utils/StringUtils"),
        FileSystem          = require("filesystem/FileSystem");

    var _naturalWidth = 0,
        _scale = 100,
        _scaleDivInfo = null;   // coordinates of hidden scale sticker

    /** Update the scale element, i.e. on resize
     *  @param {!string} currentWidth actual width of image in view
     */
    function _updateScale(currentWidth) {
        if (currentWidth < _naturalWidth) {
            _scale = currentWidth / _naturalWidth * 100;
            $("#img-scale").text(Math.floor(_scale) + "%")
                // Keep the position of the image scale div relative to the image.
                .css("left", $("#img-preview").position().left + 5)
                .show();
        } else {
            $("#img-scale").hide();
        }
    }

    /** handle editor resize event, i.e. update scale sticker */
    function _onEditorAreaResize() {
        _updateScale($("#img-preview").width());
    }

    /**
     * Update file name if necessary
     */
    function _onFileNameChange(e, oldName, newName) {
        var oldRelPath = ProjectManager.makeProjectRelativeIfPossible(oldName),
            currentPath = $("#img-path").text();

        if (currentPath === oldRelPath) {
            var newRelName = ProjectManager.makeProjectRelativeIfPossible(newName);
            $("#img-path").text(newRelName)
                .attr("title", newRelName);
        }
    }

    /**
     * Check mouse entering/exiting the scale sticker.
     * Hide it when entering and show it again when exiting.
     *
     * @param {number} offsetX mouse offset from the left of the previewing image
     * @param {number} offsetY mouseoffset from the top of the previewing image
     */
    function _handleMouseEnterOrExitScaleSticker(offsetX, offsetY) {
        var imagePos       = $("#img-preview").position(),
            scaleDivPos    = $("#img-scale").position(),
            imgWidth       = $("#img-preview").width(),
            imgHeight      = $("#img-preview").height(),
            scaleDivLeft,
            scaleDivTop,
            scaleDivRight,
            scaleDivBottom;

        if (_scaleDivInfo) {
            scaleDivLeft   = _scaleDivInfo.left;
            scaleDivTop    = _scaleDivInfo.top;
            scaleDivRight  = _scaleDivInfo.right;
            scaleDivBottom = _scaleDivInfo.bottom;
        } else {
            scaleDivLeft   = scaleDivPos.left;
            scaleDivTop    = scaleDivPos.top;
            scaleDivRight  = $("#img-scale").width() - scaleDivLeft;
            scaleDivBottom = $("#img-scale").height() - scaleDivTop;
        }

        if ((offsetX >= scaleDivLeft && offsetX <= scaleDivRight) &&
                (offsetY >= scaleDivTop && offsetY <= scaleDivBottom)) {
            // Handle mouse inside image scale div.
            // But hide it only if the pixel under mouse is also in the image.
            if (offsetX < (imagePos.left + imgWidth) &&
                    offsetY < (imagePos.top + imgHeight)) {
                // Remember image scale div coordinates before hiding it.
                _scaleDivInfo = {left: scaleDivPos.left,
                                 top: scaleDivPos.top,
                                 right: scaleDivRight,
                                 bottom: scaleDivBottom};
                $("#img-scale").hide();
            }
        } else if (_scaleDivInfo) {
            // See whether the cursor is no longer inside the hidden scale div.
            // If so, show it again.
            if ((offsetX < _scaleDivInfo.left || offsetX > _scaleDivInfo.right) ||
                    (offsetY < _scaleDivInfo.top || offsetY > _scaleDivInfo.bottom)) {
                _scaleDivInfo = null;
                $("#img-scale").show();
            }
        }
    }

    /**
     * Show image coordinates under the mouse cursor
     *
     * @param {MouseEvent} e mouse move event
     */
    function _showImageTip(e) {
        // Don't show image tip if _scale is close to zero.
        // since we won't have enough room to show tip anyway.
        if (Math.floor(_scale) === 0) {
            return;
        }

        var x                   = Math.floor(e.offsetX * 100 / _scale),
            y                   = Math.floor(e.offsetY * 100 / _scale),
            $target             = $(e.target),
            targetPos           = $target.position(),
            tipPos              = $("#img-tip").position(),
            imagePos            = $("#img-preview").position(),
            scaleDivPos         = $("#img-scale").position(),
            left                = e.offsetX + imagePos.left,
            top                 = e.offsetY + imagePos.top,
            width               = $("#img-preview").width(),
            height              = $("#img-preview").height(),
            windowWidth         = $(window).width(),
            fourDigitImageWidth = _naturalWidth.toString().length === 4,
            infoWidth1          = 112,    // info div width 96px + vertical toolbar width 16px
            infoWidth2          = 120,    // info div width 104px (for 4-digit image width) + vertical toolbar width 16px
            tipOffsetX          = 10,     // adjustment for info div left from x coordinate of cursor
            tipOffsetY          = -54,    // adjustment for info div top from y coordinate of cursor
            tipMinusOffsetX1    = -84,    // for less than 4-digit image width
            tipMinusOffsetX2    = -90;    // for 4-digit image width

        // Adjust left, top, x and y based on which element contains the cursor.
        // Return if the target element is no longer available as in the case of
        // a vertical guide that has its left equals to zero.
        if ($target.is(".img-guide")) {
            if ($target.is("#vert-guide")) {
                if (targetPos.left === 0) {
                    return;
                }
                left = targetPos.left;
                x = Math.floor(left * 100 / _scale);
            } else {
                if (targetPos.top === 0) {
                    return;
                }
                top = targetPos.top;
                y = Math.floor(top * 100 / _scale);
            }
        } else if (!$target.is("#img-preview")) {
            if ($target.is("#img-scale")) {
                left = scaleDivPos.left + e.offsetX;
                top = scaleDivPos.top + e.offsetY;
                x = Math.floor(left * 100 / _scale);
                y = Math.floor(top * 100 / _scale);
            } else if (tipPos.left && tipPos.top) {
                // Cursor must be inside the image tip.
                left = tipPos.left + e.offsetX;
                top = tipPos.top + e.offsetY;
                x = Math.floor(left * 100 / _scale);
                y = Math.floor(top * 100 / _scale);
            } else {
                return;
            }
        }

        _handleMouseEnterOrExitScaleSticker(left, top);
        if ($(e.target).is("#img-scale")) {
            // If we're in the scale sticker, then just return.
            return;
        }

        // Check whether to show the image tip on the left.
        if ((e.pageX + infoWidth1) > windowWidth ||
                (fourDigitImageWidth && (e.pageX + infoWidth2) > windowWidth)) {
            tipOffsetX = fourDigitImageWidth ? tipMinusOffsetX2 : tipMinusOffsetX1;
        }

        // For some reason we're getting -1 for e.offset when hovering over the very
        // first pixel of a scaled image. So adjust x to 0 if it is negative.
        if (x < 0) {
            x = 0;
        }

        $("#x-value").text(x + "px");
        $("#y-value").text(y + "px");

        $("#img-tip").css({
            left: left + tipOffsetX,
            top: top + tipOffsetY
        }).show();

        $("#horiz-guide").css({
            left: imagePos.left,
            top: top,
            width: width - 1
        }).show();

        $("#vert-guide").css({
            left: left,
            top: imagePos.top,
            height: height - 1
        }).show();
    }

    /**
     * Show image coordinates under the mouse cursor
     *
     * @param {MouseEvent} e mouse leave event
     */
    function _hideImageTip(e) {
        var $target   = $(e.target),
            targetPos = $target.position(),
            imagePos  = $("#img-preview").position(),
            right     = imagePos.left + $("#img-preview").width(),
            bottom    = imagePos.top + $("#img-preview").height(),
            offsetX   = e.offsetX,
            offsetY   = e.offsetY;

        if ($target.is(".img-guide")) {
            offsetX = targetPos.left + offsetX;
            offsetY = targetPos.top + offsetY;
        }

        // Hide image tip and guides only if the cursor is outside of the image.
        if (offsetX < imagePos.left || offsetX >= right ||
                offsetY < imagePos.top || offsetY >= bottom) {
            $("#img-tip").hide();
            $(".img-guide").hide();
//            $("#img-scale").show();
        }
    }

    /**
     * creates a DOM node to place in the editor-holder
     * in order to display an image.
     * @param {!string} fullPath  path to image file
     * @return {JQuery}
     *
     */
    function getCustomViewHolder(fullPath) {
        return $(Mustache.render(ImageHolderTemplate, {fullPath: fullPath}));
    }

    /**
     *
     */
    function _removeListeners() {
        $(PanelManager).off("editorAreaResize", _onEditorAreaResize);
        $(DocumentManager).off("fileNameChange", _onFileNameChange);
        $("#img").off("mousemove", "#img-preview, #img-scale, #img-tip, .img-guide", _showImageTip)
                 .off("mouseleave", "#img-preview, #img-scale, #img-tip, .img-guide", _hideImageTip);
    }

    /**
     * Perform decorations on the view that require loading the image in the browser,
     * i.e. getting actual and natural width and height andplacing the scale sticker
     * @param {!string} fullPath path to the image file
     */
    function render(fullPath) {
        var relPath = ProjectManager.makeProjectRelativeIfPossible(fullPath);

        _scale = 100;   // initialize to 100
        $("#img-path").text(relPath)
                .attr("title", relPath);
        $("#img-preview").on("load", function () {
            // add dimensions and size
            _naturalWidth = this.naturalWidth;
            var dimensionString = _naturalWidth + " × " + this.naturalHeight + " " + Strings.UNIT_PIXELS;
            // get image size
            var file = FileSystem.getFileForPath(fullPath);
            file.stat(function (err, stat) {
                if (err) {
                    $("#img-data").html(dimensionString);
                } else {
                    var sizeString = "";
                    if (stat.size) {
                        sizeString = " — " + StringUtils.prettyPrintBytes(stat.size, 2);
                    }
                    var dimensionAndSize = dimensionString + sizeString;
                    $("#img-data").html(dimensionAndSize)
                        .attr("title", dimensionAndSize
                                        .replace("×", "x")
                                        .replace("—", "-"));
                }
            });
            $("#image-holder").show();
            // listen to resize to  update the scale sticker
            $(PanelManager).on("editorAreaResize", _onEditorAreaResize);
            // listen to removal to stop listening to resize events
            $(EditorManager).on("removeCustomViewer", _removeListeners);
            $(DocumentManager).on("fileNameChange", _onFileNameChange);

            $("#img-tip").hide();
            $(".img-guide").hide();
            $("#img").on("mousemove", "#img-preview, #img-scale, #img-tip, .img-guide", _showImageTip)
                     .on("mouseleave", "#img-preview, #img-scale, #img-tip, .img-guide", _hideImageTip);

            _updateScale($(this).width());
        });
    }

    exports.getCustomViewHolder = getCustomViewHolder;
    exports.render              = render;
});


/*
 * Tests to verify we're writing signed integers correctly
 */
var mod_ctype = require('../../../ctio.js');
var ASSERT = require('assert');

function test8()
{
	var buffer = new Buffer(4);
	mod_ctype.wsint8(0x23, 'big', buffer, 0);
	mod_ctype.wsint8(0x23, 'little', buffer, 1);
	mod_ctype.wsint8(-5, 'big', buffer, 2);
	mod_ctype.wsint8(-5, 'little', buffer, 3);

	ASSERT.equal(0x23, buffer[0]);
	ASSERT.equal(0x23, buffer[1]);
	ASSERT.equal(0xfb, buffer[2]);
	ASSERT.equal(0xfb, buffer[3]);

	/* Make sure we handle truncation correctly */
	ASSERT.throws(function () {
	     mod_ctype.wsint8(0xabc, 'big', buffer, 0);
	});
	ASSERT.throws(function () {
	     mod_ctype.wsint8(0xabc, 'little', buffer, 0);
	});
}

function test16()
{
	var buffer = new Buffer(6);
	mod_ctype.wsint16(0x0023, 'big', buffer, 0);
	mod_ctype.wsint16(0x0023, 'little', buffer, 2);
	ASSERT.equal(0x00, buffer[0]);
	ASSERT.equal(0x23, buffer[1]);
	ASSERT.equal(0x23, buffer[2]);
	ASSERT.equal(0x00, buffer[3]);
	mod_ctype.wsint16(-5, 'big', buffer, 0);
	mod_ctype.wsint16(-5, 'little', buffer, 2);
	ASSERT.equal(0xff, buffer[0]);
	ASSERT.equal(0xfb, buffer[1]);
	ASSERT.equal(0xfb, buffer[2]);
	ASSERT.equal(0xff, buffer[3]);

	mod_ctype.wsint16(-1679, 'big', buffer, 1);
	mod_ctype.wsint16(-1679, 'little', buffer, 3);
	ASSERT.equal(0xf9, buffer[1]);
	ASSERT.equal(0x71, buffer[2]);
	ASSERT.equal(0x71, buffer[3]);
	ASSERT.equal(0xf9, buffer[4]);
}

function test32()
{
	var buffer = new Buffer(8);
	mod_ctype.wsint32(0x23, 'big', buffer, 0);
	mod_ctype.wsint32(0x23, 'little', buffer, 4);
	ASSERT.equal(0x00, buffer[0]);
	ASSERT.equal(0x00, buffer[1]);
	ASSERT.equal(0x00, buffer[2]);
	ASSERT.equal(0x23, buffer[3]);
	ASSERT.equal(0x23, buffer[4]);
	ASSERT.equal(0x00, buffer[5]);
	ASSERT.equal(0x00, buffer[6]);
	ASSERT.equal(0x00, buffer[7]);

	mod_ctype.wsint32(-5, 'big', buffer, 0);
	mod_ctype.wsint32(-5, 'little', buffer, 4);
	ASSERT.equal(0xff, buffer[0]);
	ASSERT.equal(0xff, buffer[1]);
	ASSERT.equal(0xff, buffer[2]);
	ASSERT.equal(0xfb, buffer[3]);
	ASSERT.equal(0xfb, buffer[4]);
	ASSERT.equal(0xff, buffer[5]);
	ASSERT.equal(0xff, buffer[6]);
	ASSERT.equal(0xff, buffer[7]);

	mod_ctype.wsint32(-805306713, 'big', buffer, 0);
	mod_ctype.wsint32(-805306713, 'litle', buffer, 4);
	ASSERT.equal(0xcf, buffer[0]);
	ASSERT.equal(0xff, buffer[1]);
	ASSERT.equal(0xfe, buffer[2]);
	ASSERT.equal(0xa7, buffer[3]);
	ASSERT.equal(0xa7, buffer[4]);
	ASSERT.equal(0xfe, buffer[5]);
	ASSERT.equal(0xff, buffer[6]);
	ASSERT.equal(0xcf, buffer[7]);
}

test8();
test16();
test32();


<!DOCTYPE html>

	<meta charset="utf-8">
	<title>jQuery UI Slider - Range with fixed minimum</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">

	<link rel="stylesheet" href="../demos.css">

	Maximum price:
	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />

Fix the minimum value of the range slider so that the user can only select a maximum.  Set the range option to "min."


/* Chinese initialisation for the jQuery UI date picker plugin. */
/* Written by Cloudream (cloudream@gmail.com). */
jQuery(function($){
	$.datepicker.regional['zh-CN'] = {
		closeText: '关闭',
		prevText: '<上月',
		nextText: '下月>',
		currentText: '今天',
		monthNames: ['一月','二月','三月','四月','五月','六月',
		'七月','八月','九月','十月','十一月','十二月'],
		monthNamesShort: ['一','二','三','四','五','六',
		'七','八','九','十','十一','十二'],
		dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
		dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
		dayNamesMin: ['日','一','二','三','四','五','六'],
		weekHeader: '周',
		dateFormat: 'yy-mm-dd',
		firstDay: 1,
		isRTL: false,
		showMonthAfterYear: true,
		yearSuffix: '年'};
	$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
});


infoWidth1          = 112,    // info div width 96px + vertical toolbar width 16px

infoWidth2          = 120,    // info div width 104px (for 4-digit image width) + vertical toolbar width 16px

tipOffsetX          = 10,     // adjustment for info div left from x coordinate of cursor

tipOffsetY          = -54,    // adjustment for info div top from y coordinate of cursor

tipMinusOffsetX1    = -84,    // for less than 4-digit image width

tipMinusOffsetX2    = -90;    // for 4-digit image width

// Adjust left, top, x and y based on which element contains the cursor.

// Return if the target element is no longer available as in the case of

keep keep keep keep replace keep keep keep keep

tipMinusOffsetX1    = -82,    // for less than 4-digit image width


Copyright (c) 2010-2012 Robert Kieffer
MIT License - http://opensource.org/licenses/mit-license.php


"use strict"

var jsonFile = require('jsonfile')
  , fs = require('fs')
  , mkdir = require('./mkdir')
  , path = require('path')

var me = module.exports

me.outputJsonSync = function(file, data) {
  var dir = path.dirname(file)

  if (!fs.existsSync(dir))
    mkdir.mkdirsSync(dir)

  jsonFile.writeFileSync(file, data)
}

me.outputJson = function(file, data, callback) {
  var dir = path.dirname(file)

  fs.exists(dir, function(itDoes) {
    if (itDoes) return jsonFile.writeFile(file, data, callback)

    mkdir.mkdirs(dir, function(err) {
      if (err) return callback(err)
      jsonFile.writeFile(file, data, callback)
    })
  })
}


.idea
*.iml
npm-debug.log
dump.rdb
node_modules
results.tap
results.xml
npm-shrinkwrap.json
config.json
.DS_Store
*/.DS_Store
*/*/.DS_Store
._*
*/._*
*/*/._*
coverage.*
lib-cov


offsetY < imagePos.top || offsetY >= bottom) {

* creates a DOM node to place in the editor-holder

keep keep keep replace keep keep keep keep keep


<!doctype html>

	<meta charset="utf-8">
	<title>jQuery UI Unit Tests</title>

	<link rel="stylesheet" href="../../themes/base/jquery.ui.core.css">
	<link rel="stylesheet" href="../../themes/base/jquery.ui.theme.css">
	<link rel="stylesheet" href="../index.css">

jQuery UI Unit Tests

Full Test Suite

All

Core

Core

Widget

Interactions

Draggable

Droppable

Resizable

Selectable

Sortable

Widgets

Accordion

Autocomplete

Button

Datepicker

Dialog

Menu

Progressbar

Slider

Spinner

Tabs

Tooltip

Utilities

Position

Effects

Effects


// listen to removal to stop listening to resize events

$("#img").on("mousemove", "#img-preview, #img-scale, #img-tip, .img-guide", _showImageTip)

.on("mouseleave", "#img-preview, #img-scale, #img-tip, .img-guide", _hideImageTip);

keep keep keep add keep keep keep keep keep

// If the image size is too narrow in width or height, then

// show the crosshair cursor since guides are almost invisible

if (this.naturalWidth < 20 || this.naturalHeight < 20) {


# readable-stream

A new class of streams for Node.js

This module provides the new Stream base classes introduced in Node
v0.10, for use in Node v0.8.  You can use it to have programs that
have to work with node v0.8, while being forward-compatible for v0.10
and beyond.  When you drop support for v0.8, you can remove this
module, and only use the native streams.

This is almost exactly the same codebase as appears in Node v0.10.
However:

1. The exported object is actually the Readable class.  Decorating the
   native `stream` module would be global pollution.
2. In v0.10, you can safely use `base64` as an argument to
   `setEncoding` in Readable streams.  However, in v0.8, the
   StringDecoder class has no `end()` method, which is problematic for
   Base64.  So, don't use that, because it'll break and be weird.

Other than that, the API is the same as `require('stream')` in v0.10,
so the API docs are reproduced below.

----------

    Stability: 2 - Unstable

A stream is an abstract interface implemented by various objects in
Node.  For example a request to an HTTP server is a stream, as is
stdout. Streams are readable, writable, or both. All streams are
instances of [EventEmitter][]

You can load the Stream base classes by doing `require('stream')`.
There are base classes provided for Readable streams, Writable
streams, Duplex streams, and Transform streams.

## Compatibility

In earlier versions of Node, the Readable stream interface was
simpler, but also less powerful and less useful.

* Rather than waiting for you to call the `read()` method, `'data'`
  events would start emitting immediately.  If you needed to do some
  I/O to decide how to handle data, then you had to store the chunks
  in some kind of buffer so that they would not be lost.
* The `pause()` method was advisory, rather than guaranteed.  This
  meant that you still had to be prepared to receive `'data'` events
  even when the stream was in a paused state.

In Node v0.10, the Readable class described below was added.  For
backwards compatibility with older Node programs, Readable streams
switch into "old mode" when a `'data'` event handler is added, or when
the `pause()` or `resume()` methods are called.  The effect is that,
even if you are not using the new `read()` method and `'readable'`
event, you no longer have to worry about losing `'data'` chunks.

Most programs will continue to function normally.  However, this
introduces an edge case in the following conditions:

* No `'data'` event handler is added.
* The `pause()` and `resume()` methods are never called.

For example, consider the following code:

```javascript
// WARNING!  BROKEN!
net.createServer(function(socket) {

  // we add an 'end' method, but never consume the data
  socket.on('end', function() {
    // It will never get here.
    socket.end('I got your message (but didnt read it)\n');
  });

}).listen(1337);
```

In versions of node prior to v0.10, the incoming message data would be
simply discarded.  However, in Node v0.10 and beyond, the socket will
remain paused forever.

The workaround in this situation is to call the `resume()` method to
trigger "old mode" behavior:

```javascript
// Workaround
net.createServer(function(socket) {

  socket.on('end', function() {
    socket.end('I got your message (but didnt read it)\n');
  });

  // start the flow of data, discarding it.
  socket.resume();

}).listen(1337);
```

In addition to new Readable streams switching into old-mode, pre-v0.10
style streams can be wrapped in a Readable class using the `wrap()`
method.

## Class: stream.Readable

<!--type=class-->

A `Readable Stream` has the following methods, members, and events.

Note that `stream.Readable` is an abstract class designed to be
extended with an underlying implementation of the `_read(size)`
method. (See below.)

### new stream.Readable([options])

* `options` {Object}
  * `highWaterMark` {Number} The maximum number of bytes to store in
    the internal buffer before ceasing to read from the underlying
    resource.  Default=16kb
  * `encoding` {String} If specified, then buffers will be decoded to
    strings using the specified encoding.  Default=null
  * `objectMode` {Boolean} Whether this stream should behave
    as a stream of objects. Meaning that stream.read(n) returns
    a single value instead of a Buffer of size n

In classes that extend the Readable class, make sure to call the
constructor so that the buffering settings can be properly
initialized.

### readable.\_read(size)

* `size` {Number} Number of bytes to read asynchronously

Note: **This function should NOT be called directly.**  It should be
implemented by child classes, and called by the internal Readable
class methods only.

All Readable stream implementations must provide a `_read` method
to fetch data from the underlying resource.

This method is prefixed with an underscore because it is internal to
the class that defines it, and should not be called directly by user
programs.  However, you **are** expected to override this method in
your own extension classes.

When data is available, put it into the read queue by calling
`readable.push(chunk)`.  If `push` returns false, then you should stop
reading.  When `_read` is called again, you should start pushing more
data.

The `size` argument is advisory.  Implementations where a "read" is a
single call that returns data can use this to know how much data to
fetch.  Implementations where that is not relevant, such as TCP or
TLS, may ignore this argument, and simply provide data whenever it
becomes available.  There is no need, for example to "wait" until
`size` bytes are available before calling `stream.push(chunk)`.

### readable.push(chunk)

* `chunk` {Buffer | null | String} Chunk of data to push into the read queue
* return {Boolean} Whether or not more pushes should be performed

Note: **This function should be called by Readable implementors, NOT
by consumers of Readable subclasses.**  The `_read()` function will not
be called again until at least one `push(chunk)` call is made.  If no
data is available, then you MAY call `push('')` (an empty string) to
allow a future `_read` call, without adding any data to the queue.

The `Readable` class works by putting data into a read queue to be
pulled out later by calling the `read()` method when the `'readable'`
event fires.

The `push()` method will explicitly insert some data into the read
queue.  If it is called with `null` then it will signal the end of the
data.

In some cases, you may be wrapping a lower-level source which has some
sort of pause/resume mechanism, and a data callback.  In those cases,
you could wrap the low-level source object by doing something like
this:

```javascript
// source is an object with readStop() and readStart() methods,
// and an `ondata` member that gets called when it has data, and
// an `onend` member that gets called when the data is over.

var stream = new Readable();

source.ondata = function(chunk) {
  // if push() returns false, then we need to stop reading from source
  if (!stream.push(chunk))
    source.readStop();
};

source.onend = function() {
  stream.push(null);
};

// _read will be called when the stream wants to pull more data in
// the advisory size argument is ignored in this case.
stream._read = function(n) {
  source.readStart();
};
```

### readable.unshift(chunk)

* `chunk` {Buffer | null | String} Chunk of data to unshift onto the read queue
* return {Boolean} Whether or not more pushes should be performed

This is the corollary of `readable.push(chunk)`.  Rather than putting
the data at the *end* of the read queue, it puts it at the *front* of
the read queue.

This is useful in certain use-cases where a stream is being consumed
by a parser, which needs to "un-consume" some data that it has
optimistically pulled out of the source.

```javascript
// A parser for a simple data protocol.
// The "header" is a JSON object, followed by 2 \n characters, and
// then a message body.
//
// Note: This can be done more simply as a Transform stream.  See below.

function SimpleProtocol(source, options) {
  if (!(this instanceof SimpleProtocol))
    return new SimpleProtocol(options);

  Readable.call(this, options);
  this._inBody = false;
  this._sawFirstCr = false;

  // source is a readable stream, such as a socket or file
  this._source = source;

  var self = this;
  source.on('end', function() {
    self.push(null);
  });

  // give it a kick whenever the source is readable
  // read(0) will not consume any bytes
  source.on('readable', function() {
    self.read(0);
  });

  this._rawHeader = [];
  this.header = null;
}

SimpleProtocol.prototype = Object.create(
  Readable.prototype, { constructor: { value: SimpleProtocol }});

SimpleProtocol.prototype._read = function(n) {
  if (!this._inBody) {
    var chunk = this._source.read();

    // if the source doesn't have data, we don't have data yet.
    if (chunk === null)
      return this.push('');

    // check if the chunk has a \n\n
    var split = -1;
    for (var i = 0; i < chunk.length; i++) {
      if (chunk[i] === 10) { // '\n'
        if (this._sawFirstCr) {
          split = i;
          break;
        } else {
          this._sawFirstCr = true;
        }
      } else {
        this._sawFirstCr = false;
      }
    }

    if (split === -1) {
      // still waiting for the \n\n
      // stash the chunk, and try again.
      this._rawHeader.push(chunk);
      this.push('');
    } else {
      this._inBody = true;
      var h = chunk.slice(0, split);
      this._rawHeader.push(h);
      var header = Buffer.concat(this._rawHeader).toString();
      try {
        this.header = JSON.parse(header);
      } catch (er) {
        this.emit('error', new Error('invalid simple protocol data'));
        return;
      }
      // now, because we got some extra data, unshift the rest
      // back into the read queue so that our consumer will see it.
      var b = chunk.slice(split);
      this.unshift(b);

      // and let them know that we are done parsing the header.
      this.emit('header', this.header);
    }
  } else {
    // from there on, just provide the data to our consumer.
    // careful not to push(null), since that would indicate EOF.
    var chunk = this._source.read();
    if (chunk) this.push(chunk);
  }
};

// Usage:
var parser = new SimpleProtocol(source);
// Now parser is a readable stream that will emit 'header'
// with the parsed header data.
```

### readable.wrap(stream)

* `stream` {Stream} An "old style" readable stream

If you are using an older Node library that emits `'data'` events and
has a `pause()` method that is advisory only, then you can use the
`wrap()` method to create a Readable stream that uses the old stream
as its data source.

For example:

```javascript
var OldReader = require('./old-api-module.js').OldReader;
var oreader = new OldReader;
var Readable = require('stream').Readable;
var myReader = new Readable().wrap(oreader);

myReader.on('readable', function() {
  myReader.read(); // etc.
});
```

### Event: 'readable'

When there is data ready to be consumed, this event will fire.

When this event emits, call the `read()` method to consume the data.

### Event: 'end'

Emitted when the stream has received an EOF (FIN in TCP terminology).
Indicates that no more `'data'` events will happen. If the stream is
also writable, it may be possible to continue writing.

### Event: 'data'

The `'data'` event emits either a `Buffer` (by default) or a string if
`setEncoding()` was used.

Note that adding a `'data'` event listener will switch the Readable
stream into "old mode", where data is emitted as soon as it is
available, rather than waiting for you to call `read()` to consume it.

### Event: 'error'

Emitted if there was an error receiving data.

### Event: 'close'

Emitted when the underlying resource (for example, the backing file
descriptor) has been closed. Not all streams will emit this.

### readable.setEncoding(encoding)

Makes the `'data'` event emit a string instead of a `Buffer`. `encoding`
can be `'utf8'`, `'utf16le'` (`'ucs2'`), `'ascii'`, or `'hex'`.

The encoding can also be set by specifying an `encoding` field to the
constructor.

### readable.read([size])

* `size` {Number | null} Optional number of bytes to read.
* Return: {Buffer | String | null}

Note: **This function SHOULD be called by Readable stream users.**

Call this method to consume data once the `'readable'` event is
emitted.

The `size` argument will set a minimum number of bytes that you are
interested in.  If not set, then the entire content of the internal
buffer is returned.

If there is no data to consume, or if there are fewer bytes in the
internal buffer than the `size` argument, then `null` is returned, and
a future `'readable'` event will be emitted when more is available.

Calling `stream.read(0)` will always return `null`, and will trigger a
refresh of the internal buffer, but otherwise be a no-op.

### readable.pipe(destination, [options])

* `destination` {Writable Stream}
* `options` {Object} Optional
  * `end` {Boolean} Default=true

Connects this readable stream to `destination` WriteStream. Incoming
data on this stream gets written to `destination`.  Properly manages
back-pressure so that a slow destination will not be overwhelmed by a
fast readable stream.

This function returns the `destination` stream.

For example, emulating the Unix `cat` command:

    process.stdin.pipe(process.stdout);

By default `end()` is called on the destination when the source stream
emits `end`, so that `destination` is no longer writable. Pass `{ end:
false }` as `options` to keep the destination stream open.

This keeps `writer` open so that "Goodbye" can be written at the
end.

    reader.pipe(writer, { end: false });
    reader.on("end", function() {
      writer.end("Goodbye\n");
    });

Note that `process.stderr` and `process.stdout` are never closed until
the process exits, regardless of the specified options.

### readable.unpipe([destination])

* `destination` {Writable Stream} Optional

Undo a previously established `pipe()`.  If no destination is
provided, then all previously established pipes are removed.

### readable.pause()

Switches the readable stream into "old mode", where data is emitted
using a `'data'` event rather than being buffered for consumption via
the `read()` method.

Ceases the flow of data.  No `'data'` events are emitted while the
stream is in a paused state.

### readable.resume()

Switches the readable stream into "old mode", where data is emitted
using a `'data'` event rather than being buffered for consumption via
the `read()` method.

Resumes the incoming `'data'` events after a `pause()`.

## Class: stream.Writable

<!--type=class-->

A `Writable` Stream has the following methods, members, and events.

Note that `stream.Writable` is an abstract class designed to be
extended with an underlying implementation of the
`_write(chunk, encoding, cb)` method. (See below.)

### new stream.Writable([options])

* `options` {Object}
  * `highWaterMark` {Number} Buffer level when `write()` starts
    returning false. Default=16kb
  * `decodeStrings` {Boolean} Whether or not to decode strings into
    Buffers before passing them to `_write()`.  Default=true

In classes that extend the Writable class, make sure to call the
constructor so that the buffering settings can be properly
initialized.

### writable.\_write(chunk, encoding, callback)

* `chunk` {Buffer | String} The chunk to be written.  Will always
  be a buffer unless the `decodeStrings` option was set to `false`.
* `encoding` {String} If the chunk is a string, then this is the
  encoding type.  Ignore chunk is a buffer.  Note that chunk will
  **always** be a buffer unless the `decodeStrings` option is
  explicitly set to `false`.
* `callback` {Function} Call this function (optionally with an error
  argument) when you are done processing the supplied chunk.

All Writable stream implementations must provide a `_write` method to
send data to the underlying resource.

Note: **This function MUST NOT be called directly.**  It should be
implemented by child classes, and called by the internal Writable
class methods only.

Call the callback using the standard `callback(error)` pattern to
signal that the write completed successfully or with an error.

If the `decodeStrings` flag is set in the constructor options, then
`chunk` may be a string rather than a Buffer, and `encoding` will
indicate the sort of string that it is.  This is to support
implementations that have an optimized handling for certain string
data encodings.  If you do not explicitly set the `decodeStrings`
option to `false`, then you can safely ignore the `encoding` argument,
and assume that `chunk` will always be a Buffer.

This method is prefixed with an underscore because it is internal to
the class that defines it, and should not be called directly by user
programs.  However, you **are** expected to override this method in
your own extension classes.

### writable.write(chunk, [encoding], [callback])

* `chunk` {Buffer | String} Data to be written
* `encoding` {String} Optional.  If `chunk` is a string, then encoding
  defaults to `'utf8'`
* `callback` {Function} Optional.  Called when this chunk is
  successfully written.
* Returns {Boolean}

Writes `chunk` to the stream.  Returns `true` if the data has been
flushed to the underlying resource.  Returns `false` to indicate that
the buffer is full, and the data will be sent out in the future. The
`'drain'` event will indicate when the buffer is empty again.

The specifics of when `write()` will return false, is determined by
the `highWaterMark` option provided to the constructor.

### writable.end([chunk], [encoding], [callback])

* `chunk` {Buffer | String} Optional final data to be written
* `encoding` {String} Optional.  If `chunk` is a string, then encoding
  defaults to `'utf8'`
* `callback` {Function} Optional.  Called when the final chunk is
  successfully written.

Call this method to signal the end of the data being written to the
stream.

### Event: 'drain'

Emitted when the stream's write queue empties and it's safe to write
without buffering again. Listen for it when `stream.write()` returns
`false`.

### Event: 'close'

Emitted when the underlying resource (for example, the backing file
descriptor) has been closed. Not all streams will emit this.

### Event: 'finish'

When `end()` is called and there are no more chunks to write, this
event is emitted.

### Event: 'pipe'

* `source` {Readable Stream}

Emitted when the stream is passed to a readable stream's pipe method.

### Event 'unpipe'

* `source` {Readable Stream}

Emitted when a previously established `pipe()` is removed using the
source Readable stream's `unpipe()` method.

## Class: stream.Duplex

<!--type=class-->

A "duplex" stream is one that is both Readable and Writable, such as a
TCP socket connection.

Note that `stream.Duplex` is an abstract class designed to be
extended with an underlying implementation of the `_read(size)`
and `_write(chunk, encoding, callback)` methods as you would with a Readable or
Writable stream class.

Since JavaScript doesn't have multiple prototypal inheritance, this
class prototypally inherits from Readable, and then parasitically from
Writable.  It is thus up to the user to implement both the lowlevel
`_read(n)` method as well as the lowlevel `_write(chunk, encoding, cb)` method
on extension duplex classes.

### new stream.Duplex(options)

* `options` {Object} Passed to both Writable and Readable
  constructors. Also has the following fields:
  * `allowHalfOpen` {Boolean} Default=true.  If set to `false`, then
    the stream will automatically end the readable side when the
    writable side ends and vice versa.

In classes that extend the Duplex class, make sure to call the
constructor so that the buffering settings can be properly
initialized.

## Class: stream.Transform

A "transform" stream is a duplex stream where the output is causally
connected in some way to the input, such as a zlib stream or a crypto
stream.

There is no requirement that the output be the same size as the input,
the same number of chunks, or arrive at the same time.  For example, a
Hash stream will only ever have a single chunk of output which is
provided when the input is ended.  A zlib stream will either produce
much smaller or much larger than its input.

Rather than implement the `_read()` and `_write()` methods, Transform
classes must implement the `_transform()` method, and may optionally
also implement the `_flush()` method.  (See below.)

### new stream.Transform([options])

* `options` {Object} Passed to both Writable and Readable
  constructors.

In classes that extend the Transform class, make sure to call the
constructor so that the buffering settings can be properly
initialized.

### transform.\_transform(chunk, encoding, callback)

* `chunk` {Buffer | String} The chunk to be transformed.  Will always
  be a buffer unless the `decodeStrings` option was set to `false`.
* `encoding` {String} If the chunk is a string, then this is the
  encoding type.  (Ignore if `decodeStrings` chunk is a buffer.)
* `callback` {Function} Call this function (optionally with an error
  argument) when you are done processing the supplied chunk.

Note: **This function MUST NOT be called directly.**  It should be
implemented by child classes, and called by the internal Transform
class methods only.

All Transform stream implementations must provide a `_transform`
method to accept input and produce output.

`_transform` should do whatever has to be done in this specific
Transform class, to handle the bytes being written, and pass them off
to the readable portion of the interface.  Do asynchronous I/O,
process things, and so on.

Call `transform.push(outputChunk)` 0 or more times to generate output
from this input chunk, depending on how much data you want to output
as a result of this chunk.

Call the callback function only when the current chunk is completely
consumed.  Note that there may or may not be output as a result of any
particular input chunk.

This method is prefixed with an underscore because it is internal to
the class that defines it, and should not be called directly by user
programs.  However, you **are** expected to override this method in
your own extension classes.

### transform.\_flush(callback)

* `callback` {Function} Call this function (optionally with an error
  argument) when you are done flushing any remaining data.

Note: **This function MUST NOT be called directly.**  It MAY be implemented
by child classes, and if so, will be called by the internal Transform
class methods only.

In some cases, your transform operation may need to emit a bit more
data at the end of the stream.  For example, a `Zlib` compression
stream will store up some internal state so that it can optimally
compress the output.  At the end, however, it needs to do the best it
can with what is left, so that the data will be complete.

In those cases, you can implement a `_flush` method, which will be
called at the very end, after all the written data is consumed, but
before emitting `end` to signal the end of the readable side.  Just
like with `_transform`, call `transform.push(chunk)` zero or more
times, as appropriate, and call `callback` when the flush operation is
complete.

This method is prefixed with an underscore because it is internal to
the class that defines it, and should not be called directly by user
programs.  However, you **are** expected to override this method in
your own extension classes.

### Example: `SimpleProtocol` parser

The example above of a simple protocol parser can be implemented much
more simply by using the higher level `Transform` stream class.

In this example, rather than providing the input as an argument, it
would be piped into the parser, which is a more idiomatic Node stream
approach.

```javascript
function SimpleProtocol(options) {
  if (!(this instanceof SimpleProtocol))
    return new SimpleProtocol(options);

  Transform.call(this, options);
  this._inBody = false;
  this._sawFirstCr = false;
  this._rawHeader = [];
  this.header = null;
}

SimpleProtocol.prototype = Object.create(
  Transform.prototype, { constructor: { value: SimpleProtocol }});

SimpleProtocol.prototype._transform = function(chunk, encoding, done) {
  if (!this._inBody) {
    // check if the chunk has a \n\n
    var split = -1;
    for (var i = 0; i < chunk.length; i++) {
      if (chunk[i] === 10) { // '\n'
        if (this._sawFirstCr) {
          split = i;
          break;
        } else {
          this._sawFirstCr = true;
        }
      } else {
        this._sawFirstCr = false;
      }
    }

    if (split === -1) {
      // still waiting for the \n\n
      // stash the chunk, and try again.
      this._rawHeader.push(chunk);
    } else {
      this._inBody = true;
      var h = chunk.slice(0, split);
      this._rawHeader.push(h);
      var header = Buffer.concat(this._rawHeader).toString();
      try {
        this.header = JSON.parse(header);
      } catch (er) {
        this.emit('error', new Error('invalid simple protocol data'));
        return;
      }
      // and let them know that we are done parsing the header.
      this.emit('header', this.header);

      // now, because we got some extra data, emit this first.
      this.push(b);
    }
  } else {
    // from there on, just provide the data to our consumer as-is.
    this.push(b);
  }
  done();
};

var parser = new SimpleProtocol();
source.pipe(parser)

// Now parser is a readable stream that will emit 'header'
// with the parsed header data.
```

## Class: stream.PassThrough

This is a trivial implementation of a `Transform` stream that simply
passes the input bytes across to the output.  Its purpose is mainly
for examples and testing, but there are occasionally use cases where
it can come in handy.

[EventEmitter]: events.html#events_class_events_eventemitter


var fs = require('fs')
  , ncp = require('ncp').ncp;

var BUF_LENGTH = 64 * 1024;
var _buff = new Buffer(BUF_LENGTH);

var copyFileSync = function(srcFile, destFile) {
  var bytesRead, fdr, fdw, pos;
  fdr = fs.openSync(srcFile, 'r');
  fdw = fs.openSync(destFile, 'w');
  bytesRead = 1;
  pos = 0;
  while (bytesRead > 0) {
    bytesRead = fs.readSync(fdr, _buff, 0, BUF_LENGTH, pos);
    fs.writeSync(fdw, _buff, 0, bytesRead);
    pos += bytesRead;
  }
  fs.closeSync(fdr);
  return fs.closeSync(fdw);
};

var copyFile = function(srcFile, destFile, cb) {
  var fdr, fdw;
  fdr = fs.createReadStream(srcFile);
  fdw = fs.createWriteStream(destFile);
  fdr.on('end', function() {
    return cb(null);
  });
  return fdr.pipe(fdw);
};

function copy(source, dest, callback) {
    if (callback)
      ncp(source, dest, callback);
    else
      ncp(source, dest, function(){});
};

module.exports.copyFileSync = copyFileSync;
module.exports.copyFile = copyFile;
module.exports.copy = copy;


pause

Pause streams...

# pause

  Pause streams...

## License

(The MIT License)

Copyright (c) 2012 TJ Holowaychuk <tj@vision-media.ca>

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


/*cursor: url("images/crosshair_cursor.png") 11 11, auto; /* for non-webkit-fallback *

cursor: -webkit-image-set( url("images/crosshair_cursor.png") 1x, url("images/crosshair_cursor@2x.png") 2x ) 11 11, auto;*/

/*
 * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a
 * copy of this software and associated documentation files (the "Software"),
 * to deal in the Software without restriction, including without limitation
 * the rights to use, copy, modify, merge, publish, distribute, sublicense,
 * and/or sell copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 * DEALINGS IN THE SOFTWARE.
 *
 */

/*
 * This file first imports all of the shared LESS/CSS, and then defines
 * version-specific layout (e.g. layout for the App shell, or layout for
 * the In-Browser version on Firefox).
 *
 * Going forward, we may have different versions of this file for different
 * Versions (e.g. App, In-Browser, etc.)
 *
 * Anything that is general/reusable should be pushed up into a LESS file
 * in the "styles" directory. See "brackets_shared.less" for the organization
 *
 * Date: @DATE
 */

/* IMPORTANT: importing brackets_shared should be the first step in this file
 * This is so that imported CSS files (NOT LESS files) end up in the
 * right place
 */
@import "brackets_shared.less";

/* Overall layout */

html, body {
    height: 100%;
    overflow: hidden;

    /* Turn off selection for UI elements */
    .user-select(none);

    /* And make sure we get a pointer cursor even over text */
    cursor: default;

    /* Turn off subpixel antialiasing on Mac since it flickers during animations. */
    -webkit-font-smoothing: antialiased;

    /* This is a hack to avoid flicker when animations (like inline editors) that use the GPU complete.
       It seems that we have to put it here rather than on the animated element in order to prevent the
       entire window from flashing.
       See: http://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform
    */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.resizing-container {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: @z-index-brackets-panel-resizer;

    &.horz-resizing {
        cursor: col-resize;
    }

    &.vert-resizing {
        cursor: row-resize;
    }
}

a, img {
    -webkit-user-drag: none;
}

.main-view {
    background: @background-color-3; // to keep the theme background consistent
    height: 100%;

    .sidebar {
        height: 100%;
        .vbox;
        width: @sidebar-width;  // changed dynamically via Resizer
        position: absolute;
        left: 0;
        top: 0;
    }

    .content {
        height: 100%;
        position: absolute;
        padding: 0;
        top: 0;
        left: @sidebar-width;  // changed dynamically via Resizer
        right: @main-toolbar-width;
    }
}

#titlebar, .modal-bar {
    border-bottom: 1px solid @tc-gray-panel-border;
    box-shadow: @tc-small-shadow-bottom;

    // Make sure the bottom box-shadow goes above the editor (position: relative needed to start a new stacking group)
    position: relative;
    z-index: @z-index-brackets-toolbar;
}

.busyCursor {
    cursor: wait !important;
}

#status-bar {
    position: relative;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    color: @tc-text;
    font-family: @sansFontFamily;
    font-size: 11px;
    line-height: 25px;
    height: 26px;
    overflow: hidden;
}

#status-info {
    color: @tc-text;
    left: 10px;
    position: absolute;
    white-space: nowrap;

    div {
        display: inline;
    }
}

#status-file {
    color: #999;
}

#status-indicators {
    background: #fff;
    color: @tc-text;
    position: absolute;
    right: 0;
    text-align: right;
    white-space: nowrap;

    > div {
        border-left: 1px solid rgba(0, 0, 0, 0.1);
        float: right;
        padding: 0 10px;
    }
    .spinner {  // spinner is tiny & usually invisible; reduce margin so gap is less glaring
        border: none;
        margin: 6px 10px;
        padding: 0;
    }

    #status-language {
        border-right: 1px solid rgba(0, 0, 0, 0.1);
    }
}

@-webkit-keyframes spinner-sprites-12 {
      0% { background-position:    0px 0px; }
    100% { background-position: -120px 0px; }
}
@-webkit-keyframes spinner-sprites-36 {
      0% { background-position:    0px 0px; }
    100% { background-position: -360px 0px; }
}

#status-indent > * {
    display: inline-block;
}

#status-indent > *.hidden {
    display: none;
}

#indent-type, #indent-width-label {
    cursor: pointer;
    margin-right: 3px;
}

#indent-type:hover, #indent-width-label:hover {
    text-decoration: underline;
}

#indent-width-input {
    font-size: 11px;
    font-weight: @font-weight-semibold;
    height: 13px;
    line-height: 1;
    vertical-align: middle;
    color: @tc-text;
    margin: 0;
    padding: 0 3px 2px;
    position: relative;
    left: 0;
    top: -1px;
    width: 6px;
    transition: 0.1s linear all;
}

#indent-width-input:focus {

}

#indent-width-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#editor-holder {
    position: relative;

    /* Placeholder shown when there is no editor open */
    #not-editor {
        height: 100%;
        .vbox;
        .box-pack(center);
        .box-align(center);
        background: @background-color-3 url('images/no_content_bg.svg') no-repeat center 45%;
    }

    /* Image Preview */
    #image-holder {
        overflow: hidden;
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        text-align: center;
        display: none;
        #img-centering {
            display: inline-block;
            vertical-align: middle;
            margin-top: -50px; /* Offset as vertical align takes image metadata into account */
            max-width: 90%;
            max-height: 90%;
        }
        #img-data {
            font-weight: @font-weight-semibold;
        }
    }

    #image-holder:before {
        content: '';
        display: inline-block;
        height: 100%;
        margin-right: -0.25em; /* Adjusts for spacing */
        vertical-align: middle;
    }

    #img-preview {
        background: url(images/preview_bg.png);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.36);
        max-height: 90%;
    }

    #img-header {
        display: inline-block;
        width: 100%;
        height: 38px;
        margin-bottom: 15px;
    }

    #img-data,
    #img-path {
        text-align: left;
        .user-select(text);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    #img-data::selection,
    #img-path::selection {
        background: @selection-color-focused;
    }

    #img {
        position: relative;
    }

    .img-guide,
    #img-preview {
        cursor: none;
    }

    #img-scale {
        display: block;
        position: absolute;
        top: 5px;
        left: 5px;
        width: 40px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.8);
        color: #fff;
        border-radius: 3px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    #img-tip {
        display: block;
        position: absolute;
        text-align: left;
        white-space: nowrap;
        padding: 6px 9px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.8);
        font-size: 11px;
        font-family: SourceCodePro;
        line-height: 13px;
        border-radius: 3px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
    }

    #x-value,
    #y-value {
        text-align: right;
    }

    .tip-container {
        border: 0;
    }

    #horiz-guide {
        background-image: url("images/horizontal-dash.svg");
        background-repeat: repeat-x;
        width: 8px;
        height: 1px;
    }

    #vert-guide {
        background-image: url("images/vertical-dash.svg");
        background-repeat: repeat-y;
        width: 1px;
        height: 8px;
    }

    #horiz-guide,
    #vert-guide {
        position: absolute;
        display: block;
    }
}

.vert-resizer {
    position: absolute;
    height: 6px;
    width: 100%;
    z-index: @z-index-brackets-panel-resizer;
    opacity: 0;
    cursor: row-resize;
}

.horz-resizer {
    position: absolute;
    height: 100%;
    width: 6px;
    z-index: @z-index-brackets-panel-resizer;
    opacity: 0;
    cursor: col-resize;
}

.bottom-panel {
    background-color: @tc-gray-panel;
    display: none;
    height: 200px;
    border-top-style: solid;
    border-width: 1px;
    border-color: @tc-gray-panel-border;

    .check-all {
        margin: 7px 15px 7px 7px;
    }

    .toolbar {
        background-color: @tc-gray-panel-top-bar;
        border-bottom: @tc-gray-panel-top-bar-shadow;
        height: auto;
        padding-top: (@base-padding / 2);
        padding-bottom: (@base-padding / 2);
        z-index: @z-index-brackets-results-panel;
        box-shadow: @tc-gray-panel-bevel, @tc-small-shadow-top;
        .title {
            color: @tc-text;
            font-size: @label-font-size;
            font-weight: @font-weight-semibold;
        }
        .close {
            position: absolute;
            right: 10px;

            // vertically centers close button
            top: 50%;
            margin-top: -10px;
        }
    }

    .table-container {
        height: 170px;
        overflow: auto;

        .highlight {
            background: @bc-white;
            border-radius: 2px;
        }

        tr.selected td {
            background-color: @tc-selected-row;
            color: @bc-black;
        }
    }
}

.bottom-panel-table {
    td {
        font-size: 12px;
        padding-left: 15px;
        padding-right: 0;
        vertical-align: baseline;
    }

    .file-section > td {
        padding-left: 5px;
    }

    .line-number {
        color: @tc-light-weight-quiet-text;
        font-family: SourceCodePro;
        font-size: 11px;
        padding: 4px 0 0 15px;
        text-align: right;
        white-space: nowrap;
        width: 5px;
    }

    .dialog-filename {
        font-size: 13px;
        font-weight: @font-weight-semibold;
    }

    .dialog-path {
        font-size: 11px;
        font-weight: normal;
    }

    .line-text {
        width: 100%;
    }
}

#update-notification {
    .sprite-icon(0, 0, 24px, 24px, "images/updateSprites.svg");
}

#toolbar-go-live {
    // background-position is 0 0 for 24x24 icons
    // Default icon is for the 'disconnected' state
    // The 'connecting failed' (.warning) state also maps here
    .sprite-icon(0, 0, 24px, 24px, "images/live_development_sprites.svg");
    // 'Connected' state
    &.success {
        .sprite-swap(0, 24px);
    }
    // 'Connection in progress' state
    &.info {
        .sprite-swap(0, 48px);
    }
    // 'Out-of-sync' state
    &.out-of-sync {
        .sprite-swap(0, 72px);
    }
    // 'sync-error'
    &.sync-error {
        .sprite-swap(0, 96px);
    }
}

#toolbar-extension-manager {
    .sprite-icon(0, 0, 24px, 24px, "images/topcoat-plugin-20.svg");
}

/* Project panel */

#working-set-header {
    height: 19px;
    padding: 10px 0 9px 12px;
    background: #3C3F41;
    color: @project-panel-text-2;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

#sidebar {
    position: relative;
    white-space: nowrap;
}

#sidebar-resizer {
    position: absolute;
    width: 6px;
    height: 100%;
    z-index: @z-index-brackets-sidebar-resizer;
    opacity: 0;
    cursor: col-resize;
}

#project-files-header {
    border-top: 1px solid #56595a;
    padding: 8px 0 9px 12px;
    font-size: 13px;
    color: @project-panel-text-2;
    overflow: hidden;
}

#open-files-container {
    .box-flex(0);
    background: #3C3F41;
    padding: 0px;
    max-height: 200px; // TODO (Issue #276): it would be nicer to have this be 50%, but that doesn't seem to work

    ul {
        list-style-type: none;
        margin: 0;
        padding-bottom: 23px;
    }

    li {
        position: relative; // so that children can be positioned absolute
        line-height: 18px;
        padding: 0 0 0 8px;
        min-height: 18px;
        vertical-align: baseline;

        &.selected a {
            color: @open-working-file-name-highlight;
        }

        &.selected .extension {
            color: @open-working-file-ext-highlight;
        }
    }

    a {
        color: #fff;

        font-size: 13px;
        text-decoration: none;

        display: block;
        height: 16px;
        line-height: 15px;
        margin-left: 18px;
        padding: 3px (@sidebar-triangle-size * 2) 3px 0;

        cursor: default;

        .directory {
            font-size: 11px;
        }
    }

    .extension, .directory {
        color: @project-panel-text-2;
    }
}

.sidebar-selection {
    background: url("images/active_back.png") no-repeat top right;
    height: 22px;
    position: absolute;
}

.sidebar-selection-triangle {
    background: url("images/active_back.png");
    width: 9px; /* quiet scrollbar width */
    height: 22px;
    position: fixed;

    z-index: @z-index-brackets-selection-triangle; /* scroller-shadow appears above this triangle */
}

.sidebar-selection-triangle.triangle-visible:before {
    content: "";

    border-top: @sidebar-triangle-size solid transparent;
    border-bottom: (@sidebar-triangle-size - 1) solid transparent;
    border-left: @sidebar-triangle-size solid #2D2E30;

    display: block;
    position: absolute;
    top: -1px;
    right: -9px;
    width: 0;
    height: 0;

    .scale-x(0.8, right, top);
}

//Initially start with the open files hidden, they will get show as files are added
#open-files-container {
    display:none;
}

#project-files-container {
    .box-flex(1);

    .jstree-brackets li > a {
        padding-right: (@sidebar-triangle-size * 2);
    }

    ul {
        padding-left: 8px;
    }

    > ul {
        padding-bottom: 24px;
    }
}

.scroller-shadow {
    background-size: 100%;
    background-repeat: no-repeat;
    height: 5px;
    position: fixed;
    z-index: @z-index-brackets-scroller-shadow;

    &.top {
        #gradient > .vertical(rgba(0,0,0,0.1), rgba(0,0,0,0));
        background-position: 0 -5px;
        background-color: transparent; /* override background-color: @endColor from #gradient.vertical */
    }

    &.bottom {
        #gradient > .vertical(rgba(0,0,0,0), rgba(0,0,0,0.1));
        background-position: 0 5px;
        background-color: transparent; /* override background-color: @endColor from #gradient.vertical */
    }
}

@jstree-sprite-size: 18px;  // this is hardcoded in jsTree's JS code

/** Classes for icons from jsTreeSprites.svg
*/
.jstree-sprite {
    background-image: url("images/jsTreeSprites.svg");
    background-repeat: no-repeat;
    background-color: transparent;
    vertical-align: middle;
    width: @jstree-sprite-size;
    height: @jstree-sprite-size;
}

/** Overriding jsTreeTheme.less
*/
.jstree-brackets .jstree-no-dots .jstree-open > ins {
    background-position: 7px -8px;
    -webkit-transform: translateZ(0) rotate(90deg);
    -webkit-filter: drop-shadow(1px 0 1px rgba(0, 0, 0, 0.36));
}

.jstree-brackets .jstree-no-dots .jstree-closed > ins {
    background-position: 7px -8px;
    -webkit-transform: translateZ(0); /* Need this to make sure that the svg isn't blurry on retina. */
    -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.36));
}

/** Classes for icons from bracketSprites.png
*/
.bracket-sprite {
    background-image: url("images/close_btn.svg");
    background-repeat: no-repeat;
    background-color: transparent;
    vertical-align: middle;
    width: 15px;
    height: 16px;
}

.file-status-icon {
    margin: 2px 0 0 8px;
    .bracket-sprite;
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 1px;

    &.dirty {
        background-position: -30px 1px;
    }

    &.can-close {
        background-position: 0 0;
    }

    &.can-close:hover {
        background-position: -15px 0;
    }

    &.can-close:active {
        background-position: -15px 0;
        opacity: @tc-icon-down;
    }
}

/* Styles for inline editors */

.inline-text-editor {
    line-height: 0px;
}

.inline-widget {
    position: relative;
    overflow: hidden;

    background-color: @tc-lighter-gray;
    min-width: 250px;
    cursor: default;

    &.animating {
        // Make the animation use the GPU--especially important for retina.
        -webkit-transform: translateZ(0);
        transform: translateZ(0);

        transition: height 250ms cubic-bezier(0, 1.02, 0.6, 1);
    }

    .CodeMirror {
        /* remove CodeMirror default height: 300px */
        height: auto;
    }

    .inline-editor-header {
        display: inline-block;
        padding: 10px 10px 0px 40px;

        .filename {
            vertical-align: middle;
            font-family: @sansFontFamily;
            font-size: 13px;
            color: @bc-black;

            // Filename header is clickable (it's an <a> tag, so we get underscore on hover by
            // default; but the hand cursor is shut off by Bootstrap's reset stylesheet)
            cursor: pointer;

            .dirty-indicator {
                .bracket-sprite;
                display: inline-block;
                background-position: -32px 2px;
                padding-top: 5px;
            }

            .line-number {
                color: @inline-color-2;
            }
        }
    }

    .shadow {
        display: block;
        height: 4px;
        width: 100%;
        position: absolute;
        content: " ";
        left: 0;
        z-index: @z-index-brackets-inline-editor-shadow;
    }

    .shadow.top {
        top: 0px;
        background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
    }

    .shadow.bottom {
        bottom: 0px;
        background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
    }

    .CodeMirror-scroll {
        background-color: transparent;

        .CodeMirror-linenumbers {
            background-color: @tc-lighter-gray;
        }
    }

    .close {
        position: absolute;
        left: 15px;
        top: 10px;
        margin-right: 30px;
    }

}

/* CSSInlineEditor rule list */
.related-container {
    @top-margin: 12px;

    float: right;
    position: relative;
    min-height: 100%;
    font-family: @sansFontFamily;
    width: 250px;
    max-width: 50%;
    overflow: hidden;
    background: @inline-background-color-2;

    .selection {
        width: 100%;
        background: #d0d5d5;
        position: absolute;
        border-top: 1px solid darken(@inline-background-color-3, @bc-color-step-size);
        border-bottom: 1px solid lighten(@inline-background-color-3, @bc-color-step-size);
        top: @top-margin;

        &.animate {
            transition: top 0.1s ease-out;
        }
    }

    /*
     * CSS triangle hack with anti-alias workarounds:
     * (a) Use selection-background-color instead of transparent.
     * (b) Use transform scaleX and origin to adjust width.
     */
    .selection:before {
        content: " ";
        position: absolute;
        width: 0;
        height: 0;
        border-top: @inline-triangle-size solid @inline-background-color-3;
        border-bottom: @inline-triangle-size solid @inline-background-color-3;
        border-left: @inline-triangle-size solid @inline-background-color-1;
        margin-top: -@inline-triangle-size;
        top: 50%;
        .scale-x(0.9, left, top);
    }

    .related {
        font-size: 12px;
        position: absolute;
        top: 0;
        left: 1px;
        width: 100%;

        ul {
            margin: 0;
            padding: @top-margin 0px;
            list-style: none;
        }

        li {
            color: @tc-emphasized-text;
            margin: 0;
            overflow: hidden;
            padding: 2px 0px 2px 15px;
            text-overflow: ellipsis;
            white-space: nowrap;

            .related-file {
                color: @tc-input-placeholder-text;
            }
        }

        .selected {
            color: @tc-light-weight-text;
            transition: color 0.1s ease-out .15s;
        }
    }
}

.inline-editor-message {
    color: @tc-input-placeholder-text;
    font-family: @sansFontFamily;
    font-size: 12px;
    line-height: 17px;
    height: 20px;
    padding: 10px 0 40px 50px;
}

/* This text is used to force the code editor's font to be loaded early on if it's a
   web font. This is necessary in order for the editor's horizontal measurement of text
   to work properly.

   In the future, when we allow the user to switch fonts, we'll need to make sure to
   update the font for this text item whenever the user switches. We'll also need to
   wait to initiate a re-measure in CodeMirror until the new font is loaded (if they
   choose a web font). This library allows for checking if a web font is loaded:

     http://code.google.com/apis/webfonts/docs/webfont_loader.html
*/
.dummy-text {
    position: fixed;
    top: -10000px;
    .code-font();
}

.platform-mac .dummy-text {
    .code-font-mac();
}

/* Find in Files results panel - temporary UI, to be replaced with a richer search feature later */

#search-results .title, #replace-all-results .title {
    .sane-box-model;
    padding-right: 20px;
    width: 100%;
    line-height: 25px;

    .flex-box;
    .contracting-col {
        .flex-item(0);
        min-width: 1px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .fixed-col {
        .flex-item(0, 0);
    }
    .pagination-col {
        .flex-item(1, 0);
        min-width: 100px;
    }
    .replace-col {
        .flex-item(1, 0);
        min-width: 120px;
        padding: 0 15px;
    }
    .first-page,
    .prev-page,
    .next-page,
    .last-page {
        .jstree-sprite;
        width: 6px;
        display: inline-block;
        margin: 0 2px;
        background-position: 0px 4px;
    }
    .first-page {
        background-position: 0px -80px;
        margin-left: 10px;
    }
    .prev-page {
        background-position: 0px -24px;
    }
    .last-page {
        background-position: 0px -52px;
    }
    .disabled {
        opacity: 0.3;
    }
}

#search-results .disclosure-triangle {
    .jstree-sprite;
    display: inline-block;
    &.expanded {
        // Unfortunately, the way jsTree sprites are aligned within their 18px boxes doesn't look good in
        // other contexts, so we need some tweaks here instead of straight multiples of @jstree-sprite-size
        background-position: 7px 5px;
        -webkit-transform: translateZ(0) rotate(90deg);
    }
    &.collapsed {
        background-position: 7px 5px;
    }
}

/* Modal bar for Find/Quick Open */

.modal-bar {
    display: block;
    text-align: left;

    font-family: @sansFontFamily;
    font-size: 14px;
    color: @tc-text;
    background: @tc-gray-panel;
    overflow: hidden;
    padding: 5px 4px 4px 14px;

    -webkit-transform: translate(0, 0); // Prefix still required.
    transition: -webkit-transform 66ms cubic-bezier(0, 0.62, 0.04, 0.99);
    z-index: @z-index-brackets-modalbar;

    body.in-browser &,
    body:not(.has-appshell-menus) & {
        // Separator line between us and the HTML menu/titlebar above
        border-top: 1px solid darken(@background-color-3, @bc-color-step-size);
    }

    &.popout {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
    }

    &.offscreen {
        -webkit-transform: translate(0, -44px);
        transform: translate(0, -44px);
        transition: -webkit-transform 266ms cubic-bezier(0, 0.56, 0, 1);
        transition: transform 266ms cubic-bezier(0, 0.56, 0, 1);

        body:not(.has-appshell-menus) & {
            top: 37px;
        }
    }

    input {
        font-family: @sansFontFamily;
        outline: none;
        width: 20em;
        margin: 5px 5px 0;
        position: relative;
        top: -3px;
        &.no-results {
            border: 1px solid #bc0023;
            box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.12), 0 0 0 2px rgba(255, 0, 120, 0.5);
        }
    }

    .message {
        display: inline-block;
    }

    .error {
        display: none;

        .alert {
            padding-top: 4px;
            padding-bottom: 4px;
        }
    }

    .navigator {
        display: none;
        button {
            margin: 2px 1px 3px;
        }
    }
}

// Search result highlighting - CodeMirror highlighting is pretty constrained. Highlights are
// blended on TOP of the selection color. The "current" search result is indicated by selection,
// so we want the selection visible underneath the highlight. To do this, the highlight must be
// transparent; it has to look good atop both the selection color AND the regular text bg color.
.CodeMirror-searching {
    // Highlight color, overlaid on top of the .find-highlighting color
    background-color: @cm-match-highlight;
    border-radius: @tc-inline-border-radius;
    box-shadow: @tc-small-shadow-bottom;
    color: @match-text !important;
}
.CodeMirror.find-highlighting div.CodeMirror-selected,
.CodeMirror .CodeMirror.find-highlighting div.CodeMirror-selected {
    // Selection color while highlighting shown - ALWAYS has the .CodeMirror-searching color
    // blended atop it.
    // Note: the 2nd selector reflecting CM nesting is needed to override the similar rules in
    // brackets_codemirror_override.less (see the note about #324).
    background: @cm-current-match-highlight;
    border-radius: @tc-inline-border-radius;
}
#find-counter {
    font-weight: @font-weight-semibold;
    padding: 0 5px;
}

.tickmark-track {
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
    width: 16px;
    z-index: @z-index-cm-max;
    pointer-events: none;

    .tickmark {
        position: absolute;
        width: 16px;
        body.platform-mac & { width: 15px; }

        height: 1px;
        background-color: #eddd23;
        border-top: 1px solid #e0d123;
        border-bottom: 1px solid #d4c620;
        opacity: 0.85;  // allow thumb to show through
    }
}

/* Quick Open search bar & dropdown */

.smart_autocomplete_container {

    // the borders show up even if the container is empty, must set height to zero using JS.
    border: 1px solid @tc-gray-panel-border;

    background-color: @tc-gray-panel;
    border-radius: 0 0 4px 4px;
    box-shadow: @tc-normal-shadow-bottom;

    // so that border won't show when height is 0.
    box-sizing: border-box;

    // using this to fix the spacing that breaks item seperators and had to use !important to override inline css
    width: 434px !important;

    /* smart auto complete doesn't correctly position the container
     * so these specific padding and margin values are necessary*/
    padding: 0px;
    margin: 9px 0 0;

    .quick-open-path {
        color: #666;
        font-size: 11px;
        letter-spacing: 0.04em;
        line-height: 11px;
    }

    li {
        color: #222;
        line-height: 15px;
        list-style: none;
        cursor: default;
        padding: 6px 10px;

        &:nth-child(odd) {
            background-color: @tc-lighter-gray;
        }

        &:hover {
            background-color: @tc-hover-highlight;
        }

        &.smart_autocomplete_highlight {
            background-color: @tc-highlight;
        }
    }
}

.quicksearch-pathmatch,
.quicksearch-namematch {
    font-weight: @font-weight-semibold;
}

.quicksearch-pathmatch {
    color: #555;
}

/* Spinner */

.spinner {
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
    width: 12px;
    height: 12px;
    background: url("images/spinner_small_sprites12.png") no-repeat;
    visibility: hidden;

    &.spin {
        -webkit-animation: spinner-sprites-12 1.2s steps(10) infinite;
        visibility: visible;
    }

    &.large {
        width: 36px;
        height: 36px;
        margin-top: 0;
        background: url("images/spinner_large_sprites36.png") no-repeat;

        &.spin {
            -webkit-animation: spinner-sprites-36 1.2s steps(10) infinite;
        }
    }
}
// Retina versions
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2) {
    .spinner {
        background-image: url("images/spinner_small_sprites12@2x.png");
        background-size: 120px 12px;

        &.large {
            background: url("images/spinner_large_sprites36@2x.png") no-repeat;
            background-size: 360px 36px;
        }
    }
}

/* Problems panel & CodeInspection status bar indicator */

#status-indicators #status-inspection {
    border: none;
    cursor: default;
    width: 13px;
}

.inspection-disabled {
    background: url(images/topcoat-inactive-15.svg) 9px 5px no-repeat;
}

.inspection-errors {
    background: url(images/topcoat-warning-15.svg) 9px 5px no-repeat;
}

.inspection-errors:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.inspection-errors:active {
    background-color: rgba(0, 0, 0, 0.05);
}

.inspection-valid {
    background: url(images/topcoat-okay-15.svg) 9px 5px no-repeat;
}

#problems-panel {
    .user-select(text);  // allow selecting error messages for easy web searching
    .line {
        text-align: right;  // make line number line up with editor line numbers
    }
}

/* Line up label text and input text */
label input {
    position: relative;
    top: -2px;
}

/* Live Preview */
.live-preview-sync-error .CodeMirror-linenumber {
    background-color: @live-preview-sync-error-background;
    color: @live-preview-sync-error-color;
}


<!DOCTYPE html>

	<meta charset="utf-8">
	<title>jQuery UI Resizable Demos</title>
	<link rel="stylesheet" href="../demos.css">

Examples

Default functionality

Preserve aspect ratio

Maximum / minimum size

Constrain resize area

Delay start

Snap to grid

Visual feedback

Synchronous resize

Animate

Resize Helper

Textarea


/*jslint vars: true, plusplus: true, devel: true, browser: true, nomen: true, indent: 4, maxerr: 50 */
/*global */

var app = app || {};

(function () {
	'use strict';

    app.d = 8;

}());


TestHelpers.commonWidgetTests( "tabs", {
	defaults: {
		active: null,
		ajaxOptions: null,
		cache: false,
		collapsible: false,
		cookie: null,
		disabled: false,
		event: "click",
		heightStyle: "content",
		hide: null,
		fx: null,
		idPrefix: "ui-tabs-",
		panelTemplate: "

",
		// show: null, // conflicts with old show callback
		spinner: "Loading…",
		tabTemplate: "
#{label}
",

		// callbacks
		activate: null,
		add: null,
		beforeActivate: null,
		beforeLoad: null,
		create: null,
		disable: null,
		enable: null,
		load: null,
		remove: null,
		select: null,
		show: null
	}
});


query: {
[key: string]: any
},
params: {
[key: string]: any
},

/// <reference types="node" />
/// <reference types="pino" />

import * as http from 'http';
import * as pino from 'pino';

declare function fastify(opts?: fastify.ServerOptions): fastify.FastifyInstance;

declare namespace fastify {

  type Plugin = (instance: FastifyInstance, opts: Object, callback?: (err?: Error) => void) => void

  type Middleware = (req: http.IncomingMessage, res: http.OutgoingMessage, callback?: (err?: Error) => void) => void

  type HTTPMethod = 'DELETE' | 'GET' | 'HEAD' | 'PATCH' | 'POST' | 'PUT' | 'OPTIONS';

  type FastifyMiddleware = (req: FastifyRequest, reply: FastifyReply, done: (err?: Error) => void) => void

  type RequestHandler = (req: FastifyRequest, res: FastifyReply) => void

  /**
   * fastify's wrapped version of node.js IncomingMessage
   */
  interface FastifyRequest {
    query: object,
    body: any,
    params: object,

    req: http.IncomingMessage
    log: pino.Logger
  }

  /**
   * Response object that is used to build and send a http response
   */
  interface FastifyReply {
    code: (statusCode: number) => FastifyReply
    header: (name: string, value: any) => FastifyReply
    type: (contentType: string) => FastifyReply
    redirect: (statusCode: number, url: string) => FastifyReply
    serializer: (fn: Function) => FastifyReply
    send: (payload?: string|Array<any>|Object|Error|Promise<any>|ReadableStream) => FastifyReply
    sent: boolean
  }

  interface ServerOptions {
    logger?: pino.LoggerOptions,
    https?: boolean
  }

  interface JSONSchema {
    // TODO - define/import JSONSchema types
    body?: Object
    querystring?: Object
    params?: Object
    response?: {
      [code: number]: Object
    }
  }

  /**
   * Optional configuration parameters for the route being created
   */
  interface RouteShorthandOptions {
    schema?: JSONSchema
    beforeHandler?: FastifyMiddleware
  }

  /**
   * Route configuration options such as "url" and "method"
   */
  interface RouteOptions extends RouteShorthandOptions {
    method: HTTPMethod,
    url: string,
    handler?: RequestHandler
  }

  /**
   * Represents the fastify instance created by the factory function the module exports.
   */
  interface FastifyInstance {
    server: http.Server

    /**
     * Adds a route to the server
     */
    route(opts: RouteOptions): FastifyInstance

    /**
     * Defines a GET route with the given mount path, options, and handler
     */
    get(url: string, opts: RouteShorthandOptions, handler: RequestHandler): FastifyInstance

    /**
     * Defines a GET route with the given mount path and handler
     */
    get(url: string, handler: RequestHandler): FastifyInstance

    /**
     * Defines a PUT route with the given mount path, options, and handler
     */
    put(url: string, opts: RouteShorthandOptions, handler: RequestHandler): FastifyInstance

    /**
     * Defines a PUT route with the given mount path and handler
     */
    put(url: string, handler: RequestHandler): FastifyInstance

    /**
     * Defines a PATCH route with the given mount path, options, and handler
     */
    patch(url: string, opts: RouteShorthandOptions, handler: RequestHandler): FastifyInstance

    /**
     * Defines a PATCH route with the given mount path and handler
     */
    patch(url: string, handler: RequestHandler): FastifyInstance

    /**
     * Defines a POST route with the given mount path, options, and handler
     */
    post(url: string, opts: RouteShorthandOptions, handler: RequestHandler): FastifyInstance

    /**
     * Defines a POST route with the given mount path and handler
     */
    post(url: string, handler: RequestHandler): FastifyInstance

    /**
     * Defines a HEAD route with the given mount path, options, and handler
     */
    head(url: string, opts: RouteShorthandOptions, handler: RequestHandler): FastifyInstance

    /**
     * Defines a HEAD route with the given mount path and handler
     */
    head(url: string, handler: RequestHandler): FastifyInstance

    /**
     * Defines a DELETE route with the given mount path, options, and handler
     */
    delete(url: string, opts: RouteShorthandOptions, handler: RequestHandler): FastifyInstance

    /**
     * Defines a DELETE route with the given mount path and handler
     */
    delete(url: string, handler: RequestHandler): FastifyInstance

    /**
     * Defines a OPTIONS route with the given mount path, options, and handler
     */
    options(url: string, opts: RouteShorthandOptions, handler: RequestHandler): FastifyInstance

    /**
     * Defines a OPTIONS route with the given mount path and handler
     */
    options(url: string, handler: RequestHandler): FastifyInstance

    /**
     * Starts the server on the given port after all the plugins are loaded,
     * internally waits for the .ready() event. The callback is the same as the
     * Node core.
     */
    listen(port: number, hostname: string, backlog: number, callback?: (err: Error) => void): http.Server

    /**
     * Starts the server on the given port after all the plugins are loaded,
     * internally waits for the .ready() event. The callback is the same as the
     * Node core.
     */
    listen(port: number, hostname: string, callback?: (err: Error) => void): http.Server

    /**
     * Starts the server on the given port after all the plugins are loaded,
     * internally waits for the .ready() event. The callback is the same as the
     * Node core.
     */
    listen(port: number, callback?: (err: Error) => void): http.Server

    /**
     * Registers a listener function that is invoked when all the plugins have
     * been loaded. It receives an error parameter if something went wrong.
     */
    ready(readyListener?: () => void): void

    /**
     * Call this function to close the server instance and run the "onClose" callback
     */
    close(closeListener: () => void): void

    /**
     * Apply the given middleware to all incoming requests
     */
    use(middleware: Middleware): void

    /**
     * Apply the given middleware to routes matching the given path
     */
    use(path: string, middleware: Middleware): void

    /**
     * Registers a plugin or array of plugins on the server
     */
    register(plugin: Plugin|Array<Plugin>, opts?: RouteOptions, callback?: (err: Error) => void): FastifyInstance

    /**
     * Decorate this fastify instance with new properties. Throws an execption if
     * you attempt to add the same decorator name twice
     */
    decorate(name: string, decoration: any, dependencies?: Array<string>): FastifyInstance

    /**
     * Decorate reply objects with new properties. Throws an execption if
     * you attempt to add the same decorator name twice
     */
    decorateReply(name: string, decoration: any, dependencies?: Array<string>): FastifyInstance

    /**
     * Decorate request objects with new properties. Throws an execption if
     * you attempt to add the same decorator name twice
     */
    decorateResponse(name: string, decoration: any, dependencies?: Array<string>): FastifyInstance

    /**
     * Extends the standard server error. Return an object with the properties you'd
     * like added to the error
     */
    extendServerError(extendFn: () => Object): FastifyInstance

    /**
     * Determines if the given named decorator is available
     */
    hasDecorator(name: string): boolean

    /**
     * Add a hook that is triggered when a request is initially received
     */
    addHook(name: 'onRequest', hook: Middleware): FastifyInstance

    /**
     * Hook that is fired before a request is processed, but after the "onRequest"
     * hook
     */
    addHook(name: 'preHandler', hook: FastifyMiddleware)

    /**
     * Hook that is called when a response is about to be sent to a client
     */
    addHook(name: 'onResponse', hook: (res: http.OutgoingMessage, next: (err?: Error) => void) => void): FastifyInstance

    /**
     * Adds a hook that is triggered when server.close is called. Useful for closing connections
     * and performing cleanup tasks
     */
    addHook(name: 'onClose', hook: (instance: FastifyInstance, done: () => void) => void): FastifyInstance
  }
}

export = fastify;