<?php

// callcostexplorer.tpl
// -------------------------------------------------------------------------------------------------
// CallCostExplorer template
//
// Revision   > $Rev: 142 $
// Date		  > $Date: 2009-11-17 15:39:18 +0000 (Tue, 17 Nov 2009) $
// Author     > RAK for DML
// Copyright  > (C) Digital Mail Limited (2005-2009)
// -------------------------------------------------------------------------------------------------

?>

<!-- *************************** -->
<!-- CALL COST EXPLORER SELECTOR -->
<!-- *************************** -->

<script language="javascript" type="text/javascript">

// CREATE 'PUBLIC' JS INTERFACE FOR COMPONENT
dmx.<?=$comp_name;?> = new Object();
dmx.<?=$comp_name;?>.name = '<?=$comp_name;?>';
dmx.<?=$comp_name;?>.xclass = 'callcostexplorer';

// DECLARE VARIABLES

// Index of number in trolley
dmx.<?=$comp_name;?>.focus = <?=$focus;?>;

// Initial mode
dmx.<?=$comp_name;?>.mode = <?=$advanced_mode;?>; // 0 = simple, 1 = advanced

// Current destinations, duration and period
dmx.<?=$comp_name;?>.num_dest = <?=$num_dest;?>;
dmx.<?=$comp_name;?>.destinations = <?=$dest_json;?>;
dmx.<?=$comp_name;?>.duration = {'min': <?=$duration['min'];?>, 'sec': <?=$duration['sec'];?>};
dmx.<?=$comp_name;?>.period = '<?=$period;?>';

// Current service and plan index
dmx.<?=$comp_name;?>.csi = <?=$csi;?>;
dmx.<?=$comp_name;?>.cpi = <?=$cpi;?>; // Not yet used - could highlight current plan

// Pricing Grid
dmx.<?=$comp_name;?>.grid =	<?=$grid_json;?>;

dmx.<?=$comp_name;?>.rowhigh = <?=$num_dest;?> - 1;

dmx.<?=$comp_name;?>.ajax_debug = false;

// -------------------------------------------------------------------------------------------------
// COMPONENT METHODS

dmx.<?=$comp_name;?>.destination_add = function()
{
	// Add another destination
	var dest = document.<?=$comp_name;?>_form_add.destination.value;
	if (dest.length > 5)
	{
		dmx.<?=$comp_name;?>.num_dest++;
		dmx.<?=$comp_name;?>.destinations.push(dest);
		dmx.<?=$comp_name;?>.rowhigh++;

		// Create additional table row, and update ids
		var tb = $('<?=$comp_name;?>_tbody');
		var num_plans = dmx.<?=$comp_name;?>.grid[0].plans.length;
		var i = dmx.<?=$comp_name;?>.rowhigh;
		var row = $('gr_prototype').cloneNode(true);
		var cells = row.getElements('td');
		row.id = 'gr_' + i;
		cells[0].id = 'g_' + i + '_d';
		cells[0].getElements('span')[1].id = 'g_' + i + '_f';
		cells[1].id = 'g_' + i + '_z';
		for (var j = 0; j < num_plans; j++)
		{
			cells[2 + j].id = 'g_' + i + '_' + j;
		}
		cells[2 + dmx.<?=$comp_name;?>.cpi].addClass('cphi');
		tb.appendChild(row);

		var divr = document.createElement('tr');
		var celr = new Element('td');
		celr.setProperty('class', 'divider');
		celr.setProperty('colspan', <?=$colspan;?>);
		divr.appendChild(celr);
		tb.appendChild(divr);

		if (dmx.<?=$comp_name;?>.num_dest == 6)
		{
			$('<?=$comp_name;?>_add').style.display  = 'none';
			$('<?=$comp_name;?>_full').style.display = 'block';
		}

		dmx.<?=$comp_name;?>.update_grid();
	}

}

