angular.module('MyApp',['ngMaterial', 'ui.router', 'ngMessages', 'material.svgAssetsCache'])
.config(function($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/');
        $stateProvider
        ;
}).controller('PortfolioController', function($scope, $mdDialog, $mdMedia, $location, $state) {

  var testurl = $location.path();
  console.log(testurl);

  if ($location.path() == "/") {
    $scope.selectedIndex = 0;
    } else {
    $scope.selectedIndex = 0;
  }

  $scope.$watch('selectedIndex', function(current, old) {
    
      var checkthis = $location.search();
      console.log('changed url');
	  console.log(checkthis);
    
      switch (current) {        default:
          $state.go('');
          break;
      }
  });



$scope.shipstationv3od = {
	image1: 'images/shipstationv3/shipstation-od-v3.png',
	image2: 'images/shipstationv3/shipstation-od-v2.png',
	dragging: false,
	resize: false
}

$scope.ssdotcom = {
	image1: 'images/ssdotcom/ssdotcom.png',
	image2: 'images/ssdotcom/oldwebsite.png',
	dragging: false,
	resize: false
}

$scope.showMockup = function(name, folder) {
    $mdDialog.show({
			locals: {imageName: name, imageFolder: folder},
      controller: DialogController,
			templateUrl: 'modal.html',
      parent: angular.element(document.body),
      clickOutsideToClose: true
    });
};

$scope.showMockupJPG = function(name, folder) {
    $mdDialog.show({
			locals: {imageName: name, imageFolder: folder},
      controller: DialogController,
			templateUrl: 'modal-jpg.html',
      parent: angular.element(document.body),
      clickOutsideToClose: true
    });
};

}).directive('slideImageComparison', function($window, $document) {

	function moveOver(handle, resized, container) {

		var move = {};

		var divideWidth = handle.prop('offsetWidth'),
			containerOffsetLeft = container.prop('offsetLeft'),
			containerOffsetTop = container.prop('offsetTop'),
			containerWidth = container.prop('offsetWidth');

		var moveSlide = function(e) {
			// console.log(e);
			var pageX = e.pageX || e.targetTouches[0].pageX;
			move = {
				left: pageX - containerOffsetLeft
			};
			moveWidth = (move.left - 1)*100/containerWidth+'%';
			handle.css({
				left: moveWidth
			});
			resized.css({
				width: moveWidth
			});
		}

		var stopMove = function(e) {
			container[0].removeEventListener('touchmove', moveSlide);
			container[0].removeEventListener('mousemove', moveSlide);
		}

		// Support desktop + touch
		container[0].addEventListener('touchmove', moveSlide);
		container[0].addEventListener('mousemove', moveSlide);
		container[0].addEventListener('mouseup', stopMove);

	}

	return {
		restrict: 'E',
		scope: {
			imageInfo: '=info'
		},
		link: function(scope, elem, attr) {

			var startX = 0;
			var startY = 0;
			var x = 0;
			var y = 0;

    	var w = angular.element($window);
    	var container = angular.element(elem[0].querySelector('.slide-comb'));

			// Adjust resize image
			var resized = angular.element(elem[0].querySelector('.resized'));
			var resizedImage = elem[0].querySelector('.resized img');
			angular.element(resizedImage).css({
				width: container.prop('offsetWidth')+'px'
			})

			// Change resized image width on window resize
			w.bind('resize', function () {
				angular.element(resizedImage).css({
					width: container.prop('offsetWidth')+'px'
				})
			});

			// Get divider
			var divider = angular.element(elem[0].querySelector('.handle'));
			// divider.attr("draggable", "true");

			// Bind move event
			divider.on('mousedown', function(event){
				moveOver(divider, resized, container);
			});

		},
		templateUrl: 'slider.html'
	};
});

function DialogController($scope, $mdDialog, imageName, imageFolder) {

	$scope.folder = imageFolder;
	$scope.name = imageName;

  $scope.hide = function() {
    $mdDialog.hide();
  };

  $scope.cancel = function() {
    $mdDialog.cancel();
  };

  $scope.answer = function(answer) {
    $mdDialog.hide(answer);
  };
}