Statistics
| Branch: | Tag: | Revision:

root / ui / templates / machines.html @ 5d3c8f3f

History | View | Annotate | Download (26.2 kB)

1
{% load i18n %}
2

    
3
<div id="machines" class="separator"></div>
4

    
5
<!-- the create button -->
6
<div id="createcontainer">
7
    <span id="createbody">{% trans "Start by creating a new Virtual Machine:" %}</span><br />
8
    <a id="create" rel="#wizard" href="#">{% trans "Create New +" %}</a>
9
</div>
10

    
11
<!-- changing between standard/list view -->
12
<div id="view-select">
13
    <a id="standard" href="/machines/standard"></a>
14
    <a id="list" href="/machines/list"></a>
15
    <a id="single" href="#"></a>
16
</div>
17

    
18
<div id="emptymachineslist"><h1 id="welcomeheader">{% trans "Welcome to the ocean!" %}</h1><br />
19
    <span class="welcomebody">{% trans "From this panel you will be able to manage your Virtual Machines (VMs). If you don't know what a VM is: take the " %}<a href="#">{% trans "tour" %}</a>.</span><br /><br />
20
    <span class="welcomebody">{% trans "The panel is currently empty, because you don't have any VMs yet. You can start by creating your new VM by clicking the blue button on the right. The wizard will guide you through the hole process." %}</span><br /><br />
21
    <span class="welcomefooter">{% trans "For more information or help, click " %}<a href="#">{% trans "here" %}</a>.</span>
22
</div>
23

    
24
<!-- the form -->
25
<form action="#">
26
        <!-- scrollable root element -->
27
        <div class="modal" id="wizard">
28
                <!-- status bar -->
29
                <ul id="status">
30
                        <li class="active"><span class="headernumber" class="first">1</span><div class="headerbody first">{% trans "Image" %}</div></li>
31
                        <li><span class="headernumber">2</span><div class="headerbody">{% trans "Flavor" %}</div></li>
32
                        <li class="third"><span class="headernumber">3</span><div class="headerbody">{% trans "Name" %}</div></li>
33
                </ul>
34
                <!-- scrollable items -->
35
                <div class="items">
36
                        <!-- pages -->
37
                        <div class="page">
38
                <h2>{% trans "Select an OS" %}</h2>
39
                <hr class="topruler" />
40
                <ul class="tabs">
41
                    <li><a href="#">{% trans "system images" %}</a></li>
42
                    <li><a href="#">{% trans "custom images" %}</a></li>
43
                </ul>
44
                <div class="panes">
45
                            <li id="image-template" style="display:none">
46
                                    <label for="image.id"> 
47
                            <a>
48
                                <div class="image-container">
49
                                    <div class="image">
50
                                        <input class="radio" type="radio" name="image-id" id="image-id" />
51
                                        <img src="" class="image-logo"/>
52
                                        <strong class="image-title">image.title</strong>
53
                                        <br />
54
                                        <span class="description">image.description</span> 
55
                                        <span id="size" class="size">?? MB</span><span class="size"> MB</span>                         
56
                                    </div>
57
                                </div>  
58
                            </a>
59
                                    </label>
60
                            </li>
61
                    <ul class="pane" id="standard-images">
62
                                            <!-- standard images -->
63
                                    </ul>
64
                    <ul class="pane" id="custom-images">
65
                                            <!-- custom images -->
66
                    </ul>
67
                </div>
68
                <hr class="bottomruler" />
69
                                <button type="button" class="prev" id="cancel">{% trans "Cancel" %}</button>
70
                                <button type="button" class="next right">{% trans "Next" %}</button>
71
            </div>
72
                        <div class="page">
73
                                <h2>{% trans "Select CPUs, RAM and Disk Size" %}</h2>
74
                <hr class="topruler" />
75
                <ul>
76
                    <li id="machinetype">
77
                        <div class="machine-type">
78
                            <label for="small" id="small">
79
                                <input type="radio" id="small" name="machine-type" value="small" checked="true" />