dmx.<?=$comp_name;?>.destination_delete = function(el)
{
	// Delete destination
	$(el).getParent().getParent().getNext().dispose();
	$(el).getParent().getParent().dispose();

	dmx.<?=$comp_name;?>.num_dest--;
	var dests = dmx.<?=$comp_name;?>.destinations;
	dmx.<?=$comp_name;?>.destinations = new Array();
	for (var i = 0, gc = 0; gc < dmx.<?=$comp_name;?>.num_dest; i++)
	{
		if ($defined($('g_' + i + '_f')))
		{
			dmx.<?=$comp_name;?>.destinations.push( $('g_' + i + '_f').get('text') );
			gc++;
		}
	}

	if (dmx.<?=$comp_name;?>.num_dest == 5)
	{
		$('<?=$comp_name;?>_add').style.display  = 'block';
		$('<?=$comp_name;?>_full').style.display = 'none';
	}

}

dmx.<?=$comp_name;?>.toggle_mode = function(index)
{
	$('<?=$comp_name;?>_durper').style.display = dmx.<?=$comp_name;?>.mode ? 'none' : 'block';
	dmx.<?=$comp_name;?>.mode = !dmx.<?=$comp_name;?>.mode;
	dmx.<?=$comp_name;?>.update_display();
}

dmx.<?=$comp_name;?>.change_number = function(index)
{
	// Trolley index changed by another (linked) XComponent
	dmx.<?=$comp_name;?>.focus = index;
	dmx.<?=$comp_name;?>.show_whirlers();
	dmx.<?=$comp_name;?>.update_grid();
}

dmx.<?=$comp_name;?>.change_service = function(csi)
{
	// Service changed by another (linked) XComponent
	dmx.<?=$comp_name;?>.csi = csi;
	$('<?=$comp_name;?>_service').innerHTML 	= dmx.<?=$comp_name;?>.grid[csi].service;
	$('<?=$comp_name;?>_tariff_set').innerHTML 	= dmx.<?=$comp_name;?>.grid[csi].tariff_set;

	var num_plans = dmx.<?=$comp_name;?>.grid[0].plans.length;
	dmx.<?=$comp_name;?>.show_whirlers();
	setTimeout('dmx.<?=$comp_name;?>.update_display()', 200);
}

dmx.<?=$comp_name;?>.change_plan = function(cpi)
{
	// Highlight the column corresponding to the current plan, and remove highlight from other columns
	dmx.<?=$comp_name;?>.cpi = cpi;
	var num_plans = dmx.<?=$comp_name;?>.grid[0].plans.length;
	for (var i = 0, gc = 0; gc < dmx.<?=$comp_name;?>.num_dest; i++)
	{
		if ($defined($('g_' + i + '_d')))
		{
			for (var j = 0; j < num_plans; j++)
			{
				var tc = $('g_' + i + '_' + j);
				j == cpi ? tc.addClass('cphi') : tc.removeClass('cphi');
			}
			gc++;
		}
	}
}

dmx.<?=$comp_name;?>.change_durper = function()
{
	dmx.<?=$comp_name;?>.duration.min = document.<?=$comp_name;?>_form_durper.duration_min.value;
	dmx.<?=$comp_name;?>.duration.sec = document.<?=$comp_name;?>_form_durper.duration_sec.value;
	dmx.<?=$comp_name;?>.period = document.<?=$comp_name;?>_form_durper.period.value;

	var num_plans = dmx.<?=$comp_name;?>.grid[0].plans.length;
	dmx.<?=$comp_name;?>.show_whirlers();
	dmx.<?=$comp_name;?>.update_grid();
}

