SUGAR = window.SUGAR || {};
(function() {
    if (SUGAR && SUGAR.Player) {
        return;
    }

    Array.prototype.collect = function(fn) {
        var a = [];
        for (var i = 0; i < this.length; i++) {
            var e = fn.call(this[i], this[i]);
            a.push(e);
        }
        return a;
    }

    Array.prototype.eachi = function(fn) {
        for (var i = 0; i < this.length; i++) {
            fn.call(this[i], i);
        }
        return this;
    }

    Array.prototype.clear = function() { this.length = 0; }

    Array.prototype.shuffle = function () {
        return this.sort(function() {
            return 0.5 - Math.random()
        });
    }

    var _$ = function(id) {
        return document.getElementById(id);
    }

    var wireEvent = function(el, ev, fun) {
        if (el.addEventListener) {
            el.addEventListener(ev, fun, false);
        }
        else {
            var responder;
            var theElement = el;
            responder = function(event) {
                fun.call(theElement, event);
            };
            el.attachEvent('on' + ev, responder);
        }
    }

    var trackEvent = (window.SUGAR && typeof SUGAR.Analytics == 'object') ?
                        function(action, label, value) {
                            SUGAR.Analytics.recordEvent('sugar_player', action, label, value);
                        }
                        :
                        function () {
                            /* cough */
                        };

    function ScrollBar(el, left, right, interval) {

        var ScrollLeft = function () {
            var scrollObj = this.parent;
            this.parent.MOVING_LEFT = true;
            var timer = setInterval(function() {
                    if (scrollObj.MOVING_LEFT  && scrollObj.el.offsetLeft - scrollObj.el.parentNode.offsetLeft < 0) {
                        var left = scrollObj.el.offsetLeft - scrollObj.el.parentNode.offsetLeft;
                        var newleft = left + 5;
                        scrollObj.el.style.left = newleft + 'px';
                    }
                    else {
                        clearInterval(timer);
                        timer = null;
                    }
                }, interval);
        };

        var ScrollRight = function () {
            var scrollObj = this.parent;
            scrollObj.MOVING_RIGHT = true;
            var timer = setInterval(function() {
                    if (scrollObj.MOVING_RIGHT && scrollObj.el.offsetLeft + scrollObj.el.offsetWidth > scrollObj.el.parentNode.offsetWidth + scrollObj.el.parentNode.offsetLeft ) {
                        var left = scrollObj.el.offsetLeft - scrollObj.el.parentNode.offsetLeft;
                        var newleft = left - 5;
                        scrollObj.el.style.left = newleft + 'px';
                    }
                    else {
                        clearInterval(timer);
                        timer = null;
                    }
                }, interval);
        };

        var NoScroll = function () {
            var scrollObj = this.parent;

            scrollObj.MOVING_LEFT = false;
            scrollObj.MOVING_RIGHT = false;
        };

        this.el = el;
        this.left = left;
        this.right = right;

        this.left.parent = this;
        this.right.parent = this;

        this.MOVING_LEFT = false;
        this.MOVING_RIGHT = false;

        this.el.style.left = '0px';

        wireEvent(left, 'mouseover', ScrollLeft);
        wireEvent(right, 'mouseover', ScrollRight);
        wireEvent(left, 'mouseout', NoScroll);
        wireEvent(right, 'mouseout', NoScroll);

    }

    function VideoThumb(video) {

        var html = '<div class="sugar-video"> \
        <div class="sugar-video-thumbnail"> \
          <div class="sugar-img"><img alt="' + video.title + '" title="' + video.title + '" src="' + video.images.thumbnail + '" /></div> \
        </div> \
        <div class="sugar-video-title">' + video.title + '</div>\
      </div>';

        var div = document.createElement('div');

        div.id = 'sugar-video-' + video.nid;
        div.className = 'sugar-video-wrapper';
        div.innerHTML = html;

        this.element = div;
    }

    SUGAR.Player = function(opts) {
        this.init(opts);
    };

    (function() {

        // cache object for searching duplicates
        var reClassNameCache = {};

        // reusable regex for searching classnames
        var getClassRegEx = function(c) {
            // check to see if regular expression already exists
            var re = reClassNameCache[c];

            if (!re) {
                re = new RegExp('(?:^|\\s+)' + c + '(?:\\s+|$)');
                reClassNameCache[c] = re;
            }

            return re;
        };

        var getByClass = function(c, tag, root, apply) {
            var tag = tag || '*';
            var root = root || document;

            var nodes = [];
            var elements = root.getElementsByTagName(tag);
            var re = getClassRegEx(c);

            for (var i = 0, len = elements.length; i < len; ++i) {
                if (re.test(elements[i].className)) {
                    nodes[nodes.length] = elements[i];

                    if (apply) {
                        apply.call(elements[i], elements[i]);
                    }

                }
            }
            return nodes;
        };

        var getStyle = function(element, style) {
          if (document.defaultView && document.defaultView.getComputedStyle) {
            var styles = document.defaultView.getComputedStyle(element, "");
            if (styles) {
              return styles[style];
            }
          }
          else {
              return element.currentStyle[style] || element.style[style];
          }
        };

        var isMobile = function () {
            var ua = navigator.userAgent.toLowerCase();
            return ua.indexOf('iphone') >= 0 || ua.indexOf('ipad') >= 0 || ua.indexOf('android') >= 0;
        }();

        var loadStyleSheet = function(url) {
            if (!SUGAR.Player.loadingStyleSheet) {
                SUGAR.Player.loadingStyleSheet = true;
                var linkElement = document.createElement('link');
                linkElement.href = url;
                linkElement.rel = 'stylesheet';
                linkElement.type = 'text/css';
                document.getElementsByTagName('head')[0].appendChild(linkElement);
                SUGAR.Player.hasLoadedStyleSheet = true;
            }
        };

        var buildQueryString = function(params) {
            var query = [];
            for ( key in params ) {
                if ( params.hasOwnProperty(key) ) {
                    query.push(key + "=" + encodeURIComponent(params[key]));
                }
            }
            return query.join('&');
        }

        var getOoyalaHourTag = function() {
            var hourTags = [
            "00000159", // 0-2
            "02000359", // 2-4
            "04000559", // 4-6
            "06000759", // 6-8
            "08000959", // 8-10
            "10001159", // 10-12
            "12001359", // 12-14
            "14001559", // 14-16
            "16001759", // 16-18
            "18001959", // 18-20
            "20002159", // 20-22
            "22002359"  // 22-24
            ];

            var hour = (new Date()).getUTCHours();

            return hourTags[Math.floor(hour / 2)];
        }

        SUGAR.Player.loadingStyleSheet = false;
        SUGAR.Player.hasLoadedStyleSheet = false;

        SUGAR.Player.PLAYER_NUMBER = 0;

        SUGAR.Player.jsonP = function(url, params) {
            var script = document.createElement('script');
            var head = document.getElementsByTagName('head')[0];

            params = params || {};
            query = buildQueryString(params);
            url += '?' + query;

            script.type = 'text/javascript';
            script.src = url;
            head.insertBefore(script, head.firstChild)
            return script;
        };

        SUGAR.Players = {};

        SUGAR.Player.embedCallback = function(playerId, eventName, eventArgs) {
            switch (eventName) {
                case "apiReady":
                case "adStarted":
                case "adCompleted":
                case "adClicked":
                case "adError":
                case "playComplete":
                case "playheadTimeChanged":
                case "playerEmbedded":
                    SUGAR.Players[playerId].handleEvent(playerId, eventName, eventArgs);
                    break;
            }
        }

        SUGAR.Player.prototype = function() {

            var baseURL = 'http://www.popsugar.tv';
            var dataURI = '/psvn/video_playlist';
            var cssURI = '/static/psvn/css/sugar_player.css';
            var thumbBarHeight = 125;
            var thumbBarBottom = 2;

            return {
                init: function(options) {
                    var that = this;
                    this._playerNumber = ++SUGAR.Player.PLAYER_NUMBER;
                    SUGAR.Player['receiveCallback_' + this._playerNumber] = function(resp) {
                        that.fetchVideosCallback.call(that, resp);
                    };

                    // Record the options
                    this._options = options;
                    this._initNids = options.nids.split(',');
                    this._width = options.width ||  560;
                    this._height = options.height || Math.floor(this._width * 9/16) ;
                    this._partnerId = options.partnerId || null;
                    this._autoplay = options.autoplay || false;
                    this._startCode = options.startCode || false;
                    this._initVolume = (options.volume === undefined || isNaN(options.volume)) ? null : (options.volume / 10);

                    baseURL = options.basePath || baseURL;

                    this._dataURL = baseURL + dataURI;
                    this._cb = 'SUGAR.Player.receiveCallback_' + this._playerNumber;
                    this._playedVideos = [];
                    this._videoPlayListIndex = 0;
                    this._videoPlaylist = [];
                    this._overlayDiv = null;
                    this._currentVideo = null;

                    if (this._height >= 250) {
                        this._includePlayerTop = true;
                    }

                    this._FLAG_PLAYER_APIREADY = false;
                    this._FLAG_PLAY_ON_APIREADY = this._autoplay;
                    this._FLAG_INIT_PLAYER = true;

                    this._FLAG_LOADING_THUMBS = false;
                    this._FLAG_SENT_OOYALA_LOADED = false;
                    this._FLAG_AD_PLAYED = false;

                    // dump in the player
                    this._flashPlayerId = 'ooyalaPlayer_' + this._playerNumber;
                    this._injectPlayer();
                    this._flashPlayer = null;
                    this._id = 'sugar-player-' + this._playerNumber;

                    this._videoPlayCounter = 0;
                    var trackingData = 'nids:' + this._initNids + '|uri:' + window.location.pathname;
                    trackEvent('player_loaded', trackingData);

                    SUGAR.Players[this._flashPlayerId] = this;
                },

                handleEvent: function(playerId, eventName, eventArgs) {
                    //console.log(playerId + ':' + eventName);
                    switch (eventName) {
                        case "apiReady":
                            if (SUGAR && SUGAR.Timer && !this._FLAG_SENT_OOYALA_LOADED) {
                                SUGAR.Timer.ooyalaLoaded();
                                this._FLAG_SENT_OOYALA_LOADED = true;
                            }
                            this._FLAG_PLAYER_APIREADY = true;
                            if (this._FLAG_INIT_PLAYER) {
                                this._initStyleSheet();
                                this._initFlashPlayer();
                                this._setInitVolume();
                                this.fetchVideos();
                            }
                            if (this._FLAG_PLAY_ON_APIREADY) {
                                this._play();
                                this._FLAG_PLAY_ON_APIREADY = false;
                            }
                            break;
                        case "adStarted":
                        case "adCompleted":
                        case "adClicked":
                        case "adError":
                            this._FLAG_AD_PLAYED = true;
                            trackEvent('o_' + eventName, this._videoPlayCounter);
                            break;
                        case "playComplete":
                            this.playComplete();
                            if (!this._overlayDiv) {
                                this._initOverlayDiv();
                                this._FLAG_INIT_PLAYER = true;
                            }
                            break;
                        case "playheadTimeChanged":
                            // We only captured this to keep track of when
                            // vidoes have loaded and started playing when
                            // autoplay is on. Otherwise, there would be
                            // delays due to when the user hits "play" but
                            // we want to keep track of how long Ooyala is
                            // taking to send videos to users.
                            // And we don't want to take into account
                            // ad playing time either, so only do this if an
                            // ad is not served.
                            if (SUGAR && SUGAR.Timer && this._autoplay && !this._FLAG_AD_PLAYED) {
                                SUGAR.Timer.ooyalaStarted();
                            }
                            break;
                        case "playerEmbedded":
                            this._sendOoyalaAnalytics();
                            break;
                    }
                },

                fetchVideos: function() {
                    var that = this;

                    if (this._FLAG_LOADING_THUMBS) {
                        return;
                    }

                    var params = {
                        nids: this._initNids,
                        watchedNids: this._playedVideos.collect(function() {
                            return this.nid;
                        }).join(','),
                        callback: this._cb
                    };

                    if (this._partnerId) {
                        params.partnerId = this._partnerId;
                    }

                    this._videoPlaylist.clear();

                    this._FLAG_LOADING_THUMBS = true;

                    if (SUGAR && SUGAR.Timer && this._FLAG_INIT_PLAYER) {
                        SUGAR.Timer.ooyalaInitFetchVideosCall();
                    }
                    SUGAR.Player.jsonP(this._dataURL, params);
                },

                fetchVideosCallback: function(resp) {
                    var videos = resp.videos;

                    this._videoPlaylist = videos;

                    if (this._FLAG_INIT_PLAYER) {
                        if (SUGAR && SUGAR.Timer) {
                            SUGAR.Timer.ooyalaInitFetchVideosReceived();
                        }
                        if (!this._startCode) {
                            if (this._autoplay) {
                                this.playNextVideo();
                            }
                            else {
                                this.setNextVideo();
                            }
                        }
                        else {
                            this._currentVideo = this._videoPlaylist.shift();
                            this._playedVideos.push(this._currentVideo);
                        }
                        this._FLAG_INIT_PLAYER = false;
                    }
                },

                playComplete: function() {
                    this._videoPlayCounter++;
                    if (this._videoPlaylist.length > 0) {
                        this.showThumbs();
                    }
                    else {
                        this.fetchVideos();
                        this.showThumbs();
                    }
                },

                showThumbs: function() {
                    // Rebuild the thumbs
                    if (this._FLAG_LOADING_THUMBS) {
                        var id = this._flashPlayerId;
                        var timer = setInterval(function () {
                            if (SUGAR.Players[id]._videoPlaylist.length > 0) {
                                clearInterval(timer);
                                timer = null;
                                SUGAR.Players[id]._FLAG_LOADING_THUMBS = false;
                                SUGAR.Players[id].showThumbs();
                            }
                        }, 50);
                        return;
                    }

                    var thumbbar = this.byClass('sugar-thumbbar', 'div');
                    thumbbar.innerHTML = '';

                    var that = this;
                    this._videoPlaylist.shuffle();
                    this._videoPlaylist.eachi(function (index) {
                        var videoThumb = new VideoThumb(this);

                        var video = this;
                        wireEvent(videoThumb.element, 'click', function() {
                            trackEvent('related_video_click', 'thumbnail-' + index);
                            that.thumbNailClick(video);
                        });

                        thumbbar.appendChild(videoThumb.element);
                    });

                    if (this._includePlayerTop) {
                        var cvImg = this.byClass('sugar-current-video-image', 'img');
                        cvImg.src = this._currentVideo.images.preview;

                        var cvTitle = this.byClass('sugar-current-video-title', 'div');
                        cvTitle.innerHTML = this._currentVideo.title;

                        this.byClass('sugar-current-video-permalink', 'a').href = this._currentVideo.permalink;

                        cvImg.onclick =  function () {
                            trackEvent('replay_click', 'thumbnail');
                            that.replayVideo();
                        };
                        cvTitle.onclick = function () {
                            trackEvent('replay_click', 'title_link');
                            that.replayVideo();
                        };
                    }

                    this.showOverlay();

                    var video = this.byClass('sugar-video-wrapper', 'div');

                    var videoWidth = video.offsetWidth;
                    var videoMargin = 0 + parseInt(getStyle(video, 'marginRight').replace('px','')) + parseInt(getStyle(video, 'marginLeft').replace('px',''));
                    videoWidth += videoMargin;

                    var width = this._videoPlaylist.length * videoWidth;
                    thumbbar.style.width = width + 'px';

                    trackEvent('related_thumbs_loaded', 'round-' + this._videoPlayCounter);
                    this._initThumbBar();
                },

                setVideo: function(video, play) {

                    if (play === undefined) {
                        play = true;
                    }

                    this._currentVideo = video;

                    var queryStringParams = {
                        embedCode: video.embedCode
                    };
                    if (video.adTagURL) {
                        queryStringParams['thruParam_doubleclick[tagUrl]'] = video.adTagURL;
                    }

                    if (!this._FLAG_PLAYER_APIREADY) {
                        return;
                    }
                    this._flashPlayer.setQueryStringParameters(queryStringParams);
                    this._FLAG_PLAYER_APIREADY = false;

                    if (play) {
                        this._FLAG_PLAY_ON_APIREADY = true;
                        this._playedVideos.push(video);
                    }
                },

                setNextVideo: function() {
                    this.setVideo(this._videoPlaylist.shift(), false);
                },

                playNextVideo: function() {
                    this.setVideo(this._videoPlaylist.shift(), true);
                },

                replayVideo: function() {
                    this.hideOverlay();
                    this._flashPlayer.playMovie();
                },

                showOverlay: function() {
                    if (this._overlayDiv) {
                        this._overlayDiv.style.left = '0px';
                        this._overlayDiv.style.display = 'block';
                    }
                },

                hideOverlay: function() {
                    if (this._overlayDiv) {
                        this._overlayDiv.style.display = 'none';
                    }
                },

                thumbNailClick: function(video) {
                    this.setVideo(video);
                    this._videoPlaylist.clear();
                },

                byClass: function(c, tag, opt_all) {
                    var collection = getByClass(c, tag, _$(this._id));
                    return (opt_all) ? collection : collection[0];
                },

                _play: function() {
                    trackEvent('video_play', this._videoPlayCounter);
                    this.hideOverlay();
                    this._flashPlayer.playMovie();
                },

                _injectPlayer: function() {
                    var initParams  = {
                        embedCode : this._startCode || '',
                        wmode: 'transparent',
                        width: this._width,
                        height: this._height,
                        callback: 'SUGAR.Player.embedCallback',
                        playerId: this._flashPlayerId
                    }

                    if (isMobile) {
                        delete initParams.callback;
                        delete initParams.playerId;
                    }

                    var url = 'http://player.popsugar.com/player.js?' + buildQueryString(initParams);

                    var embed = '<scr' + 'ipt type="text/javascript" src="' + url + '"></script>';
                    document.write(embed);
                    if (SUGAR && SUGAR.Timer) {
                        SUGAR.Timer.ooyalaEmbedded();
                    }
                },

                _buildThumbnail: function(video) {
                    var thumbDiv = document.createElement('div');
                    thumbDiv.className = 'video thumbnail';
                    thumbDiv.id = '';
                },

                _initOverlayDiv: function() {
                    if (!this._overlayDiv) {
                        var div = document.createElement('div');
                        div.style.height = this._height + 'px';
                        div.style.width = this._width + 'px';
                        div.style.position = 'absolute';
                        div.style.display = 'none';
                        div.className = 'sugar-player-overlay ' + this._width + 'x' + this._height;
                        div.id = this._id;

                        var html = '<div style="width: ' + this._width + 'px; height: ' + (this._height - thumbBarHeight - thumbBarBottom) + 'px;"\
                         class="sugar-overlay-top">';

                        if (this._includePlayerTop) {
                            html += '<img class="sugar-current-video-image" src="" style="height: ' + (this._height - thumbBarHeight - 40) + 'px;"/>\
                                <div class="sugar-current-video-title"></div>\
                                <a class="sugar-current-video-permalink" href="" target="_blank">Read the article...</a>';
                        }

                        html += '<div class="more-copy">More from PopSugar TV</div>\
                         <div class="replay-button">Replay</div>\
                         </div>\
                         <div class="thumb-left"></div>\
                         <div class="sugar-thumbbar-wrapper" style="width: ' + (this._width - 40) + 'px;">\
                             <div class="sugar-thumbbar"></div>\
                         </div>\
                         <div class="thumb-right"></div>\
                         ';

                        div.innerHTML = html;

                        this._overlayDiv = div;
                        this._flashPlayer.parentNode.style.position = 'relative';
                        this._flashPlayer.parentNode.appendChild(this._overlayDiv);
                        var replayButton = this.byClass('replay-button', 'div');
                        var that = this;
                        replayButton.onclick = function () {
                             trackEvent('replay_click', 'text_link');
                             that.replayVideo();
                        };
                    }
                },

                _initPlayerChrome: function() {
                    var div = document.createElement('div');
                    div.className = 'sugar-player-bottom';
                    var html = '<a href="http://psvn.onsugar.com" target="_blank">Get videos like this.</a>';
                    div.innerHTML = html;
                    this._flashPlayer.parentNode.appendChild(div, this._flashPlayer.parentNode.firstChild);
                },

                _initFlashPlayer: function() {
                    if (!this._flashPlayer) {
                        this._flashPlayer = _$(this._flashPlayerId);
                    }
                },

                _initStyleSheet: function() {
                    if (!SUGAR.Player.hasLoadedStyleSheet) {
                        loadStyleSheet(baseURL + cssURI);
                    }
                },

                _initThumbBar: function() {
                    if (this._thumbBar === undefined) {
                        var thumbbar = this.byClass('sugar-thumbbar', 'div');
                        var scroll_left = this.byClass('thumb-left','div');
                        var scroll_right = this.byClass('thumb-right','div');
                        this._thumbBar = new ScrollBar(thumbbar, scroll_left, scroll_right, 20);
                    }
                },

                _setInitVolume: function() {
                    if (this._initVolume !== null) {
                        this._flashPlayer.setVolume(this._initVolume);
                        this._initVolume = null;
                    }
                },

                _sendOoyalaAnalytics: function() {
                    var tags = [];
                    tags[0] = getOoyalaHourTag();
                    var that = this;
                    try {
                        FB.api( "/me", function(response) {
                            if (response.gender == "male") tags[1] = "fbmale";
                            else if (response.gender == "female") tags[1] = "fbfemale";
                            that._actuallySendOoyalaAnalytics(tags);
                        });
                    }
                    catch (misc) {
                        that._actuallySendOoyalaAnalytics(tags);
                    }
                },

                _actuallySendOoyalaAnalytics: function(tags) {
                    document.getElementById(this._flashPlayerId).setModuleParams({
                        "analytics": {
                            "tags": tags
                        }
                    });
                }
            };
        }();
    })();
})();