var Demos = {
    version: '1.3',
    windowScroll: window.getScrollSize(),
    current: new Element('span', {
        'class': 'current'
    }),
    initialize: function () {
        Demos.select = $('template');
        Demos.navigationHeight = $('navigation').getStyle('height').toInt();
        Demos.template = new Element('div', {
            'id': 'selecttpl'
        }).inject(Demos.select, 'before').store('list:open', false);
        Demos.tips = new Tips('.tips', {
            'className': 'rok-tooltip'
        }).addEvents({
            'onShow': function (tip) {
                tip.fade('in')
            },
            'onHide': function (tip) {
                tip.fade('out')
            }
        });
        Demos.current.inject(Demos.template);
        var coord = Demos.template.getCoordinates();
        Demos.list = new Element('div', {
            'id': 'list',
            'styles': {
                'left': 0,
                'top': coord.top + coord.height - 6,
                'width': coord.width - 8
            }
        }).inject(Demos.template).adopt(new Element('div')).set({
            'tween': {
                duration: 200
            },
            'opacity': 0
        }).setStyle('display', 'none');
        Demos.iframe = new IFrame({
            id: 'iframe',
            onload: Demos.resize,
            width: Demos.windowScroll.x,
            height: Demos.windowScroll.y - Demos.navigationHeight,
            styles: {
                'position': 'absolute',
                'border': 0,
                'top': Demos.navigationHeight,
                'left': 0,
                'overflow': (Browser.Engine.trident4) ? 'hidden': '',
                'border': 0,
                'z-index': 100
            },
            scrolling: (Browser.Engine.trident4) ? 'yes': '',
            border: 0,
            frameborder: 0
        }).inject(document.body);
        if (Browser.Engine.trident4) Demos.list.getFirst().setStyle('height', 360);
        Demos.select.setStyle('display', 'none');
        Demos.ul = new Element('ul').inject(Demos.list.getFirst());
        this.convertOptions();
        window.addEvent('resize', Demos.resize)
    },
    convertOptions: function () {
        var options = Demos.select.getElements('option');
        options.each(function (option, i) {
            var text = option.get('text'),
            value = option.get('value');
            if (option.hasClass('selected')) {
                Demos.current.set('text', text);
                Demos.iframe.set('src', value)
            }
            var li = new Element('li').inject(Demos.ul);
            var href = new Element('a', {
                'href': value,
                'text': text,
                'class': option.get('class')
            }).inject(li);
            if (href.hasClass('selected')) Demos.selected = href;
            if (this.isBonus(text)) {
                href.set('text', text.replace(/\sbonus/i, ''));
                href.addClass('bonus')
            }
            if (this.isLab(text)) {
                href.set('text', text.replace(/labs\s\-\s/i, ''));
                href.addClass('labs')
            }
            href.store('tip:title', '<p>' + text + '</p>');
            var image = new Asset.image('images/previews/' + option.get('label') + '.png', {
                onload: function () {
                    href.store('tip:text', this)
                },
                onerror: function () {
                    href.store('tip:text', '<div class="error" />')
                }
            });
            Demos.tips.attach(href);
            href.addEvent('click', function () {
                Demos.selected.removeClass('selected');
                Demos.selected = this;
                this.addClass('selected');
                Demos.current.set('text', this.get('text'));
                Demos.iframe.set('src', this.get('href'));
                Demos.template.fireEvent('click');
                return false
            })
        },
        this);
        Demos.template.addEvents({
            'mouseenter': function () {
                if (!this.retrieve('list:open')) this.setStyle('background-position', 'center center')
            },
            'mouseleave': function () {
                if (!this.retrieve('list:open')) this.setStyle('background-position', 'top center');
                else {
                    Demos.list.fade('out');
                    this.store('list:open', false);
                    (function () {
                        Demos.list.setStyle('display', 'none')
                    }).delay(350)
                }
            },
            'click': function () {
                if (!this.retrieve('list:open')) {
                    Demos.list.setStyle('display', 'block').fade('in');
                    this.store('list:open', true);
                    this.setStyle('background-position', 'bottom center')
                } else {
                    Demos.list.fade('out');
                    this.store('list:open', false);
                    (function () {
                        Demos.list.setStyle('display', 'none')
                    }).delay(350)
                }
                return false
            }
        });
        return this
    },
    isBonus: function (pattern) {
        return (pattern.contains('Bonus', ' ')) ? true: false
    },
    isLab: function (pattern) {
        return (pattern.contains('Labs', ' ')) ? true: false
    },
    tipHTML: function (image) {
        return '<img src="images/previews/' + image + '.png" alt="" />'
    },
    resize: function () {
        var windowSize = window.getSize();
        Demos.iframe.set({
            'width': windowSize.x,
            'height': windowSize.y - Demos.navigationHeight
        })
    }
};
window.addEvent('domready', function () {
    Demos.initialize()
});