// ----------------- initialize & clean-up

	/**
	 * Creates the container dom node for the scrollbar & hooks up the events
	 */
	protected _createDomNode(): void {
		this.domNode = createFastDomNode(document.createElement('div'));
		if (!this._forbidTranslate3dUse && Browser.canUseTranslate3d) {
			// Put the scrollbar in its own layer
			this.domNode.setTransform('translate3d(0px, 0px, 0px)');
		}

		this._visibilityController.setDomNode(this.domNode);
		this.domNode.setPosition('absolute');

		this.onmousedown(this.domNode.domNode, (e) => this._domNodeMouseDown(e));
	}

	constructor(context: ViewContext, isSecondary: boolean) {
		this._context = context;
		this._isSecondary = isSecondary;

		this._cursorStyle = this._context.configuration.editor.viewInfo.cursorStyle;
		this._lineHeight = this._context.configuration.editor.lineHeight;
		this._typicalHalfwidthCharacterWidth = this._context.configuration.editor.fontInfo.typicalHalfwidthCharacterWidth;

		this._isVisible = true;

		// Create the dom node
		this._domNode = createFastDomNode(document.createElement('div'));
		if (this._isSecondary) {
			this._domNode.setClassName('cursor secondary');
		} else {
			this._domNode.setClassName('cursor');
		}
		this._domNode.setHeight(this._lineHeight);
		this._domNode.setTop(0);
		this._domNode.setLeft(0);
		this._domNode.setAttribute('role', 'presentation');
		this._domNode.setAttribute('aria-hidden', 'true');
		Configuration.applyFontInfo(this._domNode, this._context.configuration.editor.fontInfo);
		this._domNode.setDisplay('none');

		this.updatePosition(new Position(1, 1));
		this._isInEditableRange = true;

		this._lastRenderedContent = '';
		this._renderData = null;
	}

	public setDomNode(domNode: FastDomNode): void {
		this._domNode = domNode;
		this._domNode.setClassName(this._invisibleClassName);

		// Now that the flags & the dom node are in a consistent state, ensure the Hidden/Visible configuration
		this.setShouldBeVisible(false);
	}

	constructor(opts:AbstractScrollbarOptions) {
		super();
		this._forbidTranslate3dUse = opts.forbidTranslate3dUse;
		this._lazyRender = opts.lazyRender;
		this._host = opts.host;
		this._scrollable = opts.scrollable;
		this._scrollbarState = opts.scrollbarState;
		this._visibilityController = this._register(new ScrollbarVisibilityController(opts.visibility, 'visible scrollbar ' + opts.extraScrollbarClassName, 'invisible scrollbar ' + opts.extraScrollbarClassName));
		this._mouseMoveMonitor = this._register(new GlobalMouseMoveMonitor<IStandardMouseMoveEventData>());
		this._shouldRender = true;
		this.domNode = createFastDomNode(document.createElement('div'));
		if (!this._forbidTranslate3dUse && Browser.canUseTranslate3d) {
			// Put the scrollbar in its own layer
			this.domNode.setTransform('translate3d(0px, 0px, 0px)');
		}

		this._visibilityController.setDomNode(this.domNode);
		this.domNode.setPosition('absolute');

		this.onmousedown(this.domNode.domNode, (e) => this._domNodeMouseDown(e));
	}

	public _createDomNode(): HTMLElement {
		let domNode = document.createElement('div');
		domNode.className = ClassNames.MARGIN + ' monaco-editor-background';
		domNode.style.position = 'absolute';
		domNode.setAttribute('role', 'presentation');
		domNode.setAttribute('aria-hidden', 'true');

		this._glyphMarginBackgroundDomNode = createFastDomNode(document.createElement('div'));
		this._glyphMarginBackgroundDomNode.setClassName(ClassNames.GLYPH_MARGIN);

		domNode.appendChild(this._glyphMarginBackgroundDomNode.domNode);
		return domNode;
	}

	private _sliderMouseDown(e: IMouseEvent): void {
		if (e.leftButton) {
			let initialMouseOrthogonalPosition = this._sliderOrthogonalMousePosition(e);
			let initialScrollPosition = this._getScrollPosition();
			let draggingDelta = this._sliderMousePosition(e) - this._scrollbarState.getSliderPosition();
			this.slider.toggleClassName('active', true);

			this._mouseMoveMonitor.startMonitoring(
				standardMouseMoveMerger,
				(mouseMoveData: IStandardMouseMoveEventData) => {
					let mouseOrthogonalPosition = this._sliderOrthogonalMousePosition(mouseMoveData);
					let mouseOrthogonalDelta = Math.abs(mouseOrthogonalPosition - initialMouseOrthogonalPosition);
					// console.log(initialMouseOrthogonalPosition + ' -> ' + mouseOrthogonalPosition + ': ' + mouseOrthogonalDelta);
					if (Platform.isWindows && mouseOrthogonalDelta > MOUSE_DRAG_RESET_DISTANCE) {
						// The mouse has wondered away from the scrollbar => reset dragging
						this.setDesiredScrollPosition(initialScrollPosition);
					} else {
						let desiredSliderPosition = this._sliderMousePosition(mouseMoveData) - draggingDelta;
						this.setDesiredScrollPosition(this._scrollbarState.convertSliderPositionToScrollPosition(desiredSliderPosition));
					}
				},
				() => {
					this.slider.toggleClassName('active', false);
					this._host.onDragEnd();
				}
			);

			e.preventDefault();
			this._host.onDragStart();
		}
	}

	public render(): void {
		if (!this._shouldRender) {
			return;
		}
		this._shouldRender = false;

		if (this._canUseTranslate3d) {
			// Put the scrollbar in its own layer
			this.domNode.setTransform('translate3d(0px, 0px, 0px)');
		} else {
			this.domNode.setTransform('');
		}

		this._renderDomNode(this._scrollbarState.getRectangleLargeSize(), this._scrollbarState.getRectangleSmallSize());
		this._updateSlider(this._scrollbarState.getSliderSize(), this._scrollbarState.getArrowSize() + this._scrollbarState.getSliderPosition());
	}

	private _hide(withFadeAway: boolean): void {
		this._revealTimer.cancel();
		if (!this._isVisible) {
			return;
		}
		this._isVisible = false;
		this._domNode.setClassName(this._invisibleClassName + (withFadeAway ? ' fade' : ''));
	}

	public render(ctx: IRestrictedRenderingContext): IViewCursorRenderData {
		if (!this._renderData) {
			this._domNode.setDisplay('none');
			return null;
		}

		if (this._lastRenderedContent !== this._renderData.textContent) {
			this._lastRenderedContent = this._renderData.textContent;
			this._domNode.domNode.textContent = this._lastRenderedContent;
		}

		let top = this._renderData.top + ctx.viewportTop - ctx.bigNumbersDelta;
		this._domNode.setDisplay('block');
		this._domNode.setTop(top);
		this._domNode.setLeft(this._renderData.left);
		this._domNode.setWidth(this._renderData.width);
		this._domNode.setLineHeight(this._lineHeight);
		this._domNode.setHeight(this._lineHeight);

		return {
			position: this._position,
			contentTop: top,
			contentLeft: this._renderData.left,
			height: this._lineHeight,
			width: 2
		};
	}

	public render(ctx: IRestrictedRenderingContext): void {
		if (this._canUseTranslate3d) {
			let transform = 'translate3d(0px, ' + ctx.linesViewportData.visibleRangesDeltaTop + 'px, 0px)';
			StyleMutator.setTransform(this.domNode, transform);
			StyleMutator.setTop(this.domNode, 0);
		} else {
			StyleMutator.setTransform(this.domNode, '');
			StyleMutator.setTop(this.domNode, ctx.linesViewportData.visibleRangesDeltaTop);
		}

		let height = Math.min(this._layoutProvider.getTotalHeight(), 1000000);
		StyleMutator.setHeight(this.domNode, height);
		StyleMutator.setWidth(this.domNode, this._contentLeft);

		this._glyphMarginBackgroundDomNode.setLeft(this._glyphMarginLeft);
		this._glyphMarginBackgroundDomNode.setWidth(this._glyphMarginWidth);
		this._glyphMarginBackgroundDomNode.setHeight(height);
	}