<?php
// Call in the XComponents engine and options file
define('MOD_PHP', substr(PHP_SAPI, 0, 3) != 'cgi'); // Are we running as mod_php?
define('DOCROOT', 
	MOD_PHP && isset($_SERVER['DOCUMENT_ROOT']) ? 
		$_SERVER['DOCUMENT_ROOT'] : 
		(
			MOD_PHP && isset($_SERVER['SCRIPT_FILENAME']) ? 
				substr($_SERVER['SCRIPT_FILENAME'], 0, 0-strlen($_SERVER['PHP_SELF'])) : 
				(
					substr(str_repeat('../', count(explode('/', preg_replace('_/+_', '/', $_SERVER['PHP_SELF'])))-2), 0, -1) != '' ?
						substr(str_repeat('../', count(explode('/', preg_replace('_/+_', '/', $_SERVER['PHP_SELF'])))-2), 0, -1) :
						'.'
				)
		)
	);
include(DOCROOT . '/dmx/dmx_options.php');
include(DOCROOT . '/dmx/core/php/dmx_shop_handler.php');
include(DOCROOT . '/dmx/core/php/dmx_shop_components.php');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>XComponents Demo</title>
	<meta name="generator" content="BBEdit 8.5">
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<meta name="Project" content="dmClubAutumn06">
	<meta name="Source" content="01">
	<meta name="Code" content="30">
	<meta name="Rel_Version" content="1.5.0-7">
	<meta name="Date" content="14-02-2007">
	<meta name="Copyright" content="Digital Mail Limited 2005-2007">

	<!-- dmCLUB BRAND ZERO CSS -->
	<link href="/dmx/core/b0/css/core_dmclub.css" rel="stylesheet" type="text/css" media="All">
	<link href="/dmx/core/b0/css/over_dmclub.css" rel="stylesheet" type="text/css" media="All">
	<link href="/dmx/core/b0/css/print.css" rel="stylesheet" type="text/css" media="Print">
	<!-- END dmCLUB BRAND ZERO CSS -->

<?php
// Start XComponents: Initialise XComponents session in page, and add TST libraries
dmx_initialise_trolley();
dmx_include_tst();
?>
</head> <!-- XCom & TST modifications added -->

<body>
<div class="dmb0">

<script language="javascript" type="text/javascript">
<!--
// -------------------------------------------------
// Supply header information as javascript variables 
// -------------------------------------------------

pageTitle     = 'XComponents Demo';
var errMsg    = '';		

//-->			
</script>

<a name="top"></a>

<!-- ************** -->
<!-- HEADER SECTION -->
<!-- ************** -->

<!-- MAIN HEADER BAR AND BRANDING -->
<div id="header_bar">
	<div class="content" align="center">
		<table width="100%" cellpadding="0" cellspacing="0" border="0" class="limit_width_700">
			<tr>
				<td style="width: 99%; vertical-align: middle;" class="title">
					<script language="javascript" type="text/javascript">document.write(pageTitle)</script>
				</td>
				<td><img src="/dmx/core/b0/images/dmclub_header/dmclub_better_biz.gif" alt="better business through  innovative telecoms" width="164" height="71" border="0"></td>
				<td><img src="/dmx/core/b0/images/dmclub_header/dmclub_logo.gif" alt="dmClub logo" width="63" height="71" border="0"></td>
			</tr>
			<tr>
				<td></td>
				<td colspan="2"><img src="/dmx/core/b0/images/dmclub_header/dmclub_highlight.gif" alt="" width="227" height="8" border="0"></td>
			</tr>
		</table>
	</div>
</div>
<!-- END MAIN HEADER BAR AND BRANDING -->

<!-- NAV BAR -->
<div id="nav_bar">
	<div class="content" align="center">
		<div class="limit_width_700">
		 	<div style="float: right">
		 		<!-- RHS NAV BAR CONTENT -->
		 		
				<?php
				// TheLogger is a LoginStatus XComponent
				$xparams['result_loginregister'] = 'login.php';
				dmx_render('dmshop.loginstatus', 'TheLogger', $xparams);
				?>
		 		
		 		<!-- END RHS NAV BAR CONTENT -->
		 	</div>
		 	<!-- LHS NAV BAR CONTENT -->
		 	<a href="/dmx/demo/index.php">XCom Demo</a><a href="/dmx/server/index.php">Server Tests</a><a href="/dmx/tst/index.html">TST Diagnostics</a><a href="/dmx/core/b0/demo/index.html">Brand Zero</a>
		 	<!-- END LHS NAV BAR CONTENT -->
		 	&nbsp;
		</div>
	</div>