80
                                <span class="typebody" id="small-body">{% trans "small" %}</span>
81
                            </label>
82
                        </div>
83
                        <div class="machine-type">      
84
                            <label for="medium" id="medium">
85
                                <input type="radio" id="medium" name="machine-type" value="medium" />                  
86
                                <span class="typebody" id="medium-body">{% trans "medium" %}</span>
87
                            </label>
88
                        </div>
89
                        <div class="machine-type">
90
                            <label for="large" id="large">
91
                                <input type="radio" id="large" name="machine-type" value="large" />
92
                                <span class="typebody" id="large-body">{% trans "large" %}</span>
93
                            </label>
94
                        </div>
95
                        <div class="machine-type">
96
                            <label for="custom" id="custom">
97
                                <input type="radio" name="machine-type" id="custom" value="large" />
98
                                <span class="typebody" id="custom-body">{% trans "custom" %}</span>
99
                            </label>
100
                        </div>
101
                    </li>
102
                    <div id="page2-container">
103
                        <li class="slider-container">
104
                                        <label><strong class="sliders">CPUs</strong></label>
105
                            <input type="range" id="cpu" style="display:none" />
106
                            <input type="text" class="range" id="cpu-indicator" />
107
                                        <span class="units">cores</span>
108
                        </li>
109
                        <li class="slider-container">
110
                                        <label><strong class="sliders">RAM</strong></label>
111
                            <input type="range" id="ram" style="display:none" />
112
                            <input type="text" class="range" id="ram-indicator" />
113
                                        <span class="units">MB</span>
114
                        </li>
115
                        <li class="slider-container">
116
                                    <label><strong class="sliders">Size</strong></label>
117
                            <input type="range" id="storage" style="display:none" />
118
                            <input type="text" class="range" id="storage-indicator" />
119
                                        <span class="units">GB</span>
120
                        </li>
121
                        <li>
122
                            <div class="cost">
123
                                <span> {% trans "Your wallet:" %} 10,000 Credits </span> | <span>{% trans "This setup will cost you:" %}<input type="text" id="credits-indicator" value="20" class="range" disabled="disabled" /> {% trans "C/hour" %}</span>
124
                            </div>
125
                        </li>
126
                    </div>
127
                </ul>
128
                <hr class="bottomruler" />
129
                                <button type="button" class="prev">{% trans "Back" %}</button>
130
                                <button type="button" class="next right">{% trans "Next" %}</button>
131
            </div>
132
                        <div class="page">
133
                                <h2>{% trans "Confirm your settings" %}</h2>
134
                <hr class="topruler" />
135
                <ul id="page3-container">
136
                    <li class="required" id="label-name">
137
                        <label>
138
                            <strong>Name:</strong>
139
                            <input type="text" class="text" name="machine_name" id="name" value="My Ubuntu 10.04 x86_64 server"/>
140
                        </label>
141
                    </li>
142
                    <li>
143
                        <span>{% trans "Image:" %}</span> <span id="machine_image-label">Ubuntu 10.04 x86_64 server</span>
144
                    </li>
145
                    <li>
146
                        <span>{% trans "CPUs:" %}</span> <span id="machine_cpu-label">2</span> <span>{% trans "cores" %}</span>
147
                    </li>
148
                    <li>
149
                        <span>{% trans "RAM:" %}</span> <span id="machine_ram-label">1024</span><span>MB</span>
150
                    </li>
151
                    <li>
152
                        <span>{% trans "System Disk:" %}</span> <span id="machine_storage-label">10</span><span>GB</span>
153
                    </li>
154
                    <li>
155
                        <span>{% trans "Cost per Hour:" %}</span> <span>40 {% trans "credits" %}</span>
156
                    </li>
157
                    <li>
158
                        <span>{% trans "Credits in Wallet:" %}</span> <span>10.000</span>
159
                    </li>
160
                </ul>
161
                <hr class="bottomruler" />
162
                                <button type="button" class="prev">{% trans "Back" %}</button>
163
                                <button type="button" class="next right" id="start">{% trans "Create VM" %}</button>        