dmx.<?=$comp_name;?>.update_grid = function()
{
	// Update grid, using JSON remote request to fetch data

	var dests = '';
	for (var i=0; i < dmx.<?=$comp_name;?>.num_dest; i++)
	{
		dests += dmx.<?=$comp_name;?>.destinations[i] + ',';
	}
	dests = dests.slice(0, -1);

	var params = new Object();
	params.family 			= 'dmshop';
	params.xclass 			= 'callcostexplorer';
	params.name	  			= '<?=$comp_name?>';
	params.ajax   			= 1;
	params.response_type	= 'json';
	params.dmb1_SessRef 	= '<?=$dmx_session;?>';
	params.destinations 	= dests;
	params.duration			= (dmx.<?=$comp_name;?>.duration.min * 60) + (dmx.<?=$comp_name;?>.duration.sec * 1);
	params.period 			= dmx.<?=$comp_name;?>.period;
	params.index 			= dmx.<?=$comp_name;?>.focus;

	var xajax = new Request.JSON( { url: '/dmx/core/php/xcom_server.php', data: params } );
	xajax.addEvent('onSuccess', function(response) {
			try
			{
				// Update all prices
				dmx.<?=$comp_name;?>.grid = response;
				dmx.<?=$comp_name;?>.update_display();
				var csi = dmx.<?=$comp_name;?>.csi = dmx.<?=$comp_name;?>.grid.csi;
				var cpi = dmx.<?=$comp_name;?>.cpi = dmx.<?=$comp_name;?>.grid.cpi;
				dmx.<?=$comp_name;?>.change_plan(cpi);
				$('<?=$comp_name;?>_service').innerHTML 	= dmx.<?=$comp_name;?>.grid[csi].service;
				$('<?=$comp_name;?>_tariff_set').innerHTML 	= dmx.<?=$comp_name;?>.grid[csi].tariff_set;

				if (dmx.<?=$comp_name;?>.ajax_debug)
				{
					params.ajax_debug = 1;
					var xajax2 = new Request.HTML( { url: '/dmx/core/php/xcom_server.php', data: params } );
					xajax2.post();
				}

			}
			catch(error) {;}
		}
	);
	xajax.post();

}

dmx.<?=$comp_name;?>.update_display = function()
{
	var csi = dmx.<?=$comp_name;?>.csi;
	var grid = dmx.<?=$comp_name;?>.grid;

	var num_plans = grid[0].plans.length;

	for (var i = 0, gc = 0; gc < dmx.<?=$comp_name;?>.num_dest; i++)
	{
		if ($defined($('g_' + i + '_d')))
		{
			$('g_' + i + '_f').innerHTML = grid.dest[gc].formatted;
			$('g_' + i + '_z').innerHTML = grid.dest[gc].zone_truc;
			var tip = new Element('span');
			tip.setProperty('class', 'tipcontents');
			var tc = document.createTextNode(grid.dest[gc].zone);
			tip.appendChild(tc);
			$('g_' + i + '_z').appendChild(tip);
			for (var j = 0; j < num_plans; j++)
			{
				var tc = $('g_' + i + '_' + j);
				grid[csi].plans[j].css_cl[gc] ? tc.addClass('payout') : tc.removeClass('payout');
				tc.innerHTML = dmx.<?=$comp_name;?>.mode ? grid[csi].plans[j].costs[gc] : grid[csi].plans[j].ppm[gc];
			}
			gc++;
		}
		if (b0_tips) b0_tips.attach($('gr_' + i));
	}
}

dmx.<?=$comp_name;?>.show_whirlers = function()
{
	// Show the whirling 'data loading' animation
	var num_plans = dmx.<?=$comp_name;?>.grid[0].plans.length;
	for (var i = 0, gc = 0; gc < dmx.<?=$comp_name;?>.num_dest; i++)
	{
		if ($defined($('g_' + i + '_d')))
		{
			for (var j = 0; j < num_plans; j++)
			{
				$('g_' + i + '_' + j).innerHTML = '<img src="<?=$dmx_glib;?>interface/ajax_loader_col2.gif" width="16" height="16" alt="">';
			}
			gc++;
		}
	}
}

dmx.<?=$comp_name;?>.kill = function()
{
	// $('<?=$comp_name;?>').empty();
	$('<?=$comp_name;?>').style.display = 'none';
}

</script>

<style type="text/css">

#<?=$comp_name;?>_add
{
	margin-top: 5px;
	height: 25px;
}

#<?=$comp_name;?>_full
{
	clear: left;
	margin-top: 5px;
	display: none;
}

#<?=$comp_name;?>_durper
{
	clear: left;
	margin-top: 15px;
	padding: 3px 2px;
	display: <?=$durper_display;?>;
}

#<?=$comp_name;?>_tr_prototype
{
	display: none;
}

.callcostexplorer .grabut_right_reload
{
	width: 70px;
}

.callcostexplorer td
{
	font-size: 11px;
	height: 18px;
}

.cphi
{
	background-color: #FFDF99 !important;
}

</style>

<div class="dmb0" style="<?=$comp_width;?>">
<div class="dmx">
<div class="callcostexplorer">
<div class="<?=$comp_name?>">

