/* <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*/
var Montage = require("montage").Montage,
    Component = require("ui/component").Component,
    Uuid = require("core/Uuid");

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

    _userRe: {
        enumerable: false,
        value: /youtube.com\/(user\/)?([a-z0-9]+)/i
    },

    imageA: {
        value: null
    },
    imageB: {
        value: null
    },
    imageC: {
        value: null
    },
    _popupElement: {
        enumerable: false,
        value: null
    },

    _shouldShowPopup: {
        enumerable: false,
        value: false
    },

    _channelUrl: {
        enumerable: false,
        value: null
    },
    channelUrl: {
        depends: ["channel"],
        get: function() {
            return this._channelUrl;
        },
        set: function(value, fromChannel) {
            if (this._channelUrl !== value) {
                this._channelUrl = value;

                // prevent infinite loop
                if (!fromChannel) {
                    var match = this._userRe.exec(value);
                    if (match && match[2]) {
                        Object.getPropertyDescriptor(this, "channel").set.call(this, match[2], true);
                    }
                }
            }
        }
    },

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

                // prevent infinite loop
                if (!fromUrl) {
                    Object.getPropertyDescriptor(this, "channelUrl").set.call(this, "http://www.youtube.com/user/" + value, true);
                }

                this._loadChannel();
            }
        }
    },

    _loadChannel: {
        enumerable: false,
        value: function() {
            var self = this;

            var callbackName = "scriptCallback" + Uuid.generate().replace(/-/g, "_");

            window[callbackName] = function(data) {
                self.handleData(data);
                delete window[callbackName];
            };

            // create url
            var url = "http://gdata.youtube.com/feeds/api/users/" + this._channel + "/uploads?v=2&alt=json-in-script&callback=" + callbackName;

            this._script = document.createElement("script");
            this._script.src = url;
            this.needsDraw = true;
        }
    },

    _script: {
        enumerable: false,
        value: null
    },

    prepareForDraw: {
        value: function() {
            this.imageA.element.addEventListener("click", this, false);
            this.imageB.element.addEventListener("click", this, false);
            this.imageC.element.addEventListener("click", this, false);

            this._positionPopup();
        }
    },

    draw: {
        value: function() {
            if (this._script) {
                this._element.appendChild(this._script);
                this._script = null;
            }

            if (this._entries) {
                this.imageA.src = this._entries[0]["media$group"]["media$thumbnail"][0].url;
                this.imageB.src = this._entries[1]["media$group"]["media$thumbnail"][0].url;
                this.imageC.src = this._entries[2]["media$group"]["media$thumbnail"][0].url;
            }

            if (this._videoId) {
                this.player.videoId = this._videoId;
                this._videoId = null;
            }

            if (this._shouldShowPopup) {
                this._positionPopup();

                // Fix for Canary where the thumbnail in the video doesn't
                // change until the CSS transition has finished, so wait for
                // it to change before starting the animation
                var self = this;
                window.setTimeout(function() {
                    self._element.classList.add("show");
                    self._popupElement.classList.add("show");
                }, 50);
                if (window.Touch) {
                    document.addEventListener('touchstart', this, false);
                } else {
                    document.addEventListener('mousedown', this, false);
                    document.addEventListener('keyup', this, false);
                }
            } else {
                this._element.classList.remove("show");
                this._popupElement.classList.remove("show");
                this.player.stop();

                if (window.Touch) {
                    document.removeEventListener('touchstart', this);
                } else {
                    document.removeEventListener('mousedown', this);
                    document.removeEventListener('keyup', this);
                }

            }

        }
    },

    _entries: {
        enumerable: false,
        value: null
    },

    _positionPopup: {
        value: function() {

            var viewport = this._element.parentNode;
            var viewportStyle = window.getComputedStyle(viewport);

            this.player.width = viewportStyle.width;
            this.player.height = viewportStyle.height;

            // // Chrome
            viewport.insertBefore(this._popupElement, viewport.firstChild);
            this._popupElement.style.top = viewport.offsetTop;
            this._popupElement.style.left = viewport.offsetLeft;

            // Canary
            // this._popupElement.style.top =  - (this._element.offsetTop || 0) + 'px';
            // this._popupElement.style.left = - (this._element.offsetLeft || 0) + 'px';
        }
    },

    handleClick: {
        value: function(event) {
            switch(event.target.dataset.montageId) {
                case "imageA":
                    this._videoId = this._entries[0]["media$group"]["yt$videoid"]["$t"];
                    break;
                case "imageB":
                    this._videoId = this._entries[1]["media$group"]["yt$videoid"]["$t"];
                    break;
                case "imageC":
                    this._videoId = this._entries[2]["media$group"]["yt$videoid"]["$t"];
                    break;
            }
            this._shouldShowPopup = true;
            this.needsDraw = true;
        }
    },

    handleTouchStart: {
        value: function(event) {
            this._shouldShowPopup = false;
            this.needsDraw = true;
        }
    },
    handleMousedown: {
        value: function(event) {
            if (event.button === 0) {
                this._shouldShowPopup = false;
                this.needsDraw = true;
            }
        }
    },
    handleKeyup: {
        value: function(event) {
            this._shouldShowPopup = false;
            this.needsDraw = true;
        }
    },

    handleData: {
        value: function(data) {
            this._entries = data.feed.entry || [];
            this.needsDraw = true;
        }
    }

});