<commit_before><div id="actions-list">
    <ul class="actions" >
        <li id="create" class="enabled"><a rel="#wizard">Create</a></li>
        <li id="start"><a>Start</a></li>
        <li id="stop"><a>Stop</a></li>
        <li id="reboot"><a>Reboot</a></li>
        <li id="reboot-confirm" class="inner-shadow"><a>Sure?</a></li>
        <li id="destroy"><a>Destroy</a></li>
        <li id="destroy-confirm" class="inner-shadow"><a>Sure?</a></li>
        <li id="shell"><a>Console</a></li>
    </ul>
</div>
<ul id="button-header">
    <li class="head-button visible-in-list select-widget">
        <span class="check"></span>
        <ul class="sub-menu rounded-right-bottom drop-shadow">
            <li id="button-select-all">All</li>
            <li id="button-deselect-all">None</li>
        </ul>
    </li>
    <li class="head-button backend-button backend-template"></li>
    <li id="selected-nodes-button" class="head-button visible-in-list"><span id="selected-machines">0</span> / <span id="all-machines">0</span></li>
    <li id="button-back" class="head-button visible-in-details">Back</li>
</ul>
<div id="machines-list">
    <div class="node-template">
        <a><span class="select" id="chk-node.id">
            <span class="check"></span>
        </span></a>
        <span class="backend"></span>
        <span class="name"></span>
        <span class="state"></span>
        <span class="ip"></span>
    </div>
</div>

<div id="machine-details">
    <div class="single-view-title name"></div>
    <div class="single-view-title collapsible-title">Basic Info</div>
    <ul class="basic-info single-view-section">
        <li class="state"></li>
        <li class="backend"></li>
        <li class="image"></li>
        <li class="size"></li>
        <li class="id"></li>
        <li class="ip"></li>
    </ul>
    <div class="single-view-title collapsible-title">Extended Info</div>
    <ul class="extra-info single-view-section"></ul>
</div>

    <div id="logo-container"></div>

<div id="console">
    <iframe onload="this.contentWindow.focus()" />
</div>
<!-- the form -->
<form action="#">
    <div class="overlay drop-shadow rounded" id="wizard">
        <h3 class="rounded-top">
            Create new Virtual Machine
        </h3>
        <ul>
             <!-- backend -->
            <li class="required border-bottom">
                <label>
                    <strong>0.</strong> Select provider <br />
                    <select name="backend" class="backend">
                        <option value="">-- please select --</option>
                        <script>
                        for (var m in backends) {
                            $('select.backend').append($('<option value="' + backends[m].id + '">' + backends[m].title + '</option>'));
                        }
                        </script>
                    </select>
                </label>
            </li>
            <!-- instance name -->
            <li class="required border-bottom">
                <label>
                    <strong>1.</strong> Instance name <em>e.g. My mail server.</em>
                    <br />
                    <input type="text" class="text" name="instance_name" />
                </label>
            </li>
            <!-- image -->
            <li class="required border-bottom">
                <label>
                    <strong>2.</strong> Select an image <br />
                    <select name="instance_image" class="images">
                        <option value="">-- please select --</option>
                    </select>
                </label>
            </li>
            <!-- size -->
            <li class="required border-bottom">
                <label>
                    <strong>3.</strong> Select VM size<br />
                    <select name="instance_size" class="sizes">
                        <option value="">-- please select --</option>
                        <!--option tal:repeat="size sizes" tal:attributes="id size.id" tal:content="size.name">small</option-->
                    </select>
                </label>
            </li>
            <!-- location -->
            <li class="required border-bottom">
                <label>
                    <strong>4.</strong> Select VM location<br />
                    <select name="instance_location" class="locations">
                        <option value="">-- please select --</option>
                    </select>
                </label>
            </li>
            <li class="clearfix rounded-bottom">
                 <button type="button" class="start right">Start VM</button>
            </li>

        </ul>
    </div>
</form>

<script>

var NODE_NAME_CHARACTERS = 35;
/*
libcloud listing of state codes
    RUNNING = 0
    REBOOTING = 1
    TERMINATED = 2
    PENDING = 3
    UNKNOWN = 4
*/