164
            </div>
165
                </div>
166
        </div>
167
</form>
168

    
169
<!-- base notification for error/success reporting -->
170
<a id="notification" rel="#error-success" href="#"></a>
171

    
172
<div class="modal" id="error-success">
173
    <h3>{% trans "Error!/Success!" %}</h3>
174
    <div><p>{% trans "More details about the result"%}</p></div>
175
</div>
176

    
177

    
178
<a id="meta-editor-1" rel="#editor-1" href="#"></a>
179

    
180
<div class="meta-modal" id="editor-1">
181
    <h3>
182
        <label>{% trans "Metadata for machine:" %}</label>
183
        <span></span>
184
    </h3>
185
    <hr class="topruler" />
186
    <hr class="fatruler" />
187
    <div class="content">
188
        <ul class="meta-template" style="display:none">
189
            <li>
190
                <label>{% trans "Metadata key" %}</label>
191
                <button type="button" class="remove">{% trans "remove x" %}</button>
192
                <hr class="meta-separator">
193
                <p>{% trans "Metadata value" %}</p>
194
                <button type="button" class="edit">{% trans "edit" %}</button>
195
            </li>
196
        </ul>
197
        <ul class="meta-list">
198
        </ul>
199
    </div>
200
    <button type="button" class="create">{% trans "Create New+" %}</button>
201
    <div class="bottomruler" /> 
202
</div>
203

    
204
<a id="meta-editor-2" rel="#editor-2" href="#"></a>
205

    
206
<div class="meta-modal" id="editor-2">
207
    <h3>
208
        <label>{% trans "Metadata for machine:" %}</label>
209
        <span></span>
210
    </h3>
211
    <hr class="topruler" />
212
    <hr class="fatruler" />
213
    <div class="content">
214
        <label class="meta-key">{% trans "Key:" %}</label>
215
        <input type="text" maxlength="15" class="key" value="max 15 characters"/>
216
        <hr class="meta-separator">
217
        <label class="meta-value">{% trans "Value:" %}</label>
218
        <input type="text" maxlength="150" class="value" value="max 150 characters"/>
219
    </div>
220
    <button type="button" class="cancel">{% trans "Cancel" %}</button>
221
    <button type="button" class="save">{% trans "Save" %}</button>
222
    <div class="bottomruler" /> 
223
</div>
224

    
225
<div id="machinesview"></div>
226

    
227
<div class="confirm_multiple">
228
    <p>{% trans "Your actions will affect" %} <span class="actionLen">XX</span> {% trans "machines" %}</p>
229
    <button class="yes">{% trans "Confirm All" %}</button>
230
        <button class="no">{% trans "Cancel All" %}</button>
231
</div>
232

    
233
<div id="machines" class="separator"></div>
234

    
235
<script>
236
//add hover to labels
237
$('span.typebody').mouseover(function() {
238
    $(this).addClass('typehover');
239
});
240
$('span.typebody').mouseout(function() {
241
    $(this).removeClass('typehover');
242
});
243

244
// return value from metadata key "OS", if it exists
245
function os_icon(metadata) {
246
    if (!metadata) {
247
        return 'unknown';
248
    }
249

250
    if (metadata.values.OS == undefined || metadata.values.OS == '') {
251
        return 'unknown';
252
    } else {
253
        return metadata.values.OS;
254
    }
255
} 
256

257
// switch to list view
258
$("a#list").click(function(){
259
    list_view(); 
260
    return false;
261
});
262

263
// switch to standard view
264
$("a#standard").click(function(){
265
    standard_view();
266
    return false;
267
});
268

269
// launch VM creation wizard
270
$("a#create").click(function(){
271
    // launch wizard only if images and flavors are found
272
    if (images.length > 0  && flavors.length > 0) {
273
        $("#wizard").scrollable().begin();
274
        $("#wizard").show();
275
        $('a#create').data('overlay').load()   
276
    } else if (images.length == 0 ) {
277
        ajax_error('NO_IMAGES');
278
        return false;   
279
    } else if (flavors.length == 0) {
280
        ajax_error('NO_FLAVORS');
281
        return false;
282
    }
283
});
284

