return function(args) {

var message = args.message ? args.message : args;

if (message) cloudStack.dialog.notice({

message: message

});

if (callback) callback();

};

var cancel = args.cancel;

var $formContainer = $('<div>').addClass('form-container');

var $form = $('<form>').appendTo($formContainer)

.submit(function() {

$(this).closest('.ui-dialog').find('button.ok').click();

return false;

});

var createLabel = _l(args.form.createLabel);

// Description text

var formDesc;

if (typeof(args.form.desc) == 'function') {

formDesc = args.form.desc(args);

} else { //typeof(args.form.desc) == 'string' or 'undefined'

formDesc = args.form.desc;

}

$('<span>').addClass('message').prependTo($formContainer).html(

_l(formDesc)

);

// Submit button

$('<input>')

.attr({

type: 'submit'

})

.hide()

.appendTo($form);

// Render fields and events

var fields = $.map(args.form.fields, function(value, key) {

return key;

});

$(window).trigger('cloudStack.createForm.makeFields', {

$form: $form,

fields: args.form.fields

});

var ret = function() {

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

return $formContainer.dialog({

dialogClass: args.form.isWarning ? 'create-form warning' : 'create-form',

closeOnEscape: false,

draggable: false,

width: 400,

title: _l(args.form.title),

open: function() {

if (args.form.preFilter) {

args.form.preFilter({

$form: $form,

context: args.context

});

}

$(window).trigger('cloudStack.createForm.open', {

$form: $form

});

},

buttons: [{

text: createLabel ? createLabel : _l('label.ok'),

'class': 'ok',

click: function() {

if (!complete($formContainer)) {

return false;

}

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

$('.tooltip-box').remove();

$formContainer.remove();

$(this).dialog('destroy');

$('.hovered-elem').hide();

return true;

}

}, {

text: _l('label.cancel'),

'class': 'cancel',

click: function() {

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

$('.tooltip-box').remove();

$formContainer.remove();

$(this).dialog('destroy');

$('.hovered-elem').hide();

if (cancel) {

cancel();

}

}

}]

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

};

var isLastAsync = function(idx) {

for (var i = idx + 1; i < $(fields).length; i++) {

var f = args.form.fields[$(fields).get(i)];

if (f.select || f.dynamic) {

return false;

}

}

return true;

};

var isAsync = false;

var isNoDialog = args.noDialog ? args.noDialog : false;

$(fields).each(function(idx, element) {

var key = this;

var field = args.form.fields[key];

var $formItem = $('<div>')

.addClass('form-item')

.attr({

rel: key

});

if (field.isHidden != null) {

if (typeof(field.isHidden) == 'boolean' && field.isHidden == true)

$formItem.hide();

else if (typeof(field.isHidden) == 'function' && field.isHidden(args) == true)

$formItem.hide();

}

$formItem.appendTo($form);

//Handling Escape KeyPress events

/* $('.ui-dialog').keypress(function(event) {

// Label field

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

.appendTo($formItem)

.append(

$('<label>').html(_l(field.label) + ':')

);

// red asterisk

var $astersikSpan = $('<span>').addClass('field-required').html('*');

$name.find('label').prepend($astersikSpan);

if (field.validation == null || field.validation.required == false) {

$astersikSpan.hide();

}

// Tooltip description

if (field.desc) {

$formItem.attr({

title: _l(field.desc)

});

}

// Input area

var $value = $('<div>').addClass('value')

.appendTo($formItem);

var $input, $dependsOn, selectFn, selectArgs;

var dependsOn = field.dependsOn;

// Depends on fields

if (field.dependsOn) {

$formItem.attr('depends-on', dependsOn);

$dependsOn = $form.find('input, select').filter(function() {

return $.isArray(dependsOn) ?

$.inArray($(this).attr('name'), dependsOn) > -1 :

$(this).attr('name') === dependsOn;

});

if ($dependsOn.is('[type=checkbox]')) {

var isReverse = false;

if (args.form.fields[dependsOn]) {

isReverse = args.form.fields[dependsOn].isReverse;

isChecked = args.form.fields[dependsOn].isChecked;

}

// Checkbox

$dependsOn.bind('click', function(event) {

var $target = $(this);

var $dependent = $target.closest('form').find('[depends-on=\'' + dependsOn + '\']');

if (($target.is(':checked') && !isReverse) ||

($target.is(':unchecked') && isReverse)) {

$dependent.css('display', 'inline-block'); //show dependent dropdown field

$dependent.change(); //trigger event handler for default option in dependent dropdown field (CLOUDSTACK-7826)

$dependent.each(function() {

if ($(this).data('dialog-select-fn')) {

$(this).data('dialog-select-fn')();

}

});

} else if (($target.is(':unchecked') && !isReverse) ||

($target.is(':checked') && isReverse)) {

var fieldObj = args.form.fields[$dependent.attr('rel')];

var shouldHidden = true;

if (typeof(fieldObj.isHidden) == 'function') {

shouldHidden = fieldObj.isHidden(args);

} else if (typeof(fieldObj.isHidden) == 'boolean') {

shouldHidden = fieldObj.isHidden;

}

if (shouldHidden) {

$dependent.hide();

}

}

$dependent.find('input[type=checkbox]').click();

if (!isReverse) {

$dependent.find('input[type=checkbox]').attr('checked', false);

} else {

$dependent.find('input[type=checkbox]').attr('checked', true);

}

return true;

});

// Show fields by default if it is reverse checkbox

if (isReverse) {

$dependsOn.click();

if (isChecked) {

$dependsOn.attr('checked', true);

}

}

}

}

// Determine field type of input

if (field.select) {

isAsync = true;

selectArgs = {

context: args.context,

response: {

success: function(args) {

if (args.data == undefined || args.data.length == 0) {

var $option = $('<option>')

.appendTo($input)

.html("");

} else {

$(args.data).each(function() {

var id;

if (field.valueField)

id = this[field.valueField];

else

id = this.id !== undefined ? this.id : this.name;

var desc;

if (args.descriptionField)

desc = this[args.descriptionField];

else

desc = _l(this.description);

var $option = $('<option>')

.appendTo($input)

.val(_s(id))

.data('json-obj', this)

.html(_s(desc));

});

}

if (field.defaultValue) {

$input.val(_s(strOrFunc(field.defaultValue, args.data)));

}

$input.trigger('change');

if ((!isNoDialog) && isLastAsync(idx)) {

ret();

}

}

}

};

selectFn = field.select;

$input = $('<select>')

.attr({

name: key

})

.data('dialog-select-fn', function(args) {

selectFn(args ? $.extend(true, {}, selectArgs, args) : selectArgs);

})

.appendTo($value);

// Pass form item to provider for additional manipulation

$.extend(selectArgs, {

$select: $input,

$form: $form,

type: 'createForm'

});

if (dependsOn) {

$dependsOn = $input.closest('form').find('input, select').filter(function() {

return $.isArray(dependsOn) ?

$.inArray($(this).attr('name'), dependsOn) > -1 :

$(this).attr('name') === dependsOn;

});

// Reload selects linked to in dependsOn

$dependsOn.each(function() {

var $targetDependsOn = $(this);

$targetDependsOn.bind('change', function(event) {

var formData = cloudStack.serializeForm($form);

var dependsOnLoaded;

// Make sure all data is loaded to pass to select fn

dependsOnLoaded = $.inArray(

true, $dependsOn.map(function(index, item) { return $(item).find('option').size() ? true : false; })

) > -1;

if (!dependsOnLoaded) {

return false;

}

var $target = $(this);

if (!$target.is('select')) {

return true;

}

$input.find('option').remove();

// Re-execute select

selectFn($.extend(selectArgs, formData, {

data: formData

}));

return true;

});

});

if (!$dependsOn.is('select')) {

selectFn(selectArgs);

}

} else {

selectFn(selectArgs);

}

} else if (field.isBoolean) {

if (field.multiArray) {

$input = $('<div>')

.addClass('multi-array').addClass(key).appendTo($value);

$.each(field.multiArray, function(itemKey, itemValue) {

$input.append(

$('<div>').addClass('item')

.append(

$.merge(

$('<div>').addClass('name').html(_l(itemValue.label)),

$('<div>').addClass('value').append(

$('<input>').attr({

name: itemKey,

type: 'checkbox'

}).appendTo($value)

)

)

)

);

});

} else {

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

name: key,

type: 'checkbox'

}).appendTo($value);

var isChecked;

if (typeof (field.isChecked) == 'function') {

isChecked = field.isChecked(args);

} else {

isChecked = field.isChecked;

}

if (isChecked) {

$input.attr('checked', strOrFunc(field.isChecked, args));

} else {

// This is mainly for IE compatibility

setTimeout(function() {

$input.attr('checked', false);

}, 100);

}

}

// Setup on click event

if (field.onChange) {

$input.click(function() {

field.onChange({

$checkbox: $input

});

});

}

} else if (field.dynamic) {

isAsync = true;

// Generate a 'sub-create-form' -- append resulting fields

$input = $('<div>').addClass('dynamic-input').appendTo($value);

$form.hide();

field.dynamic({

context: args.context,

response: {

success: function(args) {

var form = cloudStack.dialog.createForm({

noDialog: true,

form: {

title: '',

fields: args.fields

}

});

var $fields = form.$formContainer.find('.form-item').appendTo($input);

$form.show();

// Form should be slightly wider

$form.closest(':ui-dialog').dialog('option', {

position: 'center',

closeOnEscape: false

});

if ((!isNoDialog) && isLastAsync(idx)) {

ret();

}

}

}

});

} else if (field.isTextarea) {

$input = $('<textarea>').attr({

name: key

}).appendTo($value);

if (field.defaultValue) {

$input.val(strOrFunc(field.defaultValue));

}

} else if (field.isTokenInput) { // jquery.tokeninput.js

isAsync = true;

selectArgs = {

context: args.context,

response: {

success: function(args) {

$input.tokenInput(unique_tags(args.data),

{

theme: "facebook",

preventDuplicates: true,

hintText: args.hintText,

noResultsText: args.noResultsText

});

}

}

};

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

name: key,

type: 'text'

}).appendTo($value);

$.extend(selectArgs, {

$form: $form,

type: 'createForm'

});

field.dataProvider(selectArgs);

} else if (field.isDatepicker) { //jQuery datepicker

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

name: key,

type: 'text'

}).appendTo($value);

if (field.defaultValue) {

$input.val(strOrFunc(field.defaultValue));

}

if (field.id) {

$input.attr('id', field.id);

}

$input.addClass("disallowSpecialCharacters");

$input.datepicker({

dateFormat: 'yy-mm-dd'

});

} else if (field.range) { //2 text fields on the same line (e.g. port range: startPort - endPort)

$input = $.merge(

// Range start

$('<input>').attr({

type: 'text',

name: field.range[0]

}),

// Range end

$('<input>').attr({

type: 'text',

name: field.range[1]

})

).appendTo(

$('<div>').addClass('range-edit').appendTo($value)

);

$input.wrap($('<div>').addClass('range-item'));

$input.addClass("disallowSpecialCharacters");

} else if (field.has_units) { // An input box and a drop down with unit options

var textbox = $('<input>')

.attr({

type: 'text',

name: key

})

.css('width', 'auto');

var unitSelect = $('<select>')

.attr({

name: key+'_unit'

})

.data('key', key)

.css('width', 'auto');

$input = textbox;

textbox.appendTo($value);

unitSelect.appendTo($value);

$.each(field.units, function() {

var id = this.id;

var text = this.text;

var toBase = this.toBase;

var fromBase = this.fromBase;

var option = $('<option>')

.appendTo(unitSelect)

.val(_s(id))

.html(_s(text))

.data('toBase', toBase)

.data('fromBase', fromBase);

});

unitSelect.focus(function() {

this.oldUnit = this.value;

});

unitSelect.change(function() {

if ($(this).parent().length == 0)

return;

var oldUnit = this.oldUnit;

var newUnit = this.value;

var key = $(this).data('key');

var value = $(this).closest('form').find('input[name='+key+']').attr('value');

if (!value || value.length === 0 || !oldUnit || oldUnit == newUnit)

return;

var toBase = $(this).closest('form').find('option[value='+oldUnit+']').data('toBase');

var fromBase = $(this).closest('form').find('option[value='+newUnit+']').data('fromBase');

var baseValue = toBase(value);

var newValue = fromBase(baseValue);

$(this).closest('form').find('input[name='+key+']').attr('value', newValue);

this.oldUnit = newUnit;

})

} else { //text field

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

name: key,

type: field.password || field.isPassword ? 'password' : 'text'

}).appendTo($value);

if (field.defaultValue) {

$input.val(strOrFunc(field.defaultValue, args.context));

}

if (field.id) {

$input.attr('id', field.id);

}

$input.addClass("disallowSpecialCharacters");

}

if (field.validation != null)

$input.data('validation-rules', field.validation);

else

$input.data('validation-rules', {});

var fieldLabel = field.label;

var inputId = $input.attr('id') ? $input.attr('id') : fieldLabel.replace(/\./g, '_');

$input.attr('id', inputId);

$name.find('label').attr('for', inputId);

if (field.isDisabled)

$input.attr("disabled", "disabled");

// Tooltip

if (field.docID) {

$input.toolTip({

docID: field.docID,

tooltip: '.tooltip-box',

mode: 'focus',

attachTo: '.form-item'

});

}

/* $input.blur(function() {

});

var getFormValues = function() {

var formValues = {};

$.each(args.form.fields, function(key) {});

};

// Setup form validation

$formContainer.find('form').validate();

$formContainer.find('input, select').each(function() {

if ($(this).data('validation-rules')) {

$(this).rules('add', $(this).data('validation-rules'));

} else {

$(this).rules('add', {});

}

});

$form.find('select').trigger('change');

var complete = function($formContainer) {

var $form = $formContainer.find('form');

var data = cloudStack.serializeForm($form);

if (!$formContainer.find('form').valid()) {

// Ignore hidden field validation

if ($formContainer.find('input.error:visible, select.error:visible').size()) {

return false;

}

}

args.after({

data: data,

ref: args.ref, // For backwards compatibility; use context

context: args.context,

$form: $form

});

return true;

};

if (args.noDialog) {

return {

$formContainer: $formContainer,

completeAction: complete

};

} else if (!isAsync) {

return ret();

}

var listView = args.listView;

var hideSelectAction = args.listView.hideSelectAction;

var after = args.after;

var context = args.context;

var $listView = $('<div>');

console.log(args);

listView.actions = {};

if ( typeof(hideSelectAction) == 'undefined' ||

!hideSelectAction ) {

listView.actions['select'] = {

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

type: listView.type,

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');

}

}

}

}

}

// Init list view

$listView = $('<div>').listView({

context: context,

uiCustom: true,

listView: listView

});

// Change action label

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

$listView.dialog({

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

width: 825,

title: _l('Select VM'),

buttons: [{

text: _l('label.apply'),

'class': 'ok',

click: function() {

if (!$listView.find(

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

).size()) {

cloudStack.dialog.notice({

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

});

return false;

}

after({

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

instances: $listView.find('tr.multi-edit-selected').map(function(index, row) {

var $row = $(row);

return $row.data('json-obj');

})

})

});

$listView.remove();

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

}

}, {

text: _l('label.cancel'),

'class': 'cancel',

click: function() {

$listView.fadeOut(function() {

$listView.remove();

});

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

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

});

}

}]

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

var $input = $formField.find('input, select');

var validationRules = $input.data('validation-rules');

if (validationRules == null || validationRules.required == null || validationRules.required == false) {

$formField.find('.name').find('label').find('span.field-required').css('display', 'inline'); //show red asterisk

if (validationRules == null)

validationRules = {};

validationRules.required = true;

$input.data('validation-rules', validationRules);

$input.rules('add', {

required: true

});

}

var $input = $formField.find('input, select');

var validationRules = $input.data('validation-rules');

if (validationRules != null && validationRules.required != null && validationRules.required == true) {

$formField.find('.name').find('label').find('span.field-required').hide(); //hide red asterisk

delete validationRules.required;

$input.data('validation-rules', validationRules);

$input.rules('remove', 'required');

$formField.find('.value').find('label.error').hide();

}