'use strict';
/**
 * Implements directive for qusion.table component.
 */
var app = angular.module('images.directives.selector', [])
    app.directive('qnImagesselector', [
       
        function () {
            return {
                require: '?ngModel',
                replace: true,
                scope: {
                    options: "=qnImagesselector",
                    ui: "&ui",
                    selectedImages: "=ngModel"
                },
                templateUrl: '/areas/qusion/scripts/templates/images/selector.html',
                controller: function ($scope, $timeout, ImageService, LibraryService) {
                    $scope.selectedLibrary = 0;
                    $scope.selected = [];
                    $scope.loadImages = function() {
                        $scope.ticks = new Date().getTime();  
                        ImageService.query($scope.query)
                            .then(function(data) {
                                $scope.isGrid = true;
                                $scope.images = data.Images;
                                $scope.library = data.Library;
                                if (data.Images.length >= 18)
                                    $scope.canLoadMore = true;
                                if ($scope.library) {
                                    $scope.DisableSort = false;
                                }else {
                                    $scope.DisableSort = true;
                                }
                            });
                    };
                    

                    var page = 1;
                    $scope.loadMore = function () {
                        $scope.ticks = new Date().getTime();
                        if ($scope.canLoadMore) {
                            $scope.query.page = ++page;
                            ImageService.query($scope.query)
                                .then(function (data) {
                                    $scope.canLoadMore = data.Images.length >= 14;
                                    for (var i = 0; i < data.Images.length; i++) {
                                        $scope.images.push(data.Images[i]);
                                    }
                                });
                        }
                    };

                    var timeout;
                    $scope.scrollOptions = {
                        scrollBottom: function (event, element) {
                            if (element.hasClass('scroller')) {
                                clearTimeout(timeout);

                                timeout = setTimeout(function () {
                                    $scope.loadMore();

                                }, 300);
                            }
                        }
                    };


                    $scope.loadLibraries = function() {
                        ImageService.libraries().then(function(data) {
                            $scope.libraries = data;
                            $scope.predicate = '-CreatedOn';
                        });
                    };
                    
                    //Upload

                    /**
                    *@property addToExistig
                    *@descriptoin Indicates whether to create a new gallery or add images to an existing.
                    */
                    $scope.addToExistig = false;

                    /**
                    *@property libraryTitle
                    *@description Title for new library. Default is now date.
                    */
                    var now = new Date();
                    var mm = now.getMonth() + 1;
                    $scope.libraryTitle = now.getDate() + '. ' + mm + '. ' + now.getFullYear();

                    /**
                    *
                    */
                    $scope.addToExistingLibrary = function () {
                        $scope.addToExistig = $scope.addToExistig == false;
                    };
                    
                    /**
                    *@property upload
                    *@description upload widget will bee initialized here.
                    */
                    $scope.upload = $('#fileupload').upload({
                        extensions: ['gif', 'jpg', 'png']
                    }).data("qusion-upload");
                    
                    /**
                    *@method canSubmit
                    *@description Indicates whether it is possible to upload pictures.
                    */
                    $scope.canSubmit = function () {
                        if ($scope.addToExistig == false) {

                            if ($scope.libraryTitle == '' || $scope.libraryTitle == 'undefined') {
                                return false;
                            } else {
                                return true;
                            }
                        } else {

                            if ($scope.libraryID == '') {
                                return false;
                            } else {
                                return true;
                            }

                        }
                    };

                    /**
                    *@method startUpload
                    *@description Start upload process.
                    */
                    $scope.startUpload = function () {
                        if ($scope.canSubmit() == true) {
                            if ($scope.addToExistig == false) {

                                var library = {
                                    Title: $scope.libraryTitle,
                                    Type: "Image"
                                };

                                LibraryService.create(library).then(function (value) {
                                    $scope.libraryId = value.ID;
                                    $scope.libraries.push(value);
                                    $scope.addToExistig = true;
                                    $timeout(function () {
                                        $scope.upload.send();
                                    }, 100);
                                    $scope.loadImages();
                                    $scope.loadLibraries();
                                });
                            } else {
                                $scope.upload.send();
                                $scope.loadImages();
                                $scope.loadLibraries();
                            }
                        }
                    };

                    $scope.ui.dialogSelect = {
                        width: 700,
                        create: function () {
                            $(".ui-widget-header").hide();
                            $scope.selectionComplete = false;
                            $scope.dialogSelect = $(this);
                        },
                        close: function () {
                            if ($scope.selectionComplete == false) {
                                
                            }
                        }
                    };

                    $scope.selectImages = function () {
                        $scope.dialogSelect.dialog("open");
                    };
                    
                    $scope.$watch('selectedLibrary', function (value) {
                        if (value) {
                            if(value != 0)
                                $scope.query = { libraryId: value };
                            else {
                                $scope.query = { };
                            }
                            $scope.selected = [];
                            $scope.loadImages();
                        }
                    });
                    
                    $scope.$watch('selectedImages', function (value) {
                        $scope.selected = value;
                    }, true);

                    $scope.loadImages();
                    $scope.loadLibraries();
                },
                link: function (scope, element, attr, ngModel) {
                    
                    scope.doneSelection = function () {

                        scope.selected = [];
                        angular.forEach(scope.selectedItems, function (value, key) {
                            scope.selected.push(value.ID);
                        });

                        scope.selectedImages = scope.selected;
                        scope.dialogSelect.dialog("close");
                    };
                    
                    scope.cancelSeletion = function () {
                        scope.dialogSelect.dialog("close");
                    };

                    
                   
                }
            };
        }
    ]);