285
// create wizard overlay
286
$(function() { 
287
    $("a#create").overlay({
288
        mask: '#000', 
289
        effect: 'default', 
290
        top: '5%', 
291
        oneInstance: false,
292
        closeOnClick: false
293
    });
294
});
295

296
// wizard
297
$(function() {
298
    var root = $("#wizard").scrollable();
299
    var api = root.scrollable();
300
    // rangeinput with default configuration
301
    // validation logic is done inside the onBeforeSeek callback
302
    api.onBeforeSeek(function(event, i) {
303
            // we are going 1 step backwards so no need for validation
304
            if (api.getIndex() < i) {
305
             // 1. get current page
306
                     var page = root.find(".page").eq(api.getIndex()),
307
                         // 2. .. and all required fields inside the page
308
                         inputs = page.find(".required :input").removeClass("error"),
309
                         // 3. .. which are empty
310
                         empty = inputs.filter(function() {
311
                                return $(this).val().replace(/\s*/g, '') == '';
312
                         });
313
                     // if there are empty fields, then
314
                    if (empty.length) {
315
                            // add a CSS class name "error" for empty & required fields
316
                            empty.addClass("error");
317
                            // cancel seeking of the scrollable by returning false
318
                            return false;
319
                    // everything is good
320
                    } 
321
            }
322
            // update status bar
323
            $("#status li").removeClass("active").eq(i).addClass("active");
324
        // update confirm step
325
        if (api.getIndex()==0) {
326
            var image = $("input[type=radio][name=image-id]:checked");
327
            var imageRef = image.length ? image[0].id : false
328
            if (imageRef) {
329
                var imageName = $("label[for=" + imageRef + "] .image-title").text();
330
                $("#machine_image-label")[0].textContent = imageName;
331
                $("input[type=text][name=machine_name]")[0].value = "My " + imageName + " server";
332
            }
333
        } else if (api.getIndex()==1) {
334
            $("#machine_cpu-label")[0].textContent = $("#cpu-indicator")[0].value;
335
            $("#machine_ram-label")[0].textContent = $("#ram-indicator")[0].value;
336
            $("#machine_storage-label")[0].textContent = $("#storage-indicator")[0].value;
337
        }    
338
    });
339
    // if tab is pressed on the next button seek to next page
340
    $(root).live('keydown', function (e) {
341
       if ( e.keyCode == 9 ){
342
           if(e.preventDefault) {
343
               e.preventDefault();
344
           }
345
           if (api.getIndex() < 2) {
346
               api.next();
347
            } else {
348
                return false;
349
            }
350
        }
351
    });
352
    $("#name").keypress(function (e) {
353
                if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
354
                        $('#start').click();
355
                        return false;
356
                } else {
357
                        return true;
358
                }
359
    });
360
});
361

362
// disable sliders in flavor selection
363
function disableSliders() {
364
    $("#cpu").attr('disabled',true);
365
    $("#ram").attr('disabled',true);
366
    $("#storage").attr('disabled',true);
367
}
368

369
//update radio button when clicking on text
370
$("#small-body").live('click' ,function() { 
371
    $(this).parent().find("#small").click();
372
});
373
$("#medium-body").live('click' ,function() { 
374
    $(this).parent().find("#medium").click();
375
});
376
$("#large-body").live('click' ,function() { 
377
    $(this).parent().find("#large").click();
378
});
379
$("#custom-body").live('click' ,function() { 
380
    $(this).parent().find("#custom").click();
381
});
382

383
//select image div on radio button select
384
$('.radio').live('click' ,function() {           
385
    $(this).parents("div").find(".image").removeClass('selecteddiv');
386
    if($(this).is(':checked'))  {
387
        $(this).parent().addClass('selecteddiv');
388
    }
389
});
390