</div>
<!-- END NAV BAR -->

<!-- ERROR MESSAGE BAR -->
<div id="err_msg_bar" style="display: none;">
	<div class="content" align="center">
		<div class="limit_width_700">
		 	<script language="javascript" type="text/javascript">document.write(errMsg)</script>
		</div>
	</div>
</div>
<!-- END ERROR MESSAGE BAR -->

<!-- ****************** -->
<!-- END HEADER SECTION -->
<!-- ****************** -->


<!-- ******************* -->
<!-- PAGE BODY CONTAINER -->
<!-- ******************* -->

<div class="content" align="center">
<div class="limit_width_700">

<!-- BODY CONTENT STARTS HERE -->

<h1>XComponents Demo</h1>

<p>
This XComponents demo page should show 2 dmShop XComponents: a trolley and a numberchooser. These will allow you to order a number.
</p>

<p>
Seach for a number using the numberchooser, click on one or two numbers to add them to the trolley, then login to your account, and confirm purchase.
</p>

<!-- fred is a full trolley, with header, border and options turned off -->
<?php
$xparams['variant'] = 'full';
$xparams['showheader'] = 1;
$xparams['showborder'] = 1;
$xparams['showoptions'] = 1;
$xparams['result_loginregister'] = 'login.php';
$xparams['result_typinv'] = 'typical_invoice.php';
dmx_render('dmshop.trolley', 'Fredy', $xparams);
?>

<br>

<h2>Select a service (example one)</h2>

<!-- SERVICE SELECTOR EXAMPLE ONE -->
<script language="javascript" type="text/javascript">
<!--
var ss1 = new Object();

// SET INITIALLY SELECTED SERVICE
// Valid values: connect, voice, fax, switchboard
ss1.initial_service = 'connect';

// SET TARGET NUMBERCHOOSERS
// Add a comma dilimited list of named NumberChoosers here...
ss1.target = 'charlie';

// ---------------------------------------------------------------------------------

// FUNCTIONS
ss1.set_service = function(components, service)
{
	// components is a comma delimited list of named XComponents
	// service is the service to use
	// alert('SS1 > Setting service to: ' + service);
	var comps = components.split(',');
	for (var i=0; i<comps.length; i++) dmx[comps[i]] && (dmx[comps[i]].service = service);
}

ss1.script_interface = function(service)
{
	b0_preserve_selected(document.ss1_form.elements[0], service);
}
//-->
</script>

Set the service to:
<form name="ss1_form">
<select onchange="ss1.set_service(ss1.target, this.options[this.selectedIndex].value);">
	<option value="connect">dmConnect</option>
	<option value="voice">dmVoice</option>
	<option value="fax">dmFax</option>
	<option value="switchboard">dmSwitchboard</option>
</select>
</form>

<script language="javascript" type="text/javascript">
<!--
ss1.set_service(ss1.target, ss1.initial_service);
ss1.script_interface(ss1.initial_service);
//-->
</script>
<!-- END SERVICE SELECTOR EXAMPLE ONE-->





<!-- SERVICE SELECTOR EXAMPLE TWO -->

<?php ob_start(array($dmx_glos, 'substitute')); ?>

<h2>Select a service (example two)</h2>

<script language="javascript" type="text/javascript">
<!--
var ss2 = new Object();

// SET INITIALLY SELECTED SERVICE
// Valid values: connect, voice, fax, switchboard
ss2.initial_service = 'connect';

// SET TARGET NUMBERCHOOSERS
// Add a comma dilimited list of named NumberChoosers here...
ss2.target = 'charlie';

// FUNCTIONS
ss2.set_service = function(components, service)
{
	// components is a comma delimited list of named XComponents
	// service is the service to use
	// alert('SS2 > Setting service to: ' + service);
	var comps = components.split(',');
	for (var i=0; i<comps.length; i++) dmx[comps[i]] && (dmx[comps[i]].service = service);
}

