jimallen/app.landing.js

## app.landing.js


var app = angular.module('aov.web.landing', ['ui.router', 'LocalStorageModule', 'angular-loading-bar', 'ngAnimate', 'ngSanitize', 'ui.bootstrap','ngFileUpload','ngMessages']);

app.config(function($rootScopeProvider, $sceDelegateProvider,$locationProvider) {
    //$rootScopeProvider.digestTtl(100);
//     $locationProvider.html5Mode({
//   enabled: true,
//   requireBase: false This is a change..
// });
    $sceDelegateProvider.resourceUrlWhitelist([
        'self'
    ]);
});

app.directive('navCollapse', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var visible = false;

            element.on('show.bs.collapse', function () {
                visible = true;
            });

            element.on("hide.bs.collapse", function () {
                visible = false;
            });

            element.on('click', function(event) {
                if (visible && 'auto' == element.css('overflow-y')) {
                    element.collapse('hide');
                }
            });
        }
    };
});
app.directive('imgixSrc', [
  function () {
      return {
          restrict: 'A',
          scope: {
              url: '@imgixSrc'
          },
          link: function ($scope, el, attrs) {
              function updateDataSrc() {
                  // Set the data-src attribute on the img, like imgix.js expects
                  el.attr('data-src', attrs.imgixSrc);
              };

              // If the scope variable changes, we update the data-src so
              // the next imgix.fluid() run picks up the new URL
              $scope.$watch('url', updateDataSrc);

              // This doesn't have to be done here, could just
              // as well be a static class on the element
              el.addClass('imgix-fluid');

              // Call this once on setup to initialize
              updateDataSrc();
          }
      };
  }
]);
app.directive('thanksModal', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            scope.dismiss = function() {
                element.modal('hide');
            };

            scope.show = function() {
                element.modal('show');
            };
        }
    }
});
app.config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise("");


    $stateProvider.state("home", {
        url:"",

        views: {
        '': {
            templateUrl: '/app/views/collection.html',
            controller: 'collectionController'
        },

        'nav-view': {
            templateUrl: 'app/views/partials/collectionNav.html',
            controller: 'collectionNavController'

        },

        'tc-view': {
            templateUrl: 'app/views/terms.html'
        }
    }
    });

    $stateProvider.state("photo", {
        url:"/photo/:imageId/:index",
        controller: "photoController",
        views: {
            '': {
                templateUrl: '/app/views/photoView.html',
                controller: 'photoController'
            }
            ,

            'nav-view': {
                templateUrl: 'app/views/partials/collectionNav.html',
                controller: 'collectionNavController'
            }
        }

    });

});


app.filter('timeago', function() {
    return function(date) {
        return moment(date).fromNow();
    };
})
app.filter('calendar', function() {
    return function(date) {
        return moment(date).calendar();
    };
});


app.constant('ngAuthSettings', {
    apiServiceBaseUri: 'http://api-staging.artofvisuals.com/',
    //apiServiceBaseUri: 'http://aov-api-prod.azurewebsites.net/',
    //apiServiceBaseUri: 'http://localhost:59822/',
    clientId: 'aovWeb'
});


app.run([ '$rootScope', '$location', '$state','$window', function ( $rootScope, $location, $state,$window, $templateCache) {


     $rootScope
        .$on('$stateChangeSuccess',
            function(event){

                if (!$window.ga){
                    return;
                }

                $window.ga('send', 'pageview', { page: $location.path() });
        });
}]);


