From 55a87b55c5568431f346120bf8d45cc2373f2f9e Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Sun, 19 Apr 2015 12:45:40 +0800
Subject: [PATCH] add top-group-nav.js

---
 static/scripts/app/views/top-group-nav.js | 51 +++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 static/scripts/app/views/top-group-nav.js

diff --git a/static/scripts/app/views/top-group-nav.js b/static/scripts/app/views/top-group-nav.js
new file mode 100644
index 0000000000..4ab726b7d6
--- /dev/null
+++ b/static/scripts/app/views/top-group-nav.js
@@ -0,0 +1,51 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common'
+], function($, _, Backbone, Common) {
+    'use strict';
+
+    var GroupNavView = Backbone.View.extend({
+        el: '.nav .nav-item-group',
+
+        popupTemplate: _.template($('#top-group-nav-tmpl').html()),
+
+        initialize: function() {
+            var popup = $(this.popupTemplate({groups: app.pageOptions.top_nav_groups}));  
+            this.$el.append(popup);
+            popup.css({'right': ($('#top-nav-grp').outerWidth() - popup.outerWidth())/6 * 5});
+            this.popup = popup;
+        },
+
+        events: {
+            'mouseenter': 'showPopup',
+            'mouseleave': 'hidePopup',
+            'mouseenter #top-nav-grp-list .item': 'highlightGroupItem',
+            'mouseleave #top-nav-grp-list .item': 'rmHighlightGroupItem',
+            'click #top-nav-grp-list .item': 'visitGroup'
+        },
+
+        showPopup: function() {
+            this.popup.removeClass('hide');
+        },
+
+        hidePopup: function(e) {
+            this.popup.addClass('hide');
+        },
+
+        highlightGroupItem: function(e) {
+            $(e.currentTarget).addClass('hl').children('.a').removeClass('vh');
+        },
+
+        rmHighlightGroupItem: function(e) {
+            $(e.currentTarget).removeClass('hl').children('.a').addClass('vh');
+        },
+
+        visitGroup: function(e) {
+            location.href = $(e.currentTarget).attr('data-url');
+        }
+    });
+
+    return GroupNavView;
+});