<?php if ($showheader && $showborder) : ?>
	<h1 class="bordered">
	<?php if ($ajax) : ?><a href="#" onclick="dmx.<?=$comp_name;?>.kill();"><img src="<?=$dmx_glib;?>interface/close_15.gif" alt="" width="15" height="15" border="0" class="close"></a><?php endif; ?>
	Call Cost Explorer
	</h1>
<?php elseif ($showheader) : ?>
	<h1>Call Cost Explorer</h1>
<?php endif; ?>

<?php if ($showborder) : ?>
	<div class="border" style="<?=$box_size;?>">
<?php else: ?>
	<div style="<?=$box_size;?>">
<?php endif; ?>

<?php if (!$err_msg) : ?>

	<div id="<?=$comp_name;?>_origin">

		<?php if ($showpreamble) : ?>
			<?php $panel->render('xcom-dmshop-callcostexplorer', 'instructions'); ?>
		<?php endif; ?>

		<?php if ($num_dest) : ?>
			<!-- <img src="<?=$dmx_glib;?>interface/cce_ramp.gif" width="161" height="27" alt="" style="float: right; padding-right: 2px;" /> -->
			<table class="vert_centered detailed" style="width: 100%; clear: right;">
				<tbody id="<?=$comp_name;?>_tbody">
					<tr>
						<td style="width: 32%"><b class="infotext">Destination<span class="tipcontents"><b>Destination number:</b> the number you want calls diverted to. You can enter +, - and space characters when specifying destinations<br />eg. +44-7968-123-456 or VOIP-Trunk</span></b></td>
						<td><b class="infotext">Zone<span class="tipcontents"><b>Zone:</b> the zone in which<br />the destination falls</span></b></td>
						<?php foreach($plans_lc as $p) : ?>
							<td style="width: 50px; text-align: right;"><b>{GLOS:<?=$p;?>}</b></td>
						<?php endforeach; ?>
					</tr>
					<tr><td colspan="<?=$colspan;?>" class="divider"></td></tr>

					<?php foreach($dest as $i => $d) : ?>
					<tr id="gr_<?=$i;?>">
						<td id="g_<?=$i;?>_d" class="cell1f_thin">
							<a href="g_<?=$i;?>_d" onclick="dmx.<?=$comp_name;?>.destination_delete(this); return false;" class="infotext nu"><img src="<?=$dmx_glib;?>interface/delete_15.gif" width="15" height="15" style="border: 0px;" align="right" alt="" /><span class="tipcontents">Delete number</span></a>
							<span id="g_<?=$i;?>_f"><?=$d['formatted'];?></span>
						</td>
						<td id="g_<?=$i;?>_z" class="cell1f_thin infotext nu"><?=$d['zone_truc'];?><span class="tipcontents"><?=$d['zone'];?></span></td>
						<?php foreach($plans as $j => $p) : ?>
							<td id="g_<?=$i;?>_<?=$j;?>" class="cell2f_thin<?=$grid[$csi]['plans'][$j]['css_cl'][$i];?><?php if ($j == $cpi) : ?> cphi<?php endif; ?>" style="text-align: right;"><?php if ($advanced_mode) : ?><?=$grid[$csi]['plans'][$j]['costs'][$i];?><?php else: ?><?=$grid[$csi]['plans'][$j]['ppm'][$i];?><?php endif; ?></td>
						<?php endforeach; ?>
					</tr>
					<tr><td colspan="<?=$colspan;?>" class="divider"></td></tr>
					<?php endforeach; ?>

				</tbody>
			</table>
		<?php else : ?>
			<p>
			<b>Please add some destination numbers.</b>
			</p>
		<?php endif; ?>

		<div id="<?=$comp_name;?>_add">
			<div style="float: left;">
				<form name="<?=$comp_name;?>_form_add" onsubmit="dmx.<?=$comp_name;?>.destination_add(); return false;">
				<b>Add <span class="infotext">destination number<span class="tipcontents"><b>Destination number:</b> the number you want calls diverted to. You can enter +, - and space characters when specifying destinations<br />eg. +44-7968-123-456 or VOIP-Trunk</span></span></b>
				&nbsp;
				<input type="text" name="destination" class="form_text_field" size="20" maxlength="40">
				</form>
			</div>
			<div class="grabut_right_reload"><ul><li><a href="#" onclick="this.blur(); dmx.<?=$comp_name;?>.destination_add(); return false;">Add</a></li></ul></div>
		</div>

		<div id="<?=$comp_name;?>_full">
			<img src="<?=$dmx_glib;?>interface/delete_15.gif" width="15" height="15" style="padding-right: 5px; margin-bottom: 15px;" align="left" alt="">
			<b>Delete one or more destinations before adding more.</b><br>
			You can specify up to 6 destinations at a time.
		</div>

		<div>
			<form autocomplete="off">
			<input type="checkbox" onchange="dmx.<?=$comp_name;?>.toggle_mode();"<?php if ($advanced_mode) : ?> checked<?php endif; ?>> Advanced mode
			</form>
		</div>

		<div id="<?=$comp_name;?>_durper">
			Set call duration and period to get complete call cost
			<div class="col2f" style="height: 25px; padding: 3px 0px 3px 2px;">
				<div style="float: left; padding-top: 2px;">
					<form name="<?=$comp_name;?>_form_durper" onsubmit="dmx.<?=$comp_name;?>.change_durper(); return false;">
					<b>Duration</b>
					&nbsp;
					<input type="text" name="duration_min" class="form_text_field" style="text-align: right;" size="3" maxlength="2" value="<?=$duration['min'];?>" onblur="dmx.<?=$comp_name;?>.change_durper();"> min
					<input type="text" name="duration_sec" class="form_text_field" style="text-align: right;" size="3" maxlength="2" value="<?=$duration['sec'];?>" onblur="dmx.<?=$comp_name;?>.change_durper();"> sec
					&nbsp;
					<b>Period</b>
					<select name="period" class="form_select" onchange="dmx.<?=$comp_name;?>.change_durper();">
						<?=$period_options;?>
					</select>
					<input type="submit" style="display: none;">
					</form>
				</div>
				<div class="grabut_right_reload"><ul><li><a href="#" onclick="this.blur(); dmx.<?=$comp_name;?>.change_durper(); return false;">Set</a></li></ul></div>
			</div>
		</div>

		<div style="font-size: smaller;">
			( Tariff = <span id="<?=$comp_name;?>_tariff_set"><?=$tariff_set;?></span> | <span id="<?=$comp_name;?>_service"><?=$cs;?></span> )
		</div>

		<div id="<?=$comp_name;?>_tr_prototype">
			<table>
				<tr id="gr_prototype">
					<td id="" class="cell1f_thin">
						<a href="#" onclick="dmx.<?=$comp_name;?>.destination_delete(this); return false;" class="infotext nu"><img src="<?=$dmx_glib;?>interface/delete_15.gif" width="15" height="15" style="border: 0px;" align="right" alt="" /><span class="tipcontents">Delete number</span></a>
						<span id=""><img src="<?=$dmx_glib;?>interface/ajax_loader_col1.gif" width="16" height="16" alt=""></span>
					</td>
					<td id="" class="cell1f_thin infotext nu"><img src="<?=$dmx_glib;?>interface/ajax_loader_col1.gif" width="16" height="16" alt="" /><span class="tipcontents"></span></td>
					<?php foreach($plans as $j => $p) : ?>
						<td id="" class="cell2f_thin" style="text-align: right;"><img src="<?=$dmx_glib;?>interface/ajax_loader_col2.gif" width="16" height="16" alt="" style="margin-left: 10px;"></td>
					<?php endforeach; ?>
				</tr>
			</table>
		</div>

	</div>

<?php else : ?>
	<!-- ERROR HANDLING -->
	<div style="vertical-align: middle;">
	<img src="<?=$dmx_glib;?>interface/error_32.gif" alt="" width="36" height="32" border="0" style="float: left; padding: 0 10px 0 0;"><span class="error">ERROR<br><?=$err_msg;?></span>
	</div>
	<!-- END ERROR HANDLING -->
<?php endif; ?>

</div>

</div>
</div>
</div>
</div>

<!-- ******************************** -->
<!-- END CALL COST EXPLORER COMPONENT -->
<!-- ******************************** -->

