var RT = RT || {};

RT.Core = {};
RT.Controls = {};
RT.Utils = {};

document.observe('dom:loaded', main); /* Scroll down for main */

/************************************************************************/

RT.Core.extend = function (settings, defaults)
{
    var newSettings = {};

    for (setting in defaults)
    {
        newSettings[setting] = defaults[setting];
    }

    for (setting in settings)
    {
        if (typeof newSettings[setting] !== 'undefined')
        {
            newSettings[setting] = settings[setting];
        }
        else
        {
            throw new Error(setting + ' is not implemented in the module default settings.');
        }
    }

    return newSettings;
};

/************************************************************************/

RT.Utils.switchMode = function ()
{
    var btn = $('modeSwitcher');

    if (btn)
    {
        var sale = $('sale'), rent = $('rent');

        btn.observe('click', function (evt)
        {
            evt.stop();

            if (sale.visible())
            {
                new Effect.DropOut(sale, { duration: 0.3, afterFinish: function ()
                {
                    new Effect.Appear(rent, { duration: 0.3 });
                    btn.innerHTML = 'Switch to Sales';
                }
                });
            }
            else
            {
                new Effect.DropOut(rent, { duration: 0.3, afterFinish: function ()
                {
                    new Effect.Appear(sale, { duration: 0.3 });
                    btn.innerHTML = 'Switch to Rentals';
                }
                });
            }
        });
    }
};

/************************************************************************/

RT.Controls.Scroller = (function ()
{
    var defaults = {
        duration: 1.5,
        transition: function (pos) { return (pos == 1) ? 1 : -Math.pow(2, -10 * pos) + 1; }
    };

    return function (newSettings)
    {
        var settings;

        this.getSettings = function ()
        {
            return settings;
        };

        this.setSettings = function ()
        {
            settings = RT.Core.extend(newSettings, defaults);
        };

        this.setSettings(newSettings);
    }
})();

RT.Controls.Scroller.prototype = {
    bind: function (className)
    {
        var triggers = $$(className);
        for (var i = 0; i < triggers.length; i++)
        {
            triggers[i].observe('click', function (evt)
            {
                evt.stop();
                this.scroll(evt.target.href.split('#').last());
            } .bind(this));
        }
    },
    scroll: function (target)
    {
        var opts = this.getSettings();
        var anim = new Effect.ScrollTo(target, opts);
    }
};

/************************************************************************/

RT.Controls.Textboxer = (function ()
{
    var defaults = {
        blurColor: '#CCC',
        focusColor: '#555'
    };

    return function (newSettings)
    {
        var settings;

        this.onFocus = function (textbox)
        {
            if (textbox.value == textbox.defaultValue)
            {
                textbox.value = '';
                textbox.style.color = this.getSettings().focusColor;
            };
        };

        this.onBlur = function (textbox)
        {
            if (textbox.value == '')
            {
                textbox.value = textbox.defaultValue;
                textbox.style.color = this.getSettings().blurColor;
            };
        };

        this.getSettings = function ()
        {
            return settings;
        };

        this.setSettings = function ()
        {
            settings = RT.Core.extend(newSettings, defaults);
        };

        this.setSettings(newSettings);
    }
})();

RT.Controls.Textboxer.prototype = {
    bind: function (className)
    {
        var triggers = $$(className);
        for (var i = 0; i < triggers.length; i++)
        {
            triggers[i].observe('focus', function (evt)
            {
                this.onFocus(evt.target);
            } .bind(this));

            triggers[i].observe('blur', function (evt)
            {
                this.onBlur(evt.target);
            } .bind(this));
        }
    }
};

/************************************************************************/

RT.Controls.Growler = (function ()
{
    var container;

    var defaults = {
        delay: 0.2,
        distance: '1em',
        duration: 0.3,
        isPersistent: false,
        opacity: 0.9,
        timer: 5000
    }

    function _build()
    {
        if (!container)
        {
            var newContainer = '<div id="growl" style="display:none"></div>';
            $(document.body).insert({ bottom: newContainer });
            container = $('growl');
        }
    }

    return function (newSettings)
    {
        this.getContainer = function ()
        {
            return container;
        };

        this.getSettings = function ()
        {
            return settings;
        };

        this.setSettings = function ()
        {
            settings = RT.Core.extend(newSettings, defaults);
        };

        _build();
        this.setSettings(newSettings);
    }
})();

