<!doctype>
<html>

<head>
<script type="text/javascript" src="../dist/web3.js"></script>
<script type="text/javascript">

    var web3 = require('web3');
    web3.setProvider(new web3.providers.HttpProvider("http://localhost:8545"));
    var from = web3.eth.coinbase;
    web3.eth.defaultAccount = from;

    window.onload = function () {
        var filter = web3.eth.namereg.Changed();
        filter.watch(function (err, event) {
            // live update all fields
            onAddressKeyUp();
            onNameKeyUp();
            onRegisterOwnerKeyUp();
        });
    };

    function registerOwner() {
        var name = document.getElementById('registerOwner').value;
        web3.eth.namereg.reserve(name);
        document.getElementById('nameAvailability').innerText += ' Registering name in progress, please wait...';
    };
    
    function changeAddress() {
        var name = document.getElementById('registerOwner').value;
        var address = document.getElementById('newAddress').value;
        web3.eth.namereg.setAddress(name, address, true);
        document.getElementById('currentAddress').innerText += ' Changing address in progress. Please wait.';
    };

    function onRegisterOwnerKeyUp() {
        var name = document.getElementById('registerOwner').value;
        var owner = web3.eth.namereg.owner(name)
        document.getElementById('currentAddress').innerText = web3.eth.namereg.addr(name);
        if (owner !== '0x0000000000000000000000000000000000000000') {
            if (owner === from) {
                document.getElementById('nameAvailability').innerText = "This name is already owned by you " + owner;
            } else {
                document.getElementById('nameAvailability').innerText = "This name is not available. It's already registered by " + owner;
            }
            return;
        }
        document.getElementById('nameAvailability').innerText = "This name is available. You can register it.";
    };

    function onAddressKeyUp() {
        var address = document.getElementById('address').value;
        document.getElementById('nameOf').innerText = web3.eth.namereg.name(address);
    };
    
    function onNameKeyUp() {
        var name = document.getElementById('name').value;
        document.getElementById('addressOf').innerText = web3.eth.namereg.addr(name);
    };

</script>
</head>
<body>
    <i>This example shows only part of namereg functionalities. Namereg contract is available <a href="https://github.com/ethereum/dapp-bin/blob/master/GlobalRegistrar/contract.sol">here</a>
    </i>
    <h1>Namereg</h1>
    <h3>Search for name</h3>
    <div>
        <text>Address: </text>
        <input type="text" id="address" onkeyup='onAddressKeyUp()'></input>
        <text>Name: </text>
        <text id="nameOf"></text>
    </div>
    <h3>Search for address</h3>
    <div>
        <text>Name: </text>
        <input type="text" id="name" onkeyup='onNameKeyUp()'></input>
        <text>Address: </text>
        <text id="addressOf"></text>
    </div>
    <h3>Register name</h3>
    <div>
        <text>Check if name is available: </text>
        <input type="text" id="registerOwner" onkeyup='onRegisterOwnerKeyUp()'></input>
        <text id='nameAvailability'></text>
    </div>
    <div>
        <button id="registerOwnerButton" type="button" onClick="registerOwner()">Register!</button>
    </div>
    <h3></h3>
    <i>If you own the name, you can  also change the address it points to</i>
    <div>
        <text>Address: </text>
        <input type="text" id="newAddress"></input>
        <button id="changeAddress" type="button" onClick="changeAddress()">Change address!</button>
        <text>Current address :</text>
        <text id="currentAddress"></text>
    </div>

</body>
</html>