itr.alert = function(ID, options) {
    var ID = ID;
    var state = 'hidden';

    var options = (options) ? options : new Object;

    options.keyboardSupport = itr.klasse.handleDefaultOption(options.keyboardSupport, true);
    options.moveOnScroll = itr.klasse.handleDefaultOption(options.moveOnScroll, true);
    options.centerY = itr.klasse.handleDefaultOption(options.centerY, true);
    options.hideOnClick = itr.klasse.handleDefaultOption(options.hideOnClick, true);
    options.closeButton = itr.klasse.handleDefaultOption(options.closeButton, true);
    options.closeButton = itr.klasse.handleDefaultOption(options.afterShow, function(){});//default option: empty function

    Event.observe(window,'load',function() {
        if($(ID))
        {
            $(ID).hide();
            $(ID).addClassName('window');
        }
    });

    if(options.keyboardSupport)
    {
        var self = this;
        Event.observe(window, 'keyup', function(Evt){
            Evt.stop();

            var KEYCODE_X = 88;
            if((Evt.keyCode == Event.KEY_ESC || KEYCODE_X == Evt.keyCode) && self.getState() == 'show')
            {
                self.hide();
            }
        });
    }

    //verplaats window en shim bij scrolling
    function moveWindow()
    {
        var viewport = document.viewport.getDimensions();
        var scrolloffset = document.viewport.getScrollOffsets();

        //move window
        var elementDimensions = $(ID).getDimensions();

        var top = scrolloffset.top + (viewport.height / 2) - (elementDimensions.height / 2);
        var left = scrolloffset.left + (viewport.width / 2) - (elementDimensions.width / 2);

        new Effect.Move(ID, { x: left, y: top, mode: 'absolute', duration: 0.5});
    }

    function showShim()
    {
        if(!$('shim'))
        {
            var div = document.createElement('div');
            div.id = 'shim';
            document.body.appendChild(div);
        }

        var windowHeight = $(document.body).getHeight();
        var windowWidth = $(document.body).getWidth();

        $('shim').setStyle({
            height: windowHeight + "px",
            width: windowWidth + "px"
        });

        $('shim').setStyle({
            opacity: 0.0,
            position: 'absolute',
            top: "0px",
            display: 'block'
        });

        $('shim').fade({ duration: 0.8, from: 0, to: 0.8 });
    }

    function closeButton(object)
    {
        if(options.closeButton && !$(ID).getAttribute('closeButtonMade'))
        {
            $(ID).setAttribute('closeButtonMade', true);

            var button = new Element('img').setStyle({
                position: 'absolute',
                right: '5px',
                top: '5px',
                cursor: 'pointer'
            });
            button.src = 'web/images/icons/cancel.png';
            button.title = 'Close window';
            $(ID).insert(button);

            button.observe('click', function(){
                object.hide();
            })
        }
    }

    function hideOnClick(object)
    {
        if(options.hideOnClick)
        {
            $('shim').observe('click', function(){
                object.hide();
            });
        }
    }

    //create box if it doesn't yet exists
    function renderMsgBox()
    {
        var mainwindow = new Element('div', {id: ID, 'class': 'window'});
        var innerwindow = new Element('div', {'class': 'innerwindow'}).update(ID);
        mainwindow.insert(innerwindow);
        document.body.appendChild(mainwindow);
    }

    function showAlert()
    {
        if(!$(ID)) {
            renderMsgBox()
        }

        var viewport = document.viewport.getDimensions();
        var scrolloffset = document.viewport.getScrollOffsets();

        $(ID).setStyle({
            position: 'absolute',
            zIndex: 1000
        })

        $(ID).show();
        $(ID).hide();

        var elementDimensions = $(ID).getDimensions();

        if(options.centerY)
        {
            $(ID).setStyle({
                top: scrolloffset.top + (viewport.height / 2)  - (elementDimensions.height / 2) + "px"
            });
        } else {
            $(ID).setStyle({
                top: "50px"
            });
        }

        $(ID).setStyle({
            left: scrolloffset.left + (viewport.width / 2) - (elementDimensions.width / 2) + "px"
        });

        Effect.BlindDown(ID, {duration: 0.5});
    }

    this.getState = function(){
        return state;
    }

    this.show = function() {
        showShim();
        showAlert();
        //closeButton(this);
        hideOnClick(this);

        if(options.moveOnScroll) {
            Event.observe(window,'scroll', moveWindow);
        }
        
        if(options.afterShow)
        {
            options.afterShow.call();
        }

        state = 'show';
    }
    
    this.hide = function() {
        $(ID).fade({duration: 0.5, to: 0 });
        $('shim').fade({duration: 0.5, to: 0 });

        state = 'hidden';
    }
}