RT.Controls.Growler.prototype = {
    hide: function ()
    {
        var container = this.getContainer();
        var opts = this.getSettings();

        var fx = [];

        fx.push(new Effect.Fade(container, { sync: true }));
        fx.push(new Effect.Morph(container, { style: { top: -container.getHeight() + 'px'} }, { sync: true }));

        var animHideGrowl = new Effect.Parallel(fx, { duration: opts.duration });
    },
    show: function (title, message, options)
    {
        var container = this.getContainer();
        var opts = this.getSettings();

        options = options || {};

        opts = RT.Core.extend(options, opts);

        container.update('<h2>' + title + '</h2>' + '<p>' + message + '</p>');

        container.setStyle({
            top: -container.getHeight() + 'px'
        });

        var fx = [];

        fx.push(new Effect.Appear(container, { to: opts.opacity }, { sync: true }));
        fx.push(new Effect.Morph(container, { style: { top: opts.distance} }, { sync: true }));

        var animShowGrowl = new Effect.Parallel(fx, { delay: opts.delay, duration: opts.duration });

        if (opts.isPersistent)
        {
            var closeLink = '<p><a href="#" id="growlCloseLink">Close this alert</a></p>';
            container.insert({ bottom: closeLink });
            closeLink = $('growlCloseLink');
            closeLink.observe('click', function (evt)
            {
                evt.stop();
                this.hide();
                closeLink.stopObserving('click');
            } .bind(this));
        }
        else
        {
            var hideTimeout = setTimeout(function () { this.hide(); } .bind(this), opts.timer);
        }
    }
};

/************************************************************************/

// this global has to go
var lighbox;

function main()
{
    var smoothScroll = new RT.Controls.Scroller();
    smoothScroll.bind('.pageScroller');

    var textBoxHandler = new RT.Controls.Textboxer();
    textBoxHandler.bind('.textbox');

    RT.Utils.switchMode();

	if($$('.locationTextBox').length != 0) {	

    $($$('.locationTextBox')[0]).observe('keyup', function () {
        $($$('autoCompleteExtender_selectedValue')).value = '';
    });

};

	if($$('.locationTextBox2').length != 0) {

    $($$('.locationTextBox2')[0]).observe('keyup', function () {
        $($$('autoCompleteExtender2_selectedValue')).value = '';
    });

};

    /******************************************************************************/
    // crap follows
    //var scroller = new RTScroller({ speed: 5 });

    lightbox = new SquareBox();
    lightbox.observe('squareBox');

    if ($$('.toggle') !== null)
    {
        $$('.toggle').each(function (toggle)
        {
            new NavToggler(toggle);
        });
    };
    if ($$('.showExtras') !== null)
    {
        $$('.showExtras').each(function (trigger)
        {
            new ShowExtrasPanel(trigger);
        });
    };
    if ($('quick-search') !== null)
    {
        $$("ul.radioFX li label").each(function (trigger)
        {
            new QuickSearchFX(trigger);
        });
        $$('#quick-search .dropdownlist').each(function (i)
        {
            new QuicksearchDropDownHandler(i);
        });
    };

    $$('#radioSearch label').each(function (i)
    {

        i.observe('click', function ()
        {

            setTimeout(function ()
            {
                handleQuickSearchRadioButtons();
            }, 200);

        });

    });

    handleQuickSearchRadioButtons();

    /******************************************************************************/
}


/******************************************************************************/
// and here is the crap we were talking about in order of crappiness