391
// validate cpu input box
392
$("#cpu-indicator").live('change',function(){
393
    var v = Number(this.value);
394
    var i = cpus.indexOf(v);
395
    if (isNaN(v)) {
396
        $(this).value = cpus[0];
397
        $("#cpu").data('rangeinput').setValue(0);
398
    } else if (i == -1) {
399
        for (var j=0; j < cpus.length; j++)
400
            if (v<cpus[j])
401
                break;
402
        $("#cpu").data('rangeinput').setValue(j);
403
    } else {
404
        $("#cpu").data('rangeinput').setValue(i);
405
    }   
406
    return false;
407
});
408

409
// validate ram input box
410
$("#ram-indicator").live('change',function(){
411
    var v = Number(this.value);
412
    var i = ram.indexOf(v);
413
    if (isNaN(v)) {
414
        $(this).value = cpus[0];
415
        $("#ram").data('rangeinput').setValue(0);
416
    } else if (i == -1) {
417
        for (var j=0; j < ram.length; j++)
418
            if (v<ram[j])
419
                break;
420
        $("#ram").data('rangeinput').setValue(j);
421
    } else {
422
        $("#ram").data('rangeinput').setValue(i);
423
    }   
424
    return false;
425
});
426

427

428
// validate storage input box
429
$("#storage-indicator").live('change',function(){
430
    var v = Number(this.value);
431
    var i = disks.indexOf(v);
432
    if (isNaN(v)) {
433
        $(this).value = disks[0];
434
        $("#storage").data('rangeinput').setValue(0);
435
    } else if (i == -1) {
436
        for (var j=0; j < disks.length; j++)
437
            if (v<disks[j])
438
                break;
439
        $("#storage").data('rangeinput').setValue(j);
440
    } else {
441
        $("#storage").data('rangeinput').setValue(i);
442
    }   
443
    return false;
444
});
445

446
// selecting the small size
447
$("#small").click(function(){
448
    $("#cpu").data('rangeinput').setValue(0);
449
    $("#ram").data('rangeinput').setValue(0);
450
    $("#storage").data('rangeinput').setValue(0);
451
    $("#cpu-indicator")[0].value = cpus[0];
452
    $("#ram-indicator")[0].value = ram[0];
453
    $("#storage-indicator")[0].value = disks[0];
454
    $("#small").addClass("active");
455
    $("#medium").removeClass("active");    
456
    $("#large").removeClass("active");    
457
    $("#custom").removeClass("active");    
458
});
459

460
// selecting the medium size
461
$("#medium").click(function(){
462
    $("#cpu").data('rangeinput').setValue(1);
463
    $("#ram").data('rangeinput').setValue(1);
464
    $("#storage").data('rangeinput').setValue(1);
465
    $("#cpu-indicator")[0].value = cpus[1];
466
    $("#ram-indicator")[0].value = ram[1];
467
    $("#storage-indicator")[0].value = disks[1];  
468
    $("#medium").addClass("active");  
469
    $("#small").removeClass("active");    
470
    $("#large").removeClass("active");    
471
    $("#custom").removeClass("active");  
472
});
473

474
// selecting the large size
475
$("#large").click(function(){
476
    $("#cpu").data('rangeinput').setValue(2);
477
    $("#ram").data('rangeinput').setValue(2);
478
    $("#storage").data('rangeinput').setValue(2);
479
    $("#cpu-indicator")[0].value = cpus[2];
480
    $("#ram-indicator")[0].value = ram[2];
481
    $("#storage-indicator")[0].value = disks[2];   
482
    $("#large").addClass("active"); 
483
    $("#medium").removeClass("active");    
484
    $("#small").removeClass("active");    
485
    $("#custom").removeClass("active");  
486
});
487

488
// selecting the custom flavor enables the sliders
489
$("#custom").click(function(){
490
    $("#cpu").attr('disabled',false);
491
    $("#ram").attr('disabled',false);
492
    $("#storage").attr('disabled',false);
493
    $("strong.sliders").style = 'color: #778899;';
494
    $("#custom").addClass("active"); 
495
    $("#medium").removeClass("active");    
496
    $("#large").removeClass("active");    
497
    $("#small").removeClass("active");  
498
});
499

