/*
 * Copyright (C) 2013 Apple Inc. All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 * 1. Redistributions of source code must retain the above copyright
 *    notice, this list of conditions and the following disclaimer.
 * 2. Redistributions in binary form must reproduce the above copyright
 *    notice, this list of conditions and the following disclaimer in the
 *    documentation and/or other materials provided with the distribution.
 *
 * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
 * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
 * THE POSSIBILITY OF SUCH DAMAGE.
 */

WI.TimelineRuler = class TimelineRuler extends WI.View
{
    constructor()
    {
        super();

        this.element.classList.add("timeline-ruler");

        this._headerElement = document.createElement("div");
        this._headerElement.classList.add("header");
        this.element.appendChild(this._headerElement);

        this._markersElement = document.createElement("div");
        this._markersElement.classList.add("markers");
        this.element.appendChild(this._markersElement);

        this._zeroTime = 0;
        this._startTime = 0;
        this._endTime = 0;
        this._duration = NaN;
        this._secondsPerPixel = 0;
        this._selectionStartTime = 0;
        this._selectionEndTime = Number.MAX_VALUE;
        this._endTimePinned = false;
        this._snapInterval = 0;
        this._allowsClippedLabels = false;
        this._allowsTimeRangeSelection = false;
        this._minimumSelectionDuration = 0.01;
        this._formatLabelCallback = null;
        this._timeRangeSelectionChanged = false;
        this._enabled = true;

        this._scannerMarker = null;
        this._markerElementMap = new Map;
        this._cachedClientWidth = 0;
    }

    // Public

    get enabled()
    {
        return this._enabled;
    }

    set enabled(x)
    {
        if (this._enabled === x)
            return;

        this._enabled = x;
        this.element.classList.toggle(WI.TreeElementStatusButton.DisabledStyleClassName, !this._enabled);
    }

    get allowsClippedLabels()
    {
        return this._allowsClippedLabels;
    }

    set allowsClippedLabels(x)
    {
        x = !!x;

        if (this._allowsClippedLabels === x)
            return;

        this._allowsClippedLabels = x;

        this.needsLayout();
    }

    set formatLabelCallback(x)
    {
        console.assert(typeof x === "function" || !x, x);

        x = x || null;

        if (this._formatLabelCallback === x)
            return;

        this._formatLabelCallback = x;

        this.needsLayout();
    }

    get allowsTimeRangeSelection()
    {
        return this._allowsTimeRangeSelection;
    }

    set allowsTimeRangeSelection(x)
    {
        x = !!x;

        if (this._allowsTimeRangeSelection === x)
            return;

        this._allowsTimeRangeSelection = x;

        if (x) {
            this._clickEventListener = this._handleClick.bind(this);
            this._doubleClickEventListener = this._handleDoubleClick.bind(this);
            this._mouseDownEventListener = this._handleMouseDown.bind(this);
            this.element.addEventListener("click", this._clickEventListener);
            this.element.addEventListener("dblclick", this._doubleClickEventListener);
            this.element.addEventListener("mousedown", this._mouseDownEventListener);

            this._leftShadedAreaElement = document.createElement("div");
            this._leftShadedAreaElement.classList.add("shaded-area");
            this._leftShadedAreaElement.classList.add("left");

            this._rightShadedAreaElement = document.createElement("div");
            this._rightShadedAreaElement.classList.add("shaded-area");
            this._rightShadedAreaElement.classList.add("right");

            this._leftSelectionHandleElement = document.createElement("div");
            this._leftSelectionHandleElement.classList.add("selection-handle");
            this._leftSelectionHandleElement.classList.add("left");
            this._leftSelectionHandleElement.addEventListener("mousedown", this._handleSelectionHandleMouseDown.bind(this));

            this._rightSelectionHandleElement = document.createElement("div");
            this._rightSelectionHandleElement.classList.add("selection-handle");
            this._rightSelectionHandleElement.classList.add("right");
            this._rightSelectionHandleElement.addEventListener("mousedown", this._handleSelectionHandleMouseDown.bind(this));

            this._selectionDragElement = document.createElement("div");
            this._selectionDragElement.classList.add("selection-drag");

            this._needsSelectionLayout();
        } else {
            this.element.removeEventListener("click", this._clickEventListener);
            this.element.removeEventListener("dblclick", this._doubleClickEventListener);
            this.element.removeEventListener("mousedown", this._mouseDownEventListener);
            this._clickEventListener = null;
            this._doubleClickEventListener = null;
            this._mouseDownEventListener = null;

            this._leftShadedAreaElement.remove();
            this._rightShadedAreaElement.remove();
            this._leftSelectionHandleElement.remove();
            this._rightSelectionHandleElement.remove();
            this._selectionDragElement.remove();

            delete this._leftShadedAreaElement;
            delete this._rightShadedAreaElement;
            delete this._leftSelectionHandleElement;
            delete this._rightSelectionHandleElement;
            delete this._selectionDragElement;
        }
    }

    get minimumSelectionDuration()
    {
        return this._minimumSelectionDuration;
    }

    set minimumSelectionDuration(x)
    {
        this._minimumSelectionDuration = x;
    }

    get zeroTime()
    {
        return this._zeroTime;
    }

    set zeroTime(x)
    {
        x = x || 0;

        if (this._zeroTime === x)
            return;

        if (this.entireRangeSelected)
            this.selectionStartTime = x;

        this._zeroTime = x;

        this.needsLayout();
    }

    get startTime()
    {
        return this._startTime;
    }

    set startTime(x)
    {
        x = x || 0;

        if (this._startTime === x)
            return;

        this._startTime = x;

        if (!isNaN(this._duration))
            this._endTime = this._startTime + this._duration;

        this._currentDividers = null;

        this.needsLayout();
    }

    get duration()
    {
        if (!isNaN(this._duration))
            return this._duration;
        return this.endTime - this.startTime;
    }

    get endTime()
    {
        if (!this._endTimePinned && this.layoutPending)
            this._recalculate();
        return this._endTime;
    }

    set endTime(x)
    {
        x = x || 0;

        if (this._endTime === x)
            return;

        this._endTime = x;
        this._endTimePinned = true;

        this.needsLayout();
    }

    get secondsPerPixel()
    {
        if (this.layoutPending)
            this._recalculate();
        return this._secondsPerPixel;
    }

    set secondsPerPixel(x)
    {
        x = x || 0;

        if (this._secondsPerPixel === x)
            return;

        this._secondsPerPixel = x;
        this._endTimePinned = false;
        this._currentDividers = null;
        this._currentSliceTime = 0;

        this.needsLayout();
    }

    get snapInterval()
    {
        return this._snapInterval;
    }

    set snapInterval(x)
    {
        if (this._snapInterval === x)
            return;

        this._snapInterval = x;
    }

    get selectionStartTime()
    {
        return this._selectionStartTime;
    }

    set selectionStartTime(x)
    {
        x = this._snapValue(x) || 0;

        if (this._selectionStartTime === x)
            return;

        this._selectionStartTime = x;
        this._timeRangeSelectionChanged = true;

        this._needsSelectionLayout();
    }

    get selectionEndTime()
    {
        return this._selectionEndTime;
    }

    set selectionEndTime(x)
    {
        x = this._snapValue(x) || 0;

        if (this._selectionEndTime === x)
            return;

        this._selectionEndTime = x;
        this._timeRangeSelectionChanged = true;

        this._needsSelectionLayout();
    }

    get entireRangeSelected()
    {
        return this._selectionStartTime === this._zeroTime && this._selectionEndTime === Number.MAX_VALUE;
    }

    selectEntireRange()
    {
        this.selectionStartTime = this._zeroTime;
        this.selectionEndTime = Number.MAX_VALUE;
    }

    addMarker(marker)
    {
        console.assert(marker instanceof WI.TimelineMarker);

        if (this._markerElementMap.has(marker))
            return;

        marker.addEventListener(WI.TimelineMarker.Event.TimeChanged, this._timelineMarkerTimeChanged, this);

        let markerTime = marker.time - this._startTime;
        let markerElement = document.createElement("div");
        markerElement.classList.add(marker.type, "marker");

        switch (marker.type) {
        case WI.TimelineMarker.Type.LoadEvent:
            markerElement.title = WI.UIString("Load \u2014 %s").format(Number.secondsToString(markerTime));
            break;
        case WI.TimelineMarker.Type.DOMContentEvent:
            markerElement.title = WI.UIString("DOM Content Loaded \u2014 %s").format(Number.secondsToString(markerTime));
            break;
        case WI.TimelineMarker.Type.TimeStamp:
            if (marker.details)
                markerElement.title = WI.UIString("%s \u2014 %s").format(marker.details, Number.secondsToString(markerTime));
            else
                markerElement.title = WI.UIString("Timestamp \u2014 %s").format(Number.secondsToString(markerTime));
            break;
        }

        this._markerElementMap.set(marker, markerElement);

        this._needsMarkerLayout();
    }

    clearMarkers()
    {
        for (let [marker, markerElement] of this._markerElementMap) {
            marker.removeEventListener(null, null, this);
            markerElement.remove();
        }

        this._markerElementMap.clear();

        this._scannerMarker = null;
    }

    elementForMarker(marker)
    {
        return this._markerElementMap.get(marker) || null;
    }

    showScanner(time)
    {
        if (!this._scannerMarker) {
            this._scannerMarker = new WI.TimelineMarker(time, WI.TimelineMarker.Type.Scanner);
            this.addMarker(this._scannerMarker);
        }

        this._scannerMarker.time = time;
    }

    hideScanner()
    {
        if (this._scannerMarker)
            this._scannerMarker.time = -1;
    }

    updateLayoutIfNeeded(layoutReason)
    {
        // If a layout is pending we can let the base class handle it and return, since that will update
        // markers and the selection at the same time.
        if (this.layoutPending) {
            super.updateLayoutIfNeeded(layoutReason);
            return;
        }

        let visibleWidth = this._recalculate();
        if (visibleWidth <= 0)
            return;

        if (this._scheduledMarkerLayoutUpdateIdentifier)
            this._updateMarkers(visibleWidth, this.duration);

        if (this._scheduledSelectionLayoutUpdateIdentifier)
            this._updateSelection(visibleWidth, this.duration);
    }

    needsLayout(layoutReason)
    {
        if (this.layoutPending)
            return;

        if (this._scheduledMarkerLayoutUpdateIdentifier) {
            cancelAnimationFrame(this._scheduledMarkerLayoutUpdateIdentifier);
            this._scheduledMarkerLayoutUpdateIdentifier = undefined;
        }

        if (this._scheduledSelectionLayoutUpdateIdentifier) {
            cancelAnimationFrame(this._scheduledSelectionLayoutUpdateIdentifier);
            this._scheduledSelectionLayoutUpdateIdentifier = undefined;
        }

        super.needsLayout(layoutReason);
    }

    // Protected

    layout()
    {
        let visibleWidth = this._recalculate();
        if (visibleWidth <= 0)
            return;

        let duration = this.duration;
        let pixelsPerSecond = visibleWidth / duration;

        // Calculate a divider count based on the maximum allowed divider density.
        let dividerCount = Math.round(visibleWidth / WI.TimelineRuler.MinimumDividerSpacing);
        let sliceTime;
        if (this._endTimePinned || !this._currentSliceTime) {
            // Calculate the slice time based on the rough divider count and the time span.
            sliceTime = duration / dividerCount;

            // Snap the slice time to a nearest number (e.g. 0.1, 0.2, 0.5, 1, 2, 5, 10, 20, 50, etc.)
            sliceTime = Math.pow(10, Math.ceil(Math.log(sliceTime) / Math.LN10));
            if (sliceTime * pixelsPerSecond >= 5 * WI.TimelineRuler.MinimumDividerSpacing)
                sliceTime = sliceTime / 5;
            if (sliceTime * pixelsPerSecond >= 2 * WI.TimelineRuler.MinimumDividerSpacing)
                sliceTime = sliceTime / 2;

            this._currentSliceTime = sliceTime;
        } else {
            // Reuse the last slice time since the time duration does not scale to fit when the end time isn't pinned.
            sliceTime = this._currentSliceTime;
        }

        // Calculate the divider count now based on the final slice time.
        dividerCount = Math.floor(visibleWidth * this.secondsPerPixel / sliceTime);

        let firstDividerTime = (Math.ceil((this._startTime - this._zeroTime) / sliceTime) * sliceTime) + this._zeroTime;
        let lastDividerTime = firstDividerTime + sliceTime * dividerCount;

        // Make an extra divider in case the last one is partially visible.
        if (!this._endTimePinned)
            ++dividerCount;

        let dividerData = {
            count: dividerCount,
            firstTime: firstDividerTime,
            lastTime: lastDividerTime,
        };

        if (Object.shallowEqual(dividerData, this._currentDividers)) {
            this._updateMarkers(visibleWidth, duration);
            this._updateSelection(visibleWidth, duration);
            return;
        }

        this._currentDividers = dividerData;

        let markerDividers = this._markersElement.querySelectorAll("." + WI.TimelineRuler.DividerElementStyleClassName);
        let dividerElement = this._headerElement.firstChild;

        for (var i = 0; i <= dividerCount; ++i) {
            if (!dividerElement) {
                dividerElement = document.createElement("div");
                dividerElement.className = WI.TimelineRuler.DividerElementStyleClassName;
                this._headerElement.appendChild(dividerElement);

                let labelElement = document.createElement("div");
                labelElement.className = WI.TimelineRuler.DividerLabelElementStyleClassName;
                dividerElement.appendChild(labelElement);
            }

            let markerDividerElement = markerDividers[i];
            if (!markerDividerElement) {
                markerDividerElement = document.createElement("div");
                markerDividerElement.className = WI.TimelineRuler.DividerElementStyleClassName;
                this._markersElement.appendChild(markerDividerElement);
            }

            let dividerTime = firstDividerTime + (sliceTime * i);
            let newPosition = (dividerTime - this._startTime) / duration;

            if (!this._allowsClippedLabels) {
                // Don't allow dividers under 0% where they will be completely hidden.
                if (newPosition < 0)
                    continue;

                // When over 100% it is time to stop making/updating dividers.
                if (newPosition > 1)
                    break;

                // Don't allow the left-most divider spacing to be so tight it clips.
                if ((newPosition * visibleWidth) < WI.TimelineRuler.MinimumLeftDividerSpacing)
                    continue;
            }

            let property = WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL ? "right" : "left";
            this._updatePositionOfElement(dividerElement, newPosition, visibleWidth, property);
            this._updatePositionOfElement(markerDividerElement, newPosition, visibleWidth, property);

            console.assert(dividerElement.firstChild.classList.contains(WI.TimelineRuler.DividerLabelElementStyleClassName));

            dividerElement.firstChild.textContent = isNaN(dividerTime) ? "" : this._formatDividerLabelText(dividerTime - this._zeroTime);
            dividerElement = dividerElement.nextSibling;
        }

        // Remove extra dividers.
        while (dividerElement) {
            let nextDividerElement = dividerElement.nextSibling;
            dividerElement.remove();
            dividerElement = nextDividerElement;
        }

        for (; i < markerDividers.length; ++i)
            markerDividers[i].remove();

        this._updateMarkers(visibleWidth, duration);
        this._updateSelection(visibleWidth, duration);
    }

    sizeDidChange()
    {
        this._cachedClientWidth = this.element.clientWidth;
    }

    // Private

    _needsMarkerLayout()
    {
        // If layout is scheduled, abort since markers will be updated when layout happens.
        if (this.layoutPending)
            return;

        if (this._scheduledMarkerLayoutUpdateIdentifier)
            return;

        this._scheduledMarkerLayoutUpdateIdentifier = requestAnimationFrame(() => {
            this._scheduledMarkerLayoutUpdateIdentifier = undefined;

            let visibleWidth = this._cachedClientWidth;
            if (visibleWidth <= 0)
                return;

            this._updateMarkers(visibleWidth, this.duration);
        });
    }

    _needsSelectionLayout()
    {
        if (!this._allowsTimeRangeSelection)
            return;

        // If layout is scheduled, abort since the selection will be updated when layout happens.
        if (this.layoutPending)
            return;

        if (this._scheduledSelectionLayoutUpdateIdentifier)
            return;

        this._scheduledSelectionLayoutUpdateIdentifier = requestAnimationFrame(() => {
            this._scheduledSelectionLayoutUpdateIdentifier = undefined;

            let visibleWidth = this._cachedClientWidth;
            if (visibleWidth <= 0)
                return;

            this._updateSelection(visibleWidth, this.duration);
        });
    }

    _recalculate()
    {
        let visibleWidth = this._cachedClientWidth;
        if (visibleWidth <= 0)
            return 0;

        let duration;
        if (this._endTimePinned)
            duration = this._endTime - this._startTime;
        else
            duration = visibleWidth * this._secondsPerPixel;

        this._secondsPerPixel = duration / visibleWidth;

        if (!this._endTimePinned)
            this._endTime = this._startTime + (visibleWidth * this._secondsPerPixel);

        return visibleWidth;
    }

    _updatePositionOfElement(element, newPosition, visibleWidth, property)
    {
        newPosition *= this._endTimePinned ? 100 : visibleWidth;

        let newPositionAprox = Math.round(newPosition * 100);
        let currentPositionAprox = Math.round(parseFloat(element.style[property]) * 100);
        if (currentPositionAprox !== newPositionAprox)
            element.style[property] = (newPositionAprox / 100) + (this._endTimePinned ? "%" : "px");
    }

    _updateMarkers(visibleWidth, duration)
    {
        if (this._scheduledMarkerLayoutUpdateIdentifier) {
            cancelAnimationFrame(this._scheduledMarkerLayoutUpdateIdentifier);
            this._scheduledMarkerLayoutUpdateIdentifier = undefined;
        }

        for (let [marker, markerElement] of this._markerElementMap) {
            if (marker.time < 0) {
                markerElement.remove();
                continue;
            }

            let newPosition = (marker.time - this._startTime) / duration;
            let property = WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL ? "right" : "left";
            this._updatePositionOfElement(markerElement, newPosition, visibleWidth, property);

            if (!markerElement.parentNode)
                this._markersElement.appendChild(markerElement);
        }
    }

    _updateSelection(visibleWidth, duration)
    {
        if (this._scheduledSelectionLayoutUpdateIdentifier) {
            cancelAnimationFrame(this._scheduledSelectionLayoutUpdateIdentifier);
            this._scheduledSelectionLayoutUpdateIdentifier = undefined;
        }

        this.element.classList.toggle("allows-time-range-selection", this._allowsTimeRangeSelection);

        if (!this._allowsTimeRangeSelection)
            return;

        this.element.classList.toggle("selection-hidden", this.entireRangeSelected);

        if (this.entireRangeSelected) {
            this._dispatchTimeRangeSelectionChangedEvent();
            return;
        }

        let startTimeClamped = this._selectionStartTime < this._startTime || this._selectionStartTime > this._endTime;
        let endTimeClamped = this._selectionEndTime < this._startTime || this._selectionEndTime > this._endTime;

        this.element.classList.toggle("both-handles-clamped", startTimeClamped && endTimeClamped);

        let formattedStartTimeText = this._formatDividerLabelText(this._selectionStartTime - this._zeroTime);
        let formattedEndTimeText = this._formatDividerLabelText(this._selectionEndTime - this._zeroTime);

        let startProperty = WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL ? "right" : "left";
        let newStartPosition = Number.constrain((this._selectionStartTime - this._startTime) / duration, 0, 1);
        this._updatePositionOfElement(this._leftShadedAreaElement, newStartPosition, visibleWidth, "width");
        this._updatePositionOfElement(this._leftSelectionHandleElement, newStartPosition, visibleWidth, startProperty);
        this._updatePositionOfElement(this._selectionDragElement, newStartPosition, visibleWidth, startProperty);

        this._leftSelectionHandleElement.classList.toggle("clamped", startTimeClamped);
        this._leftSelectionHandleElement.classList.toggle("hidden", startTimeClamped && endTimeClamped && this._selectionStartTime < this._startTime);
        this._leftSelectionHandleElement.title = formattedStartTimeText;

        let endProperty = WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL ? "left" : "right";
        let newEndPosition = 1 - Number.constrain((this._selectionEndTime - this._startTime) / duration, 0, 1);
        this._updatePositionOfElement(this._rightShadedAreaElement, newEndPosition, visibleWidth, "width");
        this._updatePositionOfElement(this._rightSelectionHandleElement, newEndPosition, visibleWidth, endProperty);
        this._updatePositionOfElement(this._selectionDragElement, newEndPosition, visibleWidth, endProperty);

        this._rightSelectionHandleElement.classList.toggle("clamped", endTimeClamped);
        this._rightSelectionHandleElement.classList.toggle("hidden", startTimeClamped && endTimeClamped && this._selectionEndTime > this._endTime);
        this._rightSelectionHandleElement.title = formattedEndTimeText;

        if (!this._selectionDragElement.parentNode) {
            this.element.appendChild(this._selectionDragElement);
            this.element.appendChild(this._leftShadedAreaElement);
            this.element.appendChild(this._leftSelectionHandleElement);
            this.element.appendChild(this._rightShadedAreaElement);
            this.element.appendChild(this._rightSelectionHandleElement);
        }

        this._dispatchTimeRangeSelectionChangedEvent();
    }

    _formatDividerLabelText(value)
    {
        if (this._formatLabelCallback)
            return this._formatLabelCallback(value);

        return Number.secondsToString(value, true);
    }

    _snapValue(value)
    {
        if (!value || !this.snapInterval)
            return value;

        return Math.round(value / this.snapInterval) * this.snapInterval;
    }

    _dispatchTimeRangeSelectionChangedEvent()
    {
        if (!this._timeRangeSelectionChanged)
            return;

        this._timeRangeSelectionChanged = false;

        this.dispatchEventToListeners(WI.TimelineRuler.Event.TimeRangeSelectionChanged);
    }

    _timelineMarkerTimeChanged()
    {
        this._needsMarkerLayout();
    }

    _shouldIgnoreMicroMovement(event)
    {
        if (this._mousePassedMicroMovementTest)
            return false;

        let pixels = Math.abs(event.pageX - this._mouseStartX);
        if (pixels <= 4)
            return true;

        this._mousePassedMicroMovementTest = true;
        return false;
    }

    _handleClick(event)
    {
        if (!this._enabled)
            return;

        if (this._mouseMoved)
            return;

        for (let newTarget of document.elementsFromPoint(event.pageX, event.pageY)) {
            if (!newTarget || typeof newTarget.click !== "function")
                continue;
            if (this.element.contains(newTarget))
                continue;

            // Clone the event to dispatch it on the new element.
            let newEvent = new event.constructor(event.type, event);
            newTarget.dispatchEvent(newEvent);
            if (newEvent.__timelineRecordClickEventHandled)
                event.stop();
            return;
        }
    }

    _handleDoubleClick(event)
    {
        if (this.entireRangeSelected)
            return;

        this.selectEntireRange();
    }

    _handleMouseDown(event)
    {
        // Only handle left mouse clicks.
        if (event.button !== 0 || event.ctrlKey)
            return;

        this._selectionIsMove = event.target === this._selectionDragElement;
        this._rulerBoundingClientRect = this.element.getBoundingClientRect();

        if (this._selectionIsMove) {
            this._lastMousePosition = event.pageX;
            var selectionDragElementRect = this._selectionDragElement.getBoundingClientRect();
            this._moveSelectionMaximumLeftOffset = this._rulerBoundingClientRect.left + (event.pageX - selectionDragElementRect.left);
            this._moveSelectionMaximumRightOffset = this._rulerBoundingClientRect.right - (selectionDragElementRect.right - event.pageX);
        } else {
            if (WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL)
                this._mouseDownPosition = this._rulerBoundingClientRect.right - event.pageX;
            else
                this._mouseDownPosition = event.pageX - this._rulerBoundingClientRect.left;
        }

        this._mouseMoved = false;

        this._mousePassedMicroMovementTest = false;
        this._mouseStartX = event.pageX;

        this._mouseMoveEventListener = this._handleMouseMove.bind(this);
        this._mouseUpEventListener = this._handleMouseUp.bind(this);

        // Register these listeners on the document so we can track the mouse if it leaves the ruler.
        document.addEventListener("mousemove", this._mouseMoveEventListener);
        document.addEventListener("mouseup", this._mouseUpEventListener);

        event.preventDefault();
        event.stopPropagation();
    }

    _handleMouseMove(event)
    {
        console.assert(event.button === 0);

        if (this._shouldIgnoreMicroMovement(event))
            return;

        this._mouseMoved = true;

        let isRTL = WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL;

        let currentMousePosition;
        if (this._selectionIsMove) {
            currentMousePosition = Math.max(this._moveSelectionMaximumLeftOffset, Math.min(this._moveSelectionMaximumRightOffset, event.pageX));

            let positionDelta = 0;
            if (isRTL)
                positionDelta = this._lastMousePosition - currentMousePosition;
            else
                positionDelta = currentMousePosition - this._lastMousePosition;

            let offsetTime = positionDelta * this.secondsPerPixel;
            let selectionDuration = this.selectionEndTime - this.selectionStartTime;
            let oldSelectionStartTime = this.selectionStartTime;

            this.selectionStartTime = Math.max(this.startTime, Math.min(this.selectionStartTime + offsetTime, this.endTime - selectionDuration));
            this.selectionEndTime = this.selectionStartTime + selectionDuration;

            if (this.snapInterval) {
                // When snapping we need to check the mouse position delta relative to the last snap, rather than the
                // last mouse move. If a snap occurs we adjust for the amount the cursor drifted, so that the mouse
                // position relative to the selection remains constant.
                let snapOffset = this.selectionStartTime - oldSelectionStartTime;
                if (!snapOffset)
                    return;

                let positionDrift = (offsetTime - snapOffset * this.snapInterval) / this.secondsPerPixel;
                currentMousePosition -= positionDrift;
            }

            this._lastMousePosition = currentMousePosition;
        } else {
            if (isRTL)
                currentMousePosition = this._rulerBoundingClientRect.right - event.pageX;
            else
                currentMousePosition = event.pageX - this._rulerBoundingClientRect.left;

            this.selectionStartTime = Math.max(this.startTime, this.startTime + (Math.min(currentMousePosition, this._mouseDownPosition) * this.secondsPerPixel));
            this.selectionEndTime = Math.min(this.startTime + (Math.max(currentMousePosition, this._mouseDownPosition) * this.secondsPerPixel), this.endTime);

            // Turn on col-resize cursor style once dragging begins, rather than on the initial mouse down.
            this.element.classList.add(WI.TimelineRuler.ResizingSelectionStyleClassName);
        }

        this._updateSelection(this._cachedClientWidth, this.duration);

        event.preventDefault();
        event.stopPropagation();
    }

    _handleMouseUp(event)
    {
        console.assert(event.button === 0);

        if (!this._selectionIsMove) {
            this.element.classList.remove(WI.TimelineRuler.ResizingSelectionStyleClassName);

            if (this.selectionEndTime - this.selectionStartTime < this.minimumSelectionDuration) {
                // The section is smaller than allowed, grow in the direction of the drag to meet the minumum.
                let currentMousePosition = 0;
                if (WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL)
                    currentMousePosition = this._rulerBoundingClientRect.right - event.pageX;
                else
                    currentMousePosition = event.pageX - this._rulerBoundingClientRect.left;

                if (currentMousePosition > this._mouseDownPosition) {
                    this.selectionEndTime = Math.min(this.selectionStartTime + this.minimumSelectionDuration, this.endTime);
                    this.selectionStartTime = this.selectionEndTime - this.minimumSelectionDuration;
                } else {
                    this.selectionStartTime = Math.max(this.startTime, this.selectionEndTime - this.minimumSelectionDuration);
                    this.selectionEndTime = this.selectionStartTime + this.minimumSelectionDuration;
                }
            }
        }

        this._dispatchTimeRangeSelectionChangedEvent();

        document.removeEventListener("mousemove", this._mouseMoveEventListener);
        document.removeEventListener("mouseup", this._mouseUpEventListener);

        delete this._mouseMoveEventListener;
        delete this._mouseUpEventListener;
        delete this._mouseDownPosition;
        delete this._lastMousePosition;
        delete this._selectionIsMove;
        delete this._rulerBoundingClientRect;
        delete this._moveSelectionMaximumLeftOffset;
        delete this._moveSelectionMaximumRightOffset;

        event.preventDefault();
        event.stopPropagation();
    }

    _handleSelectionHandleMouseDown(event)
    {
        // Only handle left mouse clicks.
        if (event.button !== 0 || event.ctrlKey)
            return;

        this._dragHandleIsStartTime = event.target === this._leftSelectionHandleElement;

        if (WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL)
            this._mouseDownPosition = this.element.totalOffsetRight - event.pageX;
        else
            this._mouseDownPosition = event.pageX - this.element.totalOffsetLeft;

        this._selectionHandleMouseMoveEventListener = this._handleSelectionHandleMouseMove.bind(this);
        this._selectionHandleMouseUpEventListener = this._handleSelectionHandleMouseUp.bind(this);

        // Register these listeners on the document so we can track the mouse if it leaves the ruler.
        document.addEventListener("mousemove", this._selectionHandleMouseMoveEventListener);
        document.addEventListener("mouseup", this._selectionHandleMouseUpEventListener);

        this.element.classList.add(WI.TimelineRuler.ResizingSelectionStyleClassName);

        event.preventDefault();
        event.stopPropagation();
    }

    _handleSelectionHandleMouseMove(event)
    {
        console.assert(event.button === 0);

        let currentMousePosition = 0;
        if (WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL)
            currentMousePosition = this.element.totalOffsetRight - event.pageX;
        else
            currentMousePosition = event.pageX - this.element.totalOffsetLeft;

        let currentTime = this.startTime + (currentMousePosition * this.secondsPerPixel);
        if (this.snapInterval)
            currentTime = this._snapValue(currentTime);

        if (event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
            // Resize the selection on both sides when the Option keys is held down.
            if (this._dragHandleIsStartTime) {
                let timeDifference = currentTime - this.selectionStartTime;
                this.selectionStartTime = Math.max(this.startTime, Math.min(currentTime, this.selectionEndTime - this.minimumSelectionDuration));
                this.selectionEndTime = Math.min(Math.max(this.selectionStartTime + this.minimumSelectionDuration, this.selectionEndTime - timeDifference), this.endTime);
            } else {
                let timeDifference = currentTime - this.selectionEndTime;
                this.selectionEndTime = Math.min(Math.max(this.selectionStartTime + this.minimumSelectionDuration, currentTime), this.endTime);
                this.selectionStartTime = Math.max(this.startTime, Math.min(this.selectionStartTime - timeDifference, this.selectionEndTime - this.minimumSelectionDuration));
            }
        } else {
            // Resize the selection on side being dragged.
            if (this._dragHandleIsStartTime)
                this.selectionStartTime = Math.max(this.startTime, Math.min(currentTime, this.selectionEndTime - this.minimumSelectionDuration));
            else
                this.selectionEndTime = Math.min(Math.max(this.selectionStartTime + this.minimumSelectionDuration, currentTime), this.endTime);
        }

        this._updateSelection(this._cachedClientWidth, this.duration);

        event.preventDefault();
        event.stopPropagation();
    }

    _handleSelectionHandleMouseUp(event)
    {
        console.assert(event.button === 0);

        this.element.classList.remove(WI.TimelineRuler.ResizingSelectionStyleClassName);

        document.removeEventListener("mousemove", this._selectionHandleMouseMoveEventListener);
        document.removeEventListener("mouseup", this._selectionHandleMouseUpEventListener);

        delete this._selectionHandleMouseMoveEventListener;
        delete this._selectionHandleMouseUpEventListener;
        delete this._dragHandleIsStartTime;
        delete this._mouseDownPosition;

        event.preventDefault();
        event.stopPropagation();
    }
};

WI.TimelineRuler.MinimumLeftDividerSpacing = 48;
WI.TimelineRuler.MinimumDividerSpacing = 64;

WI.TimelineRuler.ResizingSelectionStyleClassName = "resizing-selection";
WI.TimelineRuler.DividerElementStyleClassName = "divider";
WI.TimelineRuler.DividerLabelElementStyleClassName = "label";

WI.TimelineRuler.Event = {
    TimeRangeSelectionChanged: "time-ruler-time-range-selection-changed"
};