var RTScroller = Class.create({
    initialize: function (settings)
    {

        if ($('scrollerPanels'))
        {

            this.container = $('scrollerPanels');
            this.tabs = $$('#scrollerTabs a');
            this.tabBar = $('scrollerTabs');
            this.nav = $('scrollerNav');
            this.timer = null;
            this.speed = settings.speed || 5;

            var prev = this.nav.down('.prev');
            var next = this.nav.down('.next');
            var play = this.nav.down('.play');

            this.tabs.each(function (tab)
            {
                tab.observe('click', function (evt)
                {
                    evt.stop();
                    var target = evt.target;
                    this.pause();
                    this.goTo(this.tabs.indexOf(target));
                } .bind(this));
            } .bind(this));

            prev.observe('click', function (evt)
            {

                evt.stop();
                this.pause();
                var index = this.getCurrent() - 1;
                this.goTo(index);

            } .bind(this));

            next.observe('click', function (evt)
            {

                evt.stop();
                this.pause();
                var index = this.getCurrent() + 1;
                this.goTo(index);

            } .bind(this));

            play.observe('click', function (evt)
            {

                evt.stop();
                this.pause();
                var index = this.getCurrent() + 1;
                this.goTo(index);
                this.setTimer(this.speed);

            } .bind(this));

            document.observe('keydown', function (evt)
            {

                switch (evt.keyCode)
                {
                    case 37:
                        this.pause();
                        var index = this.getCurrent() - 1;
                        this.goTo(index);
                        break;
                    case 39:
                        this.pause();
                        var index = this.getCurrent() + 1;
                        this.goTo(index);
                        break;
                    case 80:
                        this.pause();
                        var index = this.getCurrent() + 1;
                        this.goTo(index);
                        this.setTimer(this.speed);
                        break;
                }

            } .bind(this));

            this.setTimer();
        }
    },
    goTo: function (index)
    {

        var tabsLength = this.tabs.length;

        if (index < 0)
        {
            index = tabsLength - 1;
        }
        else if (index === tabsLength)
        {
            index = 0;
        }

        var xVal = this.container.down('li').getWidth() * index;

        new Effect.Morph(this.container, {
            style: 'left:' + -xVal + 'px',
            duration: 0.3
        });

        this.setNav(index);

    },
    pause: function ()
    {

        clearInterval(this.timer);
        var play = this.nav.down('.play');
        if (!play.visible())
        {
            //new Effect.Appear(play, { duration: 0.3 });
        }

    },
    setNav: function (index)
    {

        this.tabs.each(function (tab)
        {

            tab.removeClassName('current');

        });

        this.tabs[index].addClassName('current');

    },
    getCurrent: function ()
    {

        var index = 0;

        this.tabs.each(function (tab, i)
        {

            if (tab.hasClassName('current'))
            {

                index = i;

            }

        });

        return index;

    },
    setTimer: function (secs)
    {

        var play = this.nav.down('.play');
        new Effect.Fade(play, { duration: 0.3 });

        var index = 0;

        this.timer = setInterval(function ()
        {

            index = this.getCurrent() + 1;
            this.goTo(index);

        } .bind(this), this.speed * 1000);

    }
});

/* Autocompleter */

var textValue;
var moreText = 'More...';

function PopulateAutoCompleteList(autocompleterId, locationTextBox, searchButton)
{
    var autoCompleteList = $(autocompleterId + '_completionListElem');    

    if (typeof autoCompleteList !== 'undefined')
    {
        var textValue, color;
        var autoCompleteListElements = $$('#' + autocompleterId + '_completionListElem li');
        var firstElement = autoCompleteListElements.first();
        var secondElement = autoCompleteListElements[1];
        var lastElement = autoCompleteListElements.last();

        // add class to the first element to style as harrow
        firstElement.addClassName('firstElement');
        secondElement.addClassName('secondElement');
        lastElement.addClassName('lastElement');

        // style the last element of the list if it's 'more'
        if (lastElement.innerHTML === 'More...')
        {
            lastElement.setStyle({
                'font-weight': 'bold',
                'font-style': 'italic'
            });
        }

        // reset position
        var textBoxPosition = locationTextBox.cumulativeOffset();
        
        /*
        autoCompleteList.setStyle({ opacity: '0' });

        setTimeout(function ()
        {
            var top = textBoxPosition[1] + 30 + 'px';
            autoCompleteList.setStyle({ top: top, display: 'block' });

        }, 200);

        */

        autoCompleteListElements.each(function (item, index)
        {
            if (index === 0)
            {
                item.observe('mousedown', function (evt)
                {
                    textValue = locationTextBox.value;
                });

                item.observe('mouseup', function (evt)
                {
                    evt.stop();
                    locationTextBox.value = textValue;
                });
            }
            else if (item.innerHTML === 'More...')
            {
                item.observe('mousedown', function (evt)
                {
                    color = locationTextBox.getStyle('color');
                    locationTextBox.setStyle({ 'color': 'transparent' });
                    textValue = locationTextBox.value;
                });

                item.observe('mouseup', function (evt)
                {
                    locationTextBox.value = textValue;
                    locationTextBox.setStyle({ 'color': color });
                    searchButton.click();
                });
            }
            else
            {
                item.observe('mouseup', function (evt)
                {
                    //searchButton.click();
                });
            }
        });
    }
}

