/* GENERIC TOOLTIP */
Tooltip = Class.create({
    TYPE: 'generic',
    effect: null,
    timer: null,
    locked: false,
    initialize: function (target, options) {
        this.target = $(target);
        this.element = new Element('div', { id: 'tooltip' });
        if (this.target.rel && !this.target.rel.blank() && !Object.isArray(options)) {
            this.options = this.target.rel.replace('feed:', '').replace(' remove', '');
        } else {
            this.options = options || null;
        }

        this.attachEvents();
    },
    attachEvents: function () {
        this.target.observe('click', this.toggle.bindAsEventListener(this));
    },
    show: function (event) {
        event.stop();

        if (this.timer != null) {
            window.clearTimeout(this.timer);
            this.timer = null;
        }
        this.timer = window.setTimeout(this.add.bind(this), 200);
    },
    hide: function (event, immediate) {
        if (this.timer) {
            window.clearTimeout(this.timer);
            this.timer = null;
        }
        if (this.element.descendantOf(document.body)) {
            if (!!immediate) {
                this.element.remove();
            } else {
                if (this.locked) {
                    return true;
                }
                this.timer = window.setTimeout(this.remove.bind(this), 200);
            }
        }
    },
    add: function () {
        Tooltip.hideAll(null, this);
        $$('select').each(function (select) { select.setStyle({ visibility: 'hidden' }); });
        this.writeContent();
        document.body.appendChild(this.element);
        this.position();
    },
    remove: function (event) {
        if (event && event.stop) {
            event.stop();
        }
        $$('select').each(function (select) { select.setStyle({ visibility: 'visible' }); });
        window.clearTimeout(this.timer);
        this.timer = null;
        if (this.element.parentNode)
            this.element.remove();
    },
    toggle: function (event) {
        if (this.element.descendantOf(document.body)) {
            this.hide(event);
        } else {
            this.show(event);
        }
    },
    getTemplate: function () {
        return new Template('<div class="flag"></div><div class="top"></div><div class="mid"><div class="content">#{content}</div></div><div class="bot"></div>');
    },
    position: function () {
        var position = this.target.cumulativeOffset();
        position.left += this.target.offsetWidth / 2;
        position.top += this.target.offsetHeight;
        this.element.setStyle({ left: position.left + 'px', top: position.top + 'px' })
    },
    writeContent: function () {
        this.element.className = this.TYPE + '_tooltip';
        this.element.update(this.getTemplate().evaluate({ content: 'This is a tooltip' }));
    },
    lock: function () {
        if (this.timer != null) {
            window.clearTimeout(this.timer);
            this.timer = null;
        }
        this.locked = true;
    },
    unlock: function () {
        this.locked = false;
    },
    unlockAndHide: function () {
        this.unlock();
        this.hide();
    }
});
Tooltip.tips = [];
Tooltip.hideAll = function (event, except) {
    Tooltip.tips.each(function (tip) {
        if (tip != except) {
            tip.hide(event, true);
        }
    });
};
Tooltip.init = function () {
    // Preload tooltip images
    var images = [
        '/TooltipLib/schedule_bg-top.png',
        '/TooltipLib/schedule_bg-mid.png',
        '/TooltipLib/schedule_bg-bot.png',
        '/TooltipLib/schedule_flag.png',
        '/TooltipLib/schedule_flag_reverse.png',
        '/TooltipLib/favorite_bg-top.png',
        '/TooltipLib/favorite_bg-mid.png',
        '/TooltipLib/favorite_bg-bot.png',
        '/TooltipLib/favorite_flag.png',
        '/TooltipLib/login_bg-top.png',
        '/TooltipLib/login_bg-mid.png',
        '/TooltipLib/login_bg-bot.png',
        '/TooltipLib/login_input.png',
        '/TooltipLib/login_submit.png'
    ];
    Starz.preloadImages(images);

    // Add tooltip event listeners
    elements = $$('.has_tooltip');
    elements.each(function (element) {
        if (element.className.match(/login/) && !element.className.match(/actor|director/)) {
			// login is being handled by JQuery tooltip starzTip
        } else {
            if (element.className.match(/schedule/)) {
                Tooltip.tips.push(new ScheduleTooltip(element));
            }
            if (element.className.match(/actor|director/) && element.className.match(/login/)) {
                Tooltip.tips.push(new ActorLoginTooltip(element));
            }
            if (element.className.match(/actor|director/)) {
                Tooltip.tips.push(new ActorTooltip(element));
            }
            if (element.className.match(/genre/)) {
                Tooltip.tips.push(new GenreTooltip(element));
            }
            if (element.className.match(/favorite/)) {
                Tooltip.tips.push(new FavoriteTooltip(element));
            }
            if (element.className.match(/reminder/)) {
                Tooltip.tips.push(new ReminderTooltip(element));
            }
            //if (element.className.match(/rating/)) {
            //    Tooltip.tips.push(new RatingTooltip(element));
            //}
            if (element.className.match(/scheduleViewReminderIcon/)) {
                Tooltip.tips.push(new ReminderScheduleViewTooltip(element));
            }

        }
    });
};
Tooltip.attach = function (element, type, options) {
    // don't uncomment this line please
    //$(element).addClassName('has_tooltip');
    if (options) {
        Tooltip.tips.push(new type(element, options));
    } else {
        Tooltip.tips.push(new type(element));
    }
}
Event.observe(window, 'load', Tooltip.init)

