/* <copyright>
 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
/*global require,exports,YT */
var Montage = require("montage").Montage,
    Component = require("montage/ui/component").Component;

var YoutubePlayer = exports.YoutubePlayer = Montage.create(Component, {

    // Stores a queue of function calls to make on the player in the draw
    // function
    _playerQueue: {
        enumerable: false,
        value: []
    },

    _ready: {
        enumerable: false,
        value: false
    },

    _player: {
        enumerable: false,
        value: null
    },
    player: {
        get: function() {
            return this._player;
        },
        set: function(value) {
            if (this._player !== value) {
                this._player = value;
            }
        }
    },

    _width: {
        enumerable: false,
        value: 640
    },
    width: {
        get: function() {
            return this._width;
        },
        set: function(value) {
            if (this._width !== value) {
                this._width = value;
                this.needsDraw = true;
            }
        }
    },
    _height: {
        enumerable: false,
        value: 385
    },
    height: {
        get: function() {
            return this._height;
        },
        set: function(value) {
            if (this._height !== value) {
                this._height = value;
                this.needsDraw = true;
            }
        }
    },

    _autoplay: {
        enumerable: false,
        value: false
    },
    autoplay: {
        get: function() {
            return this._autoplay;
        },
        set: function(value) {
            if (this._autoplay !== value) {
                this._autoplay = value;
                this.needsDraw = true;
            }
        }
    },

    _videoId: {
        enumerable: false,
        value: null
    },
    videoId: {
        get: function() {
            return this._videoId;
        },
        set: function(value) {
            if (this._videoId !== value) {
                // TODO handle URLs as well
                this._videoId = value;

                // If the video isn't in the playlist, clear the playlist,
                if (this._playlist && this._playlist.indexOf(value) === -1) {
                    this._playlist = null;
                }
                // TODO if the video is in the playlist use playVideoAt

                if (this._autoplay) {
                    this._playerQueue.push(["loadVideoById", value]);
                } else {
                    this._playerQueue.push(["cueVideoById", value]);
                }
                this.needsDraw = true;
            }
        }
    },

    _playlist: {
        enumerable: false,
        value: null
    },
    playlist: {
        get: function() {
            return this._playlist;
        },
        set: function(value) {
            if (this._playlist !== value) {
                this._playlist = value;

                if (this._autoplay) {
                    this._playerQueue.push(["loadPlaylist", value]);
                } else {
                    this._playerQueue.push(["cuePlaylist", value]);
                }
                this.needsDraw = true;
            }
        }
    },

    play: {
        value: function() {
            this._playerQueue.push("playVideo");
            this.needsDraw = true;
        }
    },
    pause: {
        value: function() {
            this._playerQueue.push("pauseVideo");
            this.needsDraw = true;
        }
    },
    stop: {
        value: function() {
            this._playerQueue.push("stopVideo");
            this.needsDraw = true;
        }
    },

    prepareForDraw: {
        value: function() {
            // Create the callback if it doesn't exist, and make it dispatch
            // an event on the document instead
            if (!window.onYouTubePlayerAPIReady) {
                window.onYouTubePlayerAPIReady = function() {
                    var event = document.createEvent("CustomEvent");
                    event.initEvent("youtubePlayerApiReady", true, true);
                    document.dispatchEvent(event);
                };
            }

            this._element.src +=  (this._videoId ? "/" + this._videoId : "") + "?enablejsapi=1";

            if (typeof YT !== "undefined" && YT.Player) {
                this.handleYoutubePlayerApiReady();
            } else {
                document.addEventListener("youtubePlayerApiReady", this, false);
            }
        }
    },

    handleYoutubePlayerApiReady: {
        value: function(event) {
            document.removeEventListener("youtubePlayerApiReady", this);

            var self = this;
            this.player = new YT.Player(this._element, { events: {
                onReady: function(event) {
                    self._ready = true;
                    self.needsDraw = true;
                }
            }});
        }
    },

    draw: {
        value: function() {
            if (!this._ready) {
                return;
            }

            for (var i = 0, len = this._playerQueue.length; i < len; i++) {
                var fnName, args;
                if (typeof this._playerQueue[i] === "string") {
                    fnName = this._playerQueue[i];
                    args = [];
                } else {
                    fnName = this._playerQueue[i].shift();
                    args = this._playerQueue[i];
                }

                this._player[fnName].apply(this._player, args);
            }
            this._playerQueue.length = 0;

            this._element.width = this._width;
            this._element.height = this._height;
        }
    }
});