function SearchAutoComplete_OnClientPopulated()
{
    var locationTextBox = $$('.locationTextBox')[0];
    var searchButton = $$('.btn')[0];
    PopulateAutoCompleteList("SearchAutoCompleteEx", locationTextBox, searchButton);
}

function SearchAutoComplete_OnClientPopulated2()
{
    var locationTextBox = $$('.locationTextBox2')[0];
    var searchButton = $$('.btn-search')[0];
    PopulateAutoCompleteList("SearchAutoCompleteEx2", locationTextBox, searchButton);
}

function SearchAutoComplete_OnClientItemSelected(itemSelected, e) {
    var hiddenField = $$('.autoCompleteExtender_selectedValue')[0];

    if (e.get_text() != moreText) {
        hiddenField.value = e.get_text() + "#" + e.get_value();          
    }
}

function SearchAutoComplete2_OnClientItemSelected(itemSelected, e) {
    var hiddenField = $$('.autoCompleteExtender2_selectedValue')[0];

    if (e.get_text() != moreText) {
        hiddenField.value = e.get_text() + "#" + e.get_value();
    }
}

function showMap()
{

    $('small-map').style.display = 'none';

    Lightview.show({
        href: '#small-map',
        options: {
            width: 800,
            height: 600,
            topclose: true
        }
    });

}


function fixMap(size)
{
    var m = $('small-map'), h;

    if (size === 'sml')
    {
        h = '216px';
    }
    else
    {
        h = '600px';
    }

    m.setStyle({
        height: h,
        display: 'block'
    });

    google.maps.event.trigger(map, 'resize');
    map.setCenter(centerLatLng);
    map.fitBounds(bounds);
}

function handleQuickSearchRadioButtons()
{

    var radioButtons = $$('#radioSearch input');

    radioButtons.each(function (i, index)
    {

        if (i.checked)
        {
            i.next('label').addClassName('on');
        }
        else
        {
            i.next('label').removeClassName('on');
        }

    });

}

// Login options handler (Email alerts page)

var LoginOptionsHandler = Class.create({
    initialize: function (elements)
    {
        this.elements = elements;

        this.forgotButton = $(this.elements.buttons.forgotPasswordButtonId);
        this.newMemberButton = $(this.elements.buttons.newMemberButtonId);

        this.forgotPanel = $(this.elements.panels.forgotPasswordPanelId);
        this.newMemberPanel = $(this.elements.panels.newMemberPanelId);

        this.addListeners();
    },
    handleButtonClick: function (event)
    {
        event.stop();
        var clickedButton = Event.element(event);
        if (clickedButton === this.forgotButton)
        {
            if (!this.forgotPanel.visible())
            {
                Effect.SlideDown(this.forgotPanel, { duration: 0.3, delay: 0 });
            } else
            {
                Effect.SlideUp(this.forgotPanel, { duration: 0.3, delay: 0 });
            }
        } else if (clickedButton === this.newMemberButton)
        {
            if (!this.newMemberPanel.visible())
            {
                Effect.SlideDown(this.newMemberPanel, { duration: 0.3, delay: 0 });
            } else
            {
                Effect.SlideUp(this.newMemberPanel, { duration: 0.3, delay: 0 });
            }
        }
    },
    addListeners: function ()
    {
        var buttons = [this.forgotButton, this.newMemberButton];
        buttons.invoke('observe', 'click', this.handleButtonClick.bindAsEventListener(this));
    }
});

// Quick search select quick fix
var QuicksearchDropDownHandler = Class.create({
    initialize: function (element)
    {
        element.observe('focus', function (i)
        {
            element.style.color = '#555 !important';
        });
    }
});

// Squarebox