/*===========================================================================*/

/* ACTOR FAVORITES TOOLTIP */
ActorTooltip = Class.create(Tooltip, {
    TYPE: 'actor',
    attachEvents: function () {
        this.target.observe('click', this.show.bindAsEventListener(this));
    },
    getTemplate: function () {
        return new Template('<div class="flag"></div><div class="top"></div><div class="mid"><div class="content">' +
            '#{content}' + '<p class="manage"><a href="/mystarz/myfavorites/">&raquo; Manage all favorites</a></p>' +
            '</div></div><div class="bot"></div>');
    },
    getName: function () {
        return this.target.innerHTML;
    },
    getKind: function () {
        return this.target.hasClassName('actor') ? "actors" : "directors";
    },
    writeContent: function () {
        var template = new Template('<a href="#" class="cancel">&raquo; Cancel</a><p class="favorite">#{favorite}</p><p class="more">#{more}</p>');

        var favorite_content, more_content;
        var kind = this.getKind();
        var list_type = kind == "actors" ? "starring" : "directed by";

        if (this.target.rel == "add") {
            favorite_content = '<a href="#">Add ' + this.getName() + '</a> to your favorite ' + kind + ' list';
        } else {
            favorite_content = '<a href="#">Remove ' + this.getName() + '</a> from your favorite ' + kind + ' list';
        }
        more_content = '<a href="/search/starz/' + this.target.innerHTML + '">View more movies</a> ' + list_type + ' ' + this.getName();

        var output = template.evaluate({ favorite: favorite_content, more: more_content });
        output = this.getTemplate().evaluate({ content: output });
        this.element.update(output);
        $(this.element.getElementsByTagName('a')[0]).observe('click', this.remove.bindAsEventListener(this));
        $(this.element.getElementsByTagName('a')[1]).observe('click', this.performRequest.bindAsEventListener(this));
    },
    position: function () {
        this.element.className = this.TYPE + '_tooltip';

        var position = this.target.cumulativeOffset();
    
        position.left -= 80; 
        position.top += this.target.offsetHeight / 2;
        this.element.setStyle({ left: position.left + 'px', top: position.top + 'px' });
    },
    updateHref: function (request) {
        this.target.href = request.responseText;
    },
    performRequest: function (event, reload) {
        if (event) { event.stop(); }

        if (!/#$/.test(this.target.href)) {
            new Ajax.Request(this.target.href, {
                method: 'post',
                onComplete: function (transaction) {
                    if (reload) { window.location.reload(); } else { this.updateHref(transaction); }
                } .bind(this)
            });

            var output = '<p class="favorite"><strong>' +
                this.target.innerHTML + ' ' + (this.target.rel == "add" ? "added to" : "removed from") +
                ' your favorite ' + this.getKind() + ' list</strong></p>';
            output = this.getTemplate().evaluate({ content: output });
            this.element.update(output);

            this.target.rel = this.target.rel == "add" ? "remove" : "add";

            // adding Omiture tracking
            new Tracking().Favorite(this.getKind().toUpperCase() + ' : ' + this.target.innerHTML);

            window.setTimeout(this.remove.bind(this), 2000);
        }
    }
});

