<!-- Progress Bar -->
<?php echo $this->progressBar;?>

<!-- Cart Summary -->
<?php echo $this->cartSummary;?>

<script type="text/javascript">

// Callback function for ExtJS delete popup
function searchDomain(name, tld) {
    
    $('#domainSearchResults').html('<table class="ts2" border="0" cellspacing="0"> <tr> <td colspan="6" style="font-size:16px; font-weight:bold; color:#090;" id="textAvailable"><?php echo $this->lang('Searching');?><span id="dots">.</span></td> </tr> </table>');
    animateSearch();
    // Callback for the ajax request
    var received = function (response) {

        // Rather dirty method, but we want a submit button on the page at all times
        // So rather than messing around processing it after we get the HTML simply hide it and return.
        document.getElementById('submitButton').style.visibility = 'hidden';
        document.getElementById('submitButton').style.display = 'none';

        // Populate the html
        $('#domainSearchResults').html(response.responseText)
    }
    // Query the domain
    Ext.Ajax.request({
       url: 'order.php?step=search',
       success: received,
       failure: received,
       params: { name: name, tld: tld, product:<?php echo $this->product['id'];?>, bundling:<?php echo $this->bundling;?> <?php if ( isset($this->hosting_product) ) { ?>,hosting_product: <?php echo $this->hosting_product; } ?> }
    });
}

// onChange function for dropdown to handle subdomains
function handleOnChange(value) { 
	if(value == 'subdomain') {
		// Hide Go & enable Continue
		document.getElementById('submitButton').disabled = false;
		document.getElementById('searchButton').style.visibility = 'hidden';
        document.getElementById('searchButton').style.display = 'none';
        document.getElementById('submitButton').style.visibility = 'hidden';
        document.getElementById('submitButton').style.display = 'none';
        $('#domainSearchResults').html('<input class="submit" id="submitButton" type="submit" style="visibility:visible; display:block;" value="<?php echo $this->lang('Continue');?> &raquo;" />')
        $('#isSubdomain').value = 'true';
	} else {
		// Have to revert the above incase they click back
		document.getElementById('submitButton').disabled = true;
		document.getElementById('searchButton').style.visibility = 'visible';
        document.getElementById('searchButton').style.display = '';new
        $('#isSubdomain').value = 'false';
	}
}

// Function to trigger the search of a domain
function triggerSearch(name, tld) {

    // Update the form fields
    document.getElementById('registerName').value=name;
    document.getElementById('tld').value=tld;
    
    // Do the search
    searchDomain(name, tld);
}

// Function to animiate the searching
function animateSearch() {
    var dotspan = document.getElementById('dots');
    window.setInterval(function(){
        if(dotspan.innerHTML == '....'){
           dotspan.innerHTML = '.';
        }
        else{
           dotspan.innerHTML += '.';
        }
     }, 1000);
}
</script>

<!-- Main Page -->
<div style="margin-right:220px; margin-bottom:20px;">
<h3><?php echo $this->lang("Configure Product");?>: <?php echo $this->product['name'];?></h3>

<p class="pagedesc"><?php echo $this->product['description'];?></p>
<form action="order.php?step=3" method="POST">
    <input type="hidden" name="product" value="<?php echo $this->product['id'];?>">
    <input type="hidden" name="formId" value="domainReg">
    <input type="hidden" id="isSubdomain" name="isSubdomain" value="false">

    <table class="ts2" cellspacing="0">
        <tr id="domainSearch">
            <td style="background:#E9F2F7;">www. <input id="registerName" name="registerName" type="text" size="50" /> .

                <select name="tld" id="tld" onchange="handleOnChange(this.options[selectedIndex].className);">
                    <?php if(isset($this->tld)) { ?>
                        <?php foreach($this->tld AS $key) {?>
                        <option class="<?php if(isset($key['subdomain'])) { echo"subdomain"; } else { echo"domain"; } ?>"><?php echo $key['name'];?></option>
                        <?php }?>
                    <?php }?>
                </select>

                &nbsp; <input id="searchButton" type="button" onclick="searchDomain(document.getElementById('registerName').value,document.getElementById('tld').options[document.getElementById('tld').selectedIndex].text)" value="<?php echo $this->lang('Search');?>" style="padding:5px;" /></td>
        </tr>
    </table>

    <div id="domainSearchResults"></div>

    <input class="submit" id="submitButton" type="submit" disabled value="<?php echo $this->lang('Continue');?> &raquo;" />
</form>
</div>

<div class="clear"></div>

<?php if(@$this->triggerSearch) { ?>
<script type="text/javascript">
    triggerSearch('<?php echo $this->triggerDomain;?>', '<?php echo $this->triggerTld;?>');
</script>
<?php } ?>