Statistics
| Branch: | Tag: | Revision:

root / ui / templates / machines.html @ 08cc1924

History | View | Annotate | Download (26.1 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

533
    create_vm(machineName, imageRef, flavorRef);
534

535
    $('a#create').data('overlay').close();
536

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

539
    $("#wizard").hide();
540
});
541

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

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

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

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

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

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

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

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

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

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

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

    
705
</script>