window.addEvent('domready', function() {
    $$('a.external').each(function(link) {
        link.target = '_blank';
    });
    $$('#navigation a').each(function(a) {
        var li = a.getParent();
        li.store('background', li.getStyle('background-color'));
        li.setStyle('background-color', li.retrieve('background'));
        a.addEvent('mouseover', function() {
            li.get('tween', {duration: 1000, transition: Fx.Transitions.Circ.easeOut}).start('background-color', '#e1dac6');
        });
        a.addEvent('mouseout', function() {
            li.get('tween', {duration: 750, transition: Fx.Transitions.Circ.easeOut}).start('background-color', li.retrieve('background'));
        });
    });
    $$('#subnavigation a').each(function(link) {
        link.store('background', '#ffffff');
        link.store('color', link.getStyle('color'));
        link.setStyle('background-color', link.retrieve('background'));
        link.addEvent('mouseover', function() {
            link.get('morph', {duration: 1000, transition: Fx.Transitions.Circ.easeOut}).start({
                'background-color': '#eeeeee',
                'color': '#555555'
            });
        });
        link.addEvent('mouseout', function() {
            link.get('morph', {duration: 750, transition: Fx.Transitions.Circ.easeOut}).start({
                'background-color': link.retrieve('background'),
                'color': link.retrieve('color')
            });
        });
    });
    if (Browser.Engine.trident && Browser.Engine.version <= 5) {
        $$('form .required').each(function(el) {
            if (!el.retrieve('mark')) {
                el.set('text', el.get('text') + ' *');
                el.store('mark', 1);
            }
        }, this);
    }
});

var SeppeltTastingNotes = new Class({
    initialize: function() {
        this.els                = $$('.tasting dd');
        this.els.each(function(el) {
            var back            = new Element('div', {
                'class': 'arrow-back',
                'html': 'Back'
            }).inject(el);
            back.addEvent('click', this.back.bindWithEvent(this, [el]));
            el.store('back', back);
            var next            = new Element('div', {
                'class': 'arrow-next',
                'html': 'Next'
            }).inject(el);
            next.addEvent('click', this.next.bindWithEvent(this, [el]));
            el.store('next', next);
            var tray            = el.getElement('.inner').setStyles({
                'position': 'absolute',
                'top': '0',
                'left': '0'
            });
            tray.get('tween').set('left', 0);
            el.store('tray', tray);
            el.store('window', el.getElement('.outer'));
            this.refresh(el);
        }, this);
        this.wines              = $$('.wines div');
        this.wines.each(function(el) {
            el.store('x', el.getStyle('left'));
            el.store('y', el.getStyle('top'));
            el.addEvent('mouseover', this.over.bindWithEvent(this));
            el.addEvent('mouseout', this.over.bindWithEvent(this));
        }, this);
    },

    limits: function(el) {
        return {
            max: -(el.retrieve('tray').getCoordinates().width - el.retrieve('window').getCoordinates().width),
            min: 0
        }
    },

    refresh: function(el) {
        var coords              = el.retrieve('tray').getCoordinates(el.retrieve('window'));
        var limits              = this.limits(el);
        el.retrieve('back').setStyle('display', (coords.left < limits.min) ? 'block' : 'none');
        el.retrieve('next').setStyle('display', (coords.left > limits.max) ? 'block' : 'none');
    },

    next: function(e, el) {
        var coords              = el.retrieve('tray').getCoordinates(el.retrieve('window'));
        var limits              = this.limits(el);
        var width               = el.getCoordinates().width * 0.8;
        var offset              = (coords.left - width > limits.max) ? coords.left - width : limits.max;
        el.retrieve('tray').get('tween', {
            delay: 1000,
            onComplete: this.refresh.bind(this, el)
        }).start('left', offset);
        this.refresh(el);
    },

    back: function(e, el) {
        var coords              = el.retrieve('tray').getCoordinates(el.retrieve('window'));
        var limits              = this.limits(el);
        var width               = el.getCoordinates().width * 0.8;
        var offset              = (coords.left + width < limits.min) ? coords.left + width : limits.min;
        el.retrieve('tray').get('tween', {
            delay: 1000,
            onComplete: this.refresh.bind(this, el)
        }).start('left', offset);
        this.refresh(el);
    }
});

