Statistics
| Branch: | Tag: | Revision:

root / ui / templates / machines.html @ 5186eb04

History | View | Annotate | Download (24.9 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
    });
598
    // get metadata for current server and fill the dialog
599
    serverID = $("#editor-1 h3").attr('id');
600
    get_metadata(serverID);
601
    $("a#meta-editor-1").data('overlay').load();
602
    return false; 
603
}
604

605
// bring up add metadata overlay
606
function addMetadata() {
607
    var triggers = $("a#meta-editor-2").overlay({
608
        // some mask tweaks suitable for modal dialogs
609
        mask: '#000',
610
        effect: 'default',
611
        top: '10%',
612
        closeOnClick: false,
613
        oneInstance: false,
614
        load: false
615
    });
616
    $("a#meta-editor-2").data('overlay').load();
617
    return false; 
618
}
619

620
// intercept click on create button in metadata edit dialog
621
$('#editor-1.meta-modal button.create').click( function(){
622
    // go from edit metadata to add metadata
623
    $('a#meta-editor-1').data('overlay').close();
624
    addMetadata();
625
});
626

627
// intercept click on remove button in metadata edit dialog
628
$('#editor-1.meta-modal button.create').click( function(){
629
    // ajax call to delete selected metadata key-value pair
630
    // if successful remove it from the overlay
631
    // TODO
632
});
633

634
// intercept click on edit button in metadata edit dialog
635
$('#editor-1.meta-modal button.create').click( function(){
636
    // inline editing of selected key-value pair
637
    // on submission ajax call from updating
638
    // on success update the overlay
639
    // TODO
640
});
641

642
// intercept click on cancel button in metadata add dialog
643
$('#editor-2.meta-modal button.cancel').click( function(){
644
    // go from add meatata to edit metadata
645
    $('a#meta-editor-2').data('overlay').close();
646
    editMetadata();
647
});
648

649
// intercept click on save button in metadata add dialog
650
$('#editor-2.meta-modal button.save').click( function(){
651
    // ajax call to save metadata
652
    //TODO
653
    // go from add meatata to edit metadata
654
    $('a#meta-editor-2').data('overlay').close();
655
    editMetadata();
656
});
657

658
// update metadata in edit dialog
659
function update_metadata(data) {
660

661
    meta = data.metadata.values;
662

663
    for (key in meta) {
664
        alert(key);
665
        alert(meta[key]);
666
        pair = $("ul.meta-template li").clone();
667
        pair.find("label").text(key);
668
        pair.find("p").text(meta[key]);
669
        pair.appendTo("#editor-1 div.content ul.meta-list");
670
    }
671
}
672

673
// basic functions executed on page load
674
if (images.length > 0) {
675
    // populate image list
676
    update_wizard_images();
677
}
678
if (flavors.length > 0) {
679
    // configure flavors
680
    update_wizard_flavors(); 
681
}
682
// create tabs for main menu
683
$("ul.tabs").tabs("div.panes ul");
684

    
685
</script>