var SquareBox = Class.create({
    initialize: function (options)
    {
        var fader, template;

        this.parent = $$('form')[0];

        this.page = {
            width: this.getPageDimensions().first(),
            height: this.getPageDimensions().last()
        };

        if ($('SquareBox') == null)
        {

            fader = new Element('div', { 'id': 'SquareBoxFader' });
            template = '<div id="SquareBox">' +
                                '<div id="SquareBoxContent"></div>' +
            //'<a id="SquareBoxClose">Close</a>' +
						        '</div>';

            this.parent.insert({ 'bottom': fader });
            this.parent.insert({ 'bottom': template });
        }

        this.fader = $('SquareBoxFader');
        this.box = $('SquareBox');
        this.content = $('SquareBoxContent');
        this.close = $('SquareBoxClose');

        this.reset();
    },
    active: false,
    current: '',
    getPageDimensions: function ()
    {
        var pageDimensionsArray, xScroll, yScroll, windowWidth, windowHeight, computedWidth, computedHeight;

        if (window.innerHeight && window.scrollMaxY)
        {
            xScroll = window.innerWidth + window.scrollMaxX;
            yScroll = window.innerHeight + window.scrollMaxY;
        } else if (document.body.scrollHeight > document.body.offsetHeight)
        {
            xScroll = document.body.scrollWidth;
            yScroll = document.body.scrollHeight;
        } else
        {
            xScroll = document.body.offsetWidth;
            yScroll = document.body.offsetHeight;
        }

        if (self.innerHeight)
        {
            windowWidth = self.innerWidth;
            windowHeight = self.innerHeight;
        } else if (document.documentElement && document.documentElement.clientHeight)
        {
            windowWidth = document.documentElement.clientWidth;
            windowHeight = document.documentElement.clientHeight;
        } else if (document.body)
        {
            windowWidth = document.body.clientWidth;
            windowHeight = document.body.clientHeight;
        }

        if (yScroll < windowHeight)
        {
            computedHeight = windowHeight;
        } else
        {
            computedHeight = yScroll;
        }
        if (xScroll < windowWidth)
        {
            computedWidth = windowWidth;
        } else
        {
            computedWidth = xScroll;
        }

        pageDimensionsArray = new Array(computedWidth, computedHeight);

        return pageDimensionsArray;
    },
    reset: function ()
    {
        this.fader.setStyle({
            position: 'absolute',
            display: 'none',
            width: '100%',
            height: this.page.height + 'px',
            top: '0',
            left: '0',
            backgroundColor: '#FFF',
            zIndex: '9995',
            cursor: 'pointer'
        });
        this.box.setStyle({
            visibility: 'hidden',
            display: 'block',
            position: 'absolute',
            top: '-9999px',
            left: '-9999px'
        });
    },
    check: function (event, target)
    {
        event.stop();
        if (!this.active)
        {
            this.show(target);
        } else
        {
            this.current.style.display = 'none';
            this.parent.insert({ 'bottom': this.current });
            this.show(target);
        }
    },
    center: function ()
    {
        this.box.setStyle({
            top: (document.viewport.getDimensions().height / 2) + document.viewport.getScrollOffsets().top - (this.box.getHeight() / 2) - 100 + 'px',
            left: (document.viewport.getDimensions().width / 2) - (this.box.getWidth() / 2) + 'px'
        });

        this.fader.setStyle({
            height: document.viewport.getDimensions().height + 'px'
        });
    },
    show: function (target)
    {
        this.current = target;
        this.active = true;

        if ($('flash') !== null) { $('flash').hide(); };

        this.content.update(target);

        if (target.style.display == 'none')
        {
            target.style.display = 'block';
        }

        this.box.setStyle({
            visibility: 'visible',
            display: 'none',
            top: (document.viewport.getDimensions().height / 2) + document.viewport.getScrollOffsets().top - (this.box.getHeight() / 2) - 100 + 'px',
            left: (document.viewport.getDimensions().width / 2) - (this.box.getWidth() / 2) + 'px'
        });

        var fx = [];
        var options = {
            duration: 0.3,
            delay: 0
        };

        fx.push(Effect.Appear(this.fader, { to: 0.4, sync: true }));
        fx.push(Effect.Appear(this.box, { sync: true }));

        new Effect.Parallel(fx, options);

        [this.fader].invoke('observe', 'click', this.hide.bindAsEventListener(this, target));

        document.observe('keydown', function (evt)
        {
            if (evt.keyCode == 27)
            {
                this.hide(evt, target);
                document.stopObserving('keydown');
            }
        } .bind(this));

        Event.observe(window, 'resize', function () { this.center(); } .bind(this));

        //[this.close, this.fader].invoke('observe', 'click', this.hide.bindAsEventListener(this, target));
    },
    hide: function (event, target)
    {
        event.stop();

        var fx = [];
        var options = {
            duration: 0.3,
            delay: 0,
            afterFinish: function ()
            {
                if ($('flash') !== null) { $('flash').show(); };
            } .bind(this)
        };

        fx.push(Effect.Fade(this.fader, { sync: true }));
        fx.push(Effect.Fade(this.box, { sync: true }));

        new Effect.Parallel(fx, options);

        Event.stopObserving(window, 'resize');
    },
    observe: function (className)
    {
        var trigger, triggers;

        triggers = $$('.' + className);

        for (var i = 0, l = triggers.length; i != l; ++i)
        {
            trigger = triggers[i];
            var target = $(trigger.href.split('#').last());
            trigger.observe('click', this.check.bindAsEventListener(this, target));
        }

    }
});