/* RATINGS TOOLTIP */
RatingTooltip = Class.create(Tooltip, {
    TYPE: 'rating',
    attachEvents: function () {
        this.target.observe('click', this.show.bindAsEventListener(this));
    },
    getTemplate: function () {
        return '<div class="flag"></div><div class="top"></div><div class="mid"><div class="content">' +
            '<a href="#" class="cancel">&raquo; Cancel</a><h4>Choose Your Rating</h4>' +
            '<p class="hearts"><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a></p>' +
            '</div></div><div class="bot"></div>';
    },
    writeContent: function () {
        this.element.update(this.getTemplate());
        this.hearts = this.element.select('p.hearts a');
        this.heartContainer = $(this.hearts[0].parentNode);
        this.hearts.each(function (link) {
            link.observe('mouseover', this.setRating.bindAsEventListener(this));
            link.observe('mouseout', this.clearRating.bindAsEventListener(this));
            link.observe('click', this.submitRating.bindAsEventListener(this));
        }, this);
        $(this.element.getElementsByTagName('a')[0]).observe('click', this.remove.bindAsEventListener(this));
    },
    position: function () {
        this.element.className = this.TYPE + '_tooltip';

        var position = this.target.cumulativeOffset();

        position.left += this.target.offsetWidth / 2;
        position.top += this.target.offsetHeight / 2;
        this.element.setStyle({ left: position.left + 'px', top: position.top + 'px' });
    },
    setRating: function (event) {
        var rating = this.hearts.indexOf(event.element());
        var ratings = $w("one two three four five");

        this.heartContainer.className = "hearts " + ratings[rating];
    },
    clearRating: function (event) {
        this.heartContainer.className = "hearts";
    },
    submitRating: function (event) {
        event.stop();

        // Submit Rating via Ajax
        var rating = this.hearts.indexOf(event.element()) + 1;
        new Ajax.Request(this.target.href, {
            method: 'post',
            parameters: { rating: rating }
        });

        this.remove();
    }
});

/* FAVORITE GENRE TOOLTIP */
GenreTooltip = Class.create(Tooltip, {
    TYPE: 'actor',
    attachEvents: function () {
        this.target.observe('click', this.show.bindAsEventListener(this));
    },
    getTemplate: function () {
        return new Template('<div class="flag"></div><div class="top"></div><div class="mid"><div class="content">' +
            '#{content}' +
            '</div></div><div class="bot"></div>');
    },
    getName: function () {
        return this.target.innerHTML;
    },
    getKind: function () {
        return this.target.hasClassName('actor') ? "actors" : "directors";
    },
    writeContent: function () {
        var favorite_content = '<a href="#" class="cancel">&raquo; Cancel</a><p class="favorite">';
        if (this.target.rel == "add") {
            favorite_content += '<a href="#">Add ' + this.getName() + '</a> to your favorite genres list';
        } else {
            favorite_content += '<a href="#">Remove ' + this.getName() + '</a> from your favorite genres list';
        }
        favorite_content += '</p>';
        output = this.getTemplate().evaluate({ content: favorite_content });
        this.element.update(output);
        $(this.element.getElementsByTagName('a')[0]).observe('click', this.remove.bindAsEventListener(this));
        $(this.element.getElementsByTagName('a')[1]).observe('click', this.performRequest.bindAsEventListener(this));
    },
    position: function () {
        this.element.className = this.TYPE + '_tooltip';

        var position = this.target.cumulativeOffset();

        position.left += this.target.offsetWidth / 2;
        position.top += this.target.offsetHeight / 2;
        this.element.setStyle({ left: position.left + 'px', top: position.top + 'px' });
    },
    updateHref: function (request) {
        this.target.href = request.responseText;
    },
    performRequest: function (event) {
        event.stop();

        if (!/#$/.test(this.target.href)) {
            new Ajax.Request(this.target.href, {
                method: 'post',
                onComplete: this.updateHref.bind(this)
            });

            var output = '<p class="favorite"><strong>' +
                this.target.innerHTML + ' ' + (this.target.rel == "add" ? "added to" : "removed from") +
                ' your favorite genres list</strong></p>';
            output = this.getTemplate().evaluate({ content: output });
            this.element.update(output);

            this.target.href = "#";
            this.target.rel = this.target.rel == "add" ? "remove" : "add";

            window.setTimeout(this.remove.bind(this), 2000);
        }
    }
});