var STATES = {
    '0' : 'Running',
    '1' : 'Rebooting',
    '2' : 'Terminated',
    '3' : 'Pending',
    '4' : 'Unknown',            
    };

// create vm overlay
$(function() {
    $(".enabled#create a[rel]").overlay({
        top: 'center',
        mask: {
            color: '#000',
            opacity: '.4'
        }
    });
});

// intercept create wizard
$(".enabled#create").click(function(){
    $('li#create').addClass('pressed');
});

$("select.backend").live('click', function(e){
    var sizesHtml = '', imagesHtml='', locationsHtml = '';
    var sizesLabel = $('select.sizes').parent();
    var imagesLabel = $('select.images').parent();
    var locationsLabel = $('select.locations').parent();
    var i = $(this)[0].selectedIndex - 1;

    $('select.sizes').remove();
    $('select.images').remove();
    $('select.locations').remove();
    if ( i > -1) {
        $.each(backends[i].sizes, function(val, text) {
            sizesHtml += '<option value="' + backends[i].sizes[val].id + '">' + backends[i].sizes[val].name + '</option>';
        });
        $.each(backends[i].images, function(val, text) {
            imagesHtml += '<option value="' + backends[i].images[val].id + '">' + backends[i].images[val].name + '</option>';
        });
        $.each(backends[i].locations, function(val, text) {
            locationsHtml += '<option value="' + backends[i].locations[val].id + '">' + backends[i].locations[val].name + '</option>';
        });
    }
    sizesHtml = '<select name="instance_size" class="sizes"><option value=""><b>-- please select --</b></option>' + sizesHtml + '</select>';
    imagesHtml = '<select name="instance_image" class="images"><option value="">-- please select --</option>' + imagesHtml + '</select>';
    locationsHtml = '<select name="instance_location" class="locations"><option value="">-- please select --</option>' + locationsHtml + '</select>';
    sizesLabel.append(sizesHtml);
    imagesLabel.append(imagesHtml);<commit_msg>clear selections when starting wizard<commit_after><div id="actions-list">
    <ul class="actions" >
        <li id="create" class="enabled"><a rel="#wizard">Create</a></li>
        <li id="start"><a>Start</a></li>
        <li id="stop"><a>Stop</a></li>
        <li id="reboot"><a>Reboot</a></li>
        <li id="reboot-confirm" class="inner-shadow"><a>Sure?</a></li>
        <li id="destroy"><a>Destroy</a></li>
        <li id="destroy-confirm" class="inner-shadow"><a>Sure?</a></li>
        <li id="shell"><a>Console</a></li>
    </ul>
</div>
<ul id="button-header">
    <li class="head-button visible-in-list select-widget">
        <span class="check"></span>
        <ul class="sub-menu rounded-right-bottom drop-shadow">
            <li id="button-select-all">All</li>
            <li id="button-deselect-all">None</li>
        </ul>
    </li>
    <li class="head-button backend-button backend-template"></li>
    <li id="selected-nodes-button" class="head-button visible-in-list"><span id="selected-machines">0</span> / <span id="all-machines">0</span></li>
    <li id="button-back" class="head-button visible-in-details">Back</li>
</ul>
<div id="machines-list">
    <div class="node-template">
        <a><span class="select" id="chk-node.id">
            <span class="check"></span>
        </span></a>
        <span class="backend"></span>
        <span class="name"></span>
        <span class="state"></span>
        <span class="ip"></span>
    </div>
</div>

<div id="machine-details">
    <div class="single-view-title name"></div>
    <div class="single-view-title collapsible-title">Basic Info</div>
    <ul class="basic-info single-view-section">
        <li class="state"></li>
        <li class="backend"></li>
        <li class="image"></li>
        <li class="size"></li>
        <li class="id"></li>
        <li class="ip"></li>
    </ul>
    <div class="single-view-title collapsible-title">Extended Info</div>
    <ul class="extra-info single-view-section"></ul>
</div>

    <div id="logo-container"></div>

<div id="console">
    <iframe onload="this.contentWindow.focus()" />
</div>
<!-- the form -->
<form action="#">
    <div class="overlay drop-shadow rounded" id="wizard">
        <h3 class="rounded-top">
            Create new Virtual Machine
        </h3>
        <ul>
             <!-- backend -->
            <li class="required border-bottom">
                <label>
                    <strong>0.</strong> Select provider <br />
                    <select name="backend" class="backend">
                        <option value="">-- please select --</option>
                        <script>
                        for (var m in backends) {
                            $('select.backend').append($('<option value="' + backends[m].id + '">' + backends[m].title + '</option>'));
                        }
                        </script>
                    </select>
                </label>
            </li>
            <!-- instance name -->
            <li class="required border-bottom">
                <label>
                    <strong>1.</strong> Instance name <em>e.g. My mail server.</em>
                    <br />
                    <input type="text" class="text" name="instance_name" />
                </label>
            </li>
            <!-- image -->
            <li class="required border-bottom">
                <label>
                    <strong>2.</strong> Select an image <br />
                    <select name="instance_image" class="images">
                        <option value="">-- please select --</option>
                    </select>
                </label>
            </li>
            <!-- size -->
            <li class="required border-bottom">
                <label>
                    <strong>3.</strong> Select VM size<br />
                    <select name="instance_size" class="sizes">
                        <option value="">-- please select --</option>
                        <!--option tal:repeat="size sizes" tal:attributes="id size.id" tal:content="size.name">small</option-->
                    </select>
                </label>
            </li>
            <!-- location -->
            <li class="required border-bottom">
                <label>
                    <strong>4.</strong> Select VM location<br />
                    <select name="instance_location" class="locations">
                        <option value="">-- please select --</option>
                    </select>
                </label>
            </li>
            <li class="clearfix rounded-bottom">
                 <button type="button" class="start right">Start VM</button>
            </li>

        </ul>
    </div>
</form>

<script>

var NODE_NAME_CHARACTERS = 35;
/*
libcloud listing of state codes
    RUNNING = 0
    REBOOTING = 1
    TERMINATED = 2
    PENDING = 3
    UNKNOWN = 4
*/


var STATES = {
    '0' : 'Running',
    '1' : 'Rebooting',
    '2' : 'Terminated',
    '3' : 'Pending',
    '4' : 'Unknown',            
    };

// create vm overlay
$(function() {
    $(".enabled#create a[rel]").overlay({
        top: 'center',
        mask: {
            color: '#000',
            opacity: '.4'
        }
    });
});

// intercept create wizard
$(".enabled#create").click(function(){
    $('li#create').addClass('pressed');
    $('select.backend').val('').trigger('click');
});

$("select.backend").live('click', function(e){
    var sizesHtml = '', imagesHtml='', locationsHtml = '';
    var sizesLabel = $('select.sizes').parent();
    var imagesLabel = $('select.images').parent();
    var locationsLabel = $('select.locations').parent();
    var i = $(this)[0].selectedIndex - 1;

    $('select.sizes').remove();
    $('select.images').remove();
    $('select.locations').remove();
    if ( i > -1) {
        $.each(backends[i].sizes, function(val, text) {
            sizesHtml += '<option value="' + backends[i].sizes[val].id + '">' + backends[i].sizes[val].name + '</option>';
        });
        $.each(backends[i].images, function(val, text) {
            imagesHtml += '<option value="' + backends[i].images[val].id + '">' + backends[i].images[val].name + '</option>';
        });
        $.each(backends[i].locations, function(val, text) {
            locationsHtml += '<option value="' + backends[i].locations[val].id + '">' + backends[i].locations[val].name + '</option>';
        });
    }
    sizesHtml = '<select name="instance_size" class="sizes"><option value=""><b>-- please select --</b></option>' + sizesHtml + '</select>';
    imagesHtml = '<select name="instance_image" class="images"><option value="">-- please select --</option>' + imagesHtml + '</select>';
    locationsHtml = '<select name="instance_location" class="locations"><option value="">-- please select --</option>' + locationsHtml + '</select>';
    sizesLabel.append(sizesHtml);
    imagesLabel.append(imagesHtml);
{'fraction_non_alphanumeric': 0.19660547785547786, 'fraction_numerical': 0.004079254079254079, 'mean_word_length': 1.95056952503761, 'pattern_counts': {'":': 0, '<': 411, '<?xml version=': 0, '>': 413, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4605848', 'n_tokens_mistral': 4076, 'n_tokens_neox': 3921, 'n_words': 806}