/*
	GMapsOverlay v1.0
	by André Fiedler (http://www.visualdrugs.net) - GNU license.
*/

var GMapsOverlay = {

    init: function(options) {
        this.options = Object.extend({
            resizeDuration: 400,
            resizeTransition: Fx.Transitions.sineInOut,
            width: 250,
            height: 250,
            animateCaption: true
        }, options || {});

        if (!GBrowserIsCompatible()) return false;

        this.geocoder = new GClientGeocoder();

        this.anchors = [];
        $each(document.links, function(el) {
            if (el.rel && el.rel.test(/^gmapsoverlay/i)) {
                el.onclick = this.click.pass(el, this);
                this.anchors.push(el);
            }
        }, this);
        this.eventKeyDown = this.keyboardListener.bindAsEventListener(this);
        this.eventPosition = this.position.bind(this);

        this.overlay = new Element('div').setProperty('id', 'gmOverlay').injectInside(document.body);

        this.center = new Element('div').setProperty('id', 'gmCenter').setStyles({

            width: this.options.width + 'px',
            height: this.options.height + 'px',
            marginLeft: '-' + (this.options.width / 2) + 'px'
        }).injectInside(document.body);
        this.maplayer = new Element('div').setProperty('id', 'gmMap').injectInside(this.center);

        this.map = new GMap2(this.maplayer);
        this.map.addControl(new GLargeMapControl());
        this.map.addControl(new GMapTypeControl());
        // this.map.setZoom(5);
        // this.map.setMapType(G_HYBRID_MAP);

        this.bottomContainer = new Element('div').setProperty('id', 'gmBottomContainer').setStyle('display', 'none').injectInside(document.body);
        this.bottom = new Element('div').setProperty('id', 'gmBottom').injectInside(this.bottomContainer);
        new Element('a').setProperties({ id: 'gmCloseLink', href: '#' }).injectInside(this.bottom).onclick = this.overlay.onclick = this.close.bind(this);
        this.caption = new Element('div').setProperty('id', 'gmCaption').injectInside(this.bottom);
        new Element('div').setStyle('clear', 'both').injectInside(this.bottom);

        this.center.style.display = 'none';

        var nextEffect = this.nextEffect.bind(this);
        this.fx = {
            overlay: this.overlay.effect('opacity', { duration: 500, fps: 100 }).hide(),
            resize: this.center.effects({ duration: this.options.resizeDuration, transition: this.options.resizeTransition, onComplete: nextEffect }),
            maplayer: this.maplayer.effect('opacity', { duration: 500, onComplete: nextEffect }),
            bottom: this.bottom.effect('margin-top', { duration: 400, onComplete: nextEffect })
        };

    },

    click: function(link) {
        return this.show(link.href);
    },

    show: function(link) {
        this.link = link;
        this.position();
        this.setup(true);
        this.top = window.getScrollTop() + (window.getHeight() / 15);
        this.center.setStyles({ top: this.top + 'px', display: '' });
        this.fx.overlay.start(0.8);
        return this.changeLink();
    },

    position: function() {
        this.overlay.setStyles({ top: window.getScrollTop() + 'px', height: window.getHeight() + 'px' });
    },

    setup: function(open) {
        var elements = $A(document.getElementsByTagName('object'));
        if (window.ie) elements.extend(document.getElementsByTagName('select'));
        elements.each(function(el) { el.style.visibility = open ? 'hidden' : ''; });
        var fn = open ? 'addEvent' : 'removeEvent';
        //window[fn]('scroll', this.eventPosition)[fn]('resize', this.eventPosition);
        window[fn]('scroll', this.eventPosition);
        window[fn]('resize', this.eventPosition);
        document[fn]('keydown', this.eventKeyDown);
        this.step = 0;
    },

    keyboardListener: function(event) {
        this.close();
    },

    changeLink: function() {
        this.step = 1;
        this.bottomContainer.style.display = 'none';
        this.fx.maplayer.hide();
        this.center.className = 'gmLoading';
        this.showAddress(decodeURI(this.link.substring(this.link.indexOf('q=') + 2)));
        this.nextEffect();
        return false;
    },

    nextEffect: function() {
        switch (this.step++) {
            case 1:
                this.center.className = '';

                //this.caption.setHTML("<a href=\"" + this.link + "\" target=\"_blank\">Go to Google Maps</a>");
                if (this.center.clientHeight != this.maplayer.offsetHeight) {
                    this.fx.resize.start({ height: this.maplayer.offsetHeight, width: this.maplayer.offsetWidth, marginLeft: -this.maplayer.offsetWidth / 2 });
                    break;
                }
                this.step++;
            case 2:
                this.bottomContainer.setStyles({ top: (this.top + this.center.clientHeight) + 'px', height: '0px', marginLeft: this.center.style.marginLeft, width: this.center.clientWidth + 'px', display: '' });
                this.fx.maplayer.start(1);
                break;
            case 3:
                if (this.options.animateCaption) {
                    this.fx.bottom.set(-this.bottom.offsetHeight);
                    this.bottomContainer.style.height = '';
                    this.fx.bottom.start(0);
                    break;
                }
                this.bottomContainer.style.height = '';
            case 4:
                this.step = 0;
        }
    },

    close: function() {
        if (this.step < 0) return;
        this.step = -1;
        for (var f in this.fx) this.fx[f].stop();
        this.center.style.display = this.bottomContainer.style.display = 'none';
        this.fx.overlay.chain(this.setup.pass(false, this)).start(0);
        return false;
    },

    showAddress: function(address) {
        // modified by Matt to use the coordinates supplied rather than try and geocode
        var coords = address.split(',');
        var glatlng = new GLatLng(coords[0], coords[1]);
        if (glatlng) {
            this.map.setCenter(glatlng, 15);
            var marker = new GMarker(glatlng);
            this.map.addOverlay(marker);
            marker.openInfoWindowHtml('<strong>JPH Furniture Retail Warehouse</strong><br />Zone 1<br />Unit 55<br />Deeside Industrial Park<br />Deeside<br />Flintshire<br />CH5 2LR');
        }
        //        this.geocoder.getLatLng(
        //		address,
        //		function(point) {
        //		    if (point) {
        //		        this.map.setCenter(point, 15);
        //		        var marker = new GMarker(point);
        //		        this.map.addOverlay(marker);
        //		        this.map.openInfoWindowHtml(point, "<div id=\"mapmarker\"><strong>JPH Furniture Retail Warehouse</strong><br />Zone 1<br />Unit 55<br />Deeside Industrial Park<br />Deeside<br />Flintshire<br />CH5 2LR</div>");
        //		        //this.map.setZoom(12);
        //		    }
        //		    else {
        //		        this.close();
        //		        alert('This address cannot be found');
        //		    }
        //		} .bind(this));
    }
};
window.addEvent('domready', GMapsOverlay.init.bind(GMapsOverlay));