/* SCHEDULE MOVIE DETAIL TOOLTIP */
ScheduleTooltip = Class.create(Tooltip, {
    TYPE: 'schedule',
    WIDTH: 263,
    attachEvents: function () {
        this.titleContent = this.target.title;
        this.target.title = '';
        this.target.select('a')[0].observe('mouseover', this.show.bindAsEventListener(this));
        this.target.select('a')[0].observe('mouseout', this.hide.bindAsEventListener(this));
        this.element.observe('mouseover', this.lock.bindAsEventListener(this), true);
        this.element.observe('mouseout', this.unlockAndHide.bindAsEventListener(this), true);
    },
    writeContent: function () {
        this.element.className = this.TYPE + '_tooltip';
        var url = this.titleContent;

        if (ScheduleTooltip.Cache[url]) {
            var content = this.getTemplate().evaluate({ content: ScheduleTooltip.Cache[url] })
            this.element.update(content);
        } else {
            new Ajax.Request(url, {
                method: 'get',
                onComplete: this.onContentLoaded.bind(this, url)
            });
        }
    },
    onContentLoaded: function (id, request) {
        ScheduleTooltip.Cache[id] = request.responseText;
        var content = this.getTemplate().evaluate({ content: request.responseText })
        this.element.update(content);
    },
    position: function () {
        this.posTarget = this.target.select('a')[0];
        var position = this.posTarget.cumulativeOffset();
        var leftOffset = this.posTarget.offsetWidth;
        var topOffset = this.posTarget.offsetHeight - 5

        if (position.left + leftOffset + this.WIDTH + 10 > document.body.clientWidth) {
            this.element.className = this.TYPE + '_tooltip_reverse';
            leftOffset = 0;
        } else {
            this.element.className = this.TYPE + '_tooltip';
        }

        position.left += leftOffset;
        position.top += topOffset;
        this.element.setStyle({ left: position.left + 'px', top: position.top + 'px' })
    }
});
ScheduleTooltip.Cache = {};

