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

var Map = Class.create();
Map.prototype = {
    initialize: function(elem) {
        this.elem = elem;
        this.positions = elem.cumulativeOffset();
        this.elem.observe('click', this.initDisplay.bindAsEventListener(this));
    },
    initDisplay: function(event) {
        event.stop();
        if ($('parent')) $('parent').remove();
        this.lastDimensions = {width: 540, height: 557};
        this.lastPositions = {
            top:  (document.viewport.getScrollOffsets().top  * 2 + document.viewport.getHeight()) / 2 - this.lastDimensions.height / 2,
            left: (document.viewport.getScrollOffsets().left * 2 + document.viewport.getWidth() ) / 2 - this.lastDimensions.width / 2
        }
        this.url = event.element().up().href;
        this.initSize = 0;
        this.frequency = 10;
        this.container = new Element('div', {id: 'container'});
        this.container.setStyle({
            backgroundColor: '#FF9',
            width: this.initSize + 'px',
            height: this.initSize + 'px',
            position: 'absolute'
        });
        this.moveWidth = (this.lastDimensions.width - this.initSize) / this.frequency;
        this.moveHeight = (this.lastDimensions.height - this.initSize) / this.frequency;
        this.moveTop = (this.lastPositions.top - this.positions.top) / this.frequency;
        this.moveLeft = (this.lastPositions.left - this.positions.left) / this.frequency;
        $$('body')[0].insert(this.container);
        this.itExpands();
    },
    itExpands: function() {
        var that = this;
        var width = that.initSize;
        var height = that.initSize;
        var top = that.positions.top;
        var left = that.positions.left;
        setTimeout(function() {
            width += that.moveWidth;
            height += that.moveWidth;
            top += that.moveTop;
            left += that.moveLeft;
            that.container.setStyle({
                width: width + 'px',
                height: height + 'px',
                top: top + 'px',
                left: left + 'px'
            });
            that.frequency--;
            if (that.frequency > 0) setTimeout(arguments.callee, 15);
            else that.mapAndShadowBuiltIt();
        }, 15);
    },
    mapAndShadowBuiltIt: function() {
        var close = new Element('div', {id: 'close'});
        var map = new Element('div', {id: 'map'});
        close.insert('<a href="#" id="remove">×</a>');
        this.container.insert(close);
        this.container.insert(map);
        this.container.setStyle({height: ''});
        map.setStyle({marginBottom: '20px', marginLeft: '20px', marginRight: '20px'});
        new Ajax.Request(this.url, {
            method: 'get',
            onSuccess: function(req) {
                var json = req.responseText.evalJSON();
                load(json);
                close.setStyle({height: '', cursor: 'move'});
                $('remove').observe('click', function(event) {
                    event.stop();
                    $('parent').remove();
                });
            }
        });
        var parent = new Element('div', {id: 'parent'});
        parent.setStyle({
            position: 'absolute',
            width: this.container.getStyle('width'),
            height: this.container.getStyle('height'),
            top: this.container.getStyle('top'),
            left: this.container.getStyle('left')
        });
        this.container.setStyle({top: 0, left: 0});
        $$('body')[0].insert(parent);
        var shadow = new Shadow(
            parseInt(parent.getStyle('width')) - 8,
            parseInt(parent.getStyle('height')) - 8, 4, 4
        );
        parent.insert(shadow.container);
        parent.insert(this.container);
        var drgObj = new Draggable('parent', {handle: 'close'});
    }
};

function load(json) {
    if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(json['latitude'], json['longitude']), 16);
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.addOverlay(new GMarker(map.getCenter()));
        map.openInfoWindowHtml(map.getCenter(), json['description']);
    }
}

document.observe('dom:loaded', function(event) {
    $$(".maps").each(function(elem) {
        new Map(elem);
    });
});