/*
 * Copyright (C) 2013, 2014 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.
 */

Dashboard.Popover = function(delegate)
{
    BaseObject.call(this);

    this.delegate = delegate;
    this._edge = null;
    this._frame = new Dashboard.Rect;
    this._content = null;
    this._targetFrame = new Dashboard.Rect;
    this._preferredEdges = null;

    this._contentNeedsUpdate = false;

    this._element = document.createElement("div");
    this._element.className = Dashboard.Popover.StyleClassName;
    this._canvasId = "popover-" + (Dashboard.Popover.canvasId++);
    this._element.style.backgroundImage = "-webkit-canvas(" + this._canvasId + ")";
    this._element.addEventListener("transitionend", this, true);
    
    this._container = this._element.appendChild(document.createElement("div"));
    this._container.className = "container";
};

Dashboard.Popover.StyleClassName = "popover";
Dashboard.Popover.VisibleClassName = "visible";
Dashboard.Popover.StepInClassName = "step-in";
Dashboard.Popover.FadeOutClassName = "fade-out";
Dashboard.Popover.PreventDocumentScrollingClassName = "popover-prevent-document-scrolling";
Dashboard.Popover.canvasId = 0;
Dashboard.Popover.CornerRadius = 5;
Dashboard.Popover.MinWidth = 40;
Dashboard.Popover.MinHeight = 40;
Dashboard.Popover.ShadowPadding = 5;
Dashboard.Popover.ContentPadding = 5;
Dashboard.Popover.AnchorSize = new Dashboard.Size(22, 11);
Dashboard.Popover.ShadowEdgeInsets = new Dashboard.EdgeInsets(Dashboard.Popover.ShadowPadding);

BaseObject.addConstructorFunctions(Dashboard.Popover);

