var AtvInlineFloatBox = new Class( {
    Implements: [Options, Events],
    options: {
        'relative_to': 'body',
        'z-index': 102,
        'offset_top': 50,
        'offset_left': 150,
        'group': 'default',
        'width': '512px',
        'buttons': [],
        'overlay': false,
        'timeout': null,
        'show_close_button': false,
        'pre_wrapper_class': 'atv_inline_float_box_prewrapper',
        'post_wrapper_class': 'atv_inline_float_box_postwrapper'
    },

    inline_element: null,
    is_visible: false,
    wrapping_element: null,

    overlay_background: null,

    initialize: function(inline_element, options)
    {
        this.setOptions(options);
        this.inline_element = $(inline_element);
        /*
         * This property will save the class-wide instance for each group
         */
        AtvInlineFloatBox.prototype.group_instance = AtvInlineFloatBox.prototype.group_instance || {};
    },
    show: function()
    {
        /*
         * Hide the current class-wide instance for the group of this box, since
         * we want to show only one/group
         */
        if (AtvInlineFloatBox.prototype.group_instance[this.options.group])
        {
            AtvInlineFloatBox.prototype.group_instance[this.options.group].hide();
        }
        /*
         * Initialize the class-wide group instance with our current one
         */
        AtvInlineFloatBox.prototype.group_instance[this.options.group] = this;
        if ($(this.options['relative_to']) && typeof $(this.options['relative_to']).getCoordinates !== 'undefined')
        {
            var relative_object_coordinates = $(this.options['relative_to']).getCoordinates();
        }
        else
        {
            var relative_object_coordinates = {
                top: 120,
                left: 300
            };
        }

        var body = $$('body');
        body = body[0];

        if (!this.wrapping_element)
        {
            this.wrapping_element = new Element('div');

            this.overlay_background = new Element('div', {
                'class': 'atv_overlay'
            });
            this.overlay_background.setStyles( {
                'background-attachment': 'scroll',
                'background-color': '#000000',
                'background-image': 'none',
                'background-position': '0 0',
                'background-repeat': 'repeat',
                'opacity': '0.65',
                'position': 'fixed',
                'height': '100%',
                'left': '0',
                'top': '0',
                'width': '100%',
                'z-index': this.options['z-index'] - 1
            });
            this.overlay_background.addEvent('click', function(e)
            {
                new Event(e).stop();
                this.toggle();
            }.bind(this));

            var pre_wrapper = new Element('div', {
                'class': this.options.pre_wrapper_class
            });

            var post_wrapper = new Element('div', {
                'class': this.options.post_wrapper_class
            });

            var wrapper2 = new Element('div', {
                'class': 'atv_inline_float_box_wrap2'
            });
            var wrapper3 = new Element('div', {
                'class': 'atv_inline_float_box_wrap3'
            });
            pre_wrapper.inject(this.wrapping_element);
            wrapper2.inject(this.wrapping_element);
            post_wrapper.inject(this.wrapping_element);
            wrapper3.inject(wrapper2);

            if (this.options["show_close_button"])
            {
                var close_button_div = new Element('div', {
                    style: 'float:right; text-align:right; margin-right:5px'
                });

                var close_button = new Element('a', {
                    'href': '#',
                    'title': 'Schließen'
                });
                var close_button_img = new Element('img', {
                    'src': 'images/btn_close.gif',
                    'alt': 'Schließen'
                });

                close_button_img.inject(close_button);

                var that = this;

                close_button.addEvent('click', function(e)
                {
                    new Event(e).stop();
                    that.hide();
                });

                close_button.inject(close_button_div);

                close_button_div.inject(wrapper3);
            }

            this.inline_element.inject(wrapper3);

            if (this.options.buttons.length > 0)
            {

                var buttons_div = new Element('div', {
                    'class': 'floatbox'
                });

                var pos = 0;

                this.options.buttons.each(function(button)
                {

                    pos++;

                    var link_element = new Element('a', {
                        'class': 'arrow_link',
                        'style': 'float:right;margin-left:10px;margin-right:10px;',
                        'href': '#',
                        'title': button.hint,
                        'events': {
                            'click': function(e)
                            {
                                e.preventDefault();
                                button.onClick();
                            }
                        }
                    });
                    link_element.set('text', button.label);
                    link_element.set('html', link_element.get('html') + '<span>&nbsp;</span>');
                    link_element.inject(buttons_div); // , 'top');
                    }.bind(this));

                buttons_div.inject(wrapper3);
            }
            this.wrapping_element.inject(body, 'top');

            if (this.options["overlay"])
            {
                this.overlay_background.inject(body, 'top');
            }

            this.inline_element.setStyles( {
                'display': 'block',
                'opacity': 1
            });

            this.wrapping_element.setStyles( {
                'top': (relative_object_coordinates.top.toInt() + this.options['offset_top']) + 'px',
                'left': (relative_object_coordinates.left.toInt() + this.options['offset_left']) + 'px',
                'z-index': this.options['z-index']
            });
        }
        this.wrapping_element.setStyles( {
            'opacity': 0,
            'position': 'absolute',
            'display': 'block',
            'width': this.options.width
        });
        var params = {
            'opacity': [0, 1]
        }
        if (this.options.height)
        {
            params['height'] = [10, this.options.height];
        }
        this.wrapping_element.addClass('atv_inline_float_box');
        this.wrapping_element.morph(params);
        if (this.overlay_background !== null)
        {
            this.overlay_background.get('tween').start('opacity', 0.65);
        }
        this.is_visible = true;

        this.fireEvent('show');

        /*
         * if isset timeout, hide box after X Milliseconds
         */
        if (null !== this.options['timeout'])
        {
            this.hide.bind(this).delay(this.options['timeout']);
        }
    },
    hide: function()
    {
        /*
         * If that's our current instance, let's not make it the group instance,
         * since we try to hide it in case of opening an other layer in the same
         * group.
         */
        if (this === AtvInlineFloatBox.prototype.group_instance[this.options.group])
        {
            AtvInlineFloatBox.prototype.group_instance[this.options.group] = false;
        }

        if (this.is_visible)
        {
            this.wrapping_element.set('tween', {
                onComplete: function(e)
                {
                    this.wrapping_element.set('tween', {
                        onComplete: Class.empty
                    });
                    if (!this.is_visible)
                        this.wrapping_element.setStyle('display', 'none');
                }.bind(this)
            });
            this.wrapping_element.get('tween').start('opacity', 0);
            if (this.overlay_background !== null)
            {
                this.overlay_background.get('tween').start('opacity', 0);
            }
            this.is_visible = false;
            this.fireEvent('hide');
        }
    },
    toggle: function()
    {
        if (this.is_visible)
        {
            this.hide();
        }
        else
        {
            this.show();
        }
    },

    isVisible: function()
    {
        return this.is_visible;
    },
    scrollToX: function(x)
    {
        this.wrapping_element.setStyles( {
            'left': x + 'px'
        });
    },
    scrollToY: function(y)
    {
        this.wrapping_element.setStyles( {
            'top': y + 'px'
        });
    }

});
var atv_alertinline_floatbox = null;
var atv_alertinline_floatbox_onOk = null;