var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var infowindow;

$(document).ready(function(){
    $("#getDirections").click(showMap);
});

function showMap(){
    $("#page").before('<div id="mapHolder"><div id="map_canvas"></div><div id="closeMap"><a href="#">&nbsp;</a></div></div>');
    initialize();
    
    $("#mapHolder").css({
       "left": ($(document).width()/2) - 325
    });
    $("#mapHolder").animate({
        "top": ($(document).height()/2) - 175
    },500,"linear");
    
    $("#closeMap").hover(function(){
        $("#mapHolder").addClass("hover");
    },function(){
        $("#mapHolder").removeClass("hover");
    });
    
    $("#closeMap").mousedown(function(){
       $("#mapHolder").addClass("active"); 
    });
    $("#closeMap").mouseup(function(){
       $("#mapHolder").removeClass("active"); 
    });
    
    $("#closeMap").click(function(){
        $("#closeMap a").addClass("active");
        $("#mapHolder").addClass("active");
        
        $("#mapHolder").animate({
            "opacity": 0
        },500,"linear",function(){
            $("#mapHolder").remove();
        });
    });
    return false;
}

function initialize() {
	var latlng = new google.maps.LatLng(55.897358, -4.0823);
	directionsDisplay = new google.maps.DirectionsRenderer();
	var settings = {
		zoom: 13,
		center: latlng,
		mapTypeControl: true,
		mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
		navigationControl: true,
		navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
	directionsDisplay.setMap(map);
	var contentString = '<div id="tagContent">'+
	'<div id="siteNotice">'+
	'</div>'+
    '<img id="logo" src="images/logosmall.gif" alt="Logo" />'+
	'<h1 id="firstHeading" class="firstHeading">Dog and Hound Pet Services</h1>'+
    '<div id="closeWindow"><a href="#" onclick="closeWindow();return false;">&nbsp;</a></div>'+
    '<div class="clear"></div>'+
	'<div id="bodyContent">'+
	'<p>Find your way here from:</p>'+
	'<form action="index.html" onsubmit="calcRoute();return false;">'+
	'<input type="text" id="start" value="">'+
	'<input type="submit" class="button" value="Find directions"></form>'+
	'</div>'+
	'</div>';
	infowindow = new google.maps.InfoWindow({
		content: contentString,
		maxWidth:400
	});

	var companyImage = new google.maps.MarkerImage('images/paw.png',
		new google.maps.Size(50,50),
		new google.maps.Point(0,0),
		new google.maps.Point(50,50)
	);

	var companyShadow = new google.maps.MarkerImage('images/paw_shadow.png',
		new google.maps.Size(70,50),
		new google.maps.Point(0,0),
		new google.maps.Point(60, 50));

	var companyPos = new google.maps.LatLng(55.8898, -4.0823);

	var companyMarker = new google.maps.Marker({
		position: companyPos,
		map: map,
		icon: "images/paw.png",
		shadow: "images/paw_shadow.png",
		title:"Dog and Hound Pet Services",
		zIndex: 3});
	
	

	
	google.maps.event.addListener(companyMarker, 'click', function() {
		infowindow.open(map,companyMarker);
        removeClose();
        setTimeout("removeClose()",100);
        setTimeout("removeClose()",200);
        setTimeout("removeClose()",300);
        setTimeout("removeClose()",400);
        setTimeout("removeClose()",500);        
	});
    infowindow.open(map,companyMarker);
    removeClose();
    setTimeout("removeClose()",100);    
    setTimeout("removeClose()",200);    
    setTimeout("removeClose()",300);
    setTimeout("removeClose()",400);
    setTimeout("removeClose()",500);
    
}

function closeWindow()
{
    infowindow.close();
}

function removeClose()
{
    $("img[src*=iw_close]").css({"display":"none"});
}

function calcRoute() {
	var start = document.getElementById("start").value;
	var end = "55.8898, -4.0823";
	var request = {
		origin:start,
		destination:end,
		travelMode: google.maps.DirectionsTravelMode.DRIVING
	};
	
	directionsService.route(request, function(response, status) {
		if (status == google.maps.DirectionsStatus.OK) {
			directionsDisplay.setDirections(response);
		}
	});
}