ss2.script_interface = function(service, e)
{
	// Script service form, so if the service icon is clicked the form values and display changes
	var f = document.forms['ss2_form'];
	var sel = '';
	f.service_radio[0].checked =
	f.service_radio[1].checked =
	f.service_radio[2].checked =
	f.service_radio[3].checked = 0;
	switch(service)
	{
		case 'connect':
			f.service_radio[0].checked = 1;
			sel = 'dmConnect';
			break;
		case 'voice':
			f.service_radio[1].checked = 1;
			sel = 'dmVoice';
			break;
		case 'fax':
			f.service_radio[2].checked = 1;
			sel = 'dmFax';
			break;
		case 'switchboard':
			f.service_radio[3].checked = 1;
			sel = 'dmSwitchboard';
			break;
	}
	var fb = $('ss2_feedback');
	fb.innerHTML = sel;
	ss2.highlight_row(service + '_row');
	if (!e) var e = window.event;
	e.cancelBubble = true;
	if (e.stopPropagation) e.stopPropagation();
}

ss2.highlight_row = function(row)
{
	var tr1_1 = $('connect_row_1');
	var tr1_2 = $('connect_row_2');
	var tr2_1 = $('voice_row_1');
	var tr2_2 = $('voice_row_2');
	var tr3_1 = $('fax_row_1');
	var tr3_2 = $('fax_row_2');
	var tr4_1 = $('switchboard_row_1');
	var tr4_2 = $('switchboard_row_2');
	tr1_1.className = tr1_2.className = tr2_1.className = tr2_2.className = tr3_1.className = tr3_2.className = tr4_1.className = tr4_2.className = '';
	ss2.set_td_class_in_table_row(tr1_1, '');
	ss2.set_td_class_in_table_row(tr1_2, '');
	ss2.set_td_class_in_table_row(tr2_1, '');
	ss2.set_td_class_in_table_row(tr2_2, '');
	ss2.set_td_class_in_table_row(tr3_1, '');
	ss2.set_td_class_in_table_row(tr3_2, '');
	ss2.set_td_class_in_table_row(tr4_1, '');
	ss2.set_td_class_in_table_row(tr4_2, '');
	var tr_1 = $(row + '_1');
	var tr_2 = $(row + '_2');
	tr_1.className = 'col2f';
	tr_2.className = 'col2f';
	ss2.set_td_class_in_table_row(tr_1, 'col2f');
	ss2.set_td_class_in_table_row(tr_2, 'col2f');
}

ss2.set_td_class_in_table_row = function(rowobj, newclass)
{
	for (node in rowobj.childNodes)
	{
		if (rowobj.childNodes[node].tagName && rowobj.childNodes[node].tagName.toLowerCase() == 'td')
		{
			rowobj.childNodes[node].className = newclass;
		}
	}
}

//-->
</script>

<p>
<b>Click the service you want to use on your new number, and then choose your number...</b> The next number you choose will use the highlighted service.
</p>

<form name="ss2_form">
<table width="100%" cellspacing="0" cellpadding="1">
<tr>
	<th style="width: 10px;"></th>
	<th style="width: 115px;">&nbsp;<strong>Service</strong><br><div id="feedback"></div></th>
	<th style="width: 95%;"><strong>Features</strong> (mouseover the icons for more info)</th>
</tr>
<tr><td colspan="3" class="divider"><img src="<?=$dmx_glib;?>clear.gif" width="1" height="1" alt=""></td></tr>

<tr id="connect_row_1" onclick="ss2.set_service(ss2.target, 'connect'); ss2.script_interface('connect', event);">
	<td style="vertical-align: middle; padding-top: 5px; padding-left: 5px;">
		<input type="radio" name="service_radio" id="rb1" checked>
	</td>
	<td style="vertical-align: top; padding-top: 5px; padding-left: 5px;">
		<img src="{GLIB}numbers/dmConnect_32.gif" width="112" height="32" border="0" alt="" class="infotext" />
		<span class="tipcontents"><b>dmConnect:</b> click to select</span>
	</td>
	<td style="vertical-align: top; padding-top: 5px; padding-left: 5px;">
		{GLOS:icon_func_webcontrol_small}
	</td>