/* SCHEDULE FAVORITE MOVIE & REMINDER TOOLTIPS */
FavoriteAndReminderPrototype = {
    attachEvents: function () {
        this.target.observe('click', this.show.bindAsEventListener(this));
    },
    show: function (event) {
        event.stop();
        if (this.timer != null) {
            window.clearTimeout(this.timer);
            this.timer = null;
        }
        this.add();
        this.timer = window.setTimeout(this.hide.bind(this), 4000);
    },
    add: function () {
        Tooltip.hideAll(null, this);
        $$('select').each(function (select) { select.setStyle({ visibility: 'hidden' }); });
        this.writeContent();

    },
    getTemplate: function () {
        return new Template('<div class="flag"></div><div class="top"></div><div class="mid"><div class="content">' +
            '<h4>#{headline}</h4>#{extra}<a href="/mystarz/#{prefPage}">&raquo; #{tagLine}</a>' +
            '</div></div><div class="bot"></div>');
    },
    position: function () {
        this.element.className = this.TYPE + '_tooltip';

        var position = this.target.cumulativeOffset();
        var topOffset = -(this.element.offsetHeight - 10);
        var leftOffset = this.target.offsetWidth / 2;

        position.left += leftOffset;
        position.top += topOffset;
        this.element.setStyle({ left: position.left + 'px', top: position.top + 'px' })
    },
    getMovie: function () {
        if (this.movie) {
            return this.movie;
        } else {
            this.movie = $(this.target).up('li');
            return this.movie;
        }
    },
    updateHref: function (request) {
        this.target.href = request.responseText;
        //alert("here...");
        //        if(this.getMovie().className == 'reminder')
        //        {
        //             this.getMovie().removeClassName('reminder');
        //             this.getMovie().addClassName('reminder_set');
        //        }

        if (typeof this.getMovie() == 'undefined') {
            if (this.target.rel == 'add' && this.target.innerHTML == 'Add to Favorites') {
                this.target.innerHTML = 'Remove from Favorites';
                this.target.rel = 'remove';
                this.target.addClassName('favorited');
            } else if (this.target.rel == 'remove' && this.target.innerHTML == 'Remove from Favorites') {
                this.target.innerHTML = 'Add to Favorites';
                this.target.rel = 'add';
                this.target.removeClassName('favorited');
            }
        }
        document.body.appendChild(this.element);
        this.position();
        this.renderUI();
    },
    renderUI: function () {
    },
    performRequest: function () {
        if (!/#$/.test(this.target.href)) {
            new Ajax.Request(this.target.href, {
                method: 'post',
                onComplete: this.updateHref.bind(this)
            });
        }
    }
};
FavoriteTooltip = Class.create(Tooltip, FavoriteAndReminderPrototype);
Object.extend(FavoriteTooltip.prototype, {
    TYPE: 'favorite',
    writeContent: function () {
        this.performRequest();

        var headline;
        if (this.isFavorite()) {
            if (this.getMovie()) {
                this.getMovie().removeClassName('favorite');
            }
            headline = 'Removed From Favorite Movies';
        } else {
            try {
                var tracking = new Tracking();
                if (Object.isArray(this.options)) {
                    tracking.Favorite(this.options[1]);
                } else {
                    tracking.Favorite(window.s.pageName);
                }
            } catch (e) { }

            if (this.getMovie()) {
                this.getMovie().addClassName('favorite');
            }
            headline = 'Added to Favorite Movies';
        }
        this.element.update(this.getTemplate().evaluate({ headline: headline, prefPage: 'myfavorites', tagLine: 'Manage All Favorites' }));
    },
    isFavorite: function () {
        var movie = this.getMovie();
        if (typeof movie == "undefined") {
            return this.target.rel == "remove";
        } else {
            return movie.hasClassName('favorite');
        }
    }
});
ReminderTooltip = Class.create(Tooltip, FavoriteAndReminderPrototype);
Object.extend(ReminderTooltip.prototype, {
    TYPE: 'reminder',
    writeContent: function () {
        this.element.className = this.TYPE + '_tooltip';
        this.performRequest();
    },
    renderUI: function () {
        var headline;
        if (this.hasReminder()) {
            if (this.getMovie()) {
                this.getMovie().removeClassName('reminder');
            }
            this.target.writeAttribute('rel', '');

            headline = 'Reminder Removed';
            this.target.removeClassName('reminder_set');
            this.target.addClassName('reminder');
        } else {
            var canReminderBeSet = true;
            var linear = true;
            // Check whether it is OD or linear as the message varies
            var href = this.target.href;
            if (href != undefined) {
                // extract OD and exhib_dtm
                if (href.indexOf('&OD') > 0)
                    linear = false;
            }

            if (linear == true) {
                // Reminder for linear program
                canReminderBeSet = this.checkIfReminderCanbeSet(href, linear);
                headline = "This title will be airing in the next 12 hours and therefore a reminder can no longer be set.  Click the title name to see future air dates.";
            }
            else {
                // Reminder for OD program
                canReminderBeSet = this.checkIfODReminderCanbeSet(href, linear);
                headline = "A reminder for this title can no longer be set. This title will be available ON DEMAND for the next 24 hours.";
            }

            if (canReminderBeSet == true) {
                try {
                    var tracking = new Tracking();
                    if (Object.isArray(this.options)) {
                        tracking.Reminder(this.options[1]);
                    } else {
                        tracking.Reminder(window.s.pageName);
                    }
                } catch (e) { }

                //Reference IDSTARZDOTCOM-53
                    if (this.getMovie()) {
                        this.getMovie().addClassName('reminder');
                    }
                if (href.indexOf('reminderSet=false') == -1) {
                    headline = 'Reminder Set';
                    this.target.writeAttribute('rel', 'remove');
                    this.target.removeClassName('reminder');
                    this.target.addClassName('reminder_set');
                }

                if (href.indexOf('reminderSet=false') != -1) {
                    headline = "You will not receive an email reminder. If you wish to receive email reminders in the future, you must update your user preferences.";
                    this.target.removeClassName('reminder_set');
                    this.target.addClassName('reminder');


                }
            } else {
                if (this.getMovie()) {
                    this.getMovie().removeClassName('reminder');
                }

                this.target.writeAttribute('rel', '');
                this.target.removeClassName('reminder_set');
                ///this.target.addClassName('reminder');
            }
        }
        var zonefeed = (Object.isArray(this.options)) ? this.options[0] : this.options;
        if (zonefeed && zonefeed.capitalize() != "Add" && ScheduleTooltip.TIMEZONE != "undefined") {
            feed = '<p>' + Schedule.TIMEZONE + ' ' + zonefeed.capitalize() + ' Feed <a href="/mystarz/myschedule/">&raquo; Change</a></p>';
        } else {
            feed = '';
        }

        this.element.update(this.getTemplate().evaluate({ headline: headline, prefPage: 'myreminders', extra: feed, tagLine: 'Manage All Reminders' }));
        this.position();
    },

    getExhibDate: function (href, linearFlag) {
        if (linearFlag == false) {
            var str = href.substring(href.indexOf('exhib_dtm=') + 10, href.indexOf('&OD'));
            var newStr = str.replace(/%20/g, ' ');
            var exhib_dtm = new Date(newStr);
            return exhib_dtm;
        } else if (linearFlag == true) {
            var str = href.substring(href.indexOf('exhib_dtm=') + 10, href.indexOf('&action'));
            var newStr = str.replace(/%20/g, ' ');
            var exhib_dtm = new Date(newStr);
            return exhib_dtm;
        }
    },

    checkIfReminderCanbeSet: function (href, linearFlag) {
        // First get the exhib_dtm which will be newDate
        var newDate = this.getExhibDate(href, linearFlag);
        var today = new Date();

        // Compare two dates
        var timeDiffInMin = newDate.getTime() - today.getTime();
        timeDiffInMin = Math.floor((newDate.getTime() - today.getTime()) / 1000 / 60);

        // 720 minutes represents 12 hours
        if (timeDiffInMin <= 720) {
            return false;
        } else {
            return true;
        }
    },
    checkIfODReminderCanbeSet: function (href, linearFlag) {
        // First get the exhib_dtm which will be newDate
        var newDate = this.getExhibDate(href, linearFlag);
        var today = new Date();

        // Compare two dates
        var timeDiffInMin = Math.floor((newDate.getTime() - today.getTime()) / 1000 / 60);

        // 1440 minutes represents 24 hours
        if (timeDiffInMin <= 1440) {
            return false;
        } else {
            return true;
        }
    },

    hasReminder: function () {
        var movie = this.getMovie();
        if (typeof movie == "undefined") {
            return this.target.rel == 'remove';
        } else {
            return movie.hasClassName('reminder') || this.target.hasClassName('reminder_set');
        }
    }
});