// Quick fix
function showRetrievePasswordAfterPostback()
{
    var retrieveButton = $$('.user_password')[0];
    if (typeof retrieveButton != 'undefined')
    {
        retrieveButton.observe('click', function (e)
        {
            e.stop();
            new SquareBoxHide;
            var target = $('password-reminder');
            var tt = setTimeout(function ()
            {
                lightbox.show($('password-reminder'));
            }, 500);
        });
    }
}

// Hide Squarebox (TODO)
// This should be implemented as a squarebox method

var SquareBoxHide = Class.create({
    initialize: function ()
    {
        this.squareBox = $('SquareBox');
        this.squareBoxClose = $('SquareBoxClose');
        this.squareBoxFader = $('SquareBoxFader');
        this.squareBoxContent = $('SquareBoxContent');
        this.currentPanel = this.squareBoxContent.down();

        var fxIn = [];
        var optionsIn = {
            duration: 0.3,
            delay: 0,
            afterFinish: function ()
            {

                $$('form')[0].insert({ 'bottom': this.currentPanel });
                this.currentPanel.style.display = 'none';
                new Effect.Fade(this.squareBoxFader, { duration: 0.2 });
                this.squareBox.setStyle({
                    visibility: 'hidden',
                    display: 'block',
                    position: 'absolute',
                    top: '-9999px',
                    left: '-9999px'
                });
                if ($('flash') !== null)
                {
                    $('flash').show();
                };

            } .bind(this)
        };

        fxIn.push(new Effect.Fade(this.squareBox, { sync: true }));

        new Effect.Parallel(fxIn, optionsIn);

    }
});

var SquareBoxAlert = Class.create({
    initialize: function ()
    {
        this.squareBox = $('SquareBox');

        if (this.squareBox.down('.textbox'))
        {

            $$('#SquareBox .textbox').each(function (i)
            {
                i.style.background = '#FFEFEF';
                // i.style.border = '1px solid red';
            });


            this.squareBox.down('.textbox').focus();
            new Effect.Shake(this.squareBox, { duration: 0.5 });
        }
    }
});

// Secondary Navigation toggler

var NavToggler = Class.create({
    initialize: function (toggle)
    {
        this.toggle = toggle;
        this.subNav = this.toggle.next("ul");
        if (this.toggle.hasClassName('current'))
        {
            this.subNav.style.display = 'block';
        };
        toggle.observe('click', this.init.bindAsEventListener(this, this.subNav));
    },
    init: function (event, subNav)
    {
        var options = {
            duration: 0.3,
            delay: 0
        };
        
        if (subNav.visible())
        {
            Effect.BlindUp(subNav, options);
        } 
        else
        {
            Effect.BlindDown(subNav, options);
        }
    }
});

// Show Extra Panel (TODO)

var ShowExtrasPanel = Class.create({
    initialize: function (trigger)
    {
        this.trigger = trigger;
        trigger.observe('click', this.showExtrasPanel.bindAsEventListener(this));
    },
    showExtrasPanel: function (event)
    {
        event.stop();
        var nextExtrasPanel = $('extras'); // Lame, just change it to a class so it can be reused (find next el)
        if (nextExtrasPanel.visible())
        {
            Effect.Fade(nextExtrasPanel, { duration: 0.2 });
            this.trigger.style.backgroundPosition = 'left top';
        } else
        {
            Effect.Appear(nextExtrasPanel, { duration: 0.4 });
            this.trigger.style.backgroundPosition = 'left bottom';
        }
    }
});