</tr>
<tr id="connect_row_2" onclick="ss2.set_service(ss2.target, 'connect'); ss2.script_interface('connect', event);">
	<td></td>
	<td>&nbsp;<b>dmConnect</b></td>
	<td>A simple number translation service that can route calls to any UK landline.</td>
</tr>
<tr><td colspan="3" class="divider"><img src="<?=$dmx_glib;?>clear.gif" width="1" height="1" alt=""></td></tr>

<tr id="voice_row_1" onclick="ss2.set_service(ss2.target, 'voice'); ss2.script_interface('voice', event);">
	<td style="vertical-align: middle; padding-top: 5px; padding-left: 5px;">
		<input type="radio" name="service_radio" id="rb2">
	</td>
	<td style="vertical-align: top; padding-top: 5px; padding-left: 5px;">
		<img src="{GLIB}numbers/dmVoice_32.gif" width="112" height="32" border="0" alt="" class="infotext" />
		<span class="tipcontents"><b>dmVoice:</b> click to select</span>
	</td>
	<td style="vertical-align: top; padding-top: 5px; padding-left: 5px;">
		{GLOS:icon_func_voicemail_small}
		{GLOS:icon_func_email_voice_small}
		{GLOS:icon_func_sms_voice_small}
		{GLOS:icon_func_webcontrol_small}
	</td>
</tr>
<tr id="voice_row_2" onclick="ss2.set_service(ss2.target, 'voice'); ss2.script_interface('voice', event);">
	<td></td>
	<td>&nbsp;<b>dmVoice</b></td>
	<td>Route calls to any UK and many world numbers. Includes voicemail, and call-hunting.</td>
</tr>
<tr><td colspan="3" class="divider"><img src="<?=$dmx_glib;?>clear.gif" width="1" height="1" alt=""></td></tr>

<tr id="fax_row_1" onclick="ss2.set_service(ss2.target, 'fax'); ss2.script_interface('fax', event);">
	<td style="vertical-align: middle; padding-top: 5px; padding-left: 5px;">
		<input type="radio" name="service_radio" id="rb3">
	</td>
	<td style="vertical-align: top; padding-top: 5px; padding-left: 5px;">
		<img src="{GLIB}numbers/dmFax_32.gif" width="112" height="32" border="0" alt="" class="infotext" />
		<span class="tipcontents"><b>dmFax:</b> click to select</span>
	</td>
	<td style="vertical-align: top; padding-top: 5px; padding-left: 5px;">
		{GLOS:icon_func_email_fax_small}
		{GLOS:icon_func_sms_fax_small}
		{GLOS:icon_func_webcontrol_small}
	</td>
</tr>
<tr id="fax_row_2" onclick="ss2.set_service(ss2.target, 'fax'); ss2.script_interface('fax', event);">
	<td></td>
	<td>&nbsp;<b>dmFax</b></td>
	<td>Receive faxes by email as picture attachments.</td>
</tr>
<tr><td colspan="3" class="divider"><img src="<?=$dmx_glib;?>clear.gif" width="1" height="1" alt=""></td></tr>

<tr id="switchboard_row_1" onclick="ss2.set_service(ss2.target, 'switchboard'); ss2.script_interface('switchboard', event);">
	<td style="vertical-align: middle; padding-top: 5px; padding-left: 5px;">
		<input type="radio" name="service_radio" id="rb4">
	</td>
	<td style="vertical-align: top; padding-top: 5px; padding-left: 5px;">
		<img src="{GLIB}numbers/dmSwitchboard_32.gif" width="112" height="32" border="0" alt="" class="infotext" />
		<span class="tipcontents"><b>dmSwitchboard:</b> click to select</span>
	</td>
	<td style="vertical-align: top; padding-top: 5px; padding-left: 5px;">
		{GLOS:icon_func_voicemail_small}
		{GLOS:icon_func_email_voice_small}
		{GLOS:icon_func_sms_voice_small}
		{GLOS:icon_func_teamdivert_small}
		{GLOS:icon_func_menu_small}
		{GLOS:icon_func_infodept_small}
		{GLOS:icon_func_wizard_small}
		{GLOS:icon_func_webcontrol_small}
	</td>