500
//when textbox gains focus, add selection in css
501
$('#cpu-indicator').focus(function() {
502
    $(this).addClass('selectedrange');
503
});
504
$('#ram-indicator').focus(function() {
505
    $(this).addClass('selectedrange');
506
});
507
$('#storage-indicator').focus(function() {
508
    $(this).addClass('selectedrange');
509
});
510

511
//when textbox loses focus, clear selection in css
512
$('#cpu-indicator').blur(function() {
513
    $(this).removeClass('selectedrange');
514
});
515
$('#ram-indicator').blur(function() {
516
    $(this).removeClass('selectedrange');
517
});
518
$('#storage-indicator').blur(function() {
519
    $(this).removeClass('selectedrange');
520
});
521

522
// exit the wizard
523
$("#cancel").click(function(){
524
    $("a#create").overlay().close();
525
});
526

527
// starting a new VM through the wizard
528
$("#start").click(function(){
529
    var imageRef = $('input[type=radio][name=image-id]:checked')[0].id.replace('img-radio-','');   
530
    var flavorRef = identify_flavor($("#cpu-indicator")[0].value, $("#storage-indicator")[0].value, $("#ram-indicator")[0].value);
531
    var machineName = $('input[name=machine_name]')[0].value;
532
    if (jQuery.trim(machineName) == ''){
533
        return false;
534
    }
535
    create_vm(machineName, imageRef, flavorRef);
536

537
    $('a#create').data('overlay').close();
538

539
    try{console.warn('creating ' + $("input[name=machine_name]")[0].value)} catch(err){}
540

541
    $("#wizard").hide();
542
});
543

544
// confirm all actions
545
$("div.confirm_multiple .yes").live('click', function(){
546
    while(pending_actions.length > 0){ // if there is a pending action for this server execute it
547
        action = pending_actions.pop(); // extract action
548
        var serverID = action[1];
549
        if ($.cookie("list") != '1') { // standard view
550
            $('#' + serverID + ' .selected').removeClass('selected');
551
            $('#' + serverID + ' .display').removeClass('display');
552
            if (action[0] == shutdown) {
553
                $('#' + serverID + ' .status').text('Shutting down');
554
            } else if (action[0] == start) {
555
                $('#' + serverID + ' .status').text('Starting');
556
            } else if (action[0] == reboot) {
557
                $('#' + serverID + ' .status').text('Rebooting');
558
            } else if (action[0] == destroy) {
559
                $('#' + serverID + ' .status').text('Destroying');
560
            }
561
            $('#' + serverID + ' .spinner').show();
562
        } else { // list view
563
            osIcon = $('#'+serverID).parent().parent().find('.list-logo');
564
            osIcon.attr('os',osIcon.attr('src'));
565
            osIcon.attr('src','static/progress.gif');
566
            if (action[0] == shutdown) {
567
                $('#' + serverID).parent().parent().find('span.status').text('Shutting down');
568
            } else if (action[0] == start) {
569
                $('#' + serverID).parent().parent().find('span.status').text('Starting');
570
            } else if (action[0] == reboot) {
571
                $('#' + serverID).parent().parent().find('span.status').text('Rebooting');
572
            } else if (action[0] == destroy) {
573
                $('#' + serverID).parent().parent().find('span.status').text('Destroying');
574
            }
575
        }
576
        action[0]([serverID]); // execute action
577
    }
578
    update_confirmations();    
579
});
580

581
// cancel all actions
582
$("div.confirm_multiple .no").live('click', function(){
583
    pending_actions = [];
584
    $('.machine .selected').removeClass('selected');
585
    $('.machine .display').removeClass('display');
586
    update_confirmations();
587
});
588