Dashboard.Popover.prototype = {
    constructor: Dashboard.Popover,
    __proto__: BaseObject.prototype,

    // Public

    get element()
    {
        return this._element;
    },

    get frame()
    {
        return this._frame;
    },

    set frame(frame)
    {
        this._element.style.left = window.scrollX + frame.origin.x + "px";
        this._element.style.top = window.scrollY + frame.origin.y + "px";
        this._element.style.width = frame.size.width + "px";
        this._element.style.height = frame.size.height + "px";
        this._element.style.backgroundSize = frame.size.width + "px " + frame.size.height + "px";
        this._frame = frame;
    },

    get visible()
    {
        return this._element.parentNode === document.body
            && !this._element.classList.contains(Dashboard.Popover.StepInClassName);
    },

    get potentiallyVisible()
    {
        return this._element.parentNode === document.body;
    },

    set content(content)
    {
        if (content === this._content)
            return;

        console.assert(content);

        this._content = content;

        this._contentNeedsUpdate = true;

        if (this.potentiallyVisible)
            this._update();
    },

    update: function()
    {
        if (!this.potentiallyVisible)
            return;

        var previouslyFocusedElement = document.activeElement;

        this._contentNeedsUpdate = true;
        this._update();

        if (previouslyFocusedElement)
            previouslyFocusedElement.focus();
    },

    /**
     * @param {Dashboard.Rect} targetFrame
     * @param {Element} content
     * @param {Dashboard.RectEdge}[] preferredEdges
     */
    present: function(targetFrame, preferredEdges)
    {
        this._targetFrame = targetFrame;
        this._preferredEdges = preferredEdges;

        console.assert(this._content);

        window.addEventListener("mousedown", this, true);
        window.addEventListener("scroll", this, true);

        this._update();

        this._element.classList.add(Dashboard.Popover.StepInClassName);

        this._element.addEventListener("mousewheel", this, true);
        this._element.addEventListener("mouseleave", this, true);
    },

    makeVisibleImmediately: function()
    {
        console.assert(this._content);

        this._finalizePresentation();
    },
    
    dismiss: function()
    {
        if (this._element.parentNode !== document.body)
            return;

        this._element.classList.add(Dashboard.Popover.FadeOutClassName);
    },

    dismissImmediately: function()
    {
        if (this._element.parentNode !== document.body)
            return;

        this._finalizeDismissal();
    },

    handleEvent: function(event)
    {
        switch (event.type) {
        case "mousedown":
        case "scroll":
            if (!this._element.contains(event.target))
                this.dismissImmediately();
            break;
        case "transitionend":
            if (this._element.classList.contains(Dashboard.Popover.StepInClassName))
                this._finalizePresentation();
            else if (this._element.classList.contains(Dashboard.Popover.FadeOutClassName))
                this._finalizeDismissal();
            break;
        case "mousewheel":
            // Scrolling inside a popover should not cascade to document when reaching a bound, because that would make it disappear unexpectedly.
            // FIXME: We should use mouseenter for better performance once it works reliably, see <https://bugs.webkit.org/show_bug.cgi?id=120786>.
            if (this._container.offsetHeight < this._container.scrollHeight)
                document.body.classList.add(Dashboard.Popover.PreventDocumentScrollingClassName);
            break;
        case "mouseleave":
            if (!this._element.isSelfOrAncestor(event.toElement))
                document.body.classList.remove(Dashboard.Popover.PreventDocumentScrollingClassName);
            break;
        }
    },

    // Private

    _update: function()
    {
        var targetFrame = this._targetFrame;
        var preferredEdges = this._preferredEdges;

        // Ensure our element is on display so that its metrics can be resolved.
        if (this._element.parentNode !== document.body)
            document.body.appendChild(this._element);

        if (this._contentNeedsUpdate) {
            // Reset CSS properties on element so that the element may be sized to fit its content.
            this._element.style.removeProperty("left");
            this._element.style.removeProperty("top");
            this._element.style.removeProperty("width");
            this._element.style.removeProperty("height");
            if (this._edge !== null)
                this._element.classList.remove(this._cssClassNameForEdge());

            // Add the content in place of the wrapper to get the raw metrics.
            this._element.replaceChild(this._content, this._container);

            // Get the ideal size for the popover to fit its content.
            var popoverBounds = this._element.getBoundingClientRect();
            this._preferredSize = new Dashboard.Size(Math.ceil(popoverBounds.width), Math.ceil(popoverBounds.height));
        }

        // The frame of the window with a little inset to make sure we have room for shadows.
        var containerFrame = new Dashboard.Rect(0, 0, window.innerWidth, window.innerHeight);
        containerFrame = containerFrame.inset(Dashboard.Popover.ShadowEdgeInsets);

        // Work out the metrics for all edges.
        var metrics = new Array(preferredEdges.length);
        for (var edgeName in Dashboard.RectEdge) {
            var edge = Dashboard.RectEdge[edgeName];
            var item = {
                edge: edge,
                metrics: this._bestMetricsForEdge(this._preferredSize, targetFrame, containerFrame, edge)
            };
            var preferredIndex = preferredEdges.indexOf(edge);
            if (preferredIndex !== -1)
                metrics[preferredIndex] = item;
            else
                metrics.push(item);
        }

        function area(size)
        {
            return size.width * size.height;
        }

        // Find if any of those fit better than the frame for the preferred edge.
        var bestEdge = metrics[0].edge;
        var bestMetrics = metrics[0].metrics;
        for (var i = 1; i < metrics.length; i++) {
            var itemMetrics = metrics[i].metrics;
            if (area(itemMetrics.contentSize) > area(bestMetrics.contentSize)) {
                bestEdge = metrics[i].edge;
                bestMetrics = itemMetrics;
            }
        }

        var anchorPoint;
        var bestFrame = bestMetrics.frame;

        this.frame = bestFrame;
        this._edge = bestEdge;

        if (this.frame === Dashboard.Rect.ZERO_RECT) {
            // The target for the popover is offscreen.
            this.dismiss();
        } else {
            switch (bestEdge) {
            case Dashboard.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
                anchorPoint = new Dashboard.Point(bestFrame.size.width - Dashboard.Popover.ShadowPadding, targetFrame.midY() - bestFrame.minY());
                break;
            case Dashboard.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
                anchorPoint = new Dashboard.Point(Dashboard.Popover.ShadowPadding, targetFrame.midY() - bestFrame.minY());
                break;
            case Dashboard.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
                anchorPoint = new Dashboard.Point(targetFrame.midX() - bestFrame.minX(), bestFrame.size.height - Dashboard.Popover.ShadowPadding);
                break;
            case Dashboard.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
                anchorPoint = new Dashboard.Point(targetFrame.midX() - bestFrame.minX(), Dashboard.Popover.ShadowPadding);
                break;
            }

            this._element.classList.add(this._cssClassNameForEdge());

            this._drawBackground(bestEdge, anchorPoint);

            // Make sure content is centered in case either of the dimension is smaller than the minimal bounds.
            if (this._preferredSize.width < Dashboard.Popover.MinWidth || this._preferredSize.height < Dashboard.Popover.MinHeight)
                this._container.classList.add("center");
            else
                this._container.classList.remove("center");
        }

        // Wrap the content in the container so that it's located correctly.
        if (this._contentNeedsUpdate) {
            this._container.textContent = "";
            this._element.replaceChild(this._container, this._content);
            this._container.appendChild(this._content);
        }

        this._contentNeedsUpdate = false;
    },

    _cssClassNameForEdge: function()
    {
        switch (this._edge) {
        case Dashboard.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
            return "arrow-right";
        case Dashboard.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
            return "arrow-left";
        case Dashboard.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
            return "arrow-down";
        case Dashboard.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
            return "arrow-up";
        }
        console.error("Unknown edge.");
        return "arrow-up";
    },

    _drawBackground: function(edge, anchorPoint)
    {
        var scaleFactor = window.devicePixelRatio;

        var width = this._frame.size.width;
        var height = this._frame.size.height;
        var scaledWidth = width * scaleFactor;
        var scaledHeight = height * scaleFactor;

        // Create a scratch canvas so we can draw the popover that will later be drawn into
        // the final context with a shadow.
        var scratchCanvas = document.createElement("canvas");
        scratchCanvas.width = scaledWidth;
        scratchCanvas.height = scaledHeight;

        var ctx = scratchCanvas.getContext("2d");
        ctx.scale(scaleFactor, scaleFactor);

        // Bounds of the path don't take into account the arrow, but really only the tight bounding box
        // of the content contained within the frame.
        var bounds;
        var arrowHeight = Dashboard.Popover.AnchorSize.height;
        switch (edge) {
        case Dashboard.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
            bounds = new Dashboard.Rect(0, 0, width - arrowHeight, height);
            break;
        case Dashboard.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
            bounds = new Dashboard.Rect(arrowHeight, 0, width - arrowHeight, height);
            break;
        case Dashboard.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
            bounds = new Dashboard.Rect(0, 0, width, height - arrowHeight);
            break;
        case Dashboard.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
            bounds = new Dashboard.Rect(0, arrowHeight, width, height - arrowHeight);
            break;
        }

        bounds = bounds.inset(Dashboard.Popover.ShadowEdgeInsets);

        // Clip the frame.
        ctx.fillStyle = "black";
        this._drawFrame(ctx, bounds, edge, anchorPoint);
        ctx.clip();

        // Gradient fill, top-to-bottom.
        var fillGradient = ctx.createLinearGradient(0, 0, 0, height);
        fillGradient.addColorStop(0, "rgba(255, 255, 255, 0.95)");
        fillGradient.addColorStop(1, "rgba(235, 235, 235, 0.95)");
        ctx.fillStyle = fillGradient;
        ctx.fillRect(0, 0, width, height);

        // Stroke.
        ctx.strokeStyle = "rgba(0, 0, 0, 0.25)";
        ctx.lineWidth = 2;
        this._drawFrame(ctx, bounds, edge, anchorPoint);
        ctx.stroke();

        // Draw the popover into the final context with a drop shadow.
        var finalContext = document.getCSSCanvasContext("2d", this._canvasId, scaledWidth, scaledHeight);

        finalContext.clearRect(0, 0, scaledWidth, scaledHeight);

        finalContext.shadowOffsetX = 1;
        finalContext.shadowOffsetY = 1;
        finalContext.shadowBlur = 5;
        finalContext.shadowColor = "rgba(0, 0, 0, 0.5)";

        finalContext.drawImage(scratchCanvas, 0, 0, scaledWidth, scaledHeight);
    },
    
    _bestMetricsForEdge: function(preferredSize, targetFrame, containerFrame, edge)
    {
        var x, y;
        var width = preferredSize.width + (Dashboard.Popover.ShadowPadding * 2) + (Dashboard.Popover.ContentPadding * 2);
        var height = preferredSize.height + (Dashboard.Popover.ShadowPadding * 2) + (Dashboard.Popover.ContentPadding * 2);
        var arrowLength = Dashboard.Popover.AnchorSize.height;

        switch (edge) {
        case Dashboard.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
            width += arrowLength;
            x = targetFrame.origin.x - width + Dashboard.Popover.ShadowPadding;
            y = targetFrame.origin.y - (height - targetFrame.size.height) / 2;
            break;
        case Dashboard.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
            width += arrowLength;
            x = targetFrame.origin.x + targetFrame.size.width - Dashboard.Popover.ShadowPadding;
            y = targetFrame.origin.y - (height - targetFrame.size.height) / 2;
            break;
        case Dashboard.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
            height += arrowLength;
            x = targetFrame.origin.x - (width - targetFrame.size.width) / 2;
            y = targetFrame.origin.y - height + Dashboard.Popover.ShadowPadding;
            break;
        case Dashboard.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
            height += arrowLength;
            x = targetFrame.origin.x - (width - targetFrame.size.width) / 2;
            y = targetFrame.origin.y + targetFrame.size.height - Dashboard.Popover.ShadowPadding;
            break;
        }

        if (edge === Dashboard.RectEdge.MIN_X || edge === Dashboard.RectEdge.MAX_X) {
            if (y < containerFrame.minY())
                y = containerFrame.minY();
            if (y + height > containerFrame.maxY())
                y = containerFrame.maxY() - height;
        } else {
            if (x < containerFrame.minX())
                x = containerFrame.minX(); 
            if (x + width > containerFrame.maxX())
                x = containerFrame.maxX() - width;
        }

        var preferredFrame = new Dashboard.Rect(x, y, width, height);
        var bestFrame = preferredFrame.intersectionWithRect(containerFrame);

        width = bestFrame.size.width - (Dashboard.Popover.ShadowPadding * 2);
        height = bestFrame.size.height - (Dashboard.Popover.ShadowPadding * 2);

        switch (edge) {
        case Dashboard.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
        case Dashboard.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
            width -= arrowLength;
            break;
        case Dashboard.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
        case Dashboard.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
            height -= arrowLength;
            break;
        }

        return {
            frame: bestFrame,
            contentSize: new Dashboard.Size(width, height)
        };
    },

    _drawFrame: function(ctx, bounds, anchorEdge, anchorPoint)
    {
        var r = Dashboard.Popover.CornerRadius;
        var arrowHalfLength = Dashboard.Popover.AnchorSize.width / 2;

        ctx.beginPath();
        switch (anchorEdge) {
        case Dashboard.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
            ctx.moveTo(bounds.maxX(), bounds.minY() + r);
            ctx.lineTo(bounds.maxX(), anchorPoint.y - arrowHalfLength);
            ctx.lineTo(anchorPoint.x, anchorPoint.y);
            ctx.lineTo(bounds.maxX(), anchorPoint.y + arrowHalfLength);
            ctx.arcTo(bounds.maxX(), bounds.maxY(), bounds.minX(), bounds.maxY(), r);
            ctx.arcTo(bounds.minX(), bounds.maxY(), bounds.minX(), bounds.minY(), r);
            ctx.arcTo(bounds.minX(), bounds.minY(), bounds.maxX(), bounds.minY(), r);
            ctx.arcTo(bounds.maxX(), bounds.minY(), bounds.maxX(), bounds.maxY(), r);
            break;
        case Dashboard.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
            ctx.moveTo(bounds.minX(), bounds.maxY() - r);
            ctx.lineTo(bounds.minX(), anchorPoint.y + arrowHalfLength);
            ctx.lineTo(anchorPoint.x, anchorPoint.y);
            ctx.lineTo(bounds.minX(), anchorPoint.y - arrowHalfLength);
            ctx.arcTo(bounds.minX(), bounds.minY(), bounds.maxX(), bounds.minY(), r);
            ctx.arcTo(bounds.maxX(), bounds.minY(), bounds.maxX(), bounds.maxY(), r);
            ctx.arcTo(bounds.maxX(), bounds.maxY(), bounds.minX(), bounds.maxY(), r);
            ctx.arcTo(bounds.minX(), bounds.maxY(), bounds.minX(), bounds.minY(), r);
            break;
        case Dashboard.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
            ctx.moveTo(bounds.maxX() - r, bounds.maxY());
            ctx.lineTo(anchorPoint.x + arrowHalfLength, bounds.maxY());
            ctx.lineTo(anchorPoint.x, anchorPoint.y);
            ctx.lineTo(anchorPoint.x - arrowHalfLength, bounds.maxY());
            ctx.arcTo(bounds.minX(), bounds.maxY(), bounds.minX(), bounds.minY(), r);
            ctx.arcTo(bounds.minX(), bounds.minY(), bounds.maxX(), bounds.minY(), r);
            ctx.arcTo(bounds.maxX(), bounds.minY(), bounds.maxX(), bounds.maxY(), r);
            ctx.arcTo(bounds.maxX(), bounds.maxY(), bounds.minX(), bounds.maxY(), r);
            break;
        case Dashboard.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
            ctx.moveTo(bounds.minX() + r, bounds.minY());
            ctx.lineTo(anchorPoint.x - arrowHalfLength, bounds.minY());
            ctx.lineTo(anchorPoint.x, anchorPoint.y);
            ctx.lineTo(anchorPoint.x + arrowHalfLength, bounds.minY());
            ctx.arcTo(bounds.maxX(), bounds.minY(), bounds.maxX(), bounds.maxY(), r);
            ctx.arcTo(bounds.maxX(), bounds.maxY(), bounds.minX(), bounds.maxY(), r);
            ctx.arcTo(bounds.minX(), bounds.maxY(), bounds.minX(), bounds.minY(), r);
            ctx.arcTo(bounds.minX(), bounds.minY(), bounds.maxX(), bounds.minY(), r);
            break;
        }
        ctx.closePath();
    },

    _finalizePresentation: function()
    {
        var wasVisible = this.visible;
        this._element.classList.remove(Dashboard.Popover.StepInClassName);
        this._element.classList.remove(Dashboard.Popover.FadeOutClassName);
        this._element.classList.add(Dashboard.Popover.VisibleClassName);

        // Make scroll bar flash if present, so that the user sees that scrolling is possible.
        // FIXME: Is there a better way?
        if (!wasVisible) {
            this._container.scrollTop = 1;
            this._container.scrollTop = 0;
        }
    },

    _finalizeDismissal: function()
    {
        window.removeEventListener("mousedown", this, true);
        window.removeEventListener("scroll", this, true);

        document.body.removeChild(this._element);
        document.body.classList.remove(Dashboard.Popover.PreventDocumentScrollingClassName);
        this._element.classList.remove(Dashboard.Popover.VisibleClassName);
        this._element.classList.remove(Dashboard.Popover.StepInClassName);
        this._element.classList.remove(Dashboard.Popover.FadeOutClassName);
        this._container.textContent = "";
        if (this.delegate && typeof this.delegate.didDismissPopover === "function")
            this.delegate.didDismissPopover(this);
    }
};