/*
 * PureTrak Index Page Javascript File
 * Copyright(c) 2008-2009, Pure Voice Communictions, Inc.
 * http://www.puretrak.com
 * @author Patrick Hallinan
 *
 */
 
Ext.onReady(function() {
	// -- Enable quick tips - feedback for any errors
	Ext.QuickTips.init();

	var us_outlets_store = new Ext.data.Store({
		storeId		: 'us_outlets_store',
		autoLoad	: true,
		remoteSort	: true,
		proxy: new Ext.data.HttpProxy({
			url		: '/where/get_country_outlets',
			method	: 'POST'
		}),
		baseParams	: {
			country_code	: 'US'
		},
		reader: new Ext.data.JsonReader({
			id				: 'country_iso_code',
			root			: 'results',
			successProperty	: 'success'
			}, new Ext.data.Record.create([
				{name: 'country_iso_code', type: 'string'},
				{name: 'country_name', type: 'string'},
				{name: 'total_outlets', type: 'int'},
				{name: 'country_outlets'}
			])
		)
	});
	
	var us_outlets_tpl = new Ext.XTemplate(
		'<tpl for=".">',
		'	<div class="country_data">',
		'		<div id="country_flag_name">',
		'			<table id="table_country_flag_name">',
		'				<tr valign="middle">',
		'					<td width="8%"><img src="/assets/images/where/flags/{country_iso_code}_country_flag.png"></td>',
		'					<td width="92%"> - {country_name} <span style="font-weight: normal;color: #A7A7A7;">( {total_outlets} {[values.total_outlets > 1 ? "outlets" : "outlet"]} available )</span></td>',
		'			</table>',
		'		</div>',
		'		<tpl for="country_outlets">',
		'		<div class="outlet_contaner">',
		'			<table id="table_country_outlets">',
		'				<tr>',
		'					<td class="col_left"><a href="http://www.{outlet_url}" target="_blank"><img src="/assets/images/where/outlet_logos/{outlet_image_name}"></a></td>',
		'					<td class="col_right"><div class="outlet_name_text">{outlet_name}</div><div class="outlet_url_text"><a href="http://www.{outlet_url}" target="_blank">http://www.{outlet_url}</a></div></td>',
		'				</tr>',
		'				<tpl if="xindex != xcount">',
		'					<tr>',
		'						<td colspan="2" style="padding-top:10px;padding-bottom:10px;"><img src="/assets/images/where/outlet_breaker.gif"></td>',
		'					</tr>',
		'				</tpl>',
		'			</table>',
		'		</div>',
		'		</tpl>',
		'	</div>',
		'</tpl>',
		'<div class="x-clear"></div>'
	);
	
	var us_outlets_panel = new Ext.Panel({
		id			: 'us_outlets_panel',
		autoWidth	: true,
		autoHeight	: true,
		frame		: false,
		border		: false,
		bodyStyle	: 'background:transparent;',
		renderTo	: 'us_outlets_container',
		items: new Ext.DataView({
			store	: us_outlets_store,
			tpl		: us_outlets_tpl,
			frame	: false,
			border	: false,
			itemSelector	:'div.country_data',
			emptyText		: ''
		})
	});
	
	/*var ca_outlets_store = new Ext.data.Store({
		storeId		: 'ca_outlets_store',
		autoLoad	: true,
		remoteSort	: true,
		proxy: new Ext.data.HttpProxy({
			url		: '/where/get_country_outlets',
			method	: 'POST'
		}),
		baseParams	: {
			country_code	: 'CA'
		},
		reader: new Ext.data.JsonReader({
			id				: 'country_iso_code',
			root			: 'results',
			successProperty	: 'success'
			}, new Ext.data.Record.create([
				{name: 'country_iso_code', type: 'string'},
				{name: 'country_name', type: 'string'},
				{name: 'total_outlets', type: 'int'},
				{name: 'country_outlets'}
			])
		)
	});
	
	var ca_outlets_tpl = new Ext.XTemplate(
		'<tpl for=".">',
		'	<div class="country_data">',
		'		<div id="country_flag_name">',
		'			<table id="table_country_flag_name">',
		'				<tr valign="middle">',
		'					<td width="8%"><img src="/assets/images/where/flags/{country_iso_code}_country_flag.png"></td>',
		'					<td width="92%"> - {country_name} <span style="font-weight: normal;color: #A7A7A7;">( {total_outlets} {[values.total_outlets > 1 ? "outlets" : "outlet"]} available )</span></td>',
		'			</table>',
		'		</div>',
		'		<tpl for="country_outlets">',
		'		<div class="outlet_contaner">',
		'			<table id="table_country_outlets">',
		'				<tr>',
		'					<td width="225px"><a href="http://www.{outlet_url}" target="_blank"><img src="/assets/images/where/outlet_logos/{outlet_image_name}"></a></td>',
		'					<td width="560px"><div class="outlet_name_text">{outlet_name}</div><div class="outlet_url_text"><a href="http://www.{outlet_url}" target="_blank">http://www.{outlet_url}</a></div></td>',
		'				</tr>',
		'				<tpl if="xindex != xcount">',
		'					<tr>',
		'						<td colspan="2" style="padding-top:10px;padding-bottom:10px;"><img src="/assets/images/where/outlet_breaker.gif"></td>',
		'					</tr>',
		'				</tpl>',
		'			</table>',
		'		</div>',
		'		</tpl>',
		'		</div>',
		'	</div>',
		'</tpl>',
		'<div class="x-clear"></div>'
	);
	
	var ca_outlets_panel = new Ext.Panel({
		id			: 'ca_outlets_panel',
		autoWidth	: true,
		autoHeight	: true,
		frame		: false,
		border		: false,
		bodyStyle	: 'background:transparent;',
		renderTo	: 'ca_outlets_container',
		items: new Ext.DataView({
			store	: ca_outlets_store,
			tpl		: ca_outlets_tpl,
			frame	: false,
			border	: false,
			itemSelector	:'div.country_data',
			emptyText		: ''
		})
	});*/
	
	var au_outlets_store = new Ext.data.Store({
		storeId		: 'au_outlets_store',
		autoLoad	: true,
		remoteSort	: true,
		proxy: new Ext.data.HttpProxy({
			url		: '/where/get_country_outlets',
			method	: 'POST'
		}),
		baseParams	: {
			country_code	: 'AU'
		},
		reader: new Ext.data.JsonReader({
			id				: 'country_iso_code',
			root			: 'results',
			successProperty	: 'success'
			}, new Ext.data.Record.create([
				{name: 'country_iso_code', type: 'string'},
				{name: 'country_name', type: 'string'},
				{name: 'total_outlets', type: 'int'},
				{name: 'country_outlets'}
			])
		)
	});
	
	var au_outlets_tpl = new Ext.XTemplate(
		'<tpl for=".">',
		'	<div class="country_data">',
		'		<div id="country_flag_name">',
		'			<table id="table_country_flag_name">',
		'				<tr valign="middle">',
		'					<td width="8%"><img src="/assets/images/where/flags/{country_iso_code}_country_flag.png"></td>',
		'					<td width="92%"> - {country_name} <span style="font-weight: normal;color: #A7A7A7;">( {total_outlets} {[values.total_outlets > 1 ? "outlets" : "outlet"]} available )</span></td>',
		'			</table>',
		'		</div>',
		'		<tpl for="country_outlets">',
		'		<div class="outlet_contaner">',
		'			<table id="table_country_outlets">',
		'				<tr>',
		'					<td class="col_left"><a href="http://www.{outlet_url}" target="_blank"><img src="/assets/images/where/outlet_logos/{outlet_image_name}"></a></td>',
		'					<td class="col_right"><div class="outlet_name_text">{outlet_name}</div><div class="outlet_url_text"><a href="http://www.{outlet_url}" target="_blank">http://www.{outlet_url}</a></div></td>',
		'				</tr>',
		'				<tpl if="xindex != xcount">',
		'					<tr>',
		'						<td colspan="2" style="padding-top:10px;padding-bottom:10px;"><img src="/assets/images/where/outlet_breaker.gif"></td>',
		'					</tr>',
		'				</tpl>',
		'			</table>',
		'		</div>',
		'		</tpl>',
		'	</div>',
		'</tpl>',
		'<div class="x-clear"></div>'
	);
	
	var au_outlets_panel = new Ext.Panel({
		id			: 'au_outlets_panel',
		autoWidth	: true,
		autoHeight	: true,
		frame		: false,
		border		: false,
		bodyStyle	: 'background:transparent;',
		renderTo	: 'au_outlets_container',
		items: new Ext.DataView({
			store	: au_outlets_store,
			tpl		: au_outlets_tpl,
			frame	: false,
			border	: false,
			itemSelector	:'div.country_data',
			emptyText		: ''
		})
	});
	
	var be_outlets_store = new Ext.data.Store({
		storeId		: 'be_outlets_store',
		autoLoad	: true,
		remoteSort	: true,
		proxy: new Ext.data.HttpProxy({
			url		: '/where/get_country_outlets',
			method	: 'POST'
		}),
		baseParams	: {
			country_code	: 'BE'
		},
		reader: new Ext.data.JsonReader({
			id				: 'country_iso_code',
			root			: 'results',
			successProperty	: 'success'
			}, new Ext.data.Record.create([
				{name: 'country_iso_code', type: 'string'},
				{name: 'country_name', type: 'string'},
				{name: 'total_outlets', type: 'int'},
				{name: 'country_outlets'}
			])
		)
	});
	
	var be_outlets_tpl = new Ext.XTemplate(
		'<tpl for=".">',
		'	<div class="country_data">',
		'		<div id="country_flag_name">',
		'			<table id="table_country_flag_name">',
		'				<tr valign="middle">',
		'					<td width="8%"><img src="/assets/images/where/flags/{country_iso_code}_country_flag.png"></td>',
		'					<td width="92%"> - {country_name} <span style="font-weight: normal;color: #A7A7A7;">( {total_outlets} {[values.total_outlets > 1 ? "outlets" : "outlet"]} available )</span></td>',
		'			</table>',
		'		</div>',
		'		<tpl for="country_outlets">',
		'		<div class="outlet_contaner">',
		'			<table id="table_country_outlets">',
		'				<tr>',
		'					<td width="225px"><a href="http://www.{outlet_url}" target="_blank"><img src="/assets/images/where/outlet_logos/{outlet_image_name}"></a></td>',
		'					<td width="560px"><div class="outlet_name_text">{outlet_name}</div><div class="outlet_url_text"><a href="http://www.{outlet_url}" target="_blank">http://www.{outlet_url}</a></div></td>',
		'				</tr>',
		'				<tpl if="xindex != xcount">',
		'					<tr>',
		'						<td colspan="2" style="padding-top:10px;padding-bottom:10px;"><img src="/assets/images/where/outlet_breaker.gif"></td>',
		'					</tr>',
		'				</tpl>',
		'			</table>',
		'		</div>',
		'		</tpl>',
		'		</div>',
		'	</div>',
		'</tpl>',
		'<div class="x-clear"></div>'
	);
	
	var be_outlets_panel = new Ext.Panel({
		id			: 'be_outlets_panel',
		autoWidth	: true,
		autoHeight	: true,
		frame		: false,
		border		: false,
		bodyStyle	: 'background:transparent;',
		renderTo	: 'be_outlets_container',
		items: new Ext.DataView({
			store	: be_outlets_store,
			tpl		: be_outlets_tpl,
			frame	: false,
			border	: false,
			itemSelector	:'div.country_data',
			emptyText		: ''
		})
	});
	
	var id_outlets_store = new Ext.data.Store({
		storeId		: 'id_outlets_store',
		autoLoad	: true,
		remoteSort	: true,
		proxy: new Ext.data.HttpProxy({
			url		: '/where/get_country_outlets',
			method	: 'POST'
		}),
		baseParams	: {
			country_code	: 'ID'
		},
		reader: new Ext.data.JsonReader({
			id				: 'country_iso_code',
			root			: 'results',
			successProperty	: 'success'
			}, new Ext.data.Record.create([
				{name: 'country_iso_code', type: 'string'},
				{name: 'country_name', type: 'string'},
				{name: 'total_outlets', type: 'int'},
				{name: 'country_outlets'}
			])
		)
	});
	
	var id_outlets_tpl = new Ext.XTemplate(
		'<tpl for=".">',
		'	<div class="country_data">',
		'		<div id="country_flag_name">',
		'			<table id="table_country_flag_name">',
		'				<tr valign="middle">',
		'					<td width="8%"><img src="/assets/images/where/flags/{country_iso_code}_country_flag.png"></td>',
		'					<td width="92%"> - {country_name} <span style="font-weight: normal;color: #A7A7A7;">( {total_outlets} {[values.total_outlets > 1 ? "outlets" : "outlet"]} available )</span></td>',
		'			</table>',
		'		</div>',
		'		<tpl for="country_outlets">',
		'		<div class="outlet_contaner">',
		'			<table id="table_country_outlets">',
		'				<tr>',
		'					<td width="225px"><a href="http://www.{outlet_url}" target="_blank"><img src="/assets/images/where/outlet_logos/{outlet_image_name}"></a></td>',
		'					<td width="560px"><div class="outlet_name_text">{outlet_name}</div><div class="outlet_url_text"><a href="http://www.{outlet_url}" target="_blank">http://www.{outlet_url}</a></div></td>',
		'				</tr>',
		'				<tpl if="xindex != xcount">',
		'					<tr>',
		'						<td colspan="2" style="padding-top:10px;padding-bottom:10px;"><img src="/assets/images/where/outlet_breaker.gif"></td>',
		'					</tr>',
		'				</tpl>',
		'			</table>',
		'		</div>',
		'		</tpl>',
		'		</div>',
		'	</div>',
		'</tpl>',
		'<div class="x-clear"></div>'
	);
	
	var id_outlets_panel = new Ext.Panel({
		id			: 'id_outlets_panel',
		autoWidth	: true,
		autoHeight	: true,
		frame		: false,
		border		: false,
		bodyStyle	: 'background:transparent;',
		renderTo	: 'id_outlets_container',
		items: new Ext.DataView({
			store	: id_outlets_store,
			tpl		: id_outlets_tpl,
			frame	: false,
			border	: false,
			itemSelector	:'div.country_data',
			emptyText		: ''
		})
	});
	
	var jp_outlets_store = new Ext.data.Store({
		storeId		: 'jp_outlets_store',
		autoLoad	: true,
		remoteSort	: true,
		proxy: new Ext.data.HttpProxy({
			url		: '/where/get_country_outlets',
			method	: 'POST'
		}),
		baseParams	: {
			country_code	: 'JP'
		},
		reader: new Ext.data.JsonReader({
			id				: 'country_iso_code',
			root			: 'results',
			successProperty	: 'success'
			}, new Ext.data.Record.create([
				{name: 'country_iso_code', type: 'string'},
				{name: 'country_name', type: 'string'},
				{name: 'total_outlets', type: 'int'},
				{name: 'country_outlets'}
			])
		)
	});
	
	var jp_outlets_tpl = new Ext.XTemplate(
		'<tpl for=".">',
		'	<div class="country_data">',
		'		<div id="country_flag_name">',
		'			<table id="table_country_flag_name">',
		'				<tr valign="middle">',
		'					<td width="8%"><img src="/assets/images/where/flags/{country_iso_code}_country_flag.png"></td>',
		'					<td width="92%"> - {country_name} <span style="font-weight: normal;color: #A7A7A7;">( {total_outlets} {[values.total_outlets > 1 ? "outlets" : "outlet"]} available )</span></td>',
		'			</table>',
		'		</div>',
		'		<tpl for="country_outlets">',
		'		<div class="outlet_contaner">',
		'			<table id="table_country_outlets">',
		'				<tr>',
		'					<td width="225px"><a href="http://www.{outlet_url}" target="_blank"><img src="/assets/images/where/outlet_logos/{outlet_image_name}"></a></td>',
		'					<td width="560px"><div class="outlet_name_text">{outlet_name}</div><div class="outlet_url_text"><a href="http://www.{outlet_url}" target="_blank">http://www.{outlet_url}</a></div></td>',
		'				</tr>',
		'				<tpl if="xindex != xcount">',
		'					<tr>',
		'						<td colspan="2" style="padding-top:10px;padding-bottom:10px;"><img src="/assets/images/where/outlet_breaker.gif"></td>',
		'					</tr>',
		'				</tpl>',
		'			</table>',
		'		</div>',
		'		</tpl>',
		'		</div>',
		'	</div>',
		'</tpl>',
		'<div class="x-clear"></div>'
	);
	
	var jp_outlets_panel = new Ext.Panel({
		id			: 'jp_outlets_panel',
		autoWidth	: true,
		autoHeight	: true,
		frame		: false,
		border		: false,
		bodyStyle	: 'background:transparent;',
		renderTo	: 'jp_outlets_container',
		items: new Ext.DataView({
			store	: jp_outlets_store,
			tpl		: jp_outlets_tpl,
			frame	: false,
			border	: false,
			itemSelector	:'div.country_data',
			emptyText		: ''
		})
	});
	
	var nl_outlets_store = new Ext.data.Store({
		storeId		: 'nl_outlets_store',
		autoLoad	: true,
		remoteSort	: true,
		proxy: new Ext.data.HttpProxy({
			url		: '/where/get_country_outlets',
			method	: 'POST'
		}),
		baseParams	: {
			country_code	: 'NL'
		},
		reader: new Ext.data.JsonReader({
			id				: 'country_iso_code',
			root			: 'results',
			successProperty	: 'success'
			}, new Ext.data.Record.create([
				{name: 'country_iso_code', type: 'string'},
				{name: 'country_name', type: 'string'},
				{name: 'total_outlets', type: 'int'},
				{name: 'country_outlets'}
			])
		)
	});
	
	var nl_outlets_tpl = new Ext.XTemplate(
		'<tpl for=".">',
		'	<div class="country_data">',
		'		<div id="country_flag_name">',
		'			<table id="table_country_flag_name">',
		'				<tr valign="middle">',
		'					<td width="8%"><img src="/assets/images/where/flags/{country_iso_code}_country_flag.png"></td>',
		'					<td width="92%"> - {country_name} <span style="font-weight: normal;color: #A7A7A7;">( {total_outlets} {[values.total_outlets > 1 ? "outlets" : "outlet"]} available )</span></td>',
		'			</table>',
		'		</div>',
		'		<tpl for="country_outlets">',
		'		<div class="outlet_contaner">',
		'			<table id="table_country_outlets">',
		'				<tr>',
		'					<td width="225px"><a href="http://www.{outlet_url}" target="_blank"><img src="/assets/images/where/outlet_logos/{outlet_image_name}"></a></td>',
		'					<td width="560px"><div class="outlet_name_text">{outlet_name}</div><div class="outlet_url_text"><a href="http://www.{outlet_url}" target="_blank">http://www.{outlet_url}</a></div></td>',
		'				</tr>',
		'				<tpl if="xindex != xcount">',
		'					<tr>',
		'						<td colspan="2" style="padding-top:10px;padding-bottom:10px;"><img src="/assets/images/where/outlet_breaker.gif"></td>',
		'					</tr>',
		'				</tpl>',
		'			</table>',
		'		</div>',
		'		</tpl>',
		'		</div>',
		'	</div>',
		'</tpl>',
		'<div class="x-clear"></div>'
	);
	
	var nl_outlets_panel = new Ext.Panel({
		id			: 'nl_outlets_panel',
		autoWidth	: true,
		autoHeight	: true,
		frame		: false,
		border		: false,
		bodyStyle	: 'background:transparent;',
		renderTo	: 'nl_outlets_container',
		items: new Ext.DataView({
			store	: nl_outlets_store,
			tpl		: nl_outlets_tpl,
			frame	: false,
			border	: false,
			itemSelector	:'div.country_data',
			emptyText		: ''
		})
	});
	
	var pe_outlets_store = new Ext.data.Store({
		storeId		: 'pe_outlets_store',
		autoLoad	: true,
		remoteSort	: true,
		proxy: new Ext.data.HttpProxy({
			url		: '/where/get_country_outlets',
			method	: 'POST'
		}),
		baseParams	: {
			country_code	: 'PE'
		},
		reader: new Ext.data.JsonReader({
			id				: 'country_iso_code',
			root			: 'results',
			successProperty	: 'success'
			}, new Ext.data.Record.create([
				{name: 'country_iso_code', type: 'string'},
				{name: 'country_name', type: 'string'},
				{name: 'total_outlets', type: 'int'},
				{name: 'country_outlets'}
			])
		)
	});
	
	var pe_outlets_tpl = new Ext.XTemplate(
		'<tpl for=".">',
		'	<div class="country_data">',
		'		<div id="country_flag_name">',
		'			<table id="table_country_flag_name">',
		'				<tr valign="middle">',
		'					<td width="8%"><img src="/assets/images/where/flags/{country_iso_code}_country_flag.png"></td>',
		'					<td width="92%"> - {country_name} <span style="font-weight: normal;color: #A7A7A7;">( {total_outlets} {[values.total_outlets > 1 ? "outlets" : "outlet"]} available )</span></td>',
		'			</table>',
		'		</div>',
		'		<tpl for="country_outlets">',
		'		<div class="outlet_contaner">',
		'			<table id="table_country_outlets">',
		'				<tr>',
		'					<td width="225px"><a href="http://www.{outlet_url}" target="_blank"><img src="/assets/images/where/outlet_logos/{outlet_image_name}"></a></td>',
		'					<td width="560px"><div class="outlet_name_text">{outlet_name}</div><div class="outlet_url_text"><a href="http://www.{outlet_url}" target="_blank">http://www.{outlet_url}</a></div></td>',
		'				</tr>',
		'				<tpl if="xindex != xcount">',
		'					<tr>',
		'						<td colspan="2" style="padding-top:10px;padding-bottom:10px;"><img src="/assets/images/where/outlet_breaker.gif"></td>',
		'					</tr>',
		'				</tpl>',
		'			</table>',
		'		</div>',
		'		</tpl>',
		'		</div>',
		'	</div>',
		'</tpl>',
		'<div class="x-clear"></div>'
	);
	
	var pe_outlets_panel = new Ext.Panel({
		id			: 'pe_outlets_panel',
		autoWidth	: true,
		autoHeight	: true,
		frame		: false,
		border		: false,
		bodyStyle	: 'background:transparent;',
		renderTo	: 'pe_outlets_container',
		items: new Ext.DataView({
			store	: pe_outlets_store,
			tpl		: pe_outlets_tpl,
			frame	: false,
			border	: false,
			itemSelector	:'div.country_data',
			emptyText		: ''
		})
	});
	
});