diff --git a/ionic.contrib.drawer.js b/ionic.contrib.drawer.js
index b2f5815..ae1d5aa 100644
--- a/ionic.contrib.drawer.js
+++ b/ionic.contrib.drawer.js
@@ -9,181 +9,227 @@
  */
 angular.module('ionic.contrib.drawer', ['ionic'])
 
-.controller('drawerCtrl', ['$element', '$attrs', '$ionicGesture', '$document', function($element, $attr, $ionicGesture, $document) {
-  var el = $element[0];
-  var dragging = false;
-  var startX, lastX, offsetX, newX;
-  var side;
-
-  // How far to drag before triggering
-  var thresholdX = 15;
-  // How far from edge before triggering
-  var edgeX = 40;
-
-  var LEFT = 0;
-  var RIGHT = 1;
-
-  var isTargetDrag = false;
-
-  var width = $element[0].clientWidth;
-
-  var enableAnimation = function() {
-    $element.addClass('animate');
-  };
-  var disableAnimation = function() {
-    $element.removeClass('animate');
-  };
-
-  // Check if this is on target or not
-  var isTarget = function(el) {
-    while(el) {
-      if(el === $element[0]) {
-        return true;
-      }
-      el = el.parentNode;
-    }
-  };
-
-  var startDrag = function(e) {
-    disableAnimation();
-
-    dragging = true;
-    offsetX = lastX - startX;
-    console.log('Starting drag');
-    console.log('Offset:', offsetX);
-  };
-
-  var startTargetDrag = function(e) {
-    disableAnimation();
-
-    dragging = true;
-    isTargetDrag = true;
-    offsetX = lastX - startX;
-    console.log('Starting target drag');
-    console.log('Offset:', offsetX);
-  };
-
-  var doEndDrag = function(e) {
-    startX = null;
-    lastX = null;
-    offsetX = null;
-    isTargetDrag = false;
-
-    if(!dragging) {
-      return;
-    }
-
-    dragging = false;
-
-    console.log('End drag');
-    enableAnimation();
-
-    ionic.requestAnimationFrame(function() {
-      if(newX < (-width / 2)) {
-        el.style.transform = el.style.webkitTransform = 'translate3d(' + -width + 'px, 0, 0)';
-      } else {
-        el.style.transform = el.style.webkitTransform = 'translate3d(0px, 0, 0)';
-      }
-    });
-  };
-
-  var doDrag = function(e) {
-    if(e.defaultPrevented) {
-      return;
-    }
-
-    if(!lastX) {
-      startX = e.gesture.touches[0].pageX;
-    }
-
-    lastX = e.gesture.touches[0].pageX;
-
-    if(!dragging) {
-
-      // Dragged 15 pixels and finger is by edge
-      if(Math.abs(lastX - startX) > thresholdX) {
-        if(isTarget(e.target)) {
-          startTargetDrag(e);
-        } else if(startX < edgeX) {
-          startDrag(e);
-        } 
-      }
-    } else {
-      console.log(lastX, offsetX, lastX - offsetX);
-      newX = Math.min(0, (-width + (lastX - offsetX)));
-      ionic.requestAnimationFrame(function() {
-        el.style.transform = el.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
-      });
-
-    }
-
-    if(dragging) {
-      e.gesture.srcEvent.preventDefault();
-    }
-  };
-
-  side = $attr.side == 'left' ? LEFT : RIGHT;
-  console.log(side);
-
-  $ionicGesture.on('drag', function(e) {
-    doDrag(e);
-  }, $document);
-  $ionicGesture.on('dragend', function(e) {
-    doEndDrag(e);
-  }, $document);
-
-
-  this.close = function() {
-    enableAnimation();
-    ionic.requestAnimationFrame(function() {
-      if(side === LEFT) {
-        el.style.transform = el.style.webkitTransform = 'translate3d(-100%, 0, 0)';
-      } else {
-        el.style.transform = el.style.webkitTransform = 'translate3d(100%, 0, 0)';
-      }
-    });
-  };
-
-  this.open = function() {
-    enableAnimation();
-    ionic.requestAnimationFrame(function() {
-      if(side === LEFT) {
-        el.style.transform = el.style.webkitTransform = 'translate3d(0%, 0, 0)';
-      } else {
-        el.style.transform = el.style.webkitTransform = 'translate3d(0%, 0, 0)';
-      }
-    });
-  };
+.controller('drawerCtrl', ['$element', '$attrs', '$ionicGesture', '$ionicBackdrop', '$document', function($element, $attr, $ionicGesture, $ionicBackdrop, $document) {
+	var el = $element[0];
+	var dragging = false;
+	var startX, lastX, offsetX, newX;
+	var side;
+
+	// How far to drag before triggering
+	var thresholdX = 15;
+	// How far from edge before triggering
+	var edgeX = 40;
+
+	var LEFT = 0;
+	var RIGHT = 1;
+
+	var isTargetDrag = false;
+
+	var width = $element[0].clientWidth;
+
+	var enableAnimation = function() {
+		$element.addClass('animate');
+	};
+	var disableAnimation = function() {
+		$element.removeClass('animate');
+	};
+
+	// Check if this is on target or not
+	var isTarget = function(el) {
+		while(el) {
+			if(el === $element[0]) {
+				return true;
+			}
+			el = el.parentNode;
+		}
+	};
+
+	var startDrag = function(e) {
+		disableAnimation();
+
+		dragging = true;
+		offsetX = lastX - startX;
+	};
+
+	var startTargetDrag = function(e) {
+		disableAnimation();
+
+		dragging = true;
+		isTargetDrag = true;
+		if (side){
+			offsetX = startX - lastX;
+		}else{
+			offsetX = lastX - startX;
+		}
+	};
+
+	var doEndDrag = function(e) {
+		startX = null;
+		lastX = null;
+		offsetX = null;
+		isTargetDrag = false;
+
+		if(!dragging) {
+			return;
+		}
+
+		dragging = false;
+
+		enableAnimation();
+
+		ionic.requestAnimationFrame(function() {
+			if(newX < (-width / 2)) {
+				if (side){
+					el.style.transform = el.style.webkitTransform = 'translate3d(' + width + 'px, 0, 0)';
+				}else{
+					el.style.transform = el.style.webkitTransform = 'translate3d(' + -width + 'px, 0, 0)';
+				}
+
+				angular.element(el).trigger('close-main-menu');
+			} else {
+				el.style.transform = el.style.webkitTransform = 'translate3d(0px, 0, 0)';
+				angular.element(el).trigger('open-main-menu');
+			}
+		});
+	};
+
+	var docWidth = angular.element('body').outerWidth();
+
+	var doDrag = function(e) {
+		if(e.defaultPrevented) {
+			return;
+		}
+
+		if(!lastX) {
+			if (side){
+				startX = docWidth - e.gesture.touches[0].pageX;
+			}else{
+				startX = e.gesture.touches[0].pageX;
+			}
+		}
+
+		if (side){
+			lastX = docWidth - e.gesture.touches[0].pageX;
+		}else {
+			lastX = e.gesture.touches[0].pageX;
+		}
+
+		if(!dragging) {
+			if (side){
+				if(Math.abs(startX - lastX) > thresholdX) {
+					if(isTarget(e.target)) {
+						startTargetDrag(e);
+					} else if(startX < edgeX) {
+						startDrag(e);
+					}
+				}
+			}else{
+				// Dragged 15 pixels and finger is by edge
+				if(Math.abs(lastX - startX) > thresholdX) {
+					if(isTarget(e.target)) {
+						startTargetDrag(e);
+					} else if(startX < edgeX) {
+						startDrag(e);
+					}
+				}
+			}
+		} else {
+			newX = Math.min(0, (-width + (lastX - offsetX)));
+			ionic.requestAnimationFrame(function() {
+				if (side){
+					el.style.transform = el.style.webkitTransform = 'translate3d(' + (-newX) + 'px, 0, 0)';
+				}else{
+					el.style.transform = el.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
+				}
+			});
+		}
+		if(dragging) {
+			e.gesture.srcEvent.preventDefault();
+		}
+	};
+
+	side = $attr.side == 'left' ? LEFT : RIGHT;
+
+	$ionicGesture.on('drag', function(e) {
+		doDrag(e);
+	}, $document);
+	$ionicGesture.on('dragend', function(e) {
+		doEndDrag(e);
+	}, $document);
+
+	angular.element(el).on('close-main-menu',function(){
+		$ionicBackdrop.release();
+		angular.element(el).addClass('menu-closed');
+		angular.element(document).off('click');
+	});
+
+	angular.element(el).on('open-main-menu',function(){
+		angular.element(el).addClass('menu-open');
+		$ionicBackdrop.retain();
+		setTimeout(function(){
+			angular.element(document).on('click',function(e){
+				close_menu();
+			});
+		},0);
+	});
+
+	this.close = close_menu;
+
+	function close_menu(){
+		$ionicBackdrop.release();
+		enableAnimation();
+		angular.element(document).off('click');
+		ionic.requestAnimationFrame(function() {
+			if(side === LEFT) {
+				el.style.transform = el.style.webkitTransform = 'translate3d(-100%, 0, 0)';
+			} else {
+				el.style.transform = el.style.webkitTransform = 'translate3d(100%, 0, 0)';
+			}
+		});
+	}
+
+	this.open = function() {
+		enableAnimation();
+		angular.element(el).trigger('open-main-menu');
+		ionic.requestAnimationFrame(function() {
+			if(side === LEFT) {
+				el.style.transform = el.style.webkitTransform = 'translate3d(0%, 0, 0)';
+			} else {
+				el.style.transform = el.style.webkitTransform = 'translate3d(0%, 0, 0)';
+			}
+		});
+	};
 }])
 
 .directive('drawer', ['$rootScope', '$ionicGesture', function($rootScope, $ionicGesture) {
-  return {
-    restrict: 'E',
-    controller: 'drawerCtrl',
-    link: function($scope, $element, $attr, ctrl) {
-      $element.addClass($attr.side);
-      $scope.openDrawer = function() {
-        console.log('open');
-        ctrl.open();
-      };
-      $scope.closeDrawer = function() {
-        console.log('close');
-        ctrl.close();
-      };
-    }
-  }
-}]);
+	return {
+		restrict: 'E',
+		controller: 'drawerCtrl',
+		link: function($scope, $element, $attr, ctrl) {
+
+			$element.addClass($attr.side);
+			$scope.openDrawer = function() {
+				//console.log('open');
+				ctrl.open();
+			};
+			$scope.closeDrawer = function() {
+				//console.log('close');
+				ctrl.close();
+			};
+		}
+	}
+}])
 
 .directive('drawerClose', ['$rootScope', function($rootScope) {
-  return {
-    restrict: 'A',
-    link: function($scope, $element) {
-      $element.bind('click', function() {
-        var drawerCtrl = $element.inheritedData('$drawerController');
-        drawerCtrl.close();
-      });
-    }
-  }
+	return {
+		restrict: 'A',
+		link: function($scope, $element) {
+			$element.bind('click', function() {
+				var drawerCtrl = $element.inheritedData('$drawerController');
+				drawerCtrl.close();
+			});
+		}
+	}
 }]);
 
 })();