app.directive('qnIconsselector', [
       
        function () {
            return {
                require: '?ngModel',
                replace: true,
                scope: {
                    options: "=qnIconsselector",
                    ui: "&ui",
                    selectedImages: "=ngModel"
                },
                templateUrl: '/areas/qusion/scripts/templates/images/selectoricon.html',
                controller: function ($scope, $timeout, ImageService, LibraryService) {
                    $scope.selectedLibrary = 0;
                    $scope.selected = [];
                    $scope.Title = "Icons";
                    $scope.loadImages = function () {
                        $scope.ticks = new Date().getTime();
                        ImageService.query($scope.query)
                            .then(function (data) {
                                $scope.isGrid = true;
                                $scope.images = data.Images;
                                $scope.library = data.Library;
                                
                                if ($scope.library) {
                                    $scope.DisableSort = false;
                                } else {
                                    $scope.DisableSort = true;
                                }
                            });
                    };

                    $scope.loadLibraries = function () {
                        ImageService.libraries().then(function (data) {
                            $scope.libraries = data;
                            $scope.predicate = '-CreatedOn';
                        });
                    };

                    //Upload

                    /**
                    *@property addToExistig
                    *@descriptoin Indicates whether to create a new gallery or add images to an existing.
                    */
                    $scope.addToExistig = false;

                    /**
                    *@property libraryTitle
                    *@description Title for new library. Default is now date.
                    */
                    var now = new Date();
                    var mm = now.getMonth() + 1;
                    $scope.libraryTitle = now.getDate() + '. ' + mm + '. ' + now.getFullYear();

                    /**
                    *
                    */
                    $scope.addToExistingLibrary = function () {
                        $scope.addToExistig = $scope.addToExistig == false;
                    };

                    /**
                    *@property upload
                    *@description upload widget will bee initialized here.
                    */
                    $scope.upload = $('#fileupload').upload({
                        extensions: ['gif', 'jpg', 'png']
                    }).data("qusion-upload");

                    /**
                    *@method canSubmit
                    *@description Indicates whether it is possible to upload pictures.
                    */
                    $scope.canSubmit = function () {
                        if ($scope.addToExistig == false) {

                            if ($scope.libraryTitle == '' || $scope.libraryTitle == 'undefined') {
                                return false;
                            } else {
                                return true;
                            }
                        } else {

                            if ($scope.libraryID == '') {
                                return false;
                            } else {
                                return true;
                            }

                        }
                    };

                    /**
                    *@method startUpload
                    *@description Start upload process.
                    */
                    $scope.startUpload = function () {
                        if ($scope.canSubmit() == true) {
                            if ($scope.addToExistig == false) {

                                var library = {
                                    Title: $scope.libraryTitle,
                                    Type: "Image"
                                };

                                LibraryService.create(library).then(function (value) {
                                    $scope.libraryId = value.ID;
                                    $scope.libraries.push(value);
                                    $scope.addToExistig = true;
                                    $timeout(function () {
                                        $scope.upload.send();
                                    }, 100);
                                    $scope.loadImages();
                                    $scope.loadLibraries();
                                });
                            } else {
                                $scope.upload.send();
                                $scope.loadImages();
                                $scope.loadLibraries();
                            }
                        }
                    };

                    $scope.ui.dialogSelect = {
                        width: 700,
                        create: function () {
                            $(".ui-widget-header").hide();
                            $scope.selectionComplete = false;
                            $scope.dialogSelect = $(this);
                        },
                        close: function () {
                            if ($scope.selectionComplete == false) {

                            }
                        }
                    };

                    $scope.selectImages = function () {
                        $scope.dialogSelect.dialog("open");
                    };

                    $scope.$watch('selectedLibrary', function (value) {
                        if (value) {
                            if (value != 0)
                                $scope.query = { libraryId: value };
                            else {
                                $scope.query = {};
                            }
                            $scope.selected = [];
                            $scope.loadImages();
                        }
                    });

                    $scope.$watch('selectedImages', function (value) {
                        $scope.selected = value;
                    }, true);

                    $scope.loadImages();
                    $scope.loadLibraries();
                },
                link: function (scope, element, attr, ngModel) {

                    scope.doneSelection = function () {

                        scope.selected = [];
                        angular.forEach(scope.selectedItems, function (value, key) {
                            scope.selected.push(value.ID);
                        });

                        scope.selectedImages = scope.selected;
                        scope.dialogSelect.dialog("close");
                    };

                    scope.cancelSeletion = function () {
                        scope.dialogSelect.dialog("close");
                    };



                }
            };
        }
]);