//https://github.com/jschr/bootstrap-modal

evoapp.directive('modalWindow', function($rootScope) {

    var modalWindowEl = $rootScope.viewCache.find('#genericModalWindow'),    
    template = modalWindowEl[0].outerHTML;

    return {
        require: '^ngController',
        restrict: 'AE',
        template: template,
        scope: {
            itemId: '@',
            title: '@',
            view: '@'
        },
        controller: function($rootScope, $scope, $filter, globals, $timeout) {

            $scope.main = $scope.$parent.$parent;//TODO: this is a crap!!!

            //add reference to this window, in parent controller
            if($scope.$parent[$scope.itemId] == undefined)
            {
                $scope.$parent[$scope.itemId] = $scope;
            }
            else
            {
                throw Error('Modal Window ' + $scope.itemId + ' already exists!');
            }
        },
        link: function (scope, elem, attrs) {   
          
            $(elem).css('display', 'none');

            scope.viewController = null;

            scope.resizeIcon = 'icon-resize-full';

            scope.modalWindow = $(elem.find('.modal')[0]);

            scope.modalBody = $(elem.find('.modal-body')[0]);

            var modalDialog = $(scope.modalWindow.find('.modal-dialog')[0]);

            //$(modalDialog).draggable({
            //    handle: ".modal-header"
            //}); 

            scope.viewEl = null;

            scope.modalWindow.on('show.bs.modal', function () {               

            });

            scope.modalWindow.on('shown.bs.modal', function () {          
                
            });

            scope.modalWindow.on('hide.bs.modal', function () {
                
            });

            scope.modalWindow.on('hidden.bs.modal', function () {

            });

            modalDialog.removeClass('modal-large');
            modalDialog.removeClass('modal-medium');
            modalDialog.removeClass('modal-small');

            //apply width
            if(attrs.width != null && attrs.width != undefined)
            {
                modalDialog.addClass(attrs.width);
            }

            scope.show = function(config){

                config = config == undefined ? null : config;

                scope.main.renderModule(scope.modalBody, scope.view, config, false, function(className, mscope){   
                    
                    scope.modalWindow.modal('show');

                    scope.$emit('onShow');
                });

                scope.viewEl = $(scope.modalBody.children()[0]);
                scope.viewController = angular.element(scope.viewEl).scope();
                //scope.viewController['$$view-id'] = scope.view;
               
                //var currentWindowHeight = $(window).height();
                //var newHeight = (currentWindowHeight - (currentWindowHeight * 30 / 100));
                
                //TODO: compute height!!!
                scope.modalWindow.modal({
                    height: 460,
                    minHeight: 460,
                    maxHeight: 460,
                    show: false,
                    backdrop: false
                });
            };

            scope.hide = function(){               

                //must be here otherwise controller inside modal will be destroyed
                scope.$emit('onHide');

                scope.viewEl.remove();

                scope.viewController.$destroy();

                scope.viewController = null;

                scope.modalWindow.modal('hide');                
            };  
            
            scope.maximize = function(){

                if(scope.resizeIcon == 'glyphicon glyphicon-resize-full')
                {
                    scope.resizeIcon = 'glyphicon glyphicon-resize-small';
                }
                else
                {
                    scope.resizeIcon = 'glyphicon glyphicon-resize-full';
                }

                modalDialog.toggleClass(attrs.width);

                modalDialog.toggleClass('modal-large');

                scope.$emit('onMaximize');
            };

            //scope.minimize = function(){

            //    scope.modalWindow.animate({
            //        height: '40px',
            //        top: $(window).height() - 50
            //    }, 200);  

            //};


        }
    }
});