﻿define(function(require) {
    'use strict';

    var TimeArea = require('foreground/model/timeArea');
    var Tooltip = require('foreground/view/behavior/tooltip');
    var TimeAreaView = require('foreground/view/stream/timeAreaView');
    var ActiveStreamItemTemplate = require('text!template/stream/activeStreamItem.html');

    var ActiveStreamItemView = Marionette.LayoutView.extend({
        id: 'activeStreamItem',
        className: 'activeStreamItem',
        template: _.template(ActiveStreamItemTemplate),

        regions: function() {
            return {
                timeAreaRegion: '#' + this.id + '-timeAreaRegion'
            };
        },

        behaviors: {
            Tooltip: {
                behaviorClass: Tooltip
            }
        },

        instant: false,

        initialize: function(options) {
            this.instant = options.instant;
        },

        onRender: function() {
            if (this.instant) {
                this.$el.addClass('is-instant');
            } else {
                this.$el.on('webkitTransitionEnd', this._onTransitionInComplete.bind(this));
            }

            this.showChildView('timeAreaRegion', new TimeAreaView({
                model: new TimeArea({
                    totalTime: this.model.get('song').get('duration')
                })
            }));
        },

        onAttach: function() {
            //  If the view is shown instantly then there is no transition to wait for, so announce shown immediately.
            if (this.instant) {
                this.$el.addClass('is-visible');
                Streamus.channels.activeStreamItemArea.vent.trigger('visible');
            } else {
                _.defer(function() {
                    this.$el.addClass('is-visible');
                }.bind(this));

                Streamus.channels.activeStreamItemArea.vent.trigger('beforeVisible');
            }
        },

        hide: function() {
            this.$el.on('webkitTransitionEnd', this._onTransitionOutComplete.bind(this));
            this.$el.removeClass('is-instant is-visible');
        },

        _onTransitionInComplete: function(event) {
            if (event.target === event.currentTarget) {
                this.$el.off('webkitTransitionEnd');
                Streamus.channels.activeStreamItemArea.vent.trigger('visible');
            }
        },

        _onTransitionOutComplete: function(event) {
            if (event.target === event.currentTarget) {
                this.$el.off('webkitTransitionEnd');
                Streamus.channels.activeStreamItemArea.vent.trigger('hidden');
                this.destroy();
            }
        }
    });

    return ActiveStreamItemView;
});
@@ -648,32 +648,106 @@
  %7D;%0A        %7D,%0A%0A
+        events: %7B%0A            'contextmenu': '_onContextMenu'%0A        %7D,%0A%0A
         behavior
@@ -747,24 +747,24 @@
 ehaviors: %7B%0A
-
             
@@ -862,16 +862,38 @@
 : false,
+%0A        player: null,
 %0A%0A      
@@ -922,24 +922,24 @@
 (options) %7B%0A
-
             
@@ -970,16 +970,74 @@
 nstant;%0A
+            this.player = Streamus.backgroundPage.player;%0A
         
@@ -2803,32 +2803,904 @@
 ;%0A            %7D%0A
+        %7D,%0A%0A        _onContextMenu: function () %7B%0A            event.preventDefault();%0A%0A            Streamus.channels.contextMenu.commands.trigger('reset:items', %5B%7B%0A                text: chrome.i18n.getMessage('copyUrl'),%0A                onClick: this._copyUrl.bind(this)%0A            %7D, %7B%0A                text: chrome.i18n.getMessage('copyTitleAndUrl'),%0A                onClick: this._copyTitleAndUrl.bind(this)%0A            %7D, %7B%0A                text: chrome.i18n.getMessage('watchOnYouTube'),%0A                onClick: this._watchOnYouTube.bind(this)%0A            %7D%5D);%0A        %7D,%0A%0A        _copyUrl: function () %7B%0A            this.model.get('song').copyUrl();%0A        %7D,%0A%0A        _copyTitleAndUrl: function () %7B%0A            this.model.get('song').copyTitleAndUrl();%0A        %7D,%0A        _watchOnYouTube: function () %7B%0A            this.player.watchInTab(this.model.get('song'));%0A
         %7D%0A    %7D)

Add context menu to the active stream item view