var Enacasa = new Class({
    initialize: function() {
        this.navigation         = $('navigation');
        this.subnavigation      = $('subnavigation');
        this.content            = $('content');
        this.logo               = $('logo');
        if (!this.navigation || !this.content || !this.logo) {
            return false;
        }
        this.navigation.setStyle('opacity', 0);
        this.subnavigation.setStyle('opacity', 0);
        this.content.setStyle('opacity', 0);
        this.logo.setStyle('opacity', 0).get('tween', {duration: 6000, transition: Fx.Transitions.Quad.easeOut}).start('opacity', 1);
        this.showContent.delay(250, this);
        this.navigation.getElements('a').each(function(link) {
            link.addEvent('click', this.load.bindWithEvent(this, link));
        }.bind(this));
        this.logo.getElements('a').each(function(link) {
            link.addEvent('click', this.load.bindWithEvent(this, link));
        }.bind(this));
        this.subnavigation.getElements('a').each(function(link) {
            link.addEvent('click', this.load.bindWithEvent(this, link));
        }.bind(this));
    },

    showContent: function() {
        this.content.get('tween', {
            duration: 750,
            transition: Fx.Transitions.Quad.easeOut,
            onComplete: this.showNavigation.bindWithEvent(this)
        }).start('opacity', 1);
    },

    showNavigation: function() {
        this.navigation.get('tween', {duration: 1000, transition: Fx.Transitions.Quad.easeOut}).start('opacity', 1);
        if (window.location.href.indexOf('/accommodation') !== -1) {
            this.showSubnavigation();
        }
    },

    showSubnavigation: function() {
        this.subnavigation.get('tween', {duration: 1000, transition: Fx.Transitions.Quad.easeOut}).start('opacity', 1);
    },

    hideSubnavigation: function() {
        this.subnavigation.get('tween', {duration: 500, transition: Fx.Transitions.Quad.easeOut}).start('opacity', 0);
    },

    load: function(e, link)
    {
        e = new Event(e);
        e.stop();
        this.content.get('tween', {
            duration: 375,
            onComplete: function() {
                new Request.HTML({
                    evalScripts: true,
                    onComplete: function(tree, els, html, js) {
                        this.content.empty();
                        this.content.set('html', html);
                        this.showContent();
                        this.navigation.getElements('li').each(function(li) {
                            li.removeClass('active');
                        });
                        this.subnavigation.getElements('li').each(function(li) {
                            li.removeClass('active');
                        });
                        link.getParent().addClass('active');
                        if (link.get('href').indexOf('/accommodation') !== -1) {
                            this.showSubnavigation();
                        } else {
                            this.hideSubnavigation();
                        }
                        $$('a.external').each(function(link) {
                            link.target = '_blank';
                        });
                        eval(js);
                        $$('a.external').each(function(link) {
                            link.target = '_blank';
                        });
                    }.bind(this)
                }).get(link.href + '?format=html')
            }.bind(this)
        }).start('opacity', 0);
    }
});

var FolioViewer = new Class({

    Implements: Options,

    els: [],
    waiting: 0,
    timer: 0,
    pause: 0,
    ctr: -1,

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

    initialize: function(els, options) {
        this.setOptions(options);
        this.el                 = $('slideshow');

        this.prv                = new Element('div')
            .setProperty('id', 'arrow-prev')
            .addEvent('mouseover', function() {
                this.tween('opacity', 0.5)
            })
            .addEvent('mouseout', function() {
                this.tween('opacity', 1)
            })
            .addEvent('click', function() {
                this.pause      = 1;
                this.refresh();
                this.prev();
            }.bindWithEvent(this))
            .inject($('content'), 'top');

        this.nxt               = new Element('div')
            .setProperty('id', 'arrow-next')
            .addEvent('mouseover', function() {
                this.tween('opacity', 0.5)
            })
            .addEvent('mouseout', function() {
                this.tween('opacity', 1)
            })
            .addEvent('click', function() {
                this.pause      = 1;
                this.refresh();
                this.next();
            }.bindWithEvent(this))
            .inject($('content'), 'top');

        this.widget             = new Element('div')
            .setProperty('id', 'widget')
            .addEvent('mouseover', function() {
                this.tween('opacity', 0.5)
            })
            .addEvent('mouseout', function() {
                this.tween('opacity', 1)
            })
            .addEvent('click', function() {
                this.pause = 1 - this.pause;
                this.refresh();
            }.bindWithEvent(this))
            .inject($('content'), 'top');

        this.el.empty();
        $A(els).each(function(src) {
            var img             = new Element('img')
                .set('opacity', 0)
                .setProperty('src', src)
                .addEvent('load', function() {
                    this.waiting--;
                    if (this.waiting == 0) {
                        this.el.setStyle('background-image', 'none')
                    }
                    var w = img.getCoordinates().width;
                    img.setStyle('left', 0);
                    img.setStyle('top', 0);
                }.bind(this))
                .inject(this.el, 'bottom');
            this.els[this.els.length] = img;
            this.waiting++;
        }.bind(this));
        this.loop.delay(100, this);
    },

    refresh: function() {
        this.widget.setStyle('background-position', '0 -' + (this.pause * 13) + 'px');
    },

    next: 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);
    },

    prev: 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 < 0) {
            this.ctr = this.els.length - 1;
        }
        this.els[this.ctr].get('tween', {transition: this.options.transition, duration: this.options.duration}).start('opacity', 1);
    },

    loop: function() {
        if (!this.waiting && !this.pause) {
            if (this.timer) {
                this.timer--;
            } else {
                this.next();
                this.timer              = this.options.delay;
            }
        }
        return this.loop.delay(100, this);
    }
});

window.addEvent('domready', function() {
    $$('a.external').each(function(link) {
        link.target = '_blank';
    });
    new Enacasa();
});