var infowindow = new Class({
    initialize : function(map_id,google_map){
        this.map = document.getElement('#' + map_id);
        this.google_map = google_map;
    },
    pop_up : function(name,desc,url){
        this.iw = new Element('div',{'id' : 'infowindow'});
        this.iw_content = new Element('div').addClass('content');
        this.iw_close = new Element('a',{'href':'#'}).set('text','close').addClass('close');
        var footer = new Element('div').addClass('footer');
        this.iw_close.addEvent('click',this.close.bind(this));
        this.iw.grab(this.iw_content).grab(footer).grab(this.iw_close);
        this.iw.inject(this.map,'bottom');
        // get the height of the infowindow for vertical alignment
        var h = this.iw.getSize().y;
        this.iw.setStyles({
            'top': ((this.map.getSize().y - h) / 2) - 70
        });
        if (url != "") name = '<a href="'+url+'">'+name+'</a>';
        this.iw_content.set('html','<h2>'+name+'</h2><div class="description">'+desc+'</div>');
        // add drag events
        this.map.addEvent('mousedown',this.move_map_down.bindWithEvent(this));
    },
    close : function(){
        this.iw.dispose();
        if (this.map_centre != undefined) this.google_map.setCenter(this.map_centre);
        this.google_map.setZoom(2);
        return false;
    },
    close_returns_centre : function(centre){
        this.map_centre = centre;
    },
    iw : undefined,
    iw_content : undefined,
    iw_close : undefined,
    cursor_last_x : undefined,
    cursor_last_y : undefined,
    cursor_this_x : undefined,
    cursor_this_y : undefined,
    map : undefined,
    google_map : undefined,
    map_centre : undefined,
    move_map_down : function(e){ // start the map moving
        var iw_xy = this.iw.getStyles(['top','right']);
        // get the last x and y coordinates so we can compare them to the new ones
        this.cursor_last_x = e.page.x;
        this.cursor_last_y = e.page.y;
        this.map.addEvent('mousemove',this.move_map_move.bindWithEvent(this));
        this.map.addEvent('mouseup',this.move_map_up.bindWithEvent(this));
    },
    move_map_move : function(e){
        var iw_xy = this.iw.getStyles(['top','right']);
        this.cursor_this_x = e.page.x;
        this.cursor_this_y = e.page.y;
        // calculate the amount the cursor moved between now and the last time the event fired
        var move_x = this.cursor_last_x - this.cursor_this_x;
        var move_y = this.cursor_last_y - this.cursor_this_y;
        // set the new "last" to this "current"
        this.cursor_last_x = this.cursor_this_x;
        this.cursor_last_y = this.cursor_this_y;
        // apply the calculations to the infowindow's position
        this.iw.setStyles({
            'top' : iw_xy.top.toInt() - move_y,
            'right' : iw_xy.right.toInt() + move_x
        });
    },
    move_map_up : function(e){
        // slightly greedy to remove all move events off the map,
        // but it's the only way I can see to do this.
        this.map.removeEvents('mousemove');
    }
});