~jstys-z/helioviewer.org/client5

/**

 * @fileOverview Contains the main application class and controller for Helioviewer.

 * @author <a href="mailto:jeff.stys@nasa.gov">Jeff Stys</a>

 * @author <a href="mailto:keith.hughitt@nasa.gov">Keith Hughitt</a>

 */

/*jslint browser: true, white: true, onevar: true, undef: true, nomen: false, eqeqeq: true, plusplus: true,

  bitwise: true, regexp: true, strict: true, newcap: true, immed: true, maxlen: 120, sub: true */

/*global document, window, $, HelioviewerClient, ImageSelectTool, MovieBuilder,

  TooltipHelper, HelioviewerViewport, ScreenshotBuilder, ScreenshotHistory,

  MovieHistory, UserVideoGallery, MessageConsole, Helioviewer,

  KeyboardManager, SettingsLoader, TimeControls,

  ZoomControls, ScreenshotManagerUI, MovieManagerUI, assignTouchHandlers,

  TileLayerAccordion, VisualGlossary, _gaq */

"use strict";

var HelioviewerWebClient = HelioviewerClient.extend(

    /** @lends HelioviewerWebClient.prototype */

    {

    /**

     * Creates a new Helioviewer.org instance.

     * @constructs

     *

     * @param {Object} urlSettings Client-specified settings to load.

     *  Includes imageLayers, date, and imageScale. May be empty.

     * @param {Object} serverSettings Server settings loaded from Config.ini

     */

    init: function (urlSettings, serverSettings, zoomLevels) {

        var urlDate, imageScale, paddingHeight, accordionsToOpen, self=this;

        this.header                    = $('#hv-header');

        this.viewport                  = $('#helioviewer-viewport');

        this.drawerSpeed               = 0;

        this.drawerLeft                = $('#hv-drawer-left');

        this.drawerLeftOpened          = false;

        this.drawerLeftOpenedWidth     = 25;    /* em */

        this.drawerLeftTab             = $('#hv-drawer-tab-left');

        this.drawerLeftTabLeft         = -2.6; /* em */

        this.drawerLeftTabBorderRight  = "2pt solid rgba(0,0,0,1)";

        this.drawerLeftTabBorderBottom = "2pt solid rgba(0,0,0,1)";

        this.drawerNews                = $('#hv-drawer-news');

        this.drawerNewsOpenedHeight    = 'auto';

        this.drawerNewsOpenedWidth     = '25em';

        this.drawerMovies              = $('#hv-drawer-movies');

        this.drawerMoviesOpenedHeight  = 'auto';

        this.drawerMoviesOpenedWidth   = '25em';

        this.drawerScreenshots             = $('#hv-drawer-screenshots');

        this.drawerScreenshotsOpenedHeight = 'auto';

        this.drawerScreenshotsOpenedWidth  = '25em';

        this.drawerYoutube             = $('#hv-drawer-youtube');

        this.drawerYoutubeOpenedHeight = '55em';

        this.drawerYoutubeOpenedWidth  = '25em';

        this.drawerData                = $('#hv-drawer-data');

        this.drawerDataOpenedHeight    = 'auto';

        this.drawerDataOpenedWidth     = '25em';

        this.drawerShare               = $('#hv-drawer-share');

        this.drawerShareOpenedHeight   = 'auto';

        this.drawerShareOpenedWidth    = '25em';

        this.tabbedDrawers = ['#hv-drawer-news', '#hv-drawer-movies',

                              '#hv-drawer-screenshots', '#hv-drawer-youtube',

                              '#hv-drawer-data', '#hv-drawer-share'];

        this.tabbedDrawerButtons = {

            '#hv-drawer-news'        : '#news-button',

            '#hv-drawer-youtube'     : '#youtube-button',

            '#hv-drawer-movies'      : '#movies-button',

            '#hv-drawer-screenshots' : '#screenshots-button',

            '#hv-drawer-data'        : '#data-button',

            '#hv-drawer-share'       : '#share-button'};

        this._super(urlSettings, serverSettings, zoomLevels);

        // Debugging helpers

        if (urlSettings.debug) {

            this._showDebugHelpers();

        }

        this._initLoadingIndicator();

        this._initTooltips();

        // Determine image scale to use

        imageScale = this._chooseInitialImageScale(Helioviewer.userSettings.get('state.imageScale'), zoomLevels);

        // Use URL date if specified

        urlDate = urlSettings.date ? Date.parseUTCDate(urlSettings.date) : false;

        this.timeControls = new TimeControls('#date', '#time',

            '#timestep-select', '#timeBackBtn', '#timeForwardBtn', urlDate);

        // Get available data sources and initialize viewport

        this._initViewport(this.timeControls.getDate(), 0, 0);

        this.messageConsole = new MessageConsole();

        this.keyboard       = new KeyboardManager();

        // User Interface components

        this.zoomControls   = new ZoomControls('#zoomControls', imageScale, zoomLevels,

                                               this.serverSettings.minImageScale,

                                               this.serverSettings.maxImageScale);

        this.earthScale = new ImageScale();

        this.displayBlogFeed(8, false);

        this._userVideos = new UserVideoGallery(this.serverSettings.videoFeed);

        this.imageSelectTool = new ImageSelectTool();

        this._screenshotManagerUI = new ScreenshotManagerUI();

        this._movieManagerUI      = new MovieManagerUI();

        this._glossary = new VisualGlossary(this._setupDialog);

        this._setupDialogs();

        this._initEventHandlers();

        this._setupSettingsUI();

        this._displayGreeting();

        /* Open Left and Right Drawers */

        setTimeout(

            function () {

                self.drawerLeftClick(true);

                $('#accordion-date   .disclosure-triangle').click();

                $('#accordion-images .disclosure-triangle').click();

                //$('#accordion-events .disclosure-triangle').click();

                setTimeout(

                    function () {

                        self.drawerYoutubeClick(true);

                    },

                    250

                );

                $('#accordion-youtube     .disclosure-triangle').click();

                $('#accordion-news        .disclosure-triangle').click();

                $('#accordion-screenshots .disclosure-triangle').click();

                $('#accordion-movies      .disclosure-triangle').click();

                $('#accordion-vso         .disclosure-triangle').click();

                $('#accordion-sdo         .disclosure-triangle').click();

                $('#accordion-link        .disclosure-triangle').click();

                $('#accordion-social      .disclosure-triangle').click();

            },

            500

        );

    },

    /**

     * @description Sets up a simple AJAX-request loading indicator

     */

    _initLoadingIndicator: function () {

        $(document).ajaxStart(function () {

            $('#loading').show();

        })

        .ajaxStop(function () {

            $('#loading').hide();

        });

    },

    /**

     * Add tooltips to static HTML buttons and elements

     */

    _initTooltips: function () {

        // Overide qTip defaults

        $.fn.qtip.defaults = $.extend(true, {}, $.fn.qtip.defaults, {

            show: {

                delay: 1000

            },

            style: {

                classes: 'ui-tooltip-light ui-tooltip-shadow ui-tooltip-rounded'

            }

        });

        // Bottom-right tooltips

        $("*[title]:not(.qtip-left)").qtip();

        // Bottom-left tooltips

        $(".qtip-left").qtip({

            position: {

                my: "top right",

                at: "bottom middle"

            }

        });

        // Top-left tooltips

        $(".qtip-topleft").qtip({

            position: {

                my: "bottom right",

                at: "top middle"

            }

        });

    },

    /**

     * Initializes the viewport

     */

    _initViewport: function (date, marginTop, marginBottom) {

        var self = this;

        $(document).bind("datasources-initialized", function (e, dataSources) {

            var tileLayerAccordion = new TileLayerAccordion('#tileLayerAccordion', dataSources, date);

        });

        $(document).bind("event-types-initialized", function (e, eventTypes, date) {

            var eventLayerAccordion = new EventLayerAccordion('#eventLayerAccordion', eventTypes, date);

        });

        this._super("#helioviewer-viewport-container-outer", date, marginTop, marginBottom);

    },

    /**

     * Adds a movie to the user's history and displays the movie

     *

     * @param string movieId Identifier of the movie to be shown

     */

    loadMovie: function (movieId) {

        if (!this._movieManagerUI.has(movieId)) {

            this._movieManagerUI.addMovieUsingId(movieId);

        } else {

            this._movieManagerUI.playMovie(movieId);

        }

    },

    /**

     * @description Sets up event-handlers for dialog components

     */

    _setupDialogs: function () {

        var self = this;

        // About dialog

        this._setupDialog("#helioviewer-about", "#about-dialog", {

            "title"  : "Helioviewer - About",

            "height" : 400

        });

        // Keyboard shortcuts dialog

        this._setupDialog("#helioviewer-usage", "#usage-dialog", {

            "title": "Helioviewer - Usage Tips"

        });

        // Settings dialog

        this._setupDialog("#settings-button", "#settings-dialog", {

            "buttons": {

                "Ok": function () {

                    $(this).dialog("close");

                }

            },

            "title": "Helioviewer - Settings",

            "width": 400,

            "height": 'auto',

            "resizable": false,

            "create": function (e) {

            }

        });

    },

    /**

     * Sets up event handlers for a single dialog

     */

    _setupDialog: function (btn, dialog, options, onLoad) {

        // Default options

        var defaults = {

            title     : "Helioviewer.org",

            autoOpen  : true,

            draggable : true,

            width     : 480,

            height    : 400

        };

        // Button click handler

        $(btn).click(function () {

            var d   = $(dialog),

                btn = $(this);

            if (btn.hasClass("dialog-loaded")) {

                if (d.dialog('isOpen')) {

                    d.dialog('close');

                }

                else {

                    d.dialog('open');

                }

            } else {

                d.load(this.href, onLoad).dialog($.extend(defaults, options));

                btn.addClass("dialog-loaded");

            }

            return false;

        });

    },

    /**

     * Enables some debugging helpers that display extra information to help

     * during development

     */

    _showDebugHelpers: function () {

        var dimensions, win = $(window);

        dimensions = $("<div id='debug-dimensions'></div>").appendTo("body");

        win.resize(function (e) {

            dimensions.html(win.width() + "x" + win.height());

        });

    },

    /**

     * Configures the user settings form to match the stored values and

     * initializes event-handlers

     */

    _setupSettingsUI: function () {

        var form, dateLatest, datePrevious, autorefresh, self = this;

        form         = $("#helioviewer-settings");

        dateLatest   = $("#settings-date-latest");

        datePrevious = $("#settings-date-previous");

        autorefresh  = $("#settings-latest-image");

        // Starting date

        if (Helioviewer.userSettings.get("options.date") === "latest") {

            dateLatest.attr("checked", "checked");

        } else {

            datePrevious.attr("checked", "checked");

        }

        // Auto-refresh

        if (Helioviewer.userSettings.get("options.autorefresh")) {

            autorefresh.attr("checked", "checked");

            this.timeControls.enableAutoRefresh();

        } else {

            autorefresh.removeAttr("checked");

            this.timeControls.disableAutoRefresh();

        }

        // Event-handlers

        dateLatest.change(function (e) {

            Helioviewer.userSettings.set("options.date", "latest");

        });

        datePrevious.change(function (e) {

            Helioviewer.userSettings.set("options.date", "previous");

        });

        autorefresh.change(function (e) {

            Helioviewer.userSettings.set("options.autorefresh", e.target.checked);

            if (e.target.checked) {

                self.timeControls.enableAutoRefresh();

            } else {

                self.timeControls.disableAutoRefresh();

            }

        });

    },

    /**

     * @description Initialize event-handlers for UI components controlled by the Helioviewer class

     */

    _initEventHandlers: function () {

        var self = this,

            msg  = "Link directly to the current state of Helioviewer:",

            btns;

        $(document).bind('update-external-datasource-integration', $.proxy(this.updateExternalDataSourceIntegration, this));

        $('#accordion-vso input[type=text]').bind('change', $.proxy(this.updateExternalDataSourceIntegration, this));

        $('#accordion-sdo input[type=text]').bind('change', $.proxy(this.updateExternalDataSourceIntegration, this));

        $(this.drawerLeftTab).bind('click', $.proxy(this.drawerLeftClick, this));

        this.drawerLeft.bind('mouseover', function (event) { event.stopPropagation(); });

        $('#news-button').bind('click', $.proxy(this.drawerNewsClick, this));

        $('#youtube-button').bind('click', $.proxy(this.drawerYoutubeClick, this));

        $('#movies-button').bind('click', $.proxy(this.drawerMoviesClick, this));

        $('#screenshots-button').bind('click', $.proxy(this.drawerScreenshotsClick, this));

        $('#data-button').bind('click', $.proxy(this.drawerDataClick, this));

        $('#share-button').bind('click', $.proxy(this.drawerShareClick, this));

        $('.drawer-contents .header').bind('click', $.proxy(this.accordionHeaderClick, this));

        $('.contextual-help').bind('click', $.proxy(this.contextualHelpClick, this));

        $('#link-button').click(function (e) {

            // Google analytics event

            if (typeof(_gaq) !== "undefined") {

                _gaq.push(['_trackEvent', 'Shares', 'Homepage - URL']);

            }

            self.displayURL(self.toURL(), msg);

        });

        // Highlight both text and icons for text buttons

        btns = $("#social-buttons .text-btn, " +

                 "#movie-manager-container .text-btn, " +

                 "#image-area-select-buttons > .text-btn, " +

                 "#screenshot-manager-container .text-btn, " +

                 "#event-container .text-btn");

        btns.live("mouseover",

            function () {

                $(this).find(".ui-icon").addClass("ui-icon-hover");

            });

        btns.live("mouseout",

            function () {

                $(this).find(".ui-icon").removeClass("ui-icon-hover");

            });

        // Fix drag and drop for mobile browsers

        $("#helioviewer-viewport, .ui-slider-handle").each(function () {

            assignTouchHandlers(this);

        });

        $("#helioviewer-url-shorten").click(function (e) {

            var url;

            if (e.target.checked) {

                url = $("#helioviewer-short-url").attr("value");

            } else {

                url = $("#helioviewer-long-url").attr("value");

            }

            $("#helioviewer-url-input-box").attr('value', url).select();

        });

        $('#facebook-button').bind('click', $.proxy(this.facebook, this));

        $('#pinterest-button').bind('click', $.proxy(this.pinterest, this));

        $('#mouse-cartesian').click( function (event) {

            $(document).trigger('toggle-mouse-coords');

            $(this).toggleClass('active');

        });

        $('#mouse-polar').click(function () {

            $(document).trigger('toggle-mouse-coords');

            $(this).toggleClass('active');

        });

    },

    /**

     * displays a dialog containing a link to the current page

     * @param {Object} url

     */

    displayURL: function (url, msg) {

        // Get short URL before displaying

        var callback = function (response) {

            $("#helioviewer-long-url").attr("value", url);

            $("#helioviewer-short-url").attr("value", response.data.url);

            // Display URL

            $("#helioviewer-url-box-msg").text(msg);

            $("#url-dialog").dialog({

                dialogClass: 'helioviewer-modal-dialog',

                height    : 125,

                maxHeight : 125,

                width     : $('html').width() * 0.5,

                minWidth  : 350,

                modal     : true,

                resizable : true,

                title     : "Helioviewer - Direct Link",

                open      : function (e) {

                    $("#helioviewer-url-shorten").removeAttr("checked");

                    $('.ui-widget-overlay').hide().fadeIn();

                    $("#helioviewer-url-input-box").attr('value', url).select();

                }

            });

        };

        // Get short version of URL and open dialog

        $.ajax({

            url: Helioviewer.api,

            dataType: Helioviewer.dataType,

            data: {

                "action": "shortenURL",

                "queryString": url.substr(this.serverSettings.rootURL.length + 2)

            },

            success: callback

        });

    },

    /**

     * Displays a URL to a Helioviewer.org movie

     *

     * @param string Id of the movie to be linked to

     */

    displayMovieURL: function (movieId) {

        var msg = "Use the following link to refer to this movie:",

            url = this.serverSettings.rootURL + "/?movieId=" + movieId;

        // Google analytics event

        if (typeof(_gaq) !== "undefined") {

            _gaq.push(['_trackEvent', 'Shares', 'Movie - URL']);

        }

        this.displayURL(url, msg);

    },

    /**

     * Displays recent news from the Helioviewer Project blog

     */

    displayBlogFeed: function (n, showDescription, descriptionWordLength) {

        var url, dtype, html = "";

        url = this.serverSettings.newsURL;

        // For remote queries, retrieve XML using JSONP

        if (Helioviewer.dataType === "jsonp") {

            dtype = "jsonp text xml";

        } else {

            dtype = "xml";

        }

        $.getFeed({

            url: Helioviewer.api,

            data: {"action": "getNewsFeed"},

            dataType: dtype,

            success: function (feed) {

                var link, date, more, description;

                // Display message if there was an error retrieving the feed

                if (!feed.items) {

                    $("#social-panel").append("Unable to retrieve news feed...");

                    return;

                }

                // Grab the n most recent articles

                $.each(feed.items.slice(0, n), function (i, a) {

                    link = "<a href='" + a.link + "' alt='" + a.title + "' target='_blank'>" + a.title + "</a><br />";

                    date = "<div class='article-date'>" + a.updated.slice(0, 26) + "UTC</div>";

                    html += "<div class='blog-entry'>" + link + date;

                    // Include description?

                    if (showDescription) {

                        description = a.description;

                        // Shorten if requested

                        if (typeof descriptionWordLength === "number") {

                            description = description.split(" ").slice(0, descriptionWordLength).join(" ") + " [...]";

                        }

                        html += "<div class='article-desc'>" + description + "</div>";

                    }

                    html += "</div>";

                });

                more = "<div id='more-articles'><a href='" + url +

                       "' title='The Helioviewer Project Blog'>Visit Blog...</a></div>";

                $("#social-panel").append(html + more);

            }

        });

    },

    /**

     * Launches an instance of JHelioviewer

     *

     * Helioviewer attempts to choose a 24-hour window around the current observation time. If the user is

     * currently browsing near the end of the available data then the window for which the movie is created

     * is shifted backward to maintain it's size.

     */

    launchJHelioviewer: function () {

        var endDate, params;

        // If currently near the end of available data, shift window back

        endDate = new Date(Math.min(this.timeControls.getDate().addHours(12), new Date()));

        params = {

            "action"    : "launchJHelioviewer",

            "endTime"   : endDate.toISOString(),

            "startTime" : endDate.addHours(-24).toISOString(),

            "imageScale": this.viewport.getImageScaleInKilometersPerPixel(),

            "layers"    : this.viewport.serialize()

        };

        window.open(Helioviewer.api + "?" + $.param(params), "_blank");

    },

    /**

     * Displays welcome message on user's first visit

     */

    _displayGreeting: function () {

        if (!Helioviewer.userSettings.get("notifications.welcome")) {

            return;

        }

        $(document).trigger("message-console-info",

            ["<b>Welcome to Helioviewer.org</b>, a solar data browser. First time here? Be sure to check out our " +

             "<a href=\"http://wiki.helioviewer.org/wiki/Helioviewer.org_User_Guide_2.4.0\" " +

             "class=\"message-console-link\" target=\"_blank\"> User Guide</a>.</br>", {sticky: true}]

        );

        Helioviewer.userSettings.set("notifications.welcome", false);

    },

    /**

     * Returns the current observation date

     *

     * @return {Date} observation date

     */

    getDate: function () {

        return this.timeControls.getDate();

    },

    /**

     * Returns the currently loaded layers

     *

     * @return {String} Serialized layer string

     */

    getLayers: function () {

        return this.viewport.serialize();

    },

    /**

     * Returns the currently selected event layers

     *

     * @return {String} Serialized event layer string

     */

    getEvents: function () {

        return this.viewport.serializeEvents();

    },

    /**

     * Returns the currently selected event layers

     *

     * @return {String} Serialized event layer string

     */

    getEventsLabels: function () {

        return Helioviewer.userSettings.get("state.eventLabels");

    },

    /**

     * Returns a string representation of the layers which are visible and