## photoController.js
'use strict';
app.controller('photoController', ['$scope', '$timeout', 'imageService', '$location', 'authService', 'localStorageService', '$stateParams', 'preloader', '$state','$rootScope', function ($scope, $timeout, $imageService, $location, authService, localStorageService, $stateParams, preloader, $state,$rootScope) {
    $rootScope.isCollapsed = true;
    $scope.onMouseMoveResult = "";

    var getMouseEventResult = function (mouseEvent, mouseEventDesc)
    {
        var coords = getCrossBrowserElementCoords(mouseEvent);
        //return mouseEventDesc + " at (" + coords.x + ", " + coords.y + ")";
        //console.log(" at (" + coords.x + ", " + coords.y + ")");
        //console.log(coords);
        if(coords.y <= 50){
            $rootScope.isCollapsed = false;
        }else {
            $rootScope.isCollapsed = true;
        }

    };
    var getCrossBrowserElementCoords = function (mouseEvent)
    {
        var result = {
            x: 0,
            y: 0
        };

        if (!mouseEvent)
        {
            mouseEvent = window.event;
        }
        //console.log(mouseEvent);

        if (mouseEvent.pageX || mouseEvent.pageY)
        {
            result.x = mouseEvent.pageX;
            result.y = mouseEvent.pageY;
        }
        else if (mouseEvent.clientX || mouseEvent.clientY)
        {
            debugger;
            result.x = mouseEvent.clientX + document.body.scrollLeft +
                document.documentElement.scrollLeft;
            result.y = mouseEvent.clientY + document.body.scrollTop +
                document.documentElement.scrollTop;
        }

        if (mouseEvent.target)
        {
            var offEl = mouseEvent.target;
            var offX = 0;
            var offY = 0;

            if (typeof(offEl.offsetParent) != "undefined")
            {
                while (offEl)
                {
                    offX += offEl.offsetLeft;
                    offY += offEl.offsetTop;

                    offEl = offEl.offsetParent;
                }
            }
            else
            {
                offX = offEl.x;
                offY = offEl.y;
            }

            result.x -= offX;
            result.y -= offY;
        }

        return result;
    };
    $scope.onMouseMove = function ($event) {
        $scope.onMouseMoveResult = getMouseEventResult($event, "Mouse move");
    };

    var fluidSet;
    $scope.comments = [];

    $scope.authentication = authService.authentication;
    var photoArray = localStorageService.get('photosArray');
    $scope.baseUrl = 'http://aovtest.imgix.net/';
    var currentIdx = $stateParams.index;

    $scope.photo = photoArray[currentIdx];

    var getComments = function () {
        $imageService.GetCommentsForImage($scope.photo.imageId).then(function (results) {

            $scope.comments = results;
        });


    };


    var init = function () {


        imgix.onready(function () {

            var bgOptions = {
                fluidClass: 'imgix-fluid-bg',
                updateOnResizeDown: true,
                //updateOnPinchZoom: true,
                pixelStep: 10,
                autoInsertCSSBestPractices: true,
                lazyLoad: false,
                lazyLoadOffsetVertical: 0,
                 fitImgTagToContainerHeight: true,
                // onLoad: function (el, url) {
                //     console.log(url);
                // }

            };

            var imageUrl =  $scope.baseUrl + $scope.photo.fileName;


            fluidSet = imgix.fluid(bgOptions);
            var ix1 = new imgix.URL(imageUrl);
            ix1.setParams({crop: 'entropy', fit:'max', dpr: '2'})
            ix1.autoUpdateImg('#photoDiv1');


            $timeout(function () {

                //console.log(fluidSet);

                //ix1.setParams({h: 320});

                //ix1.attachGradientTo('#gradient-area1','#bada55');
                // var parmas = ix1.getParams();
                // console.log(parmas);


            }, 500);

            //imgix.fluid(bgOptions);
            $scope.test = $scope.photo.numberOfComments;

        });
        getComments();
    };

    var commentsDiv = angular.element(document.querySelector('#commentsDiv'));
    var photoDiv = angular.element(document.querySelector('#photoDiv'));
    var photoBox = angular.element(document.getElementsByClassName('animate-show'));

    var changePhoto = function (newIdx) {
        if (photoArray[newIdx] === undefined) {
            // index doesn't point to an undefined item.

            console.log("Not found in array =" + newIdx);
            if (newIdx <= 0) {
                newIdx = photoArray.length - 1;
            }

            if (newIdx >= photoArray.length) {

                console.log("Going back to 0");
                newIdx = 0;

            }


            currentIdx = newIdx;
            console.log(newIdx);
        }
        var photo = photoArray[newIdx];
        $scope.photo = photo;
        photoBox.removeClass("ng-hide-add");
        photoBox.addClass("ng-hide-remove");
        var newPhoto = $scope.baseUrl + photo.name;
        console.log(newPhoto);
        var ix = new imgix.URL(newPhoto);
        ix.attachImageTo('.single-image', function () {
            photoBox.removeClass("ng-hide-remove");
            console.log("Callback for loading");
            console.log("New CurrentIdx=" + newIdx);
            photoBox.addClass("ng-hide-add");
            getComments();
            $state.transitionTo('photo', { imageId: photo.imageId, index: newIdx }, { notify: false });
        });

    };

    $scope.keys = [];
    $scope.keys.push({
        code: 39, action: function () {

            ++currentIdx;

            changePhoto(currentIdx);

        } });
    $scope.keys.push({
        code: 37, action: function () {
            --currentIdx;
            changePhoto(currentIdx);

    } });

    $scope.test = 0;

    $scope.$on('keydown', function (msg, code) {
        $scope.keys.forEach(function (o) {
            if (o.code !== code) { return; }
            o.action();
            $scope.$apply();
        });
    });

    $scope.AddLike = function () {

        $scope.photo.liked = true;
        var like = {
            userId: $scope.authentication.userName,
            imageId: $scope.photo.imageId,
            ReactionTypeId: 1

        }

        console.log(like);
        $imageService.AddLikeToImage(like).then(function (results) {

            console.log(results.data);
        }, function (error) {
            alert(error.data.message);
        });
    };


    $scope.config = {
        autoHideScrollbar: false,
        theme: 'light',
        advanced: {
            updateOnContentResize: true
        },
        setHeight: 200,
        scrollInertia: 0
    }


    $scope.ShowComments = function () {
        commentsDiv.toggleClass('hidden');
        photoDiv.toggleClass('col-lg-9');
    };

    $scope.numberOfComments = function() {
        return $scope.photo.numberOfComments;
    }

    init();

    $scope.$watch("test", function (newValue, oldValue) {

       /* if (oldValue > newValue) {
            $scope.photo.numberOfComments = oldValue;
        }*/


        if ($scope.test < newValue) {
            $scope.test = newValue;


        }
        console.log(newValue);
    });

    $scope.addParentComment = function (comment) {
        var parentComment = angular.extend(comment, {
            userName: $scope.authentication.userName,
            createdOn: new Date()
        });


        var newComment = {
            userId: $scope.authentication.userName,
            imageId: $scope.photo.imageId,
            ReactionTypeId: 2,
            commentText: comment.commentText,
            //parentReactionId: $scope.comment.reactionId

        }
        $imageService.AddCommentToImage(newComment).then(function (result) {

            $scope.comments.push(result.data);
        });

    };
    $scope.addChildComment = function (comment) {
        var childComment = angular.extend(comment, {
            userName: $scope.authentication.userName,
            userId: $scope.authentication.userName,
            createdOn: new Date()
        });

        if (!$scope.comment.children) {
            $scope.comment.children = [];
        };

        $scope.test++;


        var newComment = {
            userId: $scope.authentication.userName,
            imageId: $scope.comment.imageId,
            ReactionTypeId: 2,
            commentText: comment.commentText,
            parentReactionId: $scope.comment.reactionId

        }
        $imageService.AddCommentToImage(newComment).then(function (result) {
            $scope.comment.children.push(result.data);


        });
    };


    var children;

    $scope.collapsed = true;
    $scope.$on('$filledNestedComments', function (nodes) {
        $scope.collapsed = true;
        $timeout(function () {
            children = nodes;
            children.addClass('collapse').removeClass('in');
            /*children.collapse({
            toggle: false
        });*/
            // Stupid hack to wait for DOM insertion prior to setting up plugin
        }, 1);
    });
    $scope.$on('$emptiedNestedComments', function (nodes) {
        children = undefined;
    });
    $scope.collapse = function () {

        if (children.hasClass('collapse')) {

            children.addClass('in').removeClass('collapse');
            //$scope.collapsed = false;
            $scope.collapsed = false;

        } else {

            children.addClass('collapse').removeClass('in');
            $scope.collapsed = true;


        }
    };

}]);


