// Break out of Iframe if returning from 3D Secure
if (top.location != location) {
    top.location.href = document.location.href ;
}

Ojay.HtmlBuilder.include({
    input: Ojay.HTML.input.wrap(function() {
        var args = Array.from(arguments),
            input = args.shift().apply(null, args);
        Ojay(input).addClass(input.type);
        return input;
    })
});

Checkout = {
    TITLE_FIELD:        'Eothercommerce/ExpressBasket.billingAddress.title',
    FIRST_NAME_FIELD:   'othercommerce/ExpressBasket.user.firstName',
    SURNAME_FIELD:      'othercommerce/ExpressBasket.user.lastName',
    
    DELIVERY:           'othercommerce/ExpressBasket.deliveryAddress.',
    BILLING:            'othercommerce/ExpressBasket.billingAddress.',
    
    ADDRESS1_FIELD:     'address1',
    ADDRESS2_FIELD:     'address2',
    //ADDRESS3_FIELD:     'address3',
    CITY_FIELD:         'city',
    COUNTY_FIELD:       'county',
    POSTCODE_FIELD:     'postcode',
    COUNTRY_FIELD:      'country',
    
    CARD_TYPE_FIELD:    'Eothercommerce/ExpressBasket.payment.cardType',
    
    SECTION_CLASS:      '.section',
    FADE_OPACITY:       0.5,
    FADE_TIME:          0.4,
    
    getInputs: function(form, name) {
        var inputs = form.descendants('input, textarea, select');
        if (name) inputs = inputs.filter(function(element) {
            return element.node.name == name;
        });
        return inputs;
    },
    
    highlightActiveSection: function(form) {
        var sections = form.descendants(this.SECTION_CLASS),
            inputs = this.getInputs(form),
            invalid = form.descendants('.invalid'),
            active = (invalid.node ? invalid.ancestors(this.SECTION_CLASS) : sections).at(0);
        
        active.addClass('current-section');
        
        //sections.setStyle({opacity: this.FADE_OPACITY});
        //active.setStyle({opacity: 1});
        (invalid.node ? this.getInputs(invalid) : inputs).node.focus();
        
        inputs.on('focus', this.focus, this);
        sections.on('click', this.swapSection, this);
        
        sections.forEach(function(section, i) {
            if (i == sections.length - 1) return;
            var next = Ojay.HTML.input({type: 'submit', value: 'Next section', className: 'next-section'});
            Ojay(next).on('click', function(button, evnt) {
                evnt.stopEvent();
                var target = sections.at(i+1);
                this.swapSection(target);
                target.descendants('select, input, textarea').node.focus();
            }, this);
            section.insert(next);
        }, this);
        
        this._sections = sections;
        this._activeSection = active;
    },
    
    focus: function(input) {
        input = Ojay(input);
        try { input.node.focus(); } catch(e) {}
        var section = input.ancestors(this.SECTION_CLASS);
        this.swapSection(section);
    },
    
    swapSection: function(section) {
        if (this._activeSection) {
            if (Checkout.loginRequired && this._activeSection.node == this._sections.at(0).node)
                return Checkout._accountLookup._checkAddress();
                
            if (this._activeSection.node == section.node) return;
            
            this._activeSection.removeClass('current-section');
        }
        
        section.addClass('current-section');
        
        //if (this._activeSection) this._activeSection.animate({opacity: {to: this.FADE_OPACITY}}, this.FADE_TIME);
        //section.animate({opacity: {to: 1}}, this.FADE_TIME);
        Ojay(document.documentElement).scroll([0, section.getRegion().top], 2.5);
        
        this._activeSection = section;
    },
    
    toggle: function(element, options) {
        element = Ojay(element);
        var toggle = Ojay(options.using);
        
        function check() {
            var checked = toggle.node.checked;
            if (options.invert) checked = !checked;
            element[checked ? 'show' : 'hide']();
        };
        
        toggle.on('click', check);
        check();
    },
    
    /****************************************************************
    @class Checkout.AccountLookup
    ****************************************************************/
    AccountLookup: new JS.Class({
        include: Ojay.Observable,
        
        extend: {
            CHECK_URL:          '/shop/checkout/ajax/ajax-login.html',
            RESET_URL:          '/shop/checkout/ajax/reset-password.html',
            DATA_URL:           '/shop/addressBook/addresses.json',
            EMAIL_FIELD:        'othercommerce/ExpressBasket.credentials.email',
            CONFIRM_FIELD:      'othercommerce/ExpressBasket.confirmEmail',
            PASSWORD_FIELD:     'othercommerce/ExpressBasket.credentials.password'
        },
        
        initialize: function(form, options) {
            Checkout._accountLookup = this;
            
            this._form      = Ojay(form);
            this._options   = options || {};
            this._checkUrl  = this._options.checkUrl    || this.klass.CHECK_URL;
            this._resetUrl  = this._options.resetUrl    || this.klass.RESET_URL;
            this._dataUrl   = this._options.dataUrl     || this.klass.DATA_URL;
            var email       = this._options.emailField  || this.klass.EMAIL_FIELD;
            this._email     = Checkout.getInputs(this._form, email);
            this._confirm   = Checkout.getInputs(this._form, this.klass.CONFIRM_FIELD);
            this._password  = Checkout.getInputs(this._form, this.klass.PASSWORD_FIELD);
            
            var prefix = Checkout.DELIVERY;
            
            this._titleField        = Checkout.getInputs(this._form, Checkout.TITLE_FIELD);
            this._firstNameField    = Checkout.getInputs(this._form, Checkout.FIRST_NAME_FIELD);
            this._lastNameField     = Checkout.getInputs(this._form, Checkout.SURNAME_FIELD);
            this._address1Field     = Checkout.getInputs(this._form, prefix + Checkout.ADDRESS1_FIELD);
            this._address2Field     = Checkout.getInputs(this._form, prefix + Checkout.ADDRESS2_FIELD);
            //this._address3Field     = Checkout.getInputs(this._form, prefix + Checkout.ADDRESS3_FIELD);
            this._cityField         = Checkout.getInputs(this._form, prefix + Checkout.CITY_FIELD);
            this._countyField       = Checkout.getInputs(this._form, prefix + Checkout.COUNTY_FIELD);
            this._postcodeField     = Checkout.getInputs(this._form, prefix + Checkout.POSTCODE_FIELD);
            this._countryField      = Checkout.getInputs(this._form, 'P' + prefix + Checkout.COUNTRY_FIELD);
            
            var button, status, container = Ojay.HTML.span({className: 'account-lookup'}, function(HTML) {
                button = Ojay( HTML.button({className: 'account-lookup'}, 'Sign in') );
                status = Ojay( HTML.span({className: 'login-status'}) );
            });
            this._password.insert(container, 'after');
            button.on('click', Ojay.stopDefault)._(this)._lookupData();
            this._statusDisplay = status;
            
            this.prefill();
            if (!this._password.node) return;
            
            Ojay.Keyboard.listen(this._password, 'ENTER', function() {
                this._lookupData();
            }, this).preventDefault();
            
            this._generateToggles();
        },
        
        _generateToggles: function() {
            var buttons = Ojay('input[name=customer-type]').map('node');
            if (!buttons[0]) return;
            
            buttons[0].checked = true;
            
            var update = function() {
                var selected = buttons.filter('checked')[0];
                if (selected === buttons[0]) {
                    this._confirm.ancestors('.opc-fields').show();
                    this._password.ancestors('.opc-fields').hide();
                } else {
                    this._confirm.ancestors('.opc-fields').hide();
                    this._password.ancestors('.opc-fields').show();
                }
            }.bind(this);
            
            update();
            buttons.forEach(function(button) {
                Ojay(button).on('click', update);
            });
        },
        
        _lookupData: function(data) {
            this._statusDisplay.setContent('');
            var data = data || {email: this._email.node.value, password: this._password.node.value},
                method = data.email ? 'POST' : 'GET';
            Ojay.HTTP[method](this._dataUrl, data, {
                onSuccess: function(response) {
                    var data = response.parseJSON(),
                        addresses = data.addresses;
                    
                    if (data.error) return this._statusDisplay.setContent(data.error);;
                    
                    Checkout.loginRequired = false;
                    
                    ['title','firstName','lastName'].forEach(function(field) {
                        Ojay.Forms.setValue(this['_' + field + 'Field'], addresses[0][field]);
                    }, this);
                    Checkout.Address.FIELDS.forEach(function(field) {
                        var input = this['_' + field + 'Field'];
                        if (!input) return;
                        Ojay.Forms.setValue(input, addresses[0][field]);
                    }, this);
                    
                    this.notifyObservers('populate', data);
                }.bind(this)
            });
        },
        
        prefill: function() {
            this._lookupData({});
        }
    }),
    
    /****************************************************************
    @class Checkout.AddressHelper
    ****************************************************************/
    AddressHelper: new JS.Class({
        extend: {
            SEARCH_URL:     '/shop/checkout/ajax/addresses.xml'
        },
        
        initialize: function(form, container, prefix, options) {
            this._form = Ojay(form);
            this._container = this._form.descendants(container);
            this._container.insert(this.getHTML());
            prefix = prefix || Checkout.DELIVERY;
            options = options || {};
            
            this._address1Field     = options.address1 || Checkout.getInputs(this._form, prefix + Checkout.ADDRESS1_FIELD);
            this._address2Field     = options.address2 || Checkout.getInputs(this._form, prefix + Checkout.ADDRESS2_FIELD);
            //this._address3Field     = options.address3 || Checkout.getInputs(this._form, prefix + Checkout.ADDRESS3_FIELD);
            this._cityField         = options.city || Checkout.getInputs(this._form, prefix + Checkout.CITY_FIELD);
            this._countyField       = options.county || Checkout.getInputs(this._form, prefix + Checkout.COUNTY_FIELD);
            this._postcodeField     = options.postcode || Checkout.getInputs(this._form, prefix + Checkout.POSTCODE_FIELD);
            this._countryField      = options.country || Checkout.getInputs(this._form, 'P' + prefix + Checkout.COUNTRY_FIELD);
        },
        
        getHTML: function() {
            if (this._html) return this._html;
            this._html = Ojay( Ojay.HTML.form(function(HTML) {
                HTML.p('Enter a postcode and search:');
                this._postcode = HTML.input({type: 'text'});
                this._button = HTML.input({type: 'submit', value: 'Search'});
                this._menu = Ojay( HTML.div(function(HTML) {
                    HTML.p({className:'choose-address'},'Choose your address from the list:');
                    this._select = Ojay( HTML.select() );
                }.bind(this)) );
            }.bind(this)) );
            
            this._html.on('submit', Ojay.stopDefault)._(this)._postcodeSearch();
            this._select.on('change')._(this)._selectAddress();
            this._menu.hide();
            
            return this._html;
        },
        
        getMenu: function() {
            return this._menu;
        },
        
        _postcodeSearch: function() {
            var postcode = this._postcode.value;
            this._button.value = 'Searching...';
            Ojay.HTTP.GET(this.klass.SEARCH_URL, {postcode: postcode}, {
                onSuccess: function(response) {
                    var addresses = Checkout.Address.fromXML(response.responseXML);
                    this.setAddresses(addresses);
                    this._select.node.focus();
                }.bind(this),
                onComplete: function() {
                    this._button.value = 'Search';
                }.bind(this)
            });
        },
        
        _selectAddress: function(index) {
            index = (index === undefined) ? Number( this._select.node.value ) : index;
            var address = this._addresses[index];
            if (!address) return;
            
            Checkout.Address.FIELDS.forEach(function(field) {
                var input = this['_' + field + 'Field'];
                if (!input) return;
                Ojay.Forms.setValue(input, address[field]);
            }, this);
        },
        
        setAddresses: function(addresses, update) {
            this._addresses = addresses || [];
            var html;
            if (addresses.length === 0) {
                html = "<option>No addresses found</option>";
            } else {
                html = "<option>Please select an address</option>";
                addresses.forEach(function(address, i) {
                    html += '<option value="' + i + '">' + address.toShortAddress() + '</option>';
                });
            }
            this._select.setContent(html);
            this._select.node.options[0].selected = true;
            
            var hasAddress = (this._addresses.length > 0);
            this._menu.show();
            
            if (update) this._selectAddress(0);
        }
    }),
    
    /****************************************************************
    @class Checkout.Address
    ****************************************************************/
    Address: new JS.Class({
        initialize: function(properties) {
            this.klass.FIELDS.forEach(function(field) {
               this[field] = "";
            }, this);
            this.set(properties);
        },
        
        set: function(properties) {
            JS.extend(this, properties);
        },
        
        toString: function() {
            return this.klass.FIELDS.map(function(key) { return this[key] }, this).join(', ');
        },
        
        toShortAddress: function() {
            return this.address1 + (this.address2 ? ', ' + this.address2 : '') + ', ' + this.city;
        },
        
        extend: {
            fromXML: function(xml) {
                var doc = xml.documentElement;
                var addressNodes = doc.getElementsByTagName('address');
                var addresses = [], address, node;
                
                for (var i = 0, n = addressNodes.length; i < n; i++) {
                    node = addressNodes.item(i).firstChild,
                    address = new this;
                    addresses.push(address);
                    
                    while (node) {
                        if (node.nodeType == Ojay.HTML.ELEMENT_NODE && node.firstChild)
                            address[node.nodeName] = node.firstChild.data;
                        node = node.nextSibling;
                    }
                }
                return addresses;
            },
            
            FIELDS: 'addressName title firstName lastName address1 address2 address3 city county country postcode'.split(' ')
        }
    }),
    
    /****************************************************************
    @class Checkout.AddressBook
    ****************************************************************/
    AddressBook: new JS.Class({
        include: Ojay.Observable,
        
        extend: {
            INDEX_URL:          '/shop/addressBook/addresses.json',
            CREATE_URL:         '/shop/addressBook/editAddress.json',
            UPDATE_URL:         '/shop/addressBook/editAddress.json',
            DELETE_URL:         '/shop/addressBook/deleteAddress.json',
            
            COUNTRIES_URL:      '/shop/addressBook/countries.json',
            TITLES_URL:         '/shop/addressBook/titles.json',
            
            MASK_COLOR:         '#FFFFFF',
            MASK_OPACITY:       0.5,
            
            CONTAINER_CLASS:    'address-book',
            OVERLAY_WIDTH:		728,
            OVERLAY_HEIGHT:		625,
            
            getMetadata: function() {
                Ojay.HTTP.GET(this.COUNTRIES_URL, {}, {
                    onSuccess: function(response) {
                        this.COUNTRIES = response.parseJSON().countries;
                        if (this.TITLES) this.notifyObservers('metadataready');
                    }.bind(this)
                });
                Ojay.HTTP.GET(this.TITLES_URL, {}, {
                    onSuccess: function(response) {
                        this.TITLES = response.parseJSON().titles;
                        if (this.COUNTRIES) this.notifyObservers('metadataready');
                    }.bind(this)
                });
            },
            
            populateSelect: function(select, data) {
                select.setContent(data.map(function(object) {
                    return '<option value="' + object.id + '">' + object.name + '</option>';
                }).join(''));
                select.node.options[0].selected = true;
            },
            
            Address: new JS.Class({
                initialize: function(book, data) {
                    this._book = book;
                    this._elements = {};
                    this.getHTML();
                    this.set(new Checkout.Address(data));
                },
                
                getHTML: function() {
                    var self = this, elements = self._elements;
                    if (elements._li) return elements._li;
                    
                    elements._li = Ojay( Ojay.HTML.li(function(HTML) {
                        elements._destroy = Ojay( HTML.span({className: 'delete'}, 'Delete') );
                        elements._name = Ojay( HTML.span({className: 'address-name'}) );
                    }) );
                    
                    elements._name.on('click')._(this._book).load(this);
                    elements._destroy.on('click')._(this._book).destroy(this);
                    
                    return elements._li;
                },
                
                load: function() {
                    this._elements._li.addClass('selected');
                },
                
                unload: function() {
                    this._elements._li.removeClass('selected');
                },
                
                set: function(address) {
                    if (this._address) this._id = this._address.id;
                    if (!address.id) address.id = this._id;
                    this._address = address;
                    this._elements._name.setContent(address.addressName || address.address1);
                    this._elements._destroy[address.defaultAddress ? 'hide' : 'show']();
                },
                
                save: function(address, callback, context) {
                    this.set(address);
                    Ojay.HTTP.POST(this._book.klass.UPDATE_URL, this.getPostData(), {
                        onComplete: callback.bind(context || null),
                        onSuccess: function(response) {
                            var data = response.parseJSON();
                            if (!this._address.id && data.id)
                                this._id = this._address.id = data.id;
                        }.bind(this)
                    });
                },
                
                destroy: function(callback, context) {
                    Ojay.HTTP.POST(this._book.klass.DELETE_URL, {id: this._address.id}, {
                        onComplete: callback.bind(context || null)
                    });
                },
                
                getPostData: function() {
                    if (!this._address) return {};
                    var data = {};
                    Checkout.Address.FIELDS.forEach(function(field) {
                        data[field] = this._address[field];
                    }, this);
                    if (this._address.id) data.id = this._address.id;
                    return data;
                }
            })
        },
        
        initialize: function() {
            this._mask = new Ojay.PageMask({color: this.klass.MASK_COLOR, opacity: this.klass.MASK_OPACITY});
            this._overlay = new Ojay.ContentOverlay({
                className: this.klass.CONTAINER_CLASS + '-overlay',
                width: this.klass.OVERLAY_WIDTH, height: this.klass.OVERLAY_HEIGHT});
            this._mask.positionBehind(this._overlay);
            
            this._overlay.getContentElement().addClass('clear');
            
            var closeButton = Ojay( Ojay.HTML.div({className: 'close-button'}, 'Close') );
            closeButton.on('click')._(this).hide();
            this._overlay.getContainer().insert(closeButton, 'top');
            
            this._elements = {};
            this._overlay.setContent(this.getHTML());
        },
        
        getHTML: function() {
            var self = this, elements = self._elements;
            if (elements._container) return elements._container;
            
            elements._container = Ojay( Ojay.HTML.div({className: this.klass.CONTAINER_CLASS}, function(HTML) {
                HTML.h2('Your address book'),
                HTML.p({className : 'address-msg'}, "Choose an address from the list to edit it, or enter a new address and click 'Save' to add it to your address book.");
                
                HTML.div({className: 'list'},
                    elements._list = Ojay( HTML.ul() ),
                    elements._add = Ojay( HTML.button({className: 'add-address'}, 'New address') )
                );
                
                elements._form = Ojay (HTML.form(function(HTML) {
                    HTML.div({className: 'postcode-looup'});
                    
                    HTML.div(function(HTML) {
                        HTML.label('Address Description');
                        elements._addressName = HTML.input({type: 'text'});
                    });
                    HTML.div({className: 'address-name'}, function(HTML) {
                        HTML.label('Name');
                        elements._title = Ojay( HTML.select() );
                        elements._firstName = HTML.input({type: 'text'});
                        elements._lastName = HTML.input({type: 'text'});
                    });
                    HTML.div(function(HTML) {
                        HTML.label('Address');
                        elements._address1 = HTML.input({type: 'text'});
                    });
                    HTML.div(function(HTML) {
                        elements._address2 = HTML.input({type: 'text'});
                    });
//                    HTML.div(function(HTML) {
//                        elements._address3 = HTML.input({type: 'text'});
//                    });
                    HTML.div(function(HTML) {
                        HTML.label('Town or city');
                        elements._city = HTML.input({type: 'text'});
                    });
                    HTML.div(function(HTML) {
                        HTML.label('Postcode');
                        elements._postcode = HTML.input({type: 'text'});
                    });
                    HTML.div(function(HTML) {
                        HTML.label('County');
                        elements._county = HTML.input({type: 'text'});
                    });
                    HTML.div(function(HTML) {
                        HTML.label('Country');
                        elements._country = Ojay( HTML.select() );
                    });
                    HTML.div(function(HTML) {
                        elements._save = Ojay( HTML.input({type: 'submit', value: 'Save'}) );
                    });
                }) );
                
            }) );
            this._populateSelects();
            elements._add.on('click', Ojay.stopDefault)._(this).addAddress();
            elements._form.on('submit', Ojay.stopDefault)._(this).save();
            
            new Checkout.AddressHelper(elements._form, '.postcode-looup', null, {
                address1:  elements._address1,
                address2:  elements._address2,
            //    address3:  elements._address3,
                city:      elements._city,
                county:    elements._county,
                postcode:  elements._postcode,
                country:   elements._country
            });
            
            return elements._container;
        },
        
        _populateSelects: function() {
            if (!this.klass.COUNTRIES || !this.klass.TITLES)
                return this.klass.on('metadataready')._(this)._populateSelects();
            
            this.klass.populateSelect(this._elements._title, this.klass.TITLES);
            this.klass.populateSelect(this._elements._country, this.klass.COUNTRIES);
        },
        
        _updateAddresses: function(callback, scope) {
            Ojay.HTTP.GET(this.klass.INDEX_URL, {}, {
                onSuccess: function(response) {
                    var data = response.parseJSON(),
                        addresses = data.addresses;
                    
                    if (data.error) return;
                    
                    this._elements._list.setContent('');
                    this._addresses = addresses.map(function(addressData) {
                        var address = new this.klass.Address(this, addressData);
                        this._elements._list.insert(address.getHTML());
                        return address;
                    }, this);
                    
                    if (this._addresses[0]) this.load(this._addresses[0]);
                    
                    callback.call(scope || null);
                }.bind(this)
            });
        },
        
        show: function() {
            this._updateAddresses(function() {
                this._mask.show('fade');
                this._overlay.center().show('fade');
            }, this);
        },
        
        hide: function() {
            this._mask.hide('fade');
            this._overlay.hide('fade');
            this.notifyObservers('close');
        },
        
        addAddress: function(replace) {
            var address = new this.klass.Address(this, new Checkout.Address({addressName: 'New address'}));
            this._addresses.push(address);
            this._elements._list.insert(address.getHTML());
            this.load(address, replace);
        },
        
        getAddresses: function() {
            return this._addresses.map('_address');
        },
        
        load: function(address, replace) {
            if (this._activeAddress) this._activeAddress.unload();
            this._activeAddress = address;
            address.load();
            if (replace !== false) Checkout.Address.FIELDS.forEach(function(field) {
                var input = this._elements['_' + field];
                if (!input) return;
                Ojay.Forms.setValue(input, address._address[field]);
            }, this);
            // this._elements._addressName.focus();
        },
        
        save: function() {
            if (!this._activeAddress) this.addAddress(false);
            var data = {};
            Checkout.Address.FIELDS.forEach(function(field) {
                var input = this._elements['_' + field];
                if (!input) return;
                data[field] = (input.node || input).value;
            }, this);
            var address = new Checkout.Address(data);
            this._elements._save.node.value = 'Saving...';
            this._activeAddress.save(address, function() {
                this._elements._save.node.value = 'Save';
            }, this);
        },
        
        destroy: function(address) {
            address.destroy(function() {
                var index = this._addresses.indexOf(address);
                this._addresses.splice(index,1);
                address.getHTML().remove();
            }, this);
        }
    }),
    
    /****************************************************************
    @class Checkout.CardHelper
    ****************************************************************/
    CardHelper: new JS.Class({
        extend: {
            CONTAINER_CLASS:    'card-helper',
            INNER_CLASS:        'image',
            
            MAESTRO_ONLY:   [
                'othercommerce/ExpressBasket.payment.issueNumber',
                'Dothercommerce/ExpressBasket.payment.startDate:MONTH',
                'Dothercommerce/ExpressBasket.payment.startDate:YEAR'
            ],
            
            FIELD_CONTAINER:    '.opc-fieldcol'
        },
        
        initialize: function(form, container) {
            this._form = Ojay(form);
            this._container = Ojay(container);
            this._select = this._container.descendants('select');
            this._container.insert(this.getHTML());
            
            this._maestroFields = Ojay( this.klass.MAESTRO_ONLY.map(function(name) {
                return Checkout.getInputs(this._form, name).node;
            }, this) ).ancestors(this.klass.FIELD_CONTAINER);
            
            this._maestroFields.setStyle({overflow: 'hidden'});
            this._width = this._maestroFields.getWidth();
            this._isMaestro = true;
            
            this._select.on('change')._(this).update();
            this.update();
        },
        
        getHTML: function() {
            if (this._html) return this._html;
            this._html = Ojay.HTML.div({className: this.klass.CONTAINER_CLASS}, function(HTML) {
                this._image = Ojay( HTML.div({className: this.klass.INNER_CLASS}) );
            }.bind(this));
            return this._html;
        },
        
        update: function() {
            var value = this._select.node.value;
            value = value.match(/[a-z]+/ig).pop().toLowerCase();
            this._image.setClass(this.klass.INNER_CLASS + ' ' + value);
            
            var isMaestro = (value == 'switch');
            if (isMaestro != this._isMaestro)
                this._maestroFields.animate({
                    width: {to: isMaestro ? this._width : 0},
                    opacity: {to: isMaestro ? 1 : 0}
                }, 0.4)._(function() {
                    this[isMaestro ? 'show' : 'hide']();
                });
            
            this._isMaestro = isMaestro;
        }
    })
};