</tr>
<tr id="switchboard_row_2" onclick="ss2.set_service(ss2.target, 'switchboard'); ss2.script_interface('switchboard', event);">
	<td></td>
	<td>&nbsp;<b>dmSwitchboard</b></td>
	<td>The full power of a switchboard at a fraction of the cost.</td>
</tr>
<tr><td colspan="3" class="divider"><img src="<?=$dmx_glib;?>clear.gif" width="1" height="1" alt=""></td></tr>
<tr>
	<td colspan="3">
		<strong>The next number you choose will use the <b><span id="ss2_feedback"></span></b> service.</strong>
	</td>
</tr>
</table>

</form>

<script language="javascript" type="text/javascript">
<!--
ss2.set_service(ss2.target, ss2.initial_service);
ss2.script_interface(ss2.initial_service, new Object());
//-->
</script>

<?php ob_end_flush(); ?>

<!-- END SERVICE SELECTOR EXAMPLE TWO -->



<br>

<div style="position: relative;">
	<?php
	include('xdrivers/areacode_chooser.php');
	areacode_chooser(DOCROOT . '/dmx/demo/xdrivers/areacodes.csv', 'charlie');
	?>
	
	<p>
	<a href="#" onclick="xdriver.charlie.areacode_chooser.display_block(); return false;">Show area code chooser (an example XDriver)</a>
	</p>
</div>

<!-- Charlie is a 3 column numberchooser -->
<?php
$xparams['cols'] = '3';
$xparams['showheader'] = 1;
$xparams['showborder'] = 1;
$xparams['showpreamble'] = 1;
$xparams['showclass'] = 0;
$xparams['tariffs'] = '*';
dmx_render('dmshop.numberchooser', 'charlie', $xparams);
?>

<br>

<!-- fred is a full trolley, with header, border and options turned off -->
<?php
$xparams['variant'] = 'full';
$xparams['showheader'] = 1;
$xparams['showborder'] = 1;
$xparams['showoptions'] = 1;
$xparams['result_loginregister']  = 'login.php';
$xparams['result_reauthenticate'] = 'login.php';
$xparams['result_typinv'] = 'typical_invoice.php';
dmx_render('dmshop.trolley', 'Fredy', $xparams, 'example');
?>

<br>

<!-- Sally is a ServiceChooser XComponent -->
<?php
/*
$xparams['showheader'] = 1;
$xparams['showborder'] = 1;
$xparams['showpreamble'] = 1;
dmx_render('dmshop.servicechooser', 'sally', $xparams);
*/
?>

<h2>Maximise response with a memorable number</h2>

<p>
<b>Gold numbers</b> (numbers featuring catchy sequences of digits or repetition) are great for increasing customer response. Get those calls flooding in by <a href="gold.php">getting a gold number</a>.
</p>

<script language="javascript" type="text/javascript">
//for (comp in dmx) alert(dmx[comp].name + ' is a ' + dmx[comp].xclass);
</script>

<!-- END BODY CONTENT -->

</div>
</div>

<!-- *********************** -->
<!-- END PAGE BODY CONTAINER -->
<!-- *********************** -->

<!-- ********** -->
<!-- FOOTER BAR -->
<!-- ********** -->

<br style="clear: both;">
<div id="footer_bar">
	<div class="content" align="center">
		<div class="limit_width_700">
		 	<div style="float: right">
		 		<!-- RHS FOOTER CONTENT -->
		 		<!-- Standard back to top link -->
		 		&nbsp;&nbsp;&nbsp;<a href="#top">back to top</a>
		 		<!-- END RHS FOOTER CONTENT -->
		 	</div>
		 	<!-- LHS FOOTER CONTENT -->
			dmx:demo:index.php:S01_C07
		 	<!-- END LHS FOOTER CONTENT -->
		</div>
	</div>
</div>

<!-- ************** -->
<!-- END FOOTER BAR -->
<!-- ************** -->

</div>

<?php dmx_render('dmshop.debug'); ?>

<?php dmx_include_google_analytics(); ?>

</body>
</html>