(function () {
    'use strict';
    angular.module('angular.drag.resize', [])
        .provider('adrConfig', function adrConfigProvider() {
            //defaults
            var defaultConfig = {
                iconPosition: [-1, 10],
                mode: 'all',
                modes: ['all', 'horizontal', 'vertical']
            };
            var config = angular.extend({}, defaultConfig);
            this.$get = [function () {
                return {
                    iconPosition: config.iconPosition,
                    mode: config.mode,
                    modes: config.modes
                };
            }];
        })
        .directive('resize', ['adrConfig', '$document', function (adrConfig, $document) {
            return {
                restrict: 'A',
                link: function (scope, element, attr) {
                    var dimension = {};
                    var iconPosition = adrConfig.iconPosition;
                    var mode = attr.resize && adrConfig.modes.indexOf(attr.resize) > -1 ? attr.resize : adrConfig.mode;
                    var position = {};
                    var doc = {};
                    var el = {};
                    //create button for resizing
                    //var btn = document.createElement("span");
                    var btn = document.createElement("i");
                    btn.classList.add('fa');
                    btn.classList.add('fa-expand');
                    btn.classList.add('fa-rotate-90');
                    btn.style.border = '25px solid transparent';

/*                    btn.innerHTML =
                        "<i class='fa fa-expand fa-rotate-90' style='width: 25px;height: 25px; bottom: 10%; position: absolute;'></i>"
                    ;*/

                    btn.style.position = 'fixed';
                    btn.style.visibility = 'hidden';
                    if (mode == 'horizontal') {
                        btn.style.cursor = 'ew-resize';
                    } else if (mode == 'vertical') {
                        btn.style.cursor = 'ns-resize';
                    } else {
                        btn.style.cursor = 'nwse-resize';
                    }
                    //bind resize function to button;
                    btn.onmousedown = function ($event) {
                        switch ($event.which) {
                            case 1:
                                $event.stopImmediatePropagation();
/*                                console.log(element.offsetParent().prevObject[0].parentNode.parentNode.getBoundingClientRect().bottom);
                                console.log(element[0].parentNode);
                                console.log(element[0].parentNode.parentNode);
                                console.log(element[0].parentNode.parentNode.parentNode);*/
                                doc.left = element[0].parentNode.parentNode.getBoundingClientRect().left;
                                doc.top = element[0].parentNode.parentNode.getBoundingClientRect().top;
                                doc.bottom = element[0].parentNode.parentNode.getBoundingClientRect().bottom;
                                doc.right = element[0].parentNode.parentNode.getBoundingClientRect().right;
                                el.width = element[0].getBoundingClientRect().width;
                                el.height = element[0].getBoundingClientRect().height;
                                position.x = $event.clientX;
                                position.y = $event.clientY;
                                dimension.width = element.prop('offsetWidth');
                                dimension.height = element.prop('offsetHeight');
                                btn.style.visibility = 'hidden';
                                $document.bind('mousemove', mousemove);
                                $document.bind('mouseup', mouseup);
                                return false;
                                break;
                        }
                    };

                    function mousemove($event) {
                        switch ($event.which) {
                            case 1:

                                if ($event.clientX < doc.right) {
                                    var deltaWidth = dimension.width - (position.x - $event.clientX);
                                    if (deltaWidth < 100) {
                                        deltaWidth = 100;
                                    }
                                }
                                if ($event.clientY < doc.bottom) {
                                    var deltaHeight = dimension.height - (position.y - $event.clientY);
                                    if (deltaHeight < 100) {
                                        deltaHeight = 100;
                                    }
                                }
                                if ($event.clientX > doc.right) {
                                    deltaWidth = element[0].getBoundingClientRect().width;
                                }
                                if ($event.clientY > doc.bottom ) {
                                    deltaHeight = element[0].getBoundingClientRect().height;
                                }
                                var newDimensions = {};
                                if (mode == 'horizontal') {
                                    newDimensions = {
                                        width: deltaWidth + 'px'
                                    };
                                } else if (mode == 'vertical') {
                                    newDimensions = {
                                        height: deltaHeight + 'px'
                                    };
                                } else {
                                    newDimensions = {
                                        width: deltaWidth + 'px',
                                        height: deltaHeight + 'px'
                                    };
                                }
                                element.css(newDimensions);
                                element[0].children[0].style.setProperty('width', deltaWidth + 'px');
                                element[0].children[0].style.setProperty('height', deltaHeight + 'px');
                                //console.log(element[0].children[0]);
                                return false;
                                break;
                        }
                    }

                    function mouseup() {
                        $document.unbind('mousemove', mousemove);
                        $document.unbind('mouseup', mouseup);
                        btn.style.visibility = 'hidden';
                    }

                    element.append(btn);

                    //show button on hover
                    element.bind('mouseover', function () {
                        /*console.log(element[0].children[1].children[0]);*/
                        btn.style.top = element[0].getBoundingClientRect().top + element[0].getBoundingClientRect().height - 50 + 'px';
                        btn.style.left = element[0].getBoundingClientRect().left + element[0].getBoundingClientRect().width - 50 + 'px';
                        btn.style.visibility = 'visible';
                    });
                    element.bind('mouseout', function () {
                       /* console.log(element);*/
                        btn.style.visibility = 'hidden';
                    });
                }
            };
        }])
        .directive('draggable', ['$document', function ($document) {
            return {
                restrict: 'A',
                link: function (scope, element) {
                    var position = {};
                    var doc = {};

                    element.bind('mousedown', function ($event) {
                        switch ($event.which) {
                            case 1:
                                element.css({position: 'fixed'});
                                doc.left = element[0].parentNode.parentNode.getBoundingClientRect().left;
                                doc.top = element[0].parentNode.parentNode.getBoundingClientRect().top;
                                doc.bottom = element[0].parentNode.parentNode.getBoundingClientRect().bottom;
                                doc.right = element[0].parentNode.parentNode.getBoundingClientRect().right;
                                position.x = element[0].getBoundingClientRect().left;
                                position.y = element[0].getBoundingClientRect().top;
                                position.initialMouseX = $event.clientX;
                                position.initialMouseY = $event.clientY;
                                $document.bind('mousemove', mousemove);
                                $document.bind('mouseup', mouseup);
                                return false;
                                break;
                        }
                    });

                    function mousemove($event) {
                        switch ($event.which) {
                            case 1:
                                var dx = $event.clientX - position.initialMouseX;
                                var dy = $event.clientY - position.initialMouseY;
                                var posdy = position.y + dy;
                                var posdx = position.x + dx;

                                if (posdy > doc.top) {
                                    var top = posdy;
                                }
                                if (posdx > doc.left){
                                    var left = posdx;
                                }
                                if ((posdx + element[0].getBoundingClientRect().width) < doc.right) {
                                    left = posdx;
                                }
                                if ((posdy + element[0].getBoundingClientRect().height) < doc.bottom){
                                    top = posdy;
                                }
                                if (posdy < doc.top) {
                                    top  = doc.top;
                                }
                                if (posdx < doc.left) {
                                    left = doc.left;
                                }
                                if ((posdx + element[0].getBoundingClientRect().width) > doc.right) {
                                    left = doc.right - element[0].getBoundingClientRect().width;
                                }
                                if ((posdy + element[0].getBoundingClientRect().height) > doc.bottom) {
                                    top = doc.bottom - element[0].getBoundingClientRect().height;
                                }
                                element.css({
                                    top: top + 'px',
                                    left: left + 'px'
                                });

                                return false;
                                break;
                        }
                    }

                    function mouseup() {
                        $document.unbind('mousemove', mousemove);
                        $document.unbind('mouseup', mouseup);
                    }
                }
            };
        }]);
})();