589
// bring up edit metadata overlay
590
function editMetadata() {
591
    var triggers = $("a#meta-editor-1").overlay({
592
        // some mask tweaks suitable for modal dialogs
593
        mask: '#000',
594
        effect: 'default',
595
        top: '10%',
596
        closeOnClick: false,
597
        oneInstance: false,
598
        load: false,
599
        onClose: function() {
600
            // remove all entries so they won't be preloaded next time you open the dialog
601
            $("#editor-1 div.content ul.meta-list").empty();
602
        },
603
        onLoad: function() {
604
            // this is a work around for the mask not appearing problem
605
            $("#editor-1").expose();
606
        }
607
    });
608
    // get metadata for current server and fill the dialog
609
    serverID = $("#editor-1 h3").attr('id');
610
    get_metadata(serverID);
611
    $("a#meta-editor-1").data('overlay').load();
612
    return false; 
613
}
614

615
// bring up add metadata overlay
616
function addMetadata() {
617
    var triggers = $("a#meta-editor-2").overlay({
618
        // some mask tweaks suitable for modal dialogs
619
        mask: '#000',
620
        effect: 'default',
621
        top: '10%',
622
        closeOnClick: false,
623
        oneInstance: false,
624
        load: false,
625
        onLoad: function() {
626
            // this is a work around for the mask not appearing problem
627
            $("#editor-2").expose();
628
        }
629
    });
630
    $("a#meta-editor-2").data('overlay').load();
631
    return false; 
632
}
633

634
// intercept click on create button in metadata edit dialog
635
$('#editor-1.meta-modal button.create').click( function(){
636
    // close edit metadata and open add metadata dialog
637
    $('a#meta-editor-1').data('overlay').close();
638
    addMetadata();
639
});
640

641
// intercept click on remove button in metadata edit dialog
642
$('#editor-1.meta-modal button.remove').live('click', function() { 
643
    // get the server id and meta key needed for the ajax call   
644
    var serverID = $(this).parent().parent().parent().parent().children("h3").attr('id');
645
    var meta_key = $(this).parent().find("label").text();
646
    // make the ajax call and list the new GET results
647
    delete_metadata(serverID, meta_key);
648
    return false;
649
});
650

651
// intercept click on edit button in metadata edit dialog
652
$('#editor-1.meta-modal button.edit').click( function(){
653
    // inline editing of selected key-value pair
654
    // on submission ajax call from updating
655
    // on success update the overlay
656
    // TODO
657
});
658

659
// intercept click on cancel button in metadata add dialog
660
$('#editor-2.meta-modal button.cancel').click( function(){
661
    // close add metadata and open edit metadata dialog
662
    $('a#meta-editor-2').data('overlay').close();
663
    editMetadata();
664
});
665

666
// intercept click on save button in metadata add dialog
667
$('#editor-2.meta-modal button.save').live('click', function() {
668
    // get the server id, meta key and meta value needed for the ajax call       
669
    var serverID = $(this).parent().children("h3").attr('id');
670
    var meta_key = $(this).parent().find(".content input.key").attr('value');
671
    var meta_value = $(this).parent().find(".content input.value").attr('value');
672
    // make the ajax call and list the new GET results
673
    add_metadata(serverID, meta_key, meta_value);
674
    // close add metadata and open edit metadata dialog
675
    $('a#meta-editor-2').data('overlay').close();
676
    editMetadata();
677
    return false;
678
});
679

680
// update metadata in edit dialog
681
function list_metadata(data) {    
682
    // empty the list if it already exists
683
    $("#editor-1 div.content ul.meta-list").empty();
684
    // get the values to show
685
    meta = data.metadata.values;
686
    // show values
687
    for (key in meta) {
688
        pair = $("ul.meta-template li").clone();
689
        pair.find("label").text(key);
690
        pair.find("p").text(meta[key]);
691
        pair.appendTo("#editor-1 div.content ul.meta-list").fadeIn();
692
    }
693
}
694

695
// basic functions executed on page load
696
if (images.length > 0) {
697
    // populate image list
698
    update_wizard_images();
699
}
700
if (flavors.length > 0) {
701
    // configure flavors
702
    update_wizard_flavors(); 
703
}
704
// create tabs for main menu
705
$("ul.tabs").tabs("div.panes ul");
706

    
707
</script>