google.load("maps", "2");
function initialize() {
    var map = new GMap2(document.getElementById("contact_map"));
    map.enableScrollWheelZoom();
    map.addControl(new GMapTypeControl());
    map.setUI(map.getDefaultUI());
    map.removeMapType(G_DEFAULT_MAP_TYPES);
    map.removeMapType(G_SATELLITE_MAP);
    map.removeMapType(G_PHYSICAL_MAP);
    map.removeMapType(G_HYBRID_MAP);
    map.removeMapType(G_NORMAL_MAP);
    var mnpaIcon = new GIcon();
    mnpaIcon.image = 'http://mynpa.phusemarketing.co.uk/res/builtin/map/image.png';
    mnpaIcon.printImage = 'http://mynpa.phusemarketing.co.uk/res/builtin/map/printImage.gif';
    mnpaIcon.mozPrintImage = 'http://mynpa.phusemarketing.co.uk/res/builtin/map/mozPrintImage.gif';
    mnpaIcon.iconSize = new GSize(34,34);
    mnpaIcon.transparent = 'http://mynpa.phusemarketing.co.uk/res/builtin/map/transparent.png';
    mnpaIcon.iconAnchor = new GPoint(0,34);
    mnpaIcon.infoWindowAnchor = new GPoint(17,0);
    mnpaIcon.imageMap = [22,0,24,1,26,2,27,3,28,4,29,5,30,6,31,7,31,8,32,9,32,10,33,11,33,12,33,13,33,14,33,15,33,16,33,17,33,18,33,19,33,20,33,21,33,22,32,23,32,24,31,25,31,26,30,27,29,28,28,29,27,30,26,31,24,32,22,33,11,33,9,32,7,31,6,30,5,29,4,28,3,27,2,26,2,25,1,24,1,23,0,22,0,21,0,20,0,19,0,18,0,17,0,16,0,15,0,14,0,13,0,12,0,11,1,10,1,9,2,8,2,7,3,6,4,5,5,4,6,3,7,2,9,1,11,0];
    markerOptions = { icon:mnpaIcon };
    map.setCenter(new google.maps.LatLng(53.40322555487554,-2.9778528213500977),16);
    var point =  new GLatLng(parseFloat(53.40480541510773),parseFloat(-2.982133626937866));
    var marker = new GMarker(point,markerOptions);
    map.addOverlay(marker);
    GEvent.addListener(marker, "click", function() {
        marker.openCustomInfoWindow("<p class=\"map_title\">My Networking PA Ltd.</p><p class=\"map_description\">4th Floor,<br/>72 Church Street,<br/>Liverpool, L1 3AY</p><a href=\"http://maps.google.co.uk/maps?q=53.40480541510773,-2.982133626937866\" class=\"map_link\" target=\"_blank\">View larger map</a>");
        map.panTo(point);
    });
    
    function resetMarkers() {
        var marker = new GMarker(point,markerOptions);
        map.addOverlay(marker);
        GEvent.addListener(marker, "click", function() {
            marker.openCustomInfoWindow("<p class=\"map_title\">My Networking PA Ltd.</p><p class=\"map_description\">4th Floor,<br/>72 Church Street,<br/>Liverpool, L1 3AY</p><a href=\"http://maps.google.co.uk/maps?q=53.40480541510773,-2.982133626937866\" class=\"map_link\" target=\"_blank\">View larger map</a>");
            map.panTo(point);
        });
    }
    
    function CustomInfoWindow(marker,html,width) {
        this.html_ = html;
        this.width_ = ( width ? width + 'px' : 'auto');
        this.marker_ = marker;
    }

    CustomInfoWindow.prototype = new GOverlay();
    CustomInfoWindow.prototype.initialize = function(map) {
        this.map_ = map;
        var container = document.createElement("div");
        container.style.display='none';
        map.getPane(G_MAP_FLOAT_PANE).appendChild(container);
        this.container_ = container;
    }

    CustomInfoWindow.prototype.remove = function() { this.container_.parentNode.removeChild(this.container_); }

    CustomInfoWindow.prototype.copy = function() { return new CustomInfoWindow(this.marker_,this.html_,this.width_); }

    CustomInfoWindow.prototype.redraw = function(force) {
        if (!force) return;
        var content = document.createElement("span");
        content.innerHTML = this.html_;
        content.style.margin='0';
        content.style.padding='0';
        content.style.border='0';
        content.style.display='inline';
        content.style.color='white';
        content.style.fontSize='11px';

        if(!this.width_ || this.width_=='auto' || this.width_ <= 0) {
            content.style.minWidth = '240px';
            content.style.maxWidth = '240px';
            content.style.width = '240px';
        } else {
            content.style.width= '240px';
        }
        content.style.visibility='hidden';
        this.map_.getContainer().appendChild(content);
        var contentWidth = content.offsetWidth;
        var contentHeight = content.offsetHeight;
        content.parentNode.removeChild(content);
        content.style.visibility='visible';
        content.style.width='240px';
        content.style.height='125px';
        content.style.position='absolute';
        content.style.left='55px';
        content.style.top='105px';
        content.style.background='#333';
        var wrapper = document.createElement("div");
        wrapper.appendChild(content);

        var wrapperParts = {
            arrow:{l:37, t:155, w:18, h:16},
            close:{l:275, t:117, w:8, h:8}
        }

        for (i in wrapperParts) {
            var img = document.createElement('img');
            img.src = 'http://mynpa.phusemarketing.co.uk/res/builtin/map/' + i + '.png';
            img.style.position='absolute';
            img.style.cursor='pointer';
            img.style.top=wrapperParts[i].t+'px';
            img.style.left=wrapperParts[i].l+'px';
            img.style.width=wrapperParts[i].w+'px';
            img.style.height=wrapperParts[i].h+'px';
            wrapper.appendChild(img);
            wrapperParts[i].img = img;
        }
        var marker = this.marker_;
	    GEvent.addDomListener(wrapperParts.close.img, "click", function() {
		    marker.closeCustomInfoWindow();
	    });

        var pixelLocation = this.map_.fromLatLngToDivPixel(
        this.marker_.getPoint()
        );

        this.container_.style.position='absolute';
        this.container_.style.left = (pixelLocation.x-3) + "px";
        this.container_.style.top = (pixelLocation.y
            - contentHeight
            - 25
            - this.marker_.getIcon().iconSize.height
        ) + "px";
    	
        this.container_.style.border = '0';
        this.container_.style.margin = '0';
        this.container_.style.padding = '0';
        this.container_.style.display = 'block';
        this.container_.appendChild(wrapper);
        var mapNE = this.map_.fromLatLngToDivPixel( this.map_.getBounds().getNorthEast() );
        var panX=0;
        var panY=0;
        if(this.container_.offsetTop < mapNE.y) { panY = mapNE.y - this.container_.offsetTop; }
        if(this.container_.offsetLeft+contentWidth+10 > mapNE.x) { panX = (this.container_.offsetLeft+contentWidth+10) - mapNE.x; }
        if(panX!=0 || panY!=0) { this.map_.panBy(new GSize(-panX-10,panY+30));  }
    }

    GMarker.prototype.CustomInfoWindowInstance = null;
    GMarker.prototype.openCustomInfoWindow = function(content,width) {
        if(this.CustomInfoWindowInstance == null) {
            this.CustomInfoWindowInstance = new CustomInfoWindow(
                this,
                content,
                width
            );
            map.addOverlay(this.CustomInfoWindowInstance);
        }
    }

    GMarker.prototype.closeCustomInfoWindow = function() {
        if(this.CustomInfoWindowInstance != null) {
            map.removeOverlay(this.CustomInfoWindowInstance);
            this.CustomInfoWindowInstance = null;
        }
    }

    $(function(){
        var speed = 500;
        $("#contact_map").css({"width":"280px","height":"110px"});
        $("#contact_map_container").hover(function(){
            $(this).stop().animate({width:"632px",height:"400px"},speed);
            $("#contact_map").stop().animate({width:"612px",height:"390px"},speed);
            map.panTo(new google.maps.LatLng(53.40480541510773,-2.982133626937866));
        },function(){
            map.clearOverlays();
            resetMarkers();
            $(this).stop().animate({width:"300px",height:"120px"},speed);
            $("#contact_map").stop().animate({width:"280px",height:"110px"},speed);
            map.panTo(new google.maps.LatLng(53.40322555487554,-2.9778528213500977));
        }).css({"width":"300px","height":"120px"});
    });
}
google.setOnLoadCallback(initialize);