## photoview.html

<div id="photoDiv1" style="z-index: 1000; " class="imgix-fluid-bg imgix-fluid single-image animate-show"   ng-mousemove="onMouseMove($event)" >
    <div class="single-photo__gradient-overlay"></div>
    <div style="z-index: 1001; width: 100%; height: 100%;pointer-events:none;" class="col-md-12" >
        <div class="col-md-6" style="position: absolute; left:10px;top:10px;" >
            <span class="tagline">Photo By:</span> <a href="https://www.instagram.com/{{featuredImage.instaUser}}"
                                                      target="_blank">@{{photo.instaUser}}</a>
        </div>
        <div class="col-md-6 pull-right text-right" style="position: absolute; right: 10px; top: 10px">
            <!--<i class="fa fa-heart pull-left" ng-if="!photo.liked" style="color: white" ng-click="AddLike()" ></i>-->


        </div>
        <div class="col-md-6 " style="position: absolute;pointer-events:none;bottom:10px">
            <!--<i class="fa fa-comment" ng-click="ShowComments()">&nbsp;{{test}}</i>-->
            <i class="fa fa-map-marker" ></i>
        </div>
        <div class="col-md-6 text-right" style="pointer-events:none;position: absolute; bottom: 10px; right: 0;">
            <!--<i class="fa fa-comment" ng-click="ShowComments()">&nbsp;{{test}}</i>-->
            <i class="fa fa-eye" ></i>
        </div>
    </div>
