From d623ee3deefcb4862f8a8205bc765fcbaff30bde Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica.wang@citrix.com>
Date: Mon, 16 Jul 2012 13:24:28 -0700
Subject: [PATCH] cloudstack 3.0 UI - network page - Guest Network section -
 create Guest Network - If selected network offering includes forvpc = true,
 show VPC dropdown. Otherwise, hide VPC dropdown.

---
 ui/scripts/network.js | 80 +++++++++++++++++++++++++++++++++++--------
 1 file changed, 66 insertions(+), 14 deletions(-)

diff --git a/ui/scripts/network.js b/ui/scripts/network.js
index 9a9facc9ad4..4e559acaae6 100644
--- a/ui/scripts/network.js
+++ b/ui/scripts/network.js
@@ -152,6 +152,8 @@
     }
   };
 
+	var networkOfferingObjs = [];
+	
   cloudStack.sections.network = {
     title: 'label.network',
     id: 'network',
@@ -257,9 +259,9 @@
                           state: 'Enabled'
                         },
                         success: function(json) {
-                          var networkOfferings = json.listnetworkofferingsresponse.networkoffering;
+                          networkOfferingObjs = json.listnetworkofferingsresponse.networkoffering;
                           args.response.success({
-                            data: $.map(networkOfferings, function(zone) {
+                            data: $.map(networkOfferingObjs, function(zone) {
                               return {
                                 id: zone.id,
                                 description: zone.name
@@ -270,24 +272,74 @@
                       });
                     }
                   },
+									vpcid: {
+										label: 'VPC',
+										dependsOn: 'networkOfferingId',
+										select: function(args) {										  
+											var networkOfferingObj;
+											$(networkOfferingObjs).each(function(key, value) {											  
+											  if(value.id == args.networkOfferingId) {
+												  networkOfferingObj = value;
+													return false; //break each loop
+												}												
+											});											
+											if(networkOfferingObj.forvpc == true) {
+											  args.$select.closest('.form-item').css('display', 'inline-block');
+											  $.ajax({
+												  url: createURL('listVPCs'),
+													data: {
+													  listAll: true
+													},
+													success: function(json) {													  
+														var items = json.listvpcsresponse.vpc;
+														var data;
+														if(items != null && items.length > 0) {
+														  data = $.map(items, function(item) {															  
+															  return {
+																  id: item.id,
+																	description: item.name
+																}
+															});															
+														}		
+														args.response.success({ data: data });
+													}
+												});											
+											}
+											else {
+											  args.$select.closest('.form-item').hide();
+											  args.response.success({ data: null });
+											}			
+										}
+									},
                   guestGateway: { label: 'label.guest.gateway' },
                   guestNetmask: { label: 'label.guest.netmask' }
                 }
               },
               action: function(args) {
-                var array1 = [];
-                array1.push("&zoneId=" + args.data.zoneId);
-                array1.push("&name=" + todb(args.data.name));
-                array1.push("&displayText=" + todb(args.data.displayText));
-                array1.push("&networkOfferingId=" + args.data.networkOfferingId);
-
-                if(args.data.guestGateway != null && args.data.guestGateway.length > 0)
-                  array1.push("&gateway=" + args.data.guestGateway);
-                if(args.data.guestNetmask != null && args.data.guestNetmask.length > 0)
-                  array1.push("&netmask=" + args.data.guestNetmask);
-
+							  var dataObj = {
+								  zoneId: args.data.zoneId,
+									name: args.data.name,
+									displayText: args.data.displayText,
+									networkOfferingId: args.data.networkOfferingId
+								};				
+                if(args.data.guestGateway != null && args.data.guestGateway.length > 0) {                  
+									$.extend(dataObj, {
+									  gateway: args.data.guestGateway
+									});
+								}								
+                if(args.data.guestNetmask != null && args.data.guestNetmask.length > 0) {                  
+									$.extend(dataObj, {
+									  netmask: args.data.guestNetmask
+									});									
+								}								
+								if(args.$form.find('.form-item[rel=vpcid]').css("display") != "none") {                 
+									$.extend(dataObj, {
+									  vpcid: args.data.vpcid
+									});
+								}											
                 $.ajax({
-                  url: createURL('createNetwork' + array1.join("")),
+                  url: createURL('createNetwork'),
+									data: dataObj,
                   success: function(json) {
                     args.response.success({
                       data: json.createnetworkresponse.network