var Shadow = Class.create();
Shadow.prototype = {
    initialize: function(width, height, top, left) {
        this.imgPixel = 8;
        this.shadowParts = [{
            position: 'absolute',
            width: width + 'px',
            height: height + 'px',
            top: top + 'px',
            left: left + 'px',
            backgroundColor: '#7f7f7f'
        },
        {
            width: width + this.imgPixel + 'px',
            height: this.imgPixel + 'px',
            top: -this.imgPixel + 'px',
            left: -this.imgPixel + 'px',
            backgroundImage: 'url("../images/tl.png")'
        },
        {
            width: this.imgPixel + 'px',
            height: this.imgPixel + 'px',
            top: -this.imgPixel + 'px',
            right: -this.imgPixel + 'px',
            backgroundImage: 'url("../images/tr.png")'
        },
        {
            width: this.imgPixel + 'px',
            height: height + 'px',
            top: '0px',
            left: -this.imgPixel + 'px',
            backgroundImage: 'url("../images/l.png")'
        },
        {
            width: this.imgPixel + 'px',
            height: height + 'px',
            top: '0px',
            right: -this.imgPixel + 'px',
            backgroundImage: 'url("../images/r.png")'
        },
        {
            width: width + this.imgPixel + 'px',
            height: this.imgPixel + 'px',
            top: height + 'px',
            left: -this.imgPixel + 'px',
            backgroundImage: 'url("../images/bl.png")'
        },
        {
            width: this.imgPixel + 'px',
            height: this.imgPixel + 'px',
            top: height + 'px',
            right: -this.imgPixel + 'px',
            backgroundImage: 'url("../images/br.png")'
        }];
        this.container = new Element('div', {id: 'shadow'});
        this.container.setStyle(this.shadowParts.shift());
        for (i = 0; i < this.shadowParts.length; i++) {
            var elem = new Element('div');
            elem.addClassName('iepngfix');
            elem.setStyle(Object.extend({position: 'absolute', backgroundRepeat: 'no-repeat'}, this.shadowParts[i]));
            this.container.insert(elem);
        }
    },
    sizeAndPositionChanged: function(width, height, top, left) {
        var parts = $A(this.container.childNodes);
        parts[0].setStyle({width: width + this.imgPixel + 'px'});
        parts[2].setStyle({height: height + 'px'});
        parts[3].setStyle({height: height + 'px'});
        parts[4].setStyle({width: width + this.imgPixel + 'px', top: height + 'px'});
        parts[5].setStyle({top: height + 'px'});
        this.container.setStyle({
            width: width + 'px',
            height: height + 'px',
            top: top + 'px',
            left: left + 'px'
        });
    }
};

function positionCenter(element) {
    var dimensions = {};
    dimensions['top'] = (document.viewport.getScrollOffsets().top  * 2 + document.viewport.getHeight()) / 2 - element.getHeight() / 2
    dimensions['left'] = (document.viewport.getScrollOffsets().left * 2 + document.viewport.getWidth() ) / 2 - element.getWidth()  / 2
    return dimensions;
}

Event.observe(window, 'load', function(event) {    
    $$('dl dd a').each(function(elem) {
        elem.observe('click', function(event) {
            elem.up().previous().setStyle({color: 'red'});
            event.stop();
            if ($('parent')) $('parent').remove();
            var div = new Element('div', {id: 'container'});
            var parent = new Element('div', {id: 'parent'});
            parent.setStyle({position: 'absolute', visibility: 'hidden', top: 0, left: 0});
            var close = new Element('div', {id: 'close'});
            close.insert('<a href="#" id="remove">×</a>');
            close.setStyle({height: '', cursor: 'move'});
            div.insert(close);
            div.setStyle({
                position: 'relative',
                backgroundColor: '#FF9',
                paddingLeft: '20px',
                paddingRight: '20px',
                paddingBottom: '20px'
            });
            $$('body')[0].insert(parent);
            parent.insert(div);
                new Ajax.Request(elem.href, {
                method: 'get',
                onSuccess: function(req) {
                    div.insert(req.responseText);
                    parent.setStyle({
                        width: '500px'
                    })
                    div.setStyle({top: '0px', left: '0px'});
                    var shadow = new Shadow(
                        500 - 8,
                        parent.getHeight() - 8, 4, 4
                    );
                    parent.setStyle({
                        height: div.getHeight() + 'px'
                    });
                    var pos = positionCenter(parent);
                    parent.setStyle({
                        top: pos.top + 'px',
                        left: pos.left + 'px',
                        visibility: 'visible'
                    });
                    parent.insert({top: shadow.container});
                    var drgObj = new Draggable('parent');
                    $('remove').observe('click', function(event) {
                        event.stop();
                        $('parent').remove();
                    });
                }
            });
        });
    });
    if ($('itAgrees')) {
        $('itAgrees').observe('click', function(event) {
            var elem = event.element();
            if (elem.checked) $('submitbutton').disabled = false;
            else $('submitbutton').disabled = true;
        });   
    }
});