var listView = args.listView;

var action = args.action;

var validate = function($uploadVolume) {

if (!$uploadVolume.find('input[type=text]').val()) {

cloudStack.dialog.notice({

message: _l('message.specify.url')

});

return false;

}

if (!$uploadVolume.find(

'input[type=radio]:checked, input[type=checkbox]:checked'

).size()) {

cloudStack.dialog.notice({

message: _l('message.select.instance')

});

return false;

}

return true;

};

return function(args) {

var $uploadVolume = $('<div>').addClass('upload-volume');

var context = args.context;

var topFields = function() {

var $form = $('<form>').addClass('top-fields');

var $urlLabel = $('<label>').html(_l('label.url') + ':');

var $urlField = $('<div>').addClass('field url');

var $nameLabel = $('<label>').html(_l('label.name') + ':');

var $nameField = $('<div>').addClass('field name');

var $urlInput = $('<input>').attr({

type: 'text',

name: 'url'

}).addClass('required');

var $nameInput = $('<input>').attr({

type: 'text',

name: 'name'

}).addClass('required');

$urlField.append($urlLabel, $urlInput);

$nameField.append($nameLabel, $nameInput);

$form.append($nameField, $urlField);

return $form;

};

var vmList = function(args) {

// Create a listing of instances, based on limited information

// from main instances list view

var $listView;

var instances = $.extend(true, {}, args.listView, {

context: context,

uiCustom: true

});

instances.listView.actions = {

select: {

label: _l('label.select.instance'),

type: 'radio',

action: {

uiCustom: function(args) {

var $item = args.$item;

var $input = $item.find('td.actions input:visible');

if ($input.attr('type') == 'checkbox') {

if ($input.is(':checked'))

$item.addClass('multi-edit-selected');

else

$item.removeClass('multi-edit-selected');

} else {

$item.siblings().removeClass('multi-edit-selected');

$item.addClass('multi-edit-selected');

}

}

}

}

};

$listView = $('<div>').listView(instances);

// Change action label

$listView.find('th.actions').html(_l('label.select'));

return $listView;

};

$uploadVolume.append(

topFields,

$('<div>').addClass('desc').html(_l('label.select.instance.to.attach.volume.to') + ':'),

$('<div>').addClass('listView-container').append(

vmList({

listView: listView

})

)

);

$uploadVolume.dialog({

dialogClass: 'multi-edit-add-list panel',

width: 900,

title: _l('label.upload.volume'),

buttons: [{

text: _l('label.upload'),

'class': 'ok',

click: function() {

if (!validate($uploadVolume)) return false;

var complete = args.complete;

var $loading = $('<div>').addClass('loading-overlay');

$loading.appendTo($uploadVolume);

action({

data: cloudStack.serializeForm($uploadVolume.find('form')),

context: $.extend(true, {}, context, {

instances: [

$uploadVolume.find('tr.multi-edit-selected').data('json-obj')

]

}),

response: {

success: function(args) {

$('.ui-dialog').fadeOut(function() {

$('.ui-dialog').remove();

$(window).trigger('cloudStack.fullRefresh');

});

$('div.overlay').fadeOut(function() {

$('div.overlay').remove();

});

complete({

$item: $('<div>'),

_custom: args._custom

});

},

error: function(args) {

$loading.remove();

cloudStack.dialog.notice({

message: args

});

}

}

});

}

}, {

text: _l('label.cancel'),

'class': 'cancel',

click: function() {

$('.ui-dialog').fadeOut(function() {

$('.ui-dialog').remove();

});

$('div.overlay').fadeOut(function() {

$('div.overlay').remove();

});

}

}]

}).closest('.ui-dialog').overlay();

};