/* ACTOR LOGIN TOOLTIP */
ActorLoginTooltip = Class.create(ActorTooltip, {
    TYPE: 'actor',
    getName: function () {
        return this.target.innerHTML;
    },
    getKind: function () {
        return this.target.hasClassName('actor') ? "actors" : "directors";
    },
    getTemplate: function () {
        return new Template('<div class="flag"></div><div class="top"></div><div class="mid"><div class="content">' +
            '<a href="#" class="cancel">&raquo; Cancel</a>' +
            '<p class="favorite">Log in to add #{title} to your favorite #{type}</p>' +
            '<div class="loginbox" style="display: none;"><h4>Log in to add #{title} to your favorite #{type}</h4>' +
            '<div class="prompt">#{prompt}</div>' +
            '<div class="form"><form action="/ajax/ScheduleLogin.aspx" id="login-Form">' +
            '<input type="text" name="username" id="login-Username" value="Username" onfocus="if (this.value==\'Username\') this.value=\'\'" onblur="if (this.value==\'\') this.value=\'Username\'" />' +
            '<span id="fauxPassword"><input type="text" value="Password" readonly="readonly" onfocus="$(\'fauxPassword\').style.display=\'none\'; $(\'realPassword\').style.display=\'block\'; $(\'realPassword\').getElementsByTagName(\'input\')[0].focus();"></span>' +
            '<span id="realPassword" style="display: none">' +
            '<input type="password" value="" name="password" id="login-Password" onblur="if (this.value==\'\'){ $(\'realPassword\').style.display=\'none\'; $(\'fauxPassword\').style.display=\'block\'; }">' +
            '</span><span class="remember"><input type="checkbox" checked="checked" id="login-Remember" name="remember" /> <label for="remember">Remember Me</label></span>' +
            '<button id="login-Submit" type="submit">Login</button><span id="login-Progress" style="display: none"><b>Logging In&hellip;</b></span></form></div></div>' +
            '<p class="more">#{more}</p>' +
            '</div></div><div class="bot"></div>');
    },
    writeContent: function () {
        var prompt = '<p><span>Not a member yet?</span> Get reminders, rate movies and customize your schedule for free.</br></br><a href="/recoverpassword">Click here for password.</a></p>' +
        '<p><a href="/?modal_register=true" class="tooltip_reg">&raquo; Register Now</a><br /><a href="/recoverpassword">&raquo; Forgot Password?</a></p>';

        var list_type = (this.getKind() == "actors") ? "starring" : "directed by";
        var favorite_content = '<a href="#">Log in to add ' + this.getName() + '</a> to your favorite ' + this.getKind() + ' list';
        var more_content = '<a href="/search/starz/' + this.target.innerHTML + '">View more movies</a> ' + list_type + ' ' + this.getName();

        this.element.update(this.getTemplate().evaluate({
            type: this.getKind(),
            title: this.getName(),
            prompt: prompt,
            content: favorite_content,
            more: more_content
        }));
        this.element.select('a.cancel')[0].observe('click', this.remove.bindAsEventListener(this));
        //this.element.select('.favorite a')[0].observe('click', this.showLogin.bindAsEventListener(this));
    },
    showLogin: function (event) {
        event.stop();
        this.element.select('.loginbox')[0].show();
        this.element.addClassName('actorlogin_tooltip');
        this.element.select('form')[0].observe('submit', this.attemptLogin.bindAsEventListener(this));
    },
    showForgotForm: function (event) {
        event.stop();
        var inputValue = ($('login-Username').value == 'Username') ? 'Email Address' : $('login-Username').value;
        var output = '<h4>Recover Your Password</h4>' +
            '<div class="prompt"><p><span>Need to recover your password?</span> Enter your email address and we\'ll email you your password.</p></div>' +
            '<div class="form"><form action="/recoverpassword" id="login-ResetPassword" method="post">' +
            '<input type="text" name="email" id="login-Email" value="' + inputValue + '" onfocus="if (this.value==\'Email Address\') this.value=\'\'" onblur="if (this.value==\'\') this.value=\'Email Address\'" />' +
            '<button id="login-Submit" type="submit">Submit</button></form>';
        this.element.select('.loginbox')[0].update(output);
    },
    attemptLogin: function (event) {
        event.stop();

        new Ajax.Request($('login-Form').action, {
            method: 'post',
            parameters: {
                username: encodeURIComponent($('login-Username').value),
                password: encodeURIComponent($('login-Password').value),
                remember: $('login-Remember').getValue()
            },
            onFailure: this.loginFail.bind(this),
            onSuccess: this.loginSuccess.bind(this)
        });
        $('login-Submit').hide();
        $('login-Progress').show();
    },
    loginFail: function () {
        $('login-Submit').show();
        $('login-Progress').hide();

        var forgot_password = '<p><span class="error">Username/Password was incorrect.</span> Please try logging in again.</br></br><a href="/recoverpassword">Click here for password.</a></p>' +
            '<p><a href="#" id="login-ForgotPassword">&raquo; Forgot Password?</a></p>';
        this.element.select('div.prompt')[0].update(forgot_password);
        $('login-Password').value = "";
        $('login-ForgotPassword').observe('click', this.showForgotForm.bindAsEventListener(this));
    },
    loginSuccess: function () {
        this.performRequest(null, true);
    }
});