fix #nav_main click handler's wrong behavior on mobile

In the event handler, 'this' is not a jquery object, but a DOM object.
Instead of using $(this) to fix this problem, $mainNav is used
because it is already created and no need to be re-wrapped
as jquery object.

$varname style is used for preventing this type of problem.

Author: fediev

site/javascript/garden.js

@@ -143,7 +143,7 @@ function Page() {
 Page.prototype = {
     init: function() {
         var that = this,
-            mainNav = $('#nav_main');
+            $mainNav = $('#nav_main');
 
         $.extend(this, {
             scrollLast: 0,
@@ -177,14 +177,14 @@ Page.prototype = {
         // Show menu for tablets
         $('#show_menu').click(function (){
             var scrollTop = $.mobile ? that.window.scrollTop() : 0;
-            
-            mainNav.slideDown(300).css('top', scrollTop);
+
+            $mainNav.slideDown(300).css('top', scrollTop);
             return false;
         });
-        
-        $('#nav_main').click(function(){
+
+        $mainNav.click(function(){
             if(that.window.width() < 1000)
-                mainNav.slideUp(300, function() {this.removeAttr('style');});
+                $mainNav.slideUp(300, function() { $mainNav.removeAttr('style'); });
         });
     },