var locationsContent = {
	id: 'locationsContent',
    layout: 'border',
    autoScroll: true,
    frame: false,
    defaults: {
        bodyStyle: 'background-color:lightgrey; border:none; color:black',
        bodyClass: 'text-normal'
    },
    border: false,
    style: 'padding: 10 10 10 10',
    items: [{
    	region: 'north',
    	height: 50,
    	html: '<span class="text-normal" style="font-weight:bold">Camden Body & Fender has three convenient locations in the Baltimore area' +
    			' to serve all of your auto collision and mechanical repair needs.</span>'
    },{
    	region: 'west',
        width: 160,
	    listeners: {
	    	render : function(){
	    		var szLocationsHtml = '<span class="text-normal" style="font-weight:bold;text-decoration:underline">Click a location below:</span><br/><br/>';
				Ext.each(shops, function(item, index, allItems){
					szLocationsHtml +=
						'<a class="text-normal-nocolor" style="font-weight:bold" href="javascript:ViewLocation(' + index + ')">' + item.location + '</a><br/>' +
		    			item.address + '<br/>' +
		    			item.city + ', ' + item.state + ' ' + item.zip + '<br/>' +
		    			item.phone + '<br/>' +
		    			'<br/>';
				});
				this.body.createChild({tag: 'div', html: szLocationsHtml});
    		}
	    }
    },{
    	region: 'center',
    	html: '<div id="global_map" style="width: 450px; height: 300px"></div>',
	    listeners: {
	    	afterrender : function(){
    			showGlobalMap();
    		}
	    }
    }]
};

function ViewLocation(nShopIndex)
{
	var shop = shops[nShopIndex];
    var win = new Ext.Window({
		renderTo: 'locationsContent',
		layout: 'fit',
		title: 'Location details: ' + shop.location,
        width: 520,
        height: 400,
        maximizable: true,
        closeAction: 'close',
        plain: true,
		modal: true,
		border: false,
	    items: [{
	    	layout: 'table',
	    	width: 480,
	    	layoutConfig: {columns:2},
	    	autoScroll: true,
	    	bodyStyle: 'padding:10px; background-color:lightgrey',
	    	border: false,
		    defaults: {
		    	bodyStyle: 'background-color:lightgrey; color: black; border: none;',
		    	frame: false
	    	},
	        items: [{
	        	width: 270,
	        	height: 150,
				html:	'<span style="font-weight:bold">' + shop.dba + '</span><br/>' +
		    			shop.address + '<br/>' +
		    			shop.city + ', ' + shop.state + ' ' + shop.zip + '<br/>' +
		    			'phone: ' + shop.phone + '<br/>' +
		    			'fax: ' + shop.fax + '<br/>' +
		    			'email: ' + shop.email + '<br/>' +
		    			'hours: ' + shop.hours + '<br/>' +
		    			'<a href="javascript:Scheduler(\'' + shop.id + '\')">Schedule an appointment online</a>'
	        },{
				width: 200,
				height: 150,
				html:	'<img style="width:200px;height:150px" src="/images/' + shop.thumbnail + '" />'
	        },{
	        	colspan: 2,
	        	width: 470,
			    listeners: {
			    	render : function(){
			    		var szDirectionsHtml = '';
			    		Ext.each(shop.directions_list, function(directions, index) {
							szDirectionsHtml +=
								'<span style="font-weight:bold">' + directions.header + '</span>: ' +
				    			directions.body +
				    			'<br/>';
			    		});
			    		szDirectionsHtml += '<br/>';
						this.body.createChild({tag: 'div', html: szDirectionsHtml});
		    		}
			    }
	        },{
	        	colspan: 2,
	        	width: 470,
	        	height: 310,
	        	html: '<div id="shop_map" style="width: 470px; height: 300px"></div>',
			    listeners: {
			    	afterrender : function(){
		    			showShopMap(shop);
		    		}
			    }
	    	}]
	    }],
		buttonAlign: 'left',
        fbar: [{
			xtype: "button",
	        iconCls: "button-print",
	        text: "&nbsp;Print",
	        listeners: {
	            click: function(){
	            	PrintLocation(nShopIndex);
	            }
	        }
        },{
        	xtype: 'tbfill'
        },{
        	xtype: "button",
            text: 'Close',
            handler: function(){
                win.hide();
                win.destroy();
            }
        }]
    });
        
    win.show();
}

//
// Print function
//
function PrintLocation(nShopIndex)
{
	var shop = shops[nShopIndex];
    
    var html = new Ext.XTemplate(
      '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
      '<html>',
        '<head>',
          '<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />',
          '<title>Location details: {location}</title>',
        '</head>',
        '<body>',
          '<table style="width:480px">',
			'<tr>',
				'<td style="width:270px;height:150px">',
					'<span style="font-weight:bold">{dba}</span><br/>',
					'{address}<br/>',
					'{city}, {state} {zip}<br/>',
					'phone: {phone}<br/>',
					'fax: {fax}<br/>',
					'email: {email}<br/>',
					'hours: {hours}<br/>',
				'</td>',
				'<td style="width:200px;height:150px">',
					'<img style="width:200px;height:150px" src="/images/{thumbnail}" />',
				'</td>',
			'</tr>',
			'<tr>',
				'<td colspan="2">',
					'<tpl for="directions_list">',
						'<span style="font-weight:bold">{header}</span>: {body}<br/>',
					'</tpl>',
				'</td>',
			'</tr>',
			'<tr>',
				'<td colspan="2">',
					'<tpl for="map_coordinates">',
						'<img style="width:470px;height:300px" src="http://maps.google.com/maps/api/staticmap?center={lat},{lng}&zoom=13&size=470x300&maptype=roadmap&sensor=false&markers=color:red|{lat},{lng}" />',
					'</tpl>',
				'</td>',
			'</tr>',
          '</table>',
        '</body>',
      '</html>'
    ).apply(shop);
    
    //open up a new printing window, write to it, print it and close
    var win = window.open('', 'printshop');
    
    win.document.write(html);

	// delay print until image is loaded
    //win.print();
}

//
// Google Maps code
//
Ext.onReady(function(){
	if (GBrowserIsCompatible()) {
		Ext.EventManager.on(window, 'unload', GUnload);
	}
});

// showGlobalMap() is only called once
function showGlobalMap()
{
	var gmap = new GMap2(Ext.get("global_map").dom);

	// center & zoom
	gmap.setCenter(new GLatLng(39.416568, -76.712723), 10);
	
	// add overlay market for each shop
	Ext.each(shops, function(item, index, allItems){
		gmap.addOverlay(new GMarker(new GLatLng(item.map_coordinates.lat, item.map_coordinates.lng)));
	});
	
	// set default ui controls
	gmap.setUIToDefault();
}

// showShopMap() may be called multiple times
function showShopMap(shop)
{
	var gmap = new GMap2(Ext.get("shop_map").dom);
	
	// center & zoom
	gmap.setCenter(new GLatLng(shop.map_coordinates.lat, shop.map_coordinates.lng), 13);
	
	// add overlay market for shop
	gmap.addOverlay(new GMarker(new GLatLng(shop.map_coordinates.lat, shop.map_coordinates.lng)));
	
	// set default ui controls
	gmap.setUIToDefault();
}