// JavaScript Document

var map = null;
function gMapInit() {
    var latlng = new google.maps.LatLng(40.722294,-74.002503);
    var myOptions = {
	zoom: 15,
	center: latlng,
	mapTypeControl: true,
	navigationControl: true,
	mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("Map_canvas"), myOptions);

    setBeardwoodMarker(latlng);

    google.maps.event.addListener(map, 'click', function() {
	window.open('http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Beardwood,+40+Wooster+St.,+4th+Floor,+New+York,+NY+10013&sll=40.722901,-74.004915&sspn=0.008977,0.022724&g=40+Wooster+St,+New+York,+10013&ie=UTF8&hq=Beardwood,&hnear=40+Wooster+St,+New+York,+NY+10013&ll=40.723112,-74.002469&spn=0.008977,0.022724&z=16&iwloc=A','_blank');
    });

    // Add the local businesses to the contact page
    var n;
    for (var i = 1; i <= 5; i++) {
	n = $('input#LocalBusinessName' + i).val();
	if (n && n != '') {
	    //parseInt($('input#NumFeaturedMedia').val())
	    setLocalContactMarker($('input#LocalBusinessLat' + i).val(), $('input#LocalBusinessLng' + i).val(), n, i, $('input#LocalBusinessAddr' + i).val(), $('input#LocalBusinessWebsite' + i).val());
	}
    }
}

// Add the marker for Beardwood&Co. to the map
function setBeardwoodMarker(latlng) {
    var image = new google.maps.MarkerImage('themes/beardwood/images/contact/owl.png',
        new google.maps.Size(40, 40),
        // origin for this image is 0,0.
        new google.maps.Point(0, 0),
        // anchor for this image is the middle of the bottom of the icon
        new google.maps.Point(20, 40));
    var shadow = new google.maps.MarkerImage('themes/beardwood/images/contact/shadow-owl.png',
        // The shadow image is larger in the horizontal dimension
        // while the position and offset are the same as for the main image.
        new google.maps.Size(61, 40),
        new google.maps.Point(0, 0),
        new google.maps.Point(20, 40));
        // Shapes define the clickable region of the icon.
        // The type defines an HTML <area> element 'poly' which
        // traces out a polygon as a series of X,Y points. The final
        // coordinate closes the poly by connecting to the first coordinate.
    var shape = {
        coord: [1, 1, 1, 40, 40, 40, 40, 1],
        type: 'poly'
    };
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: "Beardwood&Co.",
        zIndex: 6
    });

    var contentString = '<div id="content">'+
	'<h1 id="firstHeading" class="firstHeading">Beardwood&amp;Co</h1>'+
	'<div id="bodyContent">'+
	'<p>Brand, Insight &amp; Innovation</p>'+
	'<p>40 Wooster St</p>' +
	'<p>4th Floor</p>' + 
	'<p>New York, NY 10013</p>' +
	'<p><a style="color: #E31937" href="http://www.beardwood.com/">www.beardwood.com</a></p>'+
	'</div>'+
	'</div>';

    var infowindow = new google.maps.InfoWindow({
	content: contentString
    });
		
    //infowindow.open(map, marker);

    google.maps.event.addListener(marker, 'click', function() {
	infowindow.open(map, marker);
    });
}

function setLocalContactMarker(lat, lng, title, pos, addr, url) {
    var myLatLng = new google.maps.LatLng(lat, lng);
    var myImage = new google.maps.MarkerImage('themes/beardwood/images/contact/marker' + pos + '.png',
        new google.maps.Size(40, 40),
        // origin for this image is 0,0.
        new google.maps.Point(0, 0),
        // anchor for this image is the middle of the bottom of the icon
        new google.maps.Point(20, 40));
    var myShadow = new google.maps.MarkerImage('themes/beardwood/images/contact/shadow-marker.png',
        // The shadow image is larger in the horizontal dimension
        // while the position and offset are the same as for the main image.
        new google.maps.Size(61, 40),
        new google.maps.Point(0, 0),
        new google.maps.Point(20, 40));
    var shape = {
        coord: [1, 1, 1, 40, 40, 40, 40, 1],
        type: 'poly'
    };
    var marker = new google.maps.Marker({
	position: myLatLng, 
	map: map, 
	title: title,
	icon: myImage,
	shape: shape,
	shadow: myShadow
    });

    var contentString = '<div id="content"><h1 id="firstHeading" class="firstHeading">' + title + '</h1><div id="bodyContent"><p>' + addr + '</p><p>New York, NY</p><p><a style="color: #E31937" href="' + url + '" target="_blank">' + url + '</a></p></div></div>';
    var infowindow = new google.maps.InfoWindow({
	content: contentString
    });
    google.maps.event.addListener(marker, 'click', function() {
	infowindow.open(map, marker);
    });
}