angular.module('fluro').directive('parallaxImage', function(FluroScrollService, $timeout) {
    return {
        restrict: 'E',
        replace:true,
        transclude:true,
        scope:{
          url:"=ngImageUrl",
          speed: "@ngSpeed",
          offset:'@offset',
        },
        template:'<div class=parallax><div class="parallax-background preload-hide" style="background-image:url({{url}}); transform: translate3d(-50%, {{offset}}px, 0); -moz-transform: translate3d(-50%, {{offset}}px, 0); -webkit-transform: translate3d(-50%, {{offset}}px, 0)"><img ng-src={{url}}></div><div class=parallax-foreground ng-transclude></div></div>',
        link:function($scope, $element, $attr) {
            
            if(!$scope.speed) {
                $scope.speed = 0.3;
            }
            
            
            
            
            ////////////////////////////////////////////
            
            var background = $element.find('.parallax-background');

            ////////////////////////////////////////////
            
            $scope.$watch('url', function() {
               
                var image = document.createElement('img');
                image.src = $scope.url;
                image.onload = function () {
                    console.log('loaded')
                    background.removeClass('preload-hide');
                };
            
            })
            



            //Find the parent if applicable
            var parent = angular.element('[scroll-active-parent]');//$($element).closest('[scroll-active-parent]');
            //console.log('Find Parent', parent, angular.element('[scroll-active-parent]'));
            
            ////////////////////////////////////////////
            
            //Element
            var element = $element.get(0);
            
            ////////////////////////////////////////////
            
            if (parent.length) {
                //Listen for the parent scroll value
                parent.on("scroll", function() {
                    $timeout(updateParentScroll);
                });
                
                //One for good measure
                updateFromMainScroll(0);
            
            } else {
            
                //Watch for changes to the main scroll value
                $scope.$watch(function() {
                    return FluroScrollService.getScroll();
                }, function(scrollValue) {
                    $timeout(function() {
                        updateFromMainScroll(scrollValue)
                    });
                });
            }
            
            //////////////////////////////////////////////

            function updateParentScroll() {
                //Get the scroll value
                var scrollValue = parent.scrollTop();
                updateFromMainScroll(scrollValue);
            }
            
            ////////////////////////////////////////////
            
            
            function updateFromMainScroll(scroll) {
               
                var halfPoint = FluroScrollService.getHalfPoint();
                var actualPositionTrack = 0;
                
                //Get positions
                var topPosition = element.offsetTop;
                
                if(topPosition < halfPoint){
                    actualPositionTrack = scroll;
                } else {
                    actualPositionTrack = scroll+halfPoint;
                }
                
                //Container Height
                var height = $element.outerHeight();
                
                //Background Panel Height
                var backgroundHeight = background.outerHeight();
                
                //Start Position
                
                var startPosition = (actualPositionTrack - topPosition) * parseFloat($scope.speed);
                
                
                
               
                
                //Maximum Limit
                var maxOffset = backgroundHeight - height;
                
                if(startPosition > maxOffset) {
                    startPosition = maxOffset;
                }
               
                if(startPosition < 0) {
                    startPosition = 0;
                }
                
                $scope.offset = -parseFloat(startPosition).toFixed(2);
            }
            
            ////////////////////////////////////////////

            
            // $scope.$watch(function() {
                
            //     var scrollPosition = FluroScrollService.getScroll();

            //     return scrollPosition;
            // }, function(scroll) {
                
               
            //     var halfPoint = FluroScrollService.getHalfPoint();
            //     var actualPositionTrack = 0;
                
                
            //     //Get positions
            //     var topPosition = element.offsetTop;
                
            //     if(topPosition < halfPoint){
            //         actualPositionTrack = scroll;
            //     } else {
            //         actualPositionTrack = scroll+halfPoint;
            //     }
                
            //     //Container Height
            //     var height = $element.outerHeight();
                
            //     //Background Panel Height
            //     var backgroundHeight = background.outerHeight();
                
            //     //Start Position
            //     var startPosition = (actualPositionTrack - topPosition) * parseFloat($scope.speed);
                
               
                
            //     //Maximum Limit
            //     var maxOffset = backgroundHeight - height;
                
            //     if(startPosition > maxOffset) {
            //         startPosition = maxOffset;
            //     }
               
            //     if(startPosition < 0) {
            //         startPosition = 0;
            //     }
                
            //     $scope.offset = -parseFloat(startPosition).toFixed(2);
                
                
            // })
        }
    }
});;