</div>
<div class="row" >


    <div class="" >

        <div class="col-lg-12" id="photoDiv">


        </div>


        <div id="commentsDiv"  class="col-lg-3 hidden"   >
            <div class="CommentsBox scrollbox " id="commentsBox" ng-scrollbars ng-scrollbars-config="config"  >
                <div >

                    <comments comment-data="comments"></comments>

                </div>
                <div>
                    <p class="add_comment">
                        <commenter action="addParentComment" toggle="true" buttonText="Comment"></commenter>
                    </p>
                </div>
            </div>
        </div>


    </div>

</div>


	var app = angular.module('aov.web.landing', ['ui.router', 'LocalStorageModule', 'angular-loading-bar', 'ngAnimate', 'ngSanitize', 'ui.bootstrap','ngFileUpload','ngMessages']);

	app.config(function($rootScopeProvider, $sceDelegateProvider,$locationProvider) {
	//$rootScopeProvider.digestTtl(100);
	// $locationProvider.html5Mode({
	// enabled: true,
	// requireBase: false This is a change..
	// });
	$sceDelegateProvider.resourceUrlWhitelist([
	'self'
	]);
	});

	app.directive('navCollapse', function () {
	return {
	restrict: 'A',
	link: function (scope, element, attrs) {
	var visible = false;

	element.on('show.bs.collapse', function () {
	visible = true;
	});

	element.on("hide.bs.collapse", function () {
	visible = false;
	});

	element.on('click', function(event) {
	if (visible && 'auto' == element.css('overflow-y')) {
	element.collapse('hide');
	}
	});
	}
	};
	});
	app.directive('imgixSrc', [
	function () {
	return {
	restrict: 'A',
	scope: {
	url: '@imgixSrc'
	},
	link: function ($scope, el, attrs) {
	function updateDataSrc() {
	// Set the data-src attribute on the img, like imgix.js expects
	el.attr('data-src', attrs.imgixSrc);
	};

	// If the scope variable changes, we update the data-src so
	// the next imgix.fluid() run picks up the new URL
	$scope.$watch('url', updateDataSrc);

	// This doesn't have to be done here, could just
	// as well be a static class on the element
	el.addClass('imgix-fluid');

	// Call this once on setup to initialize
	updateDataSrc();
	}
	};
	}
	]);
	app.directive('thanksModal', function() {
	return {
	restrict: 'A',
	link: function(scope, element, attr) {
	scope.dismiss = function() {
	element.modal('hide');
	};

	scope.show = function() {
	element.modal('show');
	};
	}
	}
	});
	app.config(function ($stateProvider, $urlRouterProvider) {

	$urlRouterProvider.otherwise("");


	$stateProvider.state("home", {
	url:"",

	views: {
	'': {
	templateUrl: '/app/views/collection.html',
	controller: 'collectionController'
	},

	'nav-view': {
	templateUrl: 'app/views/partials/collectionNav.html',
	controller: 'collectionNavController'

	},

	'tc-view': {
	templateUrl: 'app/views/terms.html'
	}
	}
	});

	$stateProvider.state("photo", {
	url:"/photo/:imageId/:index",
	controller: "photoController",
	views: {
	'': {
	templateUrl: '/app/views/photoView.html',
	controller: 'photoController'
	}
	,

	'nav-view': {
	templateUrl: 'app/views/partials/collectionNav.html',
	controller: 'collectionNavController'
	}
	}

	});

	});





	app.filter('timeago', function() {
	return function(date) {
	return moment(date).fromNow();
	};
	})
	app.filter('calendar', function() {
	return function(date) {
	return moment(date).calendar();
	};
	});



	app.constant('ngAuthSettings', {
	apiServiceBaseUri: 'http://api-staging.artofvisuals.com/',
	//apiServiceBaseUri: 'http://aov-api-prod.azurewebsites.net/',
	//apiServiceBaseUri: 'http://localhost:59822/',
	clientId: 'aovWeb'
	});


	app.run([ '$rootScope', '$location', '$state','$window', function ( $rootScope, $location, $state,$window, $templateCache) {


	$rootScope
	.$on('$stateChangeSuccess',
	function(event){

	if (!$window.ga){
	return;
	}

	$window.ga('send', 'pageview', { page: $location.path() });
	});
	}]);
	'use strict';
	app.controller('photoController', ['$scope', '$timeout', 'imageService', '$location', 'authService', 'localStorageService', '$stateParams', 'preloader', '$state','$rootScope', function ($scope, $timeout, $imageService, $location, authService, localStorageService, $stateParams, preloader, $state,$rootScope) {
	$rootScope.isCollapsed = true;
	$scope.onMouseMoveResult = "";

	var getMouseEventResult = function (mouseEvent, mouseEventDesc)
	{
	var coords = getCrossBrowserElementCoords(mouseEvent);
	//return mouseEventDesc + " at (" + coords.x + ", " + coords.y + ")";
	//console.log(" at (" + coords.x + ", " + coords.y + ")");
	//console.log(coords);
	if(coords.y <= 50){
	$rootScope.isCollapsed = false;
	}else {
	$rootScope.isCollapsed = true;
	}

	};
	var getCrossBrowserElementCoords = function (mouseEvent)
	{
	var result = {
	x: 0,
	y: 0
	};

	if (!mouseEvent)
	{
	mouseEvent = window.event;
	}
	//console.log(mouseEvent);

	if (mouseEvent.pageX \|\| mouseEvent.pageY)
	{
	result.x = mouseEvent.pageX;
	result.y = mouseEvent.pageY;
	}
	else if (mouseEvent.clientX \|\| mouseEvent.clientY)
	{
	debugger;
	result.x = mouseEvent.clientX + document.body.scrollLeft +
	document.documentElement.scrollLeft;
	result.y = mouseEvent.clientY + document.body.scrollTop +
	document.documentElement.scrollTop;
	}

	if (mouseEvent.target)
	{
	var offEl = mouseEvent.target;
	var offX = 0;
	var offY = 0;

	if (typeof(offEl.offsetParent) != "undefined")
	{
	while (offEl)
	{
	offX += offEl.offsetLeft;
	offY += offEl.offsetTop;

	offEl = offEl.offsetParent;
	}
	}
	else
	{
	offX = offEl.x;
	offY = offEl.y;
	}

	result.x -= offX;
	result.y -= offY;
	}

	return result;
	};
	$scope.onMouseMove = function ($event) {
	$scope.onMouseMoveResult = getMouseEventResult($event, "Mouse move");
	};

	var fluidSet;
	$scope.comments = [];

	$scope.authentication = authService.authentication;
	var photoArray = localStorageService.get('photosArray');
	$scope.baseUrl = 'http://aovtest.imgix.net/';
	var currentIdx = $stateParams.index;

	$scope.photo = photoArray[currentIdx];

	var getComments = function () {
	$imageService.GetCommentsForImage($scope.photo.imageId).then(function (results) {

	$scope.comments = results;
	});


	};



	var init = function () {



	imgix.onready(function () {

	var bgOptions = {
	fluidClass: 'imgix-fluid-bg',
	updateOnResizeDown: true,
	//updateOnPinchZoom: true,
	pixelStep: 10,
	autoInsertCSSBestPractices: true,
	lazyLoad: false,
	lazyLoadOffsetVertical: 0,
	fitImgTagToContainerHeight: true,
	// onLoad: function (el, url) {
	// console.log(url);
	// }

	};

	var imageUrl = $scope.baseUrl + $scope.photo.fileName;



	fluidSet = imgix.fluid(bgOptions);
	var ix1 = new imgix.URL(imageUrl);
	ix1.setParams({crop: 'entropy', fit:'max', dpr: '2'})
	ix1.autoUpdateImg('#photoDiv1');


	$timeout(function () {

	//console.log(fluidSet);

	//ix1.setParams({h: 320});

	//ix1.attachGradientTo('#gradient-area1','#bada55');
	// var parmas = ix1.getParams();
	// console.log(parmas);


	}, 500);

	//imgix.fluid(bgOptions);
	$scope.test = $scope.photo.numberOfComments;

	});
	getComments();
	};

	var commentsDiv = angular.element(document.querySelector('#commentsDiv'));
	var photoDiv = angular.element(document.querySelector('#photoDiv'));
	var photoBox = angular.element(document.getElementsByClassName('animate-show'));

	var changePhoto = function (newIdx) {
	if (photoArray[newIdx] === undefined) {
	// index doesn't point to an undefined item.

	console.log("Not found in array =" + newIdx);
	if (newIdx <= 0) {
	newIdx = photoArray.length - 1;
	}

	if (newIdx >= photoArray.length) {

	console.log("Going back to 0");
	newIdx = 0;

	}



	currentIdx = newIdx;
	console.log(newIdx);
	}
	var photo = photoArray[newIdx];
	$scope.photo = photo;
	photoBox.removeClass("ng-hide-add");
	photoBox.addClass("ng-hide-remove");
	var newPhoto = $scope.baseUrl + photo.name;
	console.log(newPhoto);
	var ix = new imgix.URL(newPhoto);
	ix.attachImageTo('.single-image', function () {
	photoBox.removeClass("ng-hide-remove");
	console.log("Callback for loading");
	console.log("New CurrentIdx=" + newIdx);
	photoBox.addClass("ng-hide-add");
	getComments();
	$state.transitionTo('photo', { imageId: photo.imageId, index: newIdx }, { notify: false });
	});

	};

	$scope.keys = [];
	$scope.keys.push({
	code: 39, action: function () {

	++currentIdx;

	changePhoto(currentIdx);

	} });
	$scope.keys.push({
	code: 37, action: function () {
	--currentIdx;
	changePhoto(currentIdx);

	} });

	$scope.test = 0;

	$scope.$on('keydown', function (msg, code) {
	$scope.keys.forEach(function (o) {
	if (o.code !== code) { return; }
	o.action();
	$scope.$apply();
	});
	});

	$scope.AddLike = function () {

	$scope.photo.liked = true;
	var like = {
	userId: $scope.authentication.userName,
	imageId: $scope.photo.imageId,
	ReactionTypeId: 1

	}

	console.log(like);
	$imageService.AddLikeToImage(like).then(function (results) {

	console.log(results.data);
	}, function (error) {
	alert(error.data.message);
	});
	};


	$scope.config = {
	autoHideScrollbar: false,
	theme: 'light',
	advanced: {
	updateOnContentResize: true
	},
	setHeight: 200,
	scrollInertia: 0
	}


	$scope.ShowComments = function () {
	commentsDiv.toggleClass('hidden');
	photoDiv.toggleClass('col-lg-9');
	};

	$scope.numberOfComments = function() {
	return $scope.photo.numberOfComments;
	}

	init();

	$scope.$watch("test", function (newValue, oldValue) {

	/* if (oldValue > newValue) {
	$scope.photo.numberOfComments = oldValue;
	}*/


	if ($scope.test < newValue) {
	$scope.test = newValue;


	}
	console.log(newValue);
	});

	$scope.addParentComment = function (comment) {
	var parentComment = angular.extend(comment, {
	userName: $scope.authentication.userName,
	createdOn: new Date()
	});




	var newComment = {
	userId: $scope.authentication.userName,
	imageId: $scope.photo.imageId,
	ReactionTypeId: 2,
	commentText: comment.commentText,
	//parentReactionId: $scope.comment.reactionId

	}
	$imageService.AddCommentToImage(newComment).then(function (result) {

	$scope.comments.push(result.data);
	});

	};
	$scope.addChildComment = function (comment) {
	var childComment = angular.extend(comment, {
	userName: $scope.authentication.userName,
	userId: $scope.authentication.userName,
	createdOn: new Date()
	});

	if (!$scope.comment.children) {
	$scope.comment.children = [];
	};

	$scope.test++;


	var newComment = {
	userId: $scope.authentication.userName,
	imageId: $scope.comment.imageId,
	ReactionTypeId: 2,
	commentText: comment.commentText,
	parentReactionId: $scope.comment.reactionId

	}
	$imageService.AddCommentToImage(newComment).then(function (result) {
	$scope.comment.children.push(result.data);


	});
	};


	var children;

	$scope.collapsed = true;
	$scope.$on('$filledNestedComments', function (nodes) {
	$scope.collapsed = true;
	$timeout(function () {
	children = nodes;
	children.addClass('collapse').removeClass('in');
	/*children.collapse({
	toggle: false
	});*/
	// Stupid hack to wait for DOM insertion prior to setting up plugin
	}, 1);
	});
	$scope.$on('$emptiedNestedComments', function (nodes) {
	children = undefined;
	});
	$scope.collapse = function () {

	if (children.hasClass('collapse')) {

	children.addClass('in').removeClass('collapse');
	//$scope.collapsed = false;
	$scope.collapsed = false;

	} else {

	children.addClass('collapse').removeClass('in');
	$scope.collapsed = true;


	}
	};

	}]);

	<div id="photoDiv1" style="z-index: 1000; " class="imgix-fluid-bg imgix-fluid single-image animate-show" ng-mousemove="onMouseMove($event)" >
	<div class="single-photo__gradient-overlay"></div>
	<div style="z-index: 1001; width: 100%; height: 100%;pointer-events:none;" class="col-md-12" >
	<div class="col-md-6" style="position: absolute; left:10px;top:10px;" >
	<span class="tagline">Photo By:</span> <a href="https://www.instagram.com/{{featuredImage.instaUser}}"
	target="_blank">@{{photo.instaUser}}</a>
	</div>
	<div class="col-md-6 pull-right text-right" style="position: absolute; right: 10px; top: 10px">
	<!--<i class="fa fa-heart pull-left" ng-if="!photo.liked" style="color: white" ng-click="AddLike()" ></i>-->


	</div>
	<div class="col-md-6 " style="position: absolute;pointer-events:none;bottom:10px">
	<!--<i class="fa fa-comment" ng-click="ShowComments()"> {{test}}</i>-->
	<i class="fa fa-map-marker" ></i>
	</div>
	<div class="col-md-6 text-right" style="pointer-events:none;position: absolute; bottom: 10px; right: 0;">
	<!--<i class="fa fa-comment" ng-click="ShowComments()"> {{test}}</i>-->
	<i class="fa fa-eye" ></i>
	</div>
	</div>
	</div>
	<div class="row" >


	<div class="" >

	<div class="col-lg-12" id="photoDiv">


	</div>


	<div id="commentsDiv" class="col-lg-3 hidden" >
	<div class="CommentsBox scrollbox " id="commentsBox" ng-scrollbars ng-scrollbars-config="config" >
	<div >

	<comments comment-data="comments"></comments>

	</div>
	<div>
	<p class="add_comment">
	<commenter action="addParentComment" toggle="true" buttonText="Comment"></commenter>
	</p>
	</div>
	</div>
	</div>




	</div>

	</div>