var SeppeltHistory = new Class({
    'Extends': SeppeltTastingNotes,
    initialize: function(slides) {
        new SeppeltSlideshow(slides);
        this.els                = $$('.timeline');
        this.els.each(function(el) {
            var back            = new Element('div', {
                'class': 'arrow-back',
                'html': 'Back'
            }).inject(el);
            back.addEvent('click', this.back.bindWithEvent(this, [el]));
            el.store('back', back);
            var next            = new Element('div', {
                'class': 'arrow-next',
                'html': 'Next'
            }).inject(el);
            next.addEvent('click', this.next.bindWithEvent(this, [el]));
            el.store('next', next);
            var tray            = el.getElement('.inner').setStyles({
                'position': 'absolute',
                'top': '0',
                'left': '0'
            });
            tray.get('tween').set('left', 0);
            el.store('tray', tray);
            el.store('window', el.getElement('.outer'));
            this.refresh(el);
        }, this);
        this.links              = $$('.timeline a');
        this.links.each(function(link) {
            var tgt = link.href.replace(/^.*?#/, '');
            if ($(tgt)) {
                $(tgt).setStyles({
                    visibility: 'visible',
                    opacity: 0
                });
            }
            link.store('target', $(tgt));
            link.addEvent('mouseover', this.over.bindWithEvent(this, link));
            link.addEvent('mouseout', this.out.bindWithEvent(this, link));
            link.addEvent('click', this.select.bindWithEvent(this, link));
        }, this);
        if (this.links.length) {
            this.links[0].fireEvent('click');
        }
    },

    over: function(e, link) {
        if (!link.hasClass('sel')) {
            link.setStyle('background-color', '#777');
        }
    },

    out: function(e, link) {
        if (!link.hasClass('sel')) {
            link.setStyle('background-color', 'transparent');
        }
    },

    select: function(e, link) {
        e = new Event(e);
        e.stop();
        this.links.each(function(inactive) {
            inactive.removeClass('sel');
            inactive.setStyle('background-color', 'transparent');
            if (inactive.retrieve('target')) {
                inactive.retrieve('target').tween('opacity', 0);
            }
        });
        link.addClass('sel');
        link.setStyle('background-color', 'white');
        if (link.retrieve('target')) {
            link.retrieve('target').tween('opacity', 1);
        }
    }
});

var SeppeltSlideshow = new Class({

    els: [],
    waiting: 0,
    timer: 0,
    ctr: 0,
    looping: false,

    Implements: Options,

    options: {
        delay:                  5000,
        duration:               2500,
        transition:             Fx.Transitions.Cubic.easeIn,
        itemClass:              '.promotion',
        controls:               false
    },

    initialize: function(els, options) {
        this.setOptions(options);
        this.waiting            = 0;
        this.el                 = new Element('div')
            .setProperty('id', 'slideshow')
            .setStyle('background-image', 'url(/img/common/spinner.gif)');
        if ($(document.body).getElement('h1.feature')) {
            $(document.body).getElement('h1.feature').empty().adopt(this.el);
        }
        $A(els).each(function(src) {
            var img             = new Element('img')
                .set('opacity', 0)
                .addEvent('load', function(evt) {
                    this.waiting--;
                }.bindWithEvent(this))
                .setProperty('src', src)
                .inject(this.el, 'bottom');
            this.els[this.els.length] = img;
            this.waiting++;
        }.bind(this));
        this.checkload();
    },

    checkload: function() {
        if (this.waiting > 0) {
            return this.checkload.delay(100, this);
        }
        this.el.setStyle('background-image', 'none')
        this.els[this.ctr].get('tween', {transition: this.options.transition, duration: this.options.duration}).start('opacity', 1);
        return this.loop.delay(this.options.delay, this);
    },

    loop: function() {
        if (this.ctr > -1) {
            this.els[this.ctr].get('tween', {transition: this.options.transition, duration: this.options.duration}).start('opacity', 0);
        }
        this.ctr++;
        if (this.ctr == this.els.length) {
            this.ctr = 0;
        }
        this.els[this.ctr].get('tween', {transition: this.options.transition, duration: this.options.duration}).start('opacity', 1);
        return this.loop.delay(this.options.delay, this);
    }
});