$m.core.register('.photoGalleryModule', function (hub) { // #PhotoGalleryModule
    return {
        construct: function () {
            $m.jQuery(hub.find('a[rel*=lightbox]')).lightBox({
                imageLoading: '/Admin/images/lightbox-ico-loading.gif',
                imageBtnPrev: '/Admin/images/lightbox-btn-prev.gif',
                imageBtnNext: '/Admin/images/lightbox-btn-next.gif',
                imageBtnClose: '/Admin/images/lightbox-btn-close.gif',
                imageBlank: '/Admin/images/lightbox-blank.gif'
            });
        },

        destruct: function () {
        }
    };
});

$m.core.register('.photoGalleryAdminModule', function (hub) {
    var siteId, sitePageId, pagePartId, uploadFiles, newFolder, save, save2, cancel, folders, selectedPhotos, selectedPhotosContainer, leftColumn, folderPhotos, loading, captions = [], caption, pageSize = 12, self = {
        construct: function () {
            siteId = hub.find('[id$=_PhotoGallerySiteId]')[0].value;
            sitePageId = hub.find('[id$=_PhotoGallerySitePageId]')[0].value;
            pagePartId = hub.find('[id$=_PhotoGalleryPagePartId]')[0].value;
            uploadFiles = hub.find('#PhotoGalleryUploadFiles')[0];
            newFolder = hub.find('#PhotoGalleryNewFolder')[0];
            save = hub.find('#PhotoGallerySave')[0];
            save2 = hub.find('#PhotoGallerySave2')[0];
            cancel = hub.find('#PhotoGalleryCancel')[0];
            folders = hub.find('#PhotoGalleryFolders')[0];
            selectedPhotos = hub.find('#PhotoGallerySelectedPhotos')[0];
            selectedPhotosContainer = $m.jQuery(hub.find('#Selected-Photos')[0]);
            folderPhotos = hub.find('#PhotoGalleryFolderPhotos')[0];
            loading = hub.find('#PhotoGalleryLoading')[0];
            leftColumn = $m.jQuery('#work-side');

            hub.bind(uploadFiles, 'click', self.uploadFilesClick);
            hub.bind(newFolder, 'click', self.newFolderClick);
            hub.bind(folders, 'change', self.foldersChange);
            hub.bind(save, 'click', self.saveClick);
            hub.bind(save2, 'click', self.saveClick);
            hub.bind(cancel, 'click', self.cancelClick);

            selectedPhotosContainer.appendTo(leftColumn);

            self.loadPhotoGallery();
        },

        destruct: function () {
            hub.unbind(uploadFiles, 'click', self.uploadFilesClick);
            hub.unbind(newFolder, 'click', self.newFolderClick);
            hub.unbind(folders, 'change', self.foldersChange);
            hub.unbind(save, 'click', self.saveClick);
            hub.unbind(save2, 'click', self.saveClick);
            hub.unbind(cancel, 'click', self.cancelClick);

            var i, length = captions.length;
            for (i = 0; i < length; i++) {
                caption = captions[i];

                hub.unbind(caption, 'focus', self.captionFocus);

                hub.unbind(caption, 'change keyup', self.captionChange);
            }
        },

        photoGalleryService: function (method, data, successCallback, errorCallback) {
            hub.ajax({
                type: 'POST',
                url: '../App_Webservices/Admin/PhotoGallery.asmx/' + method,
                data: hub.toJSON(data),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: successCallback,
                error: errorCallback
            });
        },

        photoGalleryServiceWithData: function (method, data, successCallback, errorCallback) {
            self.photoGalleryService(method, data, function (data, status, xhr) { if (data.d) { successCallback(data.d, status, xhr) } else { errorCallback(xhr, status, data); } }, errorCallback);
        },

        getFolderAssets: function (successCallback, errorCallback) {
            self.photoGalleryServiceWithData('Get_Folder_Assets_By_SiteId', { iSiteId: siteId }, successCallback, errorCallback);
        },

        getImageAssets: function (successCallback, errorCallback) {
            self.photoGalleryServiceWithData('Get_Image_Assets_By_SiteId_And_FolderId', { iSiteId: siteId, iFolderId: folders.value }, successCallback, errorCallback);
        },

        getPhotoGalleryImages: function (successCallback, errorCallback) {
            self.photoGalleryServiceWithData('Get_PhotoGalleryImages_By_PagePartId', { iPagePartId: pagePartId }, successCallback, errorCallback);
        },

        setPhotoGalleryImages: function (images, successCallback, errorCallback) {
            self.photoGalleryService('Set_PhotoGalleryImages_By_PagePartId', { iPagePartId: pagePartId, glSelectedImageAssets: images }, successCallback, errorCallback);
        },

        loadPhotoGallery: function () {
            self.getFolderAssets(function (data, status, xhr) {
                var text = 'Top Level', option = document.createElement('option');

                option.value = 0;

                option.appendChild(document.createTextNode(text));

                folders.appendChild(option);

                (function appendFolders(folderId, folderPath, separator) {
                    var i = 0, length = data.length, asset, text, option;

                    for (i = 0; i < length; i++) {
                        asset = data[i];

                        if (asset.FolderId === folderId) {
                            text = folderPath + separator + asset.Name;

                            option = document.createElement('option');

                            option.value = asset.AssetId;

                            option.appendChild(document.createTextNode(text));

                            folders.appendChild(option);

                            appendFolders(asset.AssetId, text, separator);
                        }
                    }
                })(0, text, '/');
            });

            self.getImageAssets(function (data, status, xhr) {
                var i = 0, length = data.length, asset, li, a, img, selectedPhotoImg, removeSelectedPhotoImg, input;

                for (i = 0; i < length; i++) {
                    asset = data[i];

                    li = document.createElement('li');

                    li.className = 'folder-photo';

                    li.style.display = 'none';

                    li.setAttribute('data-folder-id', asset.FolderId);

                    li.setAttribute('data-file-key', asset.FileKey.replace('/5_', '/'));

                    folderPhotos.appendChild(li);

                    a = document.createElement('a');

                    a.href = '#';

                    a.onclick = self.folderPhotoToggle;

                    li.appendChild(a);

                    img = document.createElement('img');

                    img.setAttribute('data-src', asset.FileKey);

                    img.setAttribute('title', asset.Name);

                    a.appendChild(img);

                    selectedPhotoImg = document.createElement('img');

                    selectedPhotoImg.setAttribute('src', 'images/SelectPhoto.png');

                    selectedPhotoImg.setAttribute('title', 'Click to Add');

                    selectedPhotoImg.setAttribute('class', 'selected-photo-hover');

                    a.appendChild(selectedPhotoImg);

                    removeSelectedPhotoImg = document.createElement('img');

                    removeSelectedPhotoImg.setAttribute('src', 'images/RemoveSelectPhoto.png');

                    removeSelectedPhotoImg.setAttribute('title', 'Click to Remove');

                    removeSelectedPhotoImg.setAttribute('class', 'remove-selected-photo-hover');

                    a.appendChild(removeSelectedPhotoImg);

                    //a.appendChild(document.createTextNode(asset.Name));

                    captions[captions.length] = input = document.createElement('input');

                    input.type = 'text';

                    input.maxLength = 100;

                    input.value = 'Image Caption';

                    hub.bind(input, 'focus', self.captionFocus);

                    hub.bind(input, 'change keyup', self.captionChange);

                    li.appendChild(input);

                    div = document.createElement('div');
                }

                self.getPhotoGalleryImages(function (data, status, xhr) {
                    loading.style.display = 'none';

                    var shown = 0;

                    function showMoreImages() {
                        var show = pageSize - shown;
                        if (show < 0) {
                            show = 4 - (shown % 4);
                        }

                        var lis = hub.find('li.folder-photo:not(:visible):not(.loading)').slice(0, show), i = 0, length = lis.length, li, img;

                        for (i = 0; i < length; i++) {
                            li = lis[i];

                            $m.dom.addClass(li, 'loading');

                            img = li.childNodes[0].childNodes[0];

                            img.src = img.getAttribute('data-src');

                            img.onload = function () {
                                var parentLi = this.parentNode.parentNode;

                                $m.dom.removeClass(parentLi, 'loading');

                                parentLi.style.display = 'inline-block';
                            };
                        }
                    };

                    var i = 0, length = data.length, image, folderLi, folderImg, folderImgSrc, selectedLi, selectedA, selectedImg, removeSelectedImg, insertBefore = folderPhotos.firstChild, showParentLi = function () {
                        var parentLi = this.parentNode.parentNode;

                        $m.dom.removeClass(parentLi, 'loading');

                        parentLi.style.display = 'inline-block';

                        shown++;

                        if (shown === data.length) {
                            return showMoreImages();
                        }
                    };

                    if (length === 0) {
                        return showMoreImages();
                    }

                    for (i = 0; i < length; i++) {
                        image = data[i];

                        folderLi = hub.find('li.folder-photo[data-file-key="' + image.FileKey + '"]')[0];

                        if (folderLi) {
                            if (insertBefore && folderLi !== insertBefore) {
                                folderPhotos.removeChild(folderLi);

                                folderPhotos.insertBefore(folderLi, insertBefore);
                            }

                            $m.dom.addClass(folderLi, 'selected');

                            $m.dom.addClass(folderLi, 'loading');

                            folderImg = folderLi.childNodes[0].childNodes[0];

                            folderImgSrc = folderImg.getAttribute('data-src');

                            folderImg.src = folderImgSrc;

                            folderImg.onload = showParentLi;

                            if (image.Caption) {
                                folderLi.childNodes[1].value = image.Caption;
                            }

                            selectedLi = document.createElement('li');

                            selectedLi.style.display = 'inline-block';

                            selectedLi.className = 'selected-photo';

                            selectedLi.setAttribute('data-file-key', image.FileKey);

                            selectedPhotos.appendChild(selectedLi);

                            selectedA = document.createElement('a');

                            selectedA.href = '#';

                            selectedA.onclick = self.selectedPhotoClick;

                            selectedLi.appendChild(selectedA);

                            selectedImg = document.createElement('img');

                            selectedImg.src = folderImgSrc.replace('/5_', '/1_');

                            selectedA.appendChild(selectedImg);

                            removeSelectedImg = document.createElement('img');

                            removeSelectedImg.setAttribute('src', 'images/RemoveSelectPhotoSmall.png');

                            removeSelectedImg.setAttribute('title', 'Click to Remove');

                            removeSelectedImg.setAttribute('class', 'remove-photo-hover');

                            selectedA.appendChild(removeSelectedImg);
                        }
                    }
                });
            });

            var jDocument = $m.jQuery(document), jWindow = $m.jQuery(window), scrollTop, docHeight, winHeight, selectedPhotosContainerFixed;

            jWindow.scroll(function () {
                scrollTop = jWindow.scrollTop();
                docHeight = jDocument.height();
                winHeight = jWindow.height();

                if (scrollTop >= docHeight - winHeight - 400) {
                    var folderId = folders.value, lis = hub.find('li.folder-photo:not(:visible):not(.loading)'), i = 0, length = lis.length, li, img, shown = 0;

                    for (var i = 0; i < length; i++) {
                        if (shown === pageSize) {
                            break;
                        }

                        li = lis[i];

                        if (folderId === '-1' || li.getAttribute('data-folder-id') === folderId) {
                            $m.dom.addClass(li, 'loading');

                            img = li.childNodes[0].childNodes[0];

                            img.src = img.getAttribute('data-src');

                            img.onload = function () {
                                var parentLi = this.parentNode.parentNode;

                                $m.dom.removeClass(parentLi, 'loading');

                                parentLi.style.display = 'inline-block';
                            };

                            shown++;
                        }
                    }
                }

                if (!selectedPhotosContainerFixed && scrollTop >= 880) {
                    selectedPhotosContainerFixed = true;

                    selectedPhotosContainer.css({ 'position': 'fixed', 'top': '0px' });

                    /*var lis = hub.find('li.folder-photo:not(:visible):not(.loading)');

                    if (lis.length) {
                    //var posY = (scrollTop - 800) + 30;

                    var posY = (scrollTop - 800) + (winHeight / 2);

                    selectedPhotosContainer.stop().animate({
                    'marginTop': posY + 'px'
                    }, 300);
                    }*/
                } else if (selectedPhotosContainerFixed && scrollTop < 880) {
                    selectedPhotosContainerFixed = false;

                    selectedPhotosContainer.css({ 'position': 'relative' });
                }
            });
        },

        uploadFilesClick: function () {
            window.open('dlgMultipleFileUpload.aspx', 'MultipleFileUploader', 'width=510,height=500');

            return false;
        },

        newFolderClick: function () {
            window.location = 'MediaMgmt.aspx?Action=NewFolder&Redirect=PageMgmt.aspx%3FPageId=' + sitePageId + '%26Action=ShowAddMultiplePhotos';

            return false;
        },

        foldersChange: function () {
            var folderId = folders.value, lis = folderPhotos.childNodes, i = 0, length = lis.length, li, img, shown = 0;

            for (i = 0; i < length; i++) {
                li = lis[i];

                if (shown < pageSize && (folderId === '-1' || li.getAttribute('data-folder-id') === folderId)) {
                    li.style.display = 'inline-block';

                    img = li.childNodes[0].childNodes[0];

                    img.src = img.getAttribute('data-src');

                    shown++;
                } else {
                    li.style.display = 'none';
                }
            }

            return false;
        },

        saveClick: function () {
            var lis = selectedPhotosContainer.find('li.selected-photo'), i = 0, length = lis.length, li, images = [], fileKey, input;

            for (i = 0; i < length; i++) {
                li = lis[i];

                fileKey = li.getAttribute('data-file-key');

                input = hub.find('li.folder-photo[data-file-key="' + fileKey + '"]')[0];

                if (input) {
                    input = input.childNodes[1].value;
                    if (input === 'Image Caption') {
                        input = '';
                    }
                }

                images.push({
                    sFileKey: fileKey,
                    sCaption: input,
                    iDisplayOrder: i + 1
                });
            }

            self.setPhotoGalleryImages(images, function (data, status, xhr) {
                window.location = 'PageMgmt.aspx?PageId=' + sitePageId + '&Action=AddedMultiplePhotos&Amount=' + length;
            });

            return false;
        },

        cancelClick: function () {
            window.location = 'PageMgmt.aspx?PageId=' + sitePageId;

            return false;
        },

        addSelectedPhoto: function (li) {
            var fileKey, selectedLi;

            fileKey = li.getAttribute('data-file-key');
            selectedLi = selectedPhotosContainer.find('li.selected-photo[data-file-key="' + fileKey + '"]')[0];

            if (selectedLi) {
                return false;
            }

            $m.dom.addClass(li, 'selected');

            var src = li.childNodes[0].childNodes[0].getAttribute('data-src').replace('/5_', '/1_');

            selectedLi = document.createElement('li');

            selectedLi.className = 'selected-photo';

            selectedLi.setAttribute('data-file-key', fileKey);

            selectedPhotos.appendChild(selectedLi);

            var selectedA = document.createElement('a');

            selectedA.href = '#';

            selectedA.onclick = self.selectedPhotoClick;

            selectedLi.appendChild(selectedA);

            var selectedImg = document.createElement('img');

            selectedImg.src = src;

            var showParentLi = function () {
                this.parentNode.parentNode.style.display = 'inline-block';
            };

            selectedImg.onload = showParentLi;

            selectedA.appendChild(selectedImg);

            var removeSelectedImg = document.createElement('img');

            removeSelectedImg.setAttribute('src', 'images/RemoveSelectPhotoSmall.png');

            removeSelectedImg.setAttribute('title', 'Click to Remove');

            removeSelectedImg.setAttribute('class', 'remove-photo-hover');

            selectedA.appendChild(removeSelectedImg);
        },

        removeSelectedPhoto: function (li) {
            var fileKey = li.getAttribute('data-file-key'), selectedLi = selectedPhotosContainer.find('li.selected-photo[data-file-key="' + fileKey + '"]')[0];

            if (!selectedLi) {
                return false;
            }

            $m.dom.removeClass(li, 'selected');

            selectedLi.parentNode.removeChild(selectedLi);
        },

        folderPhotoToggle: function () {
            var li = this.parentNode;

            if ($m.dom.hasClass(li, 'selected')) {
                self.removeSelectedPhoto(li);
            } else {
                self.addSelectedPhoto(li);
            }

            return false;
        },

        selectedPhotoClick: function () {
            var li = this.parentNode, fileKey = li.getAttribute('data-file-key');

            li.parentNode.removeChild(li);

            li = hub.find('li.folder-photo[data-file-key="' + fileKey + '"]')[0];

            if (li) {
                $m.dom.removeClass(li, 'selected');
            }

            return false;
        },

        captionFocus: function () {
            if (this.value === 'Image Caption') {
                this.value = '';
            }
        },

        captionChange: function () {
            if (this.value.length > 0) {
                self.addSelectedPhoto(this.parentNode);
            } else {
                self.removeSelectedPhoto(this.parentNode);
            }
        }
    };

    return self;
});