<div class="o_form">

	<br />

	<?php
	$this->set('progress_step','start');
	$this->element('progress.phtml');
	?>
	
	<?php
	$this->element('errors.phtml');
	?>
	
	<form name="OrderForm" method="post" action="?">
	<input type="hidden" name="step" value="cart" />
	<input type="hidden" name="cart" value="<?php echo ORDERFORM_ID; ?>" />
	<input type="hidden" name="action" value="" />
		
	<h2><?php echo __('vps', 'vps'); ?></h2>
	<br />
	
	<?php 
	$this->element('vps_new.phtml','vps'); 
	?>
	
	<div id="vps_main_options" <?php if(!isset($vps['ProductCode']) || !$vps['ProductCode']){ echo "style=\"display:none;\""; } ?>>
	
		<label><?php echo __('vps hostname', 'vps'); ?></label>
		<input type="text" name="Hostname" value="<?php if(isset($vps['Hostname'])){ echo $vps['Hostname']; } ?>"/>
		<br />
		
		<?php 
		if($orderform_settings->askforImage != 'no')
		{ 
			?>
			<div id="vps_main_options_imagelist" <?php if(empty($package_info->ImageList)){ echo "style=\"display:none;\""; } ?>>
				<br />
				<label><?php echo __('vps image', 'vps'); ?></label>
				<select name="Image">
				<?php
				if(!empty($package_info->ImageList))
				{
					foreach($package_info->ImageList as $key=>$value)
					{
						?>
						<option value="<?php echo htmlspecialchars($value->Key); ?>" <?php if(isset($vps['Image']) && $vps['Image'] == $value->Key){ echo 'selected="selected"'; } ?>><?php echo htmlspecialchars($value->ImageName); ?></option>
						<?php
					}
				}
				?>
				</select>
				<br />
			</div>
			<?php 
		} 
		?>
		
		<?php 
		$this->element('billingperiod.phtml'); 
		?>
		
		<br /><br />
	
	</div>

	<?php
	$this->element('options.phtml');
	?>
	</form>
	
	<div class="nav">
		<p><a id="order_submit_btn"  class="button_submit"><?php echo __('button to customerdata'); ?></a></p>
		
		<p class="footer_excl_incl_vat"><?php echo (SHOW_VAT_INCLUDED) ? __('footer prices are including tax') : ((count($array_taxpercentages) === 0 && count($array_total_taxpercentages) === 0) ? '&nbsp;' : __('footer prices are excluding tax')); ?></p>

	</div>
	
</div>

<script type="text/javascript">

jQuery(document).ready(function(){

	jQuery('input[name="VPS"], input[name="VPSResponsive"]').click(function(){

		// Check if we are in a package_box
		if(jQuery(this).parents('.package_box').html() == undefined)
		{
			return;
		}

		// Remove all active class
		jQuery('.package_box').removeClass('active');

		// Check this one
		jQuery(this).parents('.package_box').addClass('active');

		// Get VPS image list
		getVPSImageList(jQuery(this).val());

	});

	jQuery('select[name="VPS"]').change(function(){
		// Get VPS image list
		getVPSImageList(jQuery(this).val());
	});
	
});

function getVPSImageList(ProductCode)
{
	if(ProductCode == '')
	{
		jQuery('#vps_main_options').hide();
	}
	else
	{
		jQuery.post("?cart=<?php echo ORDERFORM_ID; ?>", { step: "get_package_info", vps_product: ProductCode},function(data){
			
			if(data == null)
			{
				jQuery('#vps_main_options').hide();
				return false;
			}
			
			// Show main options
			jQuery('#vps_main_options').show();
			
			// Fill Image list
			jQuery('#vps_main_options_imagelist').find('select[name="Image"]').html('');
			if(jQuery(data.ImageList).length > 0)
			{
				// Add options
				jQuery.each(data.ImageList, function(key, value){
					jQuery('#vps_main_options_imagelist').find('select[name="Image"]').append('<option value="' + value.Key + '">' + value.ImageName + '</option>');
				});
				
				jQuery('#vps_main_options_imagelist').show();
			}
			else
			{
				jQuery('#vps_main_options_imagelist').hide();
			}
			
		},'json');
	}
}

</script>