').addClass('vpc-configure-tooltip').append(
+ $('
').addClass('arrow')
+ );
+
+ // Make links
+ $.map(links, function(label, id) {
+ var $link = $('
').addClass('link').addClass(id);
+ var $label = $('').html(label);
+
+ $link.append($label);
+ $link.appendTo($links);
+
+ // Link event
+ $link.click(function() {
+ switch (id) {
+ case 'site-to-site-vpn':
+ $browser.cloudBrowser('addPanel', {
+ title: 'Site-to-site VPNs',
+ maximizeIfSelected: true,
+ complete: function($panel) {
+ $panel.listView(
+ $.isFunction(siteToSiteVPN.listView) ?
+ siteToSiteVPN.listView() : siteToSiteVPN.listView
+ );
+ }
+ });
+ break;
+ }
+ });
+ });
+
+ $tooltip.append($links);
+
+ // Tooltip hover event
+ $tooltip.hover(
+ function() {
+ $tooltip.addClass('active');
+ },
+ function() {
+ $tooltip.removeClass('active');
+
+ setTimeout(function() {
+ if (!$tooltip.hasClass('active')) {
+ $tooltip.remove();
+ }
+ }, 500);
+ }
+ );
+
+ return $tooltip;
+ },
+ vpcConfigureArea: function(args) {
+ var $browser = args.$browser;
+ var siteToSiteVPN = args.siteToSiteVPN;
+ var $config = $('').addClass('config-area');
+ var $configIcon = $('
').addClass('icon').html(' ');
+
+ $config.append($configIcon);
+
+ // Tooltip event
+ $configIcon.mouseover(function() {
+ var $tooltip = elems.vpcConfigureTooltip({
+ $browser: $browser,
+ siteToSiteVPN: siteToSiteVPN
+ });
+
+ // Make sure tooltip is center aligned with icon
+ $tooltip.css({ left: $configIcon.position().left });
+ $tooltip.appendTo($config).hide();
+ $tooltip.stop().fadeIn('fast');
+ });
+
+ return $config;
+ },
router: function() {
var $router = $('').addClass('tier virtual-router');
var $title = $('').addClass('title').html('Virtual Router');
@@ -145,6 +228,8 @@
return $tier;
},
chart: function(args) {
+ var $browser = args.$browser;
+ var siteToSiteVPN = args.siteToSiteVPN;
var tiers = args.tiers;
var vmListView = args.vmListView;
var actions = args.actions;
@@ -154,7 +239,16 @@
var $tiers = $('