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'
        });
    }
};

document.observe('dom:loaded', function(event) {
    $$('.imglink').each(function(elem) {
        elem.observe('click', function(event) {
            if ($('parent')) $('parent').remove();
            elem.down().src = '../images/picend.gif';
            event.stop();
            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: '40px'
            });
            $$('body')[0].insert(parent);
            parent.insert(div);
            new Ajax.Request(elem.href, {
                method: 'get',
                onSuccess: function(req) {
                    var shadow;
                    div.insert(req.responseText);
                    Event.observe($('winnerImg'), 'load', function(event) {
                        Event.stopObserving($('winnerImg'), 'load', arguments.callee);
                        div.setStyle({top: '0px', left: '0px'});
                        shadow = new Shadow(
                            div.getWidth() - 8,
                            div.getHeight() - 8, 4, 4
                        );
                        var pos = positionCenter(parent);
                        parent.setStyle({
                            width: div.getWidth() + 'px',
                            height: div.getHeight() + 'px',
                            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();
                    });
                    $$('#imgcnt a').each(function(elem) {
                        if ($('winnerImg').src == elem) elem.setStyle({color: 'gray'});
                        elem.observe('click', function(event) {
                            event.stop();
                            $('winnerImg').src = elem.href;
                            Event.observe($('winnerImg'), 'load', function(event) {
                                shadow.sizeAndPositionChanged(
                                    div.getWidth() - 8,
                                    div.getHeight() - 8, 4, 4
                                );
                            });
                            elem.setStyle({color: 'gray'});
                        });
                    });
                }
            });
        });
    });
});

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;
}