function sggDataSelectorsCache() {
	this.keys = {};
	this.values = {};
}

sggDataSelectorsCache.prototype.init = (function(params) {
	if(params) {
		if(params['keys']) {
			jQuery.extend(this.keys, params['keys']);
		}
		if(params['values']) {
			jQuery.extend(this.values, params['values']);
		}
	}
});

sggDataSelectorsCache.prototype.get = (function(key) {
	if(this.keys[key]) {
		if(!this.values[key]) {
			// if its not a "selector" string
			if(!this.keys[key].length) {
				return null;
			}
			this.values[key] = jQuery(this.keys[key]);
		}
		return this.values[key];
	}
	return null;
});

sggDataSelectorsCache.prototype.getFromArray = (function(key) {
	var currItemSelector = this.keys
		,	ksIndex = 0
		,	fullKeyStr = null;
	;

	if(!key || !key.join || !currItemSelector) {
		return null;
	}
	fullKeyStr = key.join('.');

	if(this.values[fullKeyStr]) {
		return this.values[fullKeyStr];
	}
	// check if key exist in this.index Object
	while(ksIndex < key.length && currItemSelector) {
		if(currItemSelector[key[ksIndex]]) {
			currItemSelector = currItemSelector[key[ksIndex]]
		} else {
			currItemSelector = null;
		}
		ksIndex++;
	}
	//
	if(currItemSelector && ksIndex == key.length) {
		// if its not a "selector" string
		if(!currItemSelector.length) {
			return null;
		}

		this.values[fullKeyStr] = jQuery(currItemSelector);
		return this.values[fullKeyStr];
	}
	//
	return null;
});

/*global jQuery*/
(function (app, $) {

	app.hexToRgb = (function(hex) {
		var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
		return result ? {
			r: parseInt(result[1], 16),
			g: parseInt(result[2], 16),
			b: parseInt(result[3], 16),
		} : null;
	});

    function Controller() {
        this.$container = $('.form-tabs');
        this.tabs = this.getAvailableTabs();
        this.$currentTab = null;
        this.$currentTarget = null;
        this.linksOyPositions = [];

        this.strToBool = function(value) {
            if(value == 'true') {
                return true;
            } else {
                return false;
            }
        }

        this.init();
    }

    Controller.prototype.init = function () {
        var lastTab = this.getCookie('lastTab');

        if (!lastTab) {
            this.$currentTab = this.tabs[Object.keys(this.tabs)[0]];
            this.$currentTarget = $('.change-tab').first();
        } else {
            this.$currentTarget = $('.change-tab[href="' + lastTab + '"]');
            this.$currentTab = $('[data-tab="' + lastTab + '"]');
        }

        this.hideTabs();
        this.$currentTab.fadeIn();
        this.$currentTarget.addClass('active');
    };

    Controller.prototype.getParameterByName = function (name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");

        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    };

    Controller.prototype.getCookie = function (name) {
        var matches = document.cookie.match(new RegExp(
            "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
        ));
        return matches ? decodeURIComponent(matches[1]) : null;
    };

    Controller.prototype.setCookie = function (name, value) {
        document.cookie = name + '=' + encodeURIComponent(value);
    }

    Controller.prototype.getAvailableTabs = function () {
        var tabs = {};

        $.each($('[data-tab]'), function (index, tab) {
            tabs[$(tab).data('tab')] = $(tab);
        });

        return tabs;
    };

    Controller.prototype.hideTabs = function () {
        $.each(this.tabs, function () { this.hide() });
    };

    Controller.prototype.changeTab = function (event) {
        event.preventDefault();

        this.hideTabs();

        this.$currentTarget.removeClass('active');

        this.$currentTarget = $(event.currentTarget);
        this.$currentTarget.addClass('active');

        this.$currentTab = this.tabs[this.$currentTarget.attr('href')];
        this.$currentTab.show();

        this.setCookie('lastTab', this.$currentTarget.attr('href'));
    };

    Controller.prototype.remove = function (event) {
        if (!confirm('Are you sure?')) {
            event.preventDefault();
        }
    };

    Controller.prototype.saveButton = function() {
		var selfC = this;
        $('#btnSave').on('click', function() {
			selfC.saveScrollPos();
            document.forms['form-settings'].submit();
        });
    }

	Controller.prototype.saveScrollPos = (function() {
		var scrollTopPos = parseInt($('.settings-wrap').scrollTop());
		if(!isNaN(scrollTopPos)) {
			$('#slimScrollStartPos').val(scrollTopPos);
		}
	});

    Controller.prototype.setInputColor = (function() {
        $('input[type="color"]').each(function() {
            if(navigator.userAgent.match(/Trident\/7\./)) {
                $(this).css('background-color', $(this).val());
            }
        });
    });

    // ICONS
    Controller.prototype.initIconsDialog = function () {

        var $dialog = $('#iconsPreview').dialog({
            autoOpen: false,
            buttons:  {
                Cancel: function () {
                    $(this).dialog('close');
                }
            },
            modal:    true,
            width:    645
        });

        $('#selectIconsEffect').on('click', function(event) {
            event.preventDefault();
            $dialog.dialog('open');
        });

        $('#iconsPreview .hi-icon').on('click', function(event) {
            event.preventDefault();
            var effectName = $(event.currentTarget).data('effect')
			,	baseEffectName = $(event.currentTarget).data('effect-base')
			,	$previewIcons = $('#preview .sggCbEntrySpan.hi-icon-wrap')
			,	prevEffectName = $('#iconsEffectName').val()
			,	prevBaseEffectName = prevEffectName.substr(0, prevEffectName.length - 1)
			;

            $dialog.dialog('close');
            $('#iconsEffectNameText').text(effectName);
			$previewIcons.removeClass(prevEffectName).removeClass(prevBaseEffectName);
			$('#iconsEffectName').val(effectName)
				.trigger('change');
			$previewIcons.addClass(effectName).addClass(baseEffectName);
        });

        // $('#iconsOverlay').on('change', $.proxy(Ctrl.toggleOverlay, Ctrl)).trigger('change');
    };

    Controller.prototype.toggleSlideShow = function () {
        var $options = $('[name="box[slideshowSpeed]"], [name="box[slideshowAuto]"], [name="box[popupHoverStop]"]'),
            $slideshow = $('[name="box[slideshow]"]');

        if($slideshow.val() == 'true'){
            $options.parents('tr').show();
        } else {
            $options.parents('tr').hide();
        }

        $slideshow.on('change', function(){
            if($(this).val() == 'true') {
                $options.parents('tr').show();
            } else {
                $options.parents('tr').hide();
            }
        })
    };

    Controller.prototype.togglePopupTheme = function (value) {
        var $boxType = $('[name="box[type]"]');

        $boxType.attr('value', '0');

        if(value == 'theme_6') {
            $boxType.attr('value', '1');
        }
        if(value == 'theme_1_pro') {
            $boxType.attr('value', '2');
        }
    };

    Controller.prototype.removePresetRequest = function () {
        var presetId = $('#presetId').val(),
            request = app.Ajax.Post({
                module: 'galleries',
                action: 'removePreset'
        });

        request.add('preset_id', presetId);

        return request;
    };

    Controller.prototype.initSaveDialog = function () {
        $('#saveDialog').dialog({
            width:    350,
            autoOpen: false,
            modal:    true,
            buttons:  {
                Save:   function () {
                    var $settingsId  = $('#settingsId'),
                        $presetTitle = $('#presetTitle'),
                        request = app.Ajax.Post(
                            {
                                module: 'galleries',
                                action: 'savePreset'
                            }
                        );

                    // Close the dialog and show error if the settings isn't yet saved to the database.
                    if ($settingsId.val() === 'undefined') {
                        $.jGrowl('You must to save the settings first.');
                        $(this).dialog('close');
                    }

                    request.add('settings_id', $settingsId.val());
                    request.add('title', $presetTitle.val());

                    request.send($.proxy(function (response) {
                        if (response.message) {
                            $.jGrowl(response.message);
                        }

                        if (!response.error) {
                            window.location.reload(true);
                        }

                        $(this).dialog('close');
                    }, this));
                },
                Cancel: function () {
                    $(this).dialog('close');
                }
            }
        });
    };

    Controller.prototype.openSaveDialog = function () {
        $('#saveDialog').dialog('open');
    };

    Controller.prototype.initDeleteDialog = function () {
        var controller = this;

        $('#deletePreset').dialog({
            width:    350,
            autoOpen: false,
            modal:    true,
            buttons:  {
                Delete: function () {
                    var request = controller.removePresetRequest();

                    request.send($.proxy(function (response) {
                        if (response.message) {
                            $.jGrowl(response.message);
                        }

                        if (!response.error) {
                            window.location.reload(true);
                        }

                        $(this).dialog('close');
                    }, this));
                },
                Cancel: function () {
                    $(this).dialog('close');
                }
            }
        });
    };

    Controller.prototype.openDeleteDialog = function () {
        $('#deletePreset').dialog('open');
    };

    Controller.prototype.initLoadDialog = function () {
        var controller = this;

        $("#loadPreset").dialog({
            width:    350,
            autoOpen: false,
            modal:    true,
            buttons:  {
                Cancel: function () {
                    $(this).dialog('close');
                },
                Load: function () {
                    var galleryId,
                        presetId,
                        $presetsList = $('#presetList'),
                        request = app.Ajax.Post({
                            module: 'galleries',
                            action: 'applyPreset'
                        });

                    // Get gallery Id from the browser's query string.
                    galleryId = parseInt(controller.getParameterByName('gallery_id'), 10);

                    // Get preset id from the preset list.
                    presetId = parseInt($presetsList.val(), 10);

                    request.add('gallery_id', galleryId);
                    request.add('preset_id', presetId);

                    request.send($.proxy(function (response) {
                        if (response.message) {
                            $.jGrowl(response.message);
                        }

                        if (!response.error) {
                            $(this).dialog('close');
                            window.location.reload(true);
                        }
                    }, this));
                }
            },
            open: function () {
                var request = app.Ajax.Post({
                    module: 'galleries',
                    action: 'getPresetList'
                });

                request.send(function (response) {
                    var $presetList = $('#presetList'),
                        $errors = $('#presetListError');

                    if (response.error) {
                        $presetList.attr('disabled', 'disabled');
                        $errors.find('#presetLoadingFailed').show();
                        return;
                    }

                    if (response.presets.length < 0) {
                        $presetList.attr('disabled', 'disabled');
                        $errors.find('#presetEmpty').show();
                        return;
                    }

                    $.each(response.presets, function (index, preset) {
                        $presetList.append('<option value="'+preset.id+'">'+preset.title+'</option>');
                    });
                });
            }
        });
    };

    Controller.prototype.openPresetDialog = function () {
        $('#loadPreset').dialog('open');
    };

    Controller.prototype.removePresetFromList = function () {
        var request = this.removePresetRequest();

        request.send(function (response) {
            if (response.error) {
                return false;
            }

            $('#presetId').find(':selected').remove();
        });
    };

    Controller.prototype.initNoticeDialog = function() {
        $('#reviewNotice').dialog({
            modal:    true,
            width:    600,
            autoOpen: true
        });
    };

    Controller.prototype.showReviewNotice = function() {
        var self = this;

        $.post(window.wp.ajax.settings.url,
            {
                action: 'grid-gallery',
                _wpnonce: SupsysticGallery.nonce,
                route: {
                    module: 'galleries',
                    action: 'checkReviewNotice'
                }
            })
            .success(function (response) {

                if(response.show) {
                    self.initNoticeDialog();

                    $.merge($('#reviewNotice [data-statistic-code]').closest('button'),
                        $('#reviewNotice').prev().find('button')).on('click', function() {

                        $.post(window.wp.ajax.settings.url, {
                                action: 'grid-gallery',
                                _wpnonce: SupsysticGallery.nonce,
                                route: {
                                    module: 'galleries',
                                    action: 'checkNoticeButton'
                                }
                            })
                            .success(function(response) {
                                $('#reviewNotice').dialog('close');
                            });
                    });
                }
            });
    };

    Controller.prototype.initThemeDialog = function () {
    	var self2 = this;
        $('#themeDialog').dialog({
            autoOpen: false,
            modal:    true,
            width:    570,
            buttons:  {
                // Select: function () {
                //     var selected = $('#bigImageThemeSelect').val(),
                //         $theme = $('#bigImageTheme');
                //
                //     $theme.val(selected);
                //     $(this).dialog('close');
                // },
				'Ok': function(event) {
					var themeCode = $('#bigImageTheme').val()
					,	$hiddenPopupPlacementType = $('#popupPlacementTypeHidden')
					,	currentPptValue = $('.popupPlacementTypeRadio:checked').val()

					if(themeCode == 'theme_7' || themeCode == 'theme_5' || themeCode == 'theme_4' || themeCode == 'theme_3' || themeCode == 'theme_2' || themeCode == 'theme_1') {
						$hiddenPopupPlacementType.val(currentPptValue);
					} else {
						$hiddenPopupPlacementType.val(0);
					}
					self2.callExtenedFunc('popupThemeChanged', themeCode);
					$(this).dialog('close');
                },
                // Cancel: function () {
                //     // revert all prev settings
                //     $(this).dialog('close');
                // }
            },
			'open': function(event, ui) {
				self2.changeThemeDialogFitImageVisibility();
			},
        });

        Controller.prototype.changeThemeDialogFitImageVisibility = (function(event) {
			var $pptWrapper = $('.popupPlacementTypeWrapper')
			,	themeCode = $('#bigImageTheme').val();
			if(themeCode == 'theme_7' || themeCode == 'theme_5' || themeCode == 'theme_4' || themeCode == 'theme_3' || themeCode == 'theme_2' || themeCode == 'theme_1') {
				$pptWrapper.removeClass('ggSettingsDisplNone');
			} else {
				$pptWrapper.addClass('ggSettingsDisplNone');
			}
		});

        Controller.prototype.initThemeSelect = function () {
            var $theme = $('#bigImageTheme'),
                self = this;

            $('.theme').on('click', function () {
				var $this = $(this)
				,	themeCode = $this.data('val');
				$('#themeDialog .grid-gallery-caption').removeClass('gg-active');
				$this.parent().addClass('gg-active');
				$theme.val(themeCode);
				$('.themeName').text($this.data('name'));
				self.togglePopupTheme($this.data('val'));
				// change visibility for placement wrapper
				self.changeThemeDialogFitImageVisibility();
            });
        };

		Controller.prototype.dialogOpenEvent = (function( self, event, ui ) {

			var $elementsWithEffects = $('#effectDialog .grid-gallery-caption:not(.available-in-pro)')
			,	$previewElement = $('#preview .grid-gallery-caption')
			,	$previewFigcaption = $previewElement.find('figcaption');

			if($previewFigcaption.length) {
                var cssProperties = {};
                cssProperties['background-color'] = $previewFigcaption.css('background-color');
				if($('.ggUserCaptionBuilderCl:checked').val() == '1') {
                    cssProperties['top'] = 0;
                    cssProperties['bottom'] = 0;
                }
				$.each($elementsWithEffects, function( i, val ) {
					if($('.ggUserCaptionBuilderCl:checked') == '1' && $(val).data('gridGalleryType') == 'center') {
						cssProperties['transform'] = 'none';
					} else {
						delete cssProperties['transform'];
					}
					$(val).find('figcaption').css(cssProperties);
				});
			}
			// once init some effects
			if(!self.captionEffectForDialogIsInit) {
				self.captionCubeEffectInit($('#effectDialog .grid-gallery-caption[data-grid-gallery-type="cube"]'));
				self.captionEffectForDialogIsInit = true;
			}
		});

		Controller.prototype.captionCubeEffectInit = (function($currElem) {
			function checkDirection($element, e) {
				var w = $element.width(),
					h = $element.height(),
					x = ( e.pageX - $element.offset().left - ( w / 2 )) * ( w > h ? ( h / w ) : 1 ),
					y = ( e.pageY - $element.offset().top - ( h / 2 )) * ( h > w ? ( w / h ) : 1 );

				return Math.round(( ( ( Math.atan2(y, x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3) % 4;
			}
			$currElem.on('mouseenter mouseleave', function(e) {
				var $figcaption = $currElem.find('figcaption'),
					direction = checkDirection($currElem, e),
					classHelper = null;

				switch (direction) {
					case 0:
						classHelper = 'cube-' + (e.type == 'mouseenter' ? 'in' : 'out') + '-top';
						break;
					case 1:
						classHelper = 'cube-' + (e.type == 'mouseenter' ? 'in' : 'out') + '-right';
						break;
					case 2:
						classHelper = 'cube-' + (e.type == 'mouseenter' ? 'in' : 'out') + '-bottom';
						break;
					case 3:
						classHelper = 'cube-' + (e.type == 'mouseenter' ? 'in' : 'out') + '-left';
						break;
				}
				$figcaption.removeClass()
					.addClass(classHelper);
			});
		});

        Controller.prototype.initEffectsDialog = function () {
			var self = this;
            $('#effectDialog').dialog({
                autoOpen: false,
                modal:    true,
                width:    740,
                'open': function( event, ui ) {
					self.dialogOpenEvent(self, event, ui);
				},
                buttons:  {
                    Cancel: function () {
                        $(this).dialog('close');
                    }
                }
            });
        };

        Controller.prototype.openEffectsDialog = function () {
            $('#effectDialog').dialog('open');
        };
    };

    Controller.prototype.setScroll = function() {
        var $settingsWrap = $('.settings-wrap');

        $settingsWrap.slimScroll({
            height: '600px',
            railVisible: true,
            alwaysVisible: true,
            allowPageScroll: true
        });
        var $preview = $('#preview.gallery-preview').css({
            'opacity': 1,
        }).hide();
        $settingsWrap.fadeIn();
        $preview.fadeIn();
    };

    Controller.prototype.initEffectPreview = function () {
        var $effect  = $('#overlayEffect'),
            $preview = $('#effectsPreview'),
            $dialog  = $('#effectDialog');

        $preview.find('figure:not(.available-in-pro)').on('click', function (event) {
            event.preventDefault();
			var $this = $(this);

            $preview.find('figure').removeClass('selected');
			$this.addClass('selected');

            if ($this.data('type') == 'icons') {
                if (!confirm($this.parent().data('confirm'))) {
                    return;
                }
				if($('.grid-gallery-caption[data-caption-buider="1"]').data('caption-buider') == '1') {
					if(!$("#captionBuilderIconsEnable:checked").length) {
						$("#captionBuilderIconsEnable").trigger('click').iCheck('toggle');
					}
				} else {
					$('#icons-enable').iCheck('toggle').trigger('change');
				}
            }

            $('.selectedEffectName').text($.proxy(function () {
                return this.find('span').text();
            }, $this));

            $('#preview [data-grid-gallery-type]')
                .data('grid-gallery-type', $this.data('grid-gallery-type'));

			$effect.val($this.data('grid-gallery-type'));
            $('#preview.gallery-preview').trigger('preview.refresh');

            if ($this.data('grid-gallery-type') == 'polaroid') {
                $('.polaroid-effect-class:enabled').val('true').trigger('change');
            }
			// check pro effects
			if(app && app.ImagePreview && app.ImagePreview.initImageOnHoverEffectHandler) {
				app.ImagePreview.initImageOnHoverEffectHandler($this.data('grid-gallery-type'));
			}
            
            $dialog.dialog('close');
        });
        $preview.find('[data-grid-gallery-type="' + $effect.val() + '"]').addClass('selected');
    };

    Controller.prototype.openThemeDialog = function () {
        $('#themeDialog').dialog('open');
    };

    Controller.prototype.toggleArea = function() {
        var $toggle = $('[name="area[grid]"]'),
			selfContr = this,
            $optionsHeight = $('[name="area[photo_height]"]'),
            $optionsHeightRow = $optionsHeight.closest('tr'),
            $optionsWidth = $('[name="area[photo_width]"]'),
            $optionsWidthRow = $optionsWidth.closest('tr'),
            $columsRow = $('#generalColumnsRow'),
            $responsiveColumnsRow = $('#responsive-columns').closest('tr'),
			$ggImageWidthUnit = $('[name="area[photo_width_unit]"]'),
			$ggImageHeightUnit = $('[name="area[photo_height_unit]"]'),
            $mosaicImagesCountRow = $('#mosaic-images-count-row');

		var $loadMoreContent = $('#gg-anl-load-more'),
            $afterLoadMoreContentSeparator = $('#gg-anl-load-more').next('.separator').first(),
            $inputShowMore = $('#show-more-disable').closest('.iradio_minimal'),
			$mosaicLayout = $('#sggMosaicLayout'),
            $mosaicCountColumnsRow = $('#sggMosaicCountColumnsRow'),
			$sggLazyLoadEnableRow = $('#sggLazyLoadEnableRow'),
			$mosaicImageCountTextWr = $('#gg-mosaic-image-count-text-wrapper'),
            $imageCountWrapper = $('#gg-mosaic-image-count-wrapper');

		$mosaicImageCountTextWr.show();
		function mosaicLayoutToggle() {
			if($toggle.find('option:selected').val() == 4) {
                if($mosaicLayout.find('option:selected').val() == 1) {
					// Disable LazyLoad Option
					$('#lazyLoadDisabled').iCheck('check');
                    $mosaicCountColumnsRow.show();
					$sggLazyLoadEnableRow.hide();
					//
					$mosaicImageCountTextWr.hide();
					$imageCountWrapper.hide();
					$('#mosaicDisplayAllImg').iCheck('uncheck');
					$('#mosaicShowHiddenImages').iCheck('uncheck');
					$('#mosaic-show-hidden-images-row').removeClass('ggSettingsDisplNone');
					$('#mosaic-display-all-images-row').removeClass('ggSettingsDisplNone');
					//Show load more button and sections
					$loadMoreContent.show();
					$afterLoadMoreContentSeparator.show();
				} else {
                    $mosaicCountColumnsRow.hide();
					$sggLazyLoadEnableRow.show();
					$mosaicImageCountTextWr.show();
					$imageCountWrapper.show();
					$loadMoreContent.hide();
					$afterLoadMoreContentSeparator.hide();
				}
			} else {
				$sggLazyLoadEnableRow.show();
				$mosaicImageCountTextWr.hide();
				$imageCountWrapper.hide();
				//Show load more button and sections
				$loadMoreContent.show();
				$afterLoadMoreContentSeparator.show();
			}

			selfContr.slimScrollOnSizeEvent(selfContr);
		}
		$mosaicLayout.on('change', mosaicLayoutToggle);

        $toggle.on('change', function() {

            $optionsWidthRow.find('input, select').prop('disabled', false);
            $optionsHeightRow.find('input, select').prop('disabled', false);
            $optionsWidthRow.show();
            $optionsHeightRow.show();
            $columsRow.hide();
            $mosaicImagesCountRow.hide();
            $responsiveColumnsRow.hide();

            if (!$optionsHeight.val().length) {
                $optionsHeight.val($optionsWidth.val());
            }

            if (!$optionsWidth.val().length) {
                $optionsWidth.val($optionsHeight.val());
            }

			// hide all others mosaic settings
			var selectedTypeVal = $(this).find('option:selected').val()
			,	$mosaicLayoutRow = $('#sggMosaicLayoutRow')
            ,   $mosaicCountColumnsRow = $('#sggMosaicCountColumnsRow')
			,	$alwaysShowObj = $('#display-first-photo-row');
			$mosaicLayoutRow.hide();
            $mosaicCountColumnsRow.hide();
			$alwaysShowObj.show();
            var $pagesRow = $('#usePages');
            
			switch(selectedTypeVal) {
                // Fixed
                case '0':
                    $optionsWidthRow.find('option[name="percents"]').hide();
                    $optionsHeightRow.find('option[name="percents"]').hide();
                    break;
                // Vertical
                case '1':
                    if($pagesRow.find('#showPages').prop('checked')) {
                        $pagesRow.find('#hidePages').prop('checked', true).trigger('change');
                        $.jGrowl('Pagination disabled now');
                    }
                    $optionsHeightRow.hide();
                    $optionsHeightRow.find('input, select').prop('disabled', true);
                    $optionsWidthRow.find('option[name="percents"]').show();
                    break;
                // Horizontal
                case '2':
                    $optionsWidthRow.hide();
                    $optionsHeightRow.find('option[name="percents"]').show();
                    $optionsWidthRow.find('input, select').prop('disabled', true);
                    break;
                // Fixed columns
                case '3':
                    $columsRow.show();
                    $responsiveColumnsRow.show();
                    $optionsWidthRow.find('option[name="percents"]').hide();
                    $optionsHeightRow.find('option[name="percents"]').hide();
                    break;
				// Mosaic
				case '4':
					// Strict use of images order
					$mosaicLayoutRow.show();
                    $mosaicCountColumnsRow.show();
					$optionsHeightRow.hide();
					$optionsHeightRow.find('input, select').prop('disabled', true);
					$optionsWidthRow.find('option[name="percents"]').show();
					$alwaysShowObj.hide();
					$mosaicImagesCountRow.show();
					break;
            }
            $pagesRow.find('input[name="pagination[enabled]"]').prop('disabled', selectedTypeVal == 1).iCheck('update');
			mosaicLayoutToggle();

			if(selectedTypeVal != 1) {
				// reset values
				$ggImageWidthUnit.val(0);
				$ggImageHeightUnit.val(0);
			}
        }).trigger('change');
    };

    Controller.prototype.toggleShadow = function () {
        var $shadowTable = $('[name="shadow"]'),
            value = 0;

        $('#showShadow').on('click', function () {
            $shadowTable.find('tbody').show();
        });

        $('#hideShadow').on('click', function () {
            $('#useMouseOverShadow').attr('value', 0);
            $('select[name="thumbnail[shadow][overlay]"]').attr('value', 0).trigger('change');
            $shadowTable.find('tbody').hide();
        });

        $shadowTable.find('thead input[type="radio"]:checked')
            .trigger('click')
            .trigger('change');
    };

    Controller.prototype.toggleBorder = function () {
        var $table = $('table[name="border"]'),
            $borderType =$('select[name="thumbnail[border][type]"]'),
            $toggleRow = $borderType.closest('tr'),
            value = 0;

        value = parseInt($toggleRow.val(), 10);

        $borderType.on('change', function () {
            if($(this).find('option:selected').val() != 'none') {
                $table.find('tr').show();
            } else {
                $table.find('tr').hide();
                $toggleRow.show();
            }
        });

        $borderType.on('change', function() {
            $table.find('[name="border-type"]').css('border-style', $(this).find('option:selected').val());
        });
    };

    Controller.prototype.toggleCaptions = function () {
        var $table = $('table[name="captions"] thead'),
            $toggleRow = $('#useCaptions'),
            value = 0;

        value = this.strToBool($('[name="thumbnail[overlay][enabled]"]:checked').val());

        $('#hideCaptions').on('change', function () {
            $table.find('tr').hide();
            $toggleRow.show();
        }).trigger('change');

        $('#showCaptions').on('change', function () {
            $table.find('tr').show();
        }).trigger('change');

        if(value) {
            $table.find('tr').show();
        } else {
            $table.find('tr').hide();
            $toggleRow.show();
        }
    };

    Controller.prototype.areaNotifications = function () {
        var $photoWidth = $('input[name= "area[photo_width]"]'),
            $photoHeight = $('input[name= "area[photo_height]"]'),
			isPostFeedEnabled = $('.ggPostsEnableCl:checked').val() == 1,
            $overlay = $('[name="thumbnail[overlay][enabled]"], [name="icons[enabled]"]'),
            self = this;

        $photoWidth.on('change' , function() {
			if($photoWidth.val() < 240 && isPostFeedEnabled) {
                $.jGrowl('Low image width \n post feed content can be too small');
            }

            if($photoWidth.val() == 'auto') {
                $.jGrowl('Use image original width');
            }
        });

        $photoHeight.on('change', function() {
			if($photoHeight.val() < 240 && isPostFeedEnabled) {
                $.jGrowl('Low image height \n post feed content can be too small');
            }

            if($photoHeight.val() == 'auto') {
                $.jGrowl('Use image original height');
            }
        });

        $overlay.on('change', function(event) {
            var $overlayChecked = $('[name="thumbnail[overlay][enabled]"]:checked, [name="icons[enabled]"]:checked'),
                showNotification = true;

            $.each($overlayChecked, function(index, value) {
                if(!self.strToBool($(value).val()) || !this.length) {
                    showNotification = false;
                }
            });


            if(showNotification) {
                $.jGrowl("Caption animation effect is disabled now, turn off icons to use it");
            }
        });
    }

    Controller.prototype.togglePostsTable = (function() {
        var $navButtons = $('.form-tabs'),
			$prePostTableControls = $('.sggPostsPreTable'),
            $table = $('#gbox_ui-jqgrid-htable');

        $navButtons.on('click', function() {
			var currHref = $(this).find('a.active').attr('href');
			if(currHref == 'post') {
                $table.show();
				$prePostTableControls.show();
            } else {
				$table.hide();
				$prePostTableControls.hide();
            }
			if(currHref == 'area') {
				$('.gg-wraper-anchor-nav-links').show();
			} else {
				$('.gg-wraper-anchor-nav-links').hide();
			}
        }).trigger('click');

    });

    Controller.prototype.togglePopUp = (function() {
        $popupTable = $('#box').closest('table');

        $('#box-enable').on('change', function () {
            $popupTable.find('tbody').show();
        });

        $('#box-disable').on('change', function () {
            $popupTable.find('tbody').hide();
        });

        $popupTable.find('thead input[type="radio"]:checked')
            .trigger('click')
            .trigger('change');
    });

    Controller.prototype.toggleIcons = (function() {
        var $table = $('#photo-icon').closest('table');

        $('#icons-enable').on('change', function () {
            $table.find('tbody').show();
        });

        $('#icons-disable').on('change', function () {
            $table.find('tbody').hide();
        });

        $table.find('thead input[type="radio"]:checked').trigger('click').trigger('change');
    });

    Controller.prototype.togglePosts = function () {
		var $postsEnable = $('.ggPostsEnableCl'),
            $toggleRow = $('select[name="quicksand[enabled]"]'),
            value = 0;

		$postsEnable.on('ifChanged', function () {
			var $currPostEnb = $(this);
			if($currPostEnb.is(':checked')) {
				value = parseInt($currPostEnb.val(), 10);
				if (value) {
					$toggleRow.attr('disabled', 'disabled');
					if ($toggleRow.val() > 0) {
						$.jGrowl('You cant use image shuffling option \n when post feed is enabled');
						$toggleRow.val('0');
					};
				} else {
					$toggleRow.removeAttr('disabled');
				}
			}
		}).trigger('ifChanged');
    };

    Controller.prototype.toggleAutoPosts = function() {
        var $autoposts = $("#autoposts"),
            $autopostsCategories = $("#autopostsCategories"),
            $autopostsElements = [
                $("#autopostsNumber").closest('tr'),
                $("#autopostsCategories").closest('tr')
            ],
            $postsElements = [
                $("#posts").closest('tr'),
                $("#pages").closest('tr'),
                $("#table-toolbar"),
                $("#gview_ui-jqgrid-htable"),

            ];

        $autopostsCategories.chosen({width: '200px'});
        // $autopostsCategories.next('div').find('li.search-field').height('35px');

        $autoposts.on('change', function () {
            var value = parseInt($(this).val(), 10);

            if (value) {
                for(var i in $autopostsElements){
                    $autopostsElements[i].show();
                }
                for(var i in $postsElements){
                    $postsElements[i].hide();
                }
            } else {
                for(var i in $autopostsElements){
                    $autopostsElements[i].hide();
                }
                for(var i in $postsElements){
                    $postsElements[i].show();
                }
            }
        }).trigger('change');
    }

    Controller.prototype.initSocialSharing = function(){
        var $table = $('#social-sharing').closest('table');

        $('#image-sharing-hidden,#popup-sharing-hidden').closest('tr').hide();

        $('#social-sharing-enable').on('change', function () {
            $table.find('tbody').show();
        });

        $('#social-sharing-disable').on('change', function () {
            $table.find('tbody').hide();
        });

        $table.find('thead input[type="radio"]:checked').trigger('click').trigger('change');

        //init gallery sharing checkbox
        var gallerySharingToggle = function(){
            var $input = $('#gallery-social-sharing').find('input'),
                $buttonsPositionTr = $('#gallery-sharing-buttons-position').closest('tr');
            if($input.is(':checked')){
                $buttonsPositionTr.show();
            }else{
                $buttonsPositionTr.hide();
            }
        };
        $('#gallery-social-sharing').find('input').on('click',function(){
            gallerySharingToggle();
        });
        gallerySharingToggle();

        var $settingSelectors = {
            'imageButtons' : {
                'enableInput' : $('#image-social-sharing').find('input'),
                'buttonsPositionSelect' : $('#image-sharing-buttons-position').find('select'),
                'buttonsAlignHorizontalTr' : $('#image-sharing-buttons-align-horizontal').closest('tr'),
                'buttonsAlignVerticalTr' : $('#image-sharing-buttons-align-vertical').closest('tr'),
            },
            'popupButtons' : {
                'enableInput' : $('#popup-social-sharing').find('input'),
                'buttonsPositionSelect' : $('#popup-sharing-buttons-position').find('select'),
                'buttonsAlignHorizontalTr' : $('#popup-sharing-buttons-align-horizontal').closest('tr'),
                'buttonsAlignVerticalTr' : $('#popup-sharing-buttons-align-vertical').closest('tr'),
            },
        };

        //init image sharing checkbox
        var buttonsPositionToggle = function(index){
            var set = $settingSelectors[index],
                buttonsPosition = set.buttonsPositionSelect.val(),
                $alignHorizontalTr = set.buttonsAlignHorizontalTr,
                $alignVerticalTr = set.buttonsAlignVerticalTr;

            if(buttonsPosition == 'top' || buttonsPosition == 'bottom'){
                $alignHorizontalTr.show();
                $alignVerticalTr.hide();
            }else{
                $alignHorizontalTr.hide();
                $alignVerticalTr.show();
            }
        };
        var socialSharingToggle = function(index){
            var set = $settingSelectors[index],
                $input = set.enableInput,
                $buttonsPositionTr = set.buttonsPositionSelect.closest('tr');

            if($input.is(':checked')){
                $buttonsPositionTr.show();
                buttonsPositionToggle(index);
            }else{
                $buttonsPositionTr.hide();
                set.buttonsAlignHorizontalTr.hide();
                set.buttonsAlignVerticalTr.hide();
            }
        };

        $('#image-social-sharing').find('input').on('click',function(){
            socialSharingToggle('imageButtons');
        });
        $('#image-sharing-buttons-position').find('select').on('change',function(){
            buttonsPositionToggle('imageButtons');
        });
        socialSharingToggle('imageButtons');

        $('#popup-social-sharing').find('input').on('click',function(){
            socialSharingToggle('popupButtons');
        });
        $('#popup-sharing-buttons-position').find('select').on('change',function(){
            buttonsPositionToggle('popupButtons');
        });
        socialSharingToggle('popupButtons');
    };

    Controller.prototype.toggleHorizontallScroll = function () {
        var $table = $('#horizontal-scroll').closest('table');

        $('#horizontal-scroll-enable').on('change', function () {
            $table.find('tbody').show();
        });

        $('#horizontal-scroll-disable').on('change', function () {
            $table.find('tbody').hide();
        });

        $table.find('thead input[type="radio"]:checked').trigger('click').trigger('change');
    };

    Controller.prototype.selectCover = function (e) {
        var target = $(e.currentTarget),
            covers = $('.covers'),
            cover  = $('#coverUrl');

        covers.find('li').removeClass('selected');
        target.parents('li').addClass('selected');

        cover.val(target.parents('li').data('url'));
    };

    Controller.prototype.savePosts = function () {
        jQuery('[name="posts[add]"]').on('click', $.proxy(function() {
            SupsysticGallery.Loader.show('Please, wait until post will be imported.');
            var request = SupsysticGallery.Ajax.Post({
                module: 'galleries',
                action: 'savePosts'
            });

            request.add('galleryId', parseInt(this.getParameterByName('gallery_id'), 10));
            request.add('id', parseInt(jQuery('[name="posts[current]"] option:selected').val()));

            request.send($.proxy(function (response) {
                jQuery("#ui-jqgrid-htable").jqGrid('addRowData', jQuery('[name="posts[current]"] option:selected').val() , {
                    id: jQuery('[name="posts[current]"] option:selected').val(),
                    image: response.photo,
                    title: jQuery('[name="posts[current]"] option:selected').text(),
                    author: response.post_author,
                    comments: response.comment_count,
                    type: response.type,
                    date: response.post_date
                });
                SupsysticGallery.Loader.hide();
                $.jGrowl('Done');
            }, this));
        }, this));

        jQuery('#remove-posts').on('click', $.proxy(function() {
            var request = SupsysticGallery.Ajax.Post({
                module: 'galleries',
                action: 'removePosts'
            });

            var postsId = new Array();
            jQuery('.ui-jqgrid [type="checkbox"]').each(function() {
                if($(this).attr('checked')) {
                    postsId.push($(this).closest('tr').find('[aria-describedby="ui-jqgrid-htable_id"]').text());
                    $(this).closest('tr').remove();
                }
            });

            request.add('galleryId', parseInt(this.getParameterByName('gallery_id'), 10));
            request.add('id', postsId);

            request.send($.proxy(function (response) {
                $.jGrowl('Removed');
            }, this));
        }, this));

        jQuery('#button-select-posts').on('click', function() {
            checkboxes = jQuery('.ui-jqgrid input[type="checkbox"]');
            checkboxes.prop("checked", !checkboxes.first().prop("checked")).iCheck('update');
        });
    }

    Controller.prototype.savePages = function () {
        jQuery('[name="pages[add]"]').on('click', $.proxy(function () {
            SupsysticGallery.Loader.show('Please, wait until page will be imported.');
            var request = SupsysticGallery.Ajax.Post({
                module: 'galleries',
                action: 'savePages'
            });

            request.add('galleryId', parseInt(this.getParameterByName('gallery_id'), 10));
            request.add('id', parseInt(jQuery('[name="pages[current]"] option:selected').val()));

            request.send($.proxy(function (response) {
                jQuery("#ui-jqgrid-htable").jqGrid('addRowData', jQuery('[name="pages[current]"] option:selected').val() , {
                    id: jQuery('[name="pages[current]"] option:selected').val(),
                    image: response.photo,
                    title: jQuery('[name="pages[current]"] option:selected').text(),
                    author: response.page_author,
                    comments: response.comment_count,
                    type: response.type,
                    date: response.page_date
                });
                SupsysticGallery.Loader.hide();
                $.jGrowl('Done');
            }, this));
        }, this));
    };

    Controller.prototype.initShadowDialog = function () {
        var $wrapper = $('#shadowDialog');

        $wrapper.dialog({
            autoOpen: false,
            modal:    true,
            width:    650,
            buttons:  {
                Cancel: function () {
                    $(this).dialog('close');
                }
            }
        });

        Controller.prototype.initShadowSelect = function () {
            var $shadowColor = $('[name="thumbnail[shadow][color]"]'),
                $shadowOffsetX = $('[name="thumbnail[shadow][x]"]'),
                $shadowOffsetY = $('[name="thumbnail[shadow][y]"]'),
                $shadowBlur = $('[name="thumbnail[shadow][blur]"]');

            $wrapper.find('.shadow-preset').on('click', function() {
                var offsetX = parseInt($(this).data('offset-x')),
                    offsetY = parseInt($(this).data('offset-y')),
                    blur = parseInt($(this).data('blur')),
                    color = $(this).data('color');

                $shadowColor.attr('value', color);
                $shadowOffsetX.attr('value', offsetX);
                $shadowOffsetY.attr('value', offsetY);
                $shadowBlur.attr('value', blur);

                $shadowColor.trigger('change');

                $wrapper.dialog('close');
            });
        };

        Controller.prototype.openShadowDialog = function () {
            var $button = $('#chooseShadowPreset');

            $button.on('click', function() {
                $wrapper.dialog('open');
            });
        };
    };

    Controller.prototype.makeSettingsDefault = function(){
        var $button = $('#default-settings input');
        var galleryId = parseInt(this.getParameterByName('gallery_id'), 10);

        $button.on('click' , function () {
            var checked = $(this).prop('checked');
            if(checked){
                $.post(window.wp.ajax.settings.url, {
                    action: 'grid-gallery',
                    _wpnonce: SupsysticGallery.nonce,
                    route: {
                        module: 'galleries',
                        action: 'createdefaultgallerysettings'
                    },
                    id: galleryId
                }).success(function(response) {
                    if (response.success) {
                    }
                });
            }else{
                $.post(window.wp.ajax.settings.url, {
                    action: 'grid-gallery',
                    _wpnonce: SupsysticGallery.nonce,
                    route: {
                        module: 'galleries',
                        action: 'removedefaultgallerysettings'
                    },
                    id: galleryId
                }).success(function(response) {
                    if (response.success) {
                    }
                });
            }

        });

    };



    Controller.prototype.initImportSettingDialog = function () {

        var $wrapper = $('#settingsImportDialog'),
            galleryId = parseInt(this.getParameterByName('gallery_id'), 10);

        $wrapper.dialog({
            autoOpen: false,
            modal:    true,
            width:    350,
            buttons:  [
                {
                    text: 'Cancel',
                    click: function () {
                        $(this).dialog('close');
                    },
                },
                {
                    id: 'import-confirm-button',
                    text: 'Import',
                    click: function () {
                        $.post(window.wp.ajax.settings.url, {
                            action: 'grid-gallery',
                            _wpnonce: SupsysticGallery.nonce,
                            route: {
                                module: 'galleries',
                                action: 'importSettings'
                            },
                            from: $(this).find('.list').val(),
                            to: galleryId
                        }).success(function(response) {
                            if (response.success) {
                                window.location.reload();
                            }
                        });
                    },
                }
            ]
        });

        $('#openSettingsImportDialog').on('click', function(event) {
            event.preventDefault();
            $wrapper.dialog('open');

            var list = $wrapper.find('.list');
            if($wrapper.find('.import-gallery-loading').is(':visible')) {
                $.get(window.wp.ajax.settings.url, {
                    action: 'grid-gallery',
                    _wpnonce: SupsysticGallery.nonce,
                    route: {
                        module: 'galleries',
                        action: 'getGalleriesList'
                    }
                }).success(function (response) {
                    if (response.list) {
                        $.each(response.list, function (i, item) {
                            if (galleryId != item.id) {
                                list.append($('<option>', {
                                    value: item.id,
                                    text: item.title
                                }));
                            }
                        });
                        if (response.list.length < 2) {
                            $('#settingsImportDialog .import-not-available').show();
                        } else {
                            $('#settingsImportDialog .import').show();
                            $('#import-confirm-button').show();
                        }
                    }
                }).always(function() {
                    $wrapper.find('.import-gallery-loading').hide();
                });
            } 
            if($wrapper.find('.import').is(':hidden')) {
                $('#import-confirm-button').hide();
            }
        });
    };

    Controller.prototype.initCustomButtonsPrevieDialog = function () {
        $buttonsEditPresetDialog = $('.buttons-edit-preset-dialog-preview');

        $buttonsEditPresetDialog.dialog({
            autoOpen: false,
            modal:    true,
            width:    880,
            buttons:  {
                Cancel: function () {
                    $(this).dialog('close');
                },
                'Get Pro': function () {
                    url = $(this).find('a').attr('href');
                    window.open(url);
                    $(this).dialog('close');
                }
            }
        });

        $('#custom-buttons-preview input').on('click', function(event) {
            event.preventDefault();
            $buttonsEditPresetDialog.dialog('open');
        });
    };

    Controller.prototype.polaroidEffectSettings = function () {
        $('#polaroid-effect select').on('change', function(event) {
            event.preventDefault();
            var $overlayEffect = $('#overlayEffect').val()
            ,   $polaroidSettings = $('#polaroid-animation, #polaroid-scattering, #polaroid-frame-width').closest('tr');
            if ($(this).val() == 'true') {
                $polaroidSettings.removeClass('hidden');
                if ($overlayEffect !== 'polaroid') {
                    confirm('Caption Effect will change to Polaroid Style') && $('#effectsPreview [data-grid-gallery-type="polaroid"]').trigger('click');
                }
            } else {
                $polaroidSettings.addClass('hidden');
                if ($overlayEffect == 'polaroid') {
                    $('#effectsPreview [data-grid-gallery-type]:first').trigger('click');
                }
            }
        }).trigger('change');

        $('#polaroid-animation select, #polaroid-scattering select, #polaroid-frame-width input').on('change', function(event) {
            event.preventDefault();
            clearTimeout($('#preview.gallery-preview').data('polaroidDebounce'));
            $('#preview.gallery-preview').data('polaroidDebounce',
                setTimeout(function() {
                    app.ImagePreview.initCaptionEffects();
                }, 300));
        });

        $('#preview.gallery-preview').on('updateCaptionBackground', function(event, background) {
            var $bgWrap = $('#preview .polaroid-bg-wrap');

            if (! $bgWrap.length) {
                var $figcaption = $('#preview .grid-gallery-caption[data-grid-gallery-type="polaroid"]');
                $figcaption.find('img').wrap('<div class="polaroid-bg-wrap">');
                $bgWrap = $figcaption.find('.polaroid-bg-wrap');
                $bgWrap.css({
                    'transition':  $('#preview .grid-gallery-caption').css('transition')
                });
            }

            $(this).find('.grid-gallery-caption').css('background-color', background);
        });
    };

    //Get Pro Loader
    Controller.prototype.initLoaderPrevieDialog = function () {
        $LoaderDialog = $('.loader-dialog-preview');

        $LoaderDialog.dialog({
            autoOpen: false,
            modal:    true,
            width:    450,
            buttons:  {
                Cancel: function () {
                    $(this).dialog('close');
                }
            },
            create: function (event) { 
                $(event.target).parent().css({
                    position: 'fixed'
                });
            }
        });

        $('#choosePreicon-free').on('click', function(event) {
            event.preventDefault();
            $LoaderDialog.dialog('open');
        });
        $('#preloadColor-free').on('change',function(){
            $LoaderDialog.dialog('open');
        });
    };
    Controller.prototype.togglePreload = (function() {
        $preloadTable = $('[name=preload]');

        $('#preload-enable').on('change', function () {
            $preloadTable.find('tbody').show();
        });

        $('#preload-disable').on('change', function () {
            $preloadTable.find('tbody').hide();
        });

        $preloadTable.find('thead input[type="radio"]:checked')
            .trigger('click')
            .trigger('change');
    });

    Controller.prototype.initOpenByLink = function(){
        var openByLink = $('#open-by-link').find('input'),
            galleryLinkTr = $('#gallery-link').closest('tr');

        var checkOpenLink = function(){
                if(openByLink.is(':checked')){
                    galleryLinkTr.show();
                }else{
                    galleryLinkTr.hide();
                }
            };
        openByLink.on('change',function(){
            setTimeout(function(){checkOpenLink()},100)
        });

        checkOpenLink();
    };

	Controller.prototype.slimScrollOnSizeEvent = (function(_self) {
		var offsetTop2 = Math.floor($("#gg-anl-main").offset().top)
		,	galleryType = $('[name="area[grid]"]').val()
		,	$mosaicParamsWrapper = $("#gg-mosaic-image-count-text-wrapper")
		,	$loadMoreLink = $('#gg-anl-load-more-link')
		,	isMosaicLayout2Used = ($('#sggMosaicLayout').find('option:selected').val() == 1)
		,	$mosaicLink = $('#gg-anl-mosaic-settings-link');
		
		_self.linksOyPositions = [];
		_self.linksOyPositions.push({
			'id': '#gg-anl-main',
			'offset': 0,
		});

		if(galleryType == 4 && $mosaicParamsWrapper.length && !isMosaicLayout2Used) {
			$mosaicLink.removeClass('ggSettingsDisplNone');
			_self.linksOyPositions.push({
				'id': '#gg-mosaic-image-count-text-wrapper',
				'offset': Math.abs(Math.floor($mosaicParamsWrapper.offset().top) - offsetTop2 - 40),
			});
		} else {
			$mosaicLink.addClass('ggSettingsDisplNone');
		}
		
		_self.linksOyPositions.push({
			'id': '#gg-anl-soc-share',
			'offset': Math.abs(Math.floor($("#gg-anl-soc-share").offset().top) - offsetTop2 - 40),
		});
		if(galleryType == 4 && !isMosaicLayout2Used) {
			$loadMoreLink.addClass('ggSettingsDisplNone');

		} else {
			$loadMoreLink.removeClass('ggSettingsDisplNone');
			_self.linksOyPositions.push({
				'id': '#gg-anl-load-more',
				'offset': Math.abs(Math.floor($("#gg-anl-load-more").offset().top) - offsetTop2 - 40),
			});
		}
		_self.linksOyPositions.push({
			'id': '#gg-anl-cust-button',
			'offset': Math.abs(Math.floor($("#gg-anl-cust-button").offset().top) - offsetTop2 - 40),
		});
		_self.linksOyPositions.push({
			'id': '#gg-anl-horiz-scroll',
			'offset': Math.abs(Math.floor($("#gg-anl-horiz-scroll").offset().top) - offsetTop2 - 40),
		});
		_self.linksOyPositions.push({
			'id': '#gg-anl-border-type',
			'offset': Math.abs(Math.floor($("#gg-anl-border-type").offset().top) - offsetTop2 - 40),
		});
		_self.linksOyPositions.push({
			'id': '#gg-anl-shadow',
			'offset': Math.abs(Math.floor($("#gg-anl-shadow").offset().top) - offsetTop2 - 40),
		});
		_self.linksOyPositions.push({
			'id': '#gg-anl-popup',
			'offset': Math.abs(Math.floor($("#gg-anl-popup").offset().top) - offsetTop2 - 40),
		});
		_self.linksOyPositions.push({
			'id': '#gg-anl-lazyload',
			'offset': Math.abs(Math.floor($("#gg-anl-lazyload").offset().top) - offsetTop2 - 40),
		});
		_self.linksOyPositions.push({
			'id': '#gg-anl-preloader',
			'offset': Math.abs(Math.floor($("#gg-anl-preloader").offset().top) - offsetTop2 - 40),
		});
        _self.linksOyPositions.push({
            'id': '#gg-anl-attributes',
            'offset': Math.abs(Math.floor($("#gg-anl-attributes").offset().top) - offsetTop2 - 40),
        });
		_self.linksOyPositions.push({
			'id': '#gg-anl-caption-add-sett',
			'offset': Math.abs(Math.floor($("#gg-anl-caption-add-sett").offset().top) - offsetTop2 - 40),
		});

		$('.settings-wrap').slimScroll({}).off('slimscrolling')
			.on('slimscrolling', null, { 'oy': _self.linksOyPositions }, Controller.prototype.slimScrollOnScrollEvent);
	});

	Controller.prototype.initSubMenuFastLinks = (function() {
		var self = this;
		resizeEvent('.form-gall-settings div[data-tab="area"]', function() {
			self.slimScrollOnSizeEvent(self);
		});

		$('.gg-anchor-nav-links').on('click', function(e1, funcParams) {
			e1.preventDefault();
			var $settingsWrap = $('.settings-wrap')
			,	urlLink = $(this).attr('href')
			,	$linkItem = $(urlLink)
			,	$topItem = $("#gg-anl-main");
			if($linkItem.length) {
				var offsetLink = $linkItem.offset().top
				,	offsetTop = $topItem.offset().top
				,	offsetAbs = Math.abs(offsetLink -offsetTop);
				// if need to set start position
				if(funcParams && funcParams.offsetScTop) {
					offsetAbs = funcParams.offsetScTop;
				}
				if(!isNaN(offsetAbs)) {
					$settingsWrap.slimScroll({ scrollTo: offsetAbs + 'px' });
				}
			}
		});

		// init anchor link
		setTimeout(function() {
			var slScrollTopPos = parseInt($('#slimScrollStartPos').val());
			$('.gg-anchor-nav-links[href="#gg-anl-main"]').trigger('click', {'offsetScTop':slScrollTopPos});
		}, 500);
	});

	Controller.prototype.slimScrollOnScrollEvent = (function(e, pos) {

		if(e && e.data && e.data.oy) {
			var ind1 = 0
			,	$activeItem = $('.gg-anchor-nav-links.active')
			,	isFind = false;
			while(ind1 < (e.data.oy.length - 1) && !isFind) {
				if(e.data.oy[ind1].offset <= pos && e.data.oy[ind1+1].offset > pos) {
					isFind = ind1;
					ind1 = e.data.oy.length;
				}
				ind1++;
			}
			// if current position at last anchor
			if(isFind == false && ind1 == 8) {
				isFind = ind1;
			}
			//check curr active item
			var activeId = $activeItem.attr('href');
			if(e.data.oy[isFind] && activeId != e.data.oy[isFind].id) {
				if($activeItem.length) {
					// remove active class
					$activeItem.removeClass('active');
				}
				// add active class
				$('.gg-anchor-nav-links[href="' + e.data.oy[isFind].id + '"]').addClass('active');
			}
		}
	});

	Controller.prototype.initOtherPluginsConf = (function() {
		$('#enableForMembership').on('change', function() {
			$('#hiddenInpMembershipEnableVal').val($(this).val());
		});
	});

	Controller.prototype.initCloneButton = (function() {
		var $cloneCreateButton = $('#ggCreateClone')
		,	galleryId = parseInt(this.getParameterByName('gallery_id'), 10)
		,	$modalTypeCloneSelector = $('#ggCloneTypeSelector')
		,	$cloneModalWindow = $('#ggCloneModalWndId');

		$cloneModalWindow.dialog({
			autoOpen: false,
			modal: true,
			width: 350,
			buttons: [{
				text: 'Cancel',
				click: function () {
					$(this).dialog('close');
				},
			},
				{
					id: 'clone-type-button-ok',
					text: 'Ok',
					click: function () {
						if($cloneCreateButton.attr('disabled') != 'disabled') {
							$cloneCreateButton.attr('disabled', 'disabled');
							app.Loader.show($('#ggMsgCloningGallery').val());
							var cloneRequest = app.Ajax.Post({
								'module': 'galleries',
								'action': 'clone',
								'gallery_id': galleryId,
								'clone_type': $modalTypeCloneSelector.val(),
							});

							cloneRequest.send(function (response) {
								var message = $('#ggMsgServerInternalError').val();
								if(response && (response.isError == true || !response.newGalleryId)) {
									if(response.message) {
										message = response.message
									}
									$.jGrowl(message);
								} else {
									window.location = $cloneCreateButton.attr('data-url') + '&oldGalleryId=' + galleryId + '&gallery_id=' + response.newGalleryId+'&clone_type=' + $modalTypeCloneSelector.val();
								}

								$cloneCreateButton.removeAttr('disabled');
								app.Loader.hide();
							}).fail(function(responce) {
								$cloneCreateButton.removeAttr('disabled');
								$.jGrowl($('#ggMsgServerInternalError').val());
								app.Loader.hide();
							});
						}
					},
				}
			]
		});
		var $cloneModalBtnOk = $('#clone-type-button-ok');

		$modalTypeCloneSelector.on('change', function() {
			if($(this).val() == 0) {
				$cloneModalBtnOk.prop('disabled', true);
			} else {
				$cloneModalBtnOk.prop('disabled', false);
			}
		}).trigger('change');

		$cloneCreateButton.on('click', function(event) {
			event.preventDefault();
			$cloneModalWindow.dialog('open');
		});
	});

	Controller.prototype.checkCloneParam = (function() {
		var clone_type = parseInt(this.getParameterByName('clone_type'), 10)
		,	galleryId = parseInt(this.getParameterByName('gallery_id'), 10)
		,	selfContr = this
		,	redirectUrl = $('#ggCreateClone').attr('data-url') + '&gallery_id=' + galleryId;

		if(!isNaN(clone_type)) {
			// prepare other parts
			if(app) {
				app.Loader.show($('#ggMsgCloningGallery').val());
				setTimeout(function() {
					if(clone_type != 2) {
						if(app && app.proSettings && app.proSettings.prepareGalleryForClone) {
							// watermark check
							$(document).on('ggProSettingsWaterMarkResultEvent', function(event, result, message) {
								if(result == 1 && message) {
									$.jGrowl(message);
								}
								selfContr.checkForOptimization();
							});
							app.proSettings.prepareGalleryForClone();
						} else {
							selfContr.checkForOptimization();
						}
					} else {
						window.location = redirectUrl;
						app.Loader.hide();
					}
				}, 1000);
			}
		}
	});

    Controller.prototype.checkForOptimization = (function() {
		var ioServiceParams = null
		,	self = this
		,	galleryInfo = null
		,	urlLogList = []
		,	galleryId = parseInt(this.getParameterByName('gallery_id'), 10)
		,	galleries = {};
		galleries[galleryId] = null;

		try {
			ioServiceParams = JSON.parse($('#ggIoParams').val())
		} catch(exc1) {
			ioServiceParams = null;
		}
		$(document).on('ggCloneImageOptimizeEndEvent', function(event, res2) { 
			//save to db 
			if(res2 == 1 && galleryInfo && urlLogList.length) {
				galleryInfo.optimizePreview = 1;

				for(ind in urlLogList) {
					var oneImg = urlLogList[ind]
					,	optimizeSize = 0
					,	previousSize = 0;
					// if not error for this image
					if(oneImg.imgInfo) {
						if(oneImg.imgInfo.optSize && oneImg.imgInfo.restoreSize) {
							optimizeSize += parseFloat(oneImg.imgInfo.optSize);
							previousSize += parseFloat(oneImg.imgInfo.restoreSize);
						}

						if(galleryInfo[oneImg.gId]) {
							galleryInfo[oneImg.gId].imgCount = oneImg.iCount;
						}
					}
				}

				// save data to optimize table
				var request = SupsysticGallery.Ajax.Post({
					module: 'optimization',
					action: 'saveOptimizeInfoToDb',
					data: galleryInfo,
				});
				// nothing to show
				request.send(function (response) {
					self.checkForCdn();
				}).fail(function() {
					self.checkForCdn();
				});

			} else {
				self.checkForCdn();
			}
		});

		if(ioServiceParams != null
			&& ioServiceParams.setting
			&& ioServiceParams.current
			&& ioServiceParams.setting[ioServiceParams.current]
			&& ioServiceParams.setting[ioServiceParams.current].auth_key) {
			// loading gallery image list
			var request = app.Ajax.Post({
				module: 'optimization',
				action: 'getPhotoList',
				data: {
					'optimize-preview': 1,
					'galleries': galleries,
				},
			});

			app.Loader.show($('#ggMsgGalleryImageOptimizing').val());
			request.send(function (response) {
				if (response && response.success == true && response.photos && response.galleryInfo) {

					var keys = Object.keys(response.galleryInfo)
					,	photos = response.photos;
					if(photos && keys.length) {
						var currPhoto = 0
						,	countPhoto = 0
						,	ajaxPromise = new $.Deferred().resolve()
						,	oneRequest

						,	currLogInd = 0
						,	serviceError = false
						,	currAjaxSend = false
						,	msgOpt = $('#ggMsgOptimized').val()
						,	msgOf = $('#ggMsgOf').val()
						,	msgImages = $('#ggMsgImages').val()
						,	msgServerInternalError = $('#ggMsgServerInternalError').val();

						galleryInfo = response.galleryInfo;
						galleryInfo.serviceCode =ioServiceParams.current;
						galleryInfo.isRestore = 1;

						if(photos[keys[0]]) {
							countPhoto = photos[keys[0]].length;
						}

						// prepare Log List
						for(var key in keys) {
							currPhoto = 0;
							if(photos[keys[key]] && photos[keys[key]].length > 0) {
								countPhoto = photos[keys[key]].length;
								while(currPhoto < countPhoto) {
									urlLogList[currLogInd] = {
										'gInd': parseInt(key),
										'gId': keys[key],
										'gCount': keys.length,
										'iInd': currPhoto,
										'iCount': countPhoto,
										'url': photos[keys[key]][currPhoto],
									};
									currLogInd++;
									currPhoto++;
								}
							}
						};

						function processOneOptimizeImage(currIndex, logObject) {
							oneRequest = app.Ajax.Post({
								module: 'optimization',
								action: 'optimizeOneImage',
								data: {
									'currentServiceCode': galleryInfo.serviceCode,
									'auth_data': ioServiceParams.setting[ioServiceParams.current],
									'restoreSrc': galleryInfo.isRestore,
									'url': logObject.url,
								},
							});

							currAjaxSend = oneRequest.send(function(opResponse) {
								$.jGrowl(msgOpt + ' ' + (logObject.iInd+1) + ' ' + msgOf + ' ' + logObject.iCount + ' ' + msgImages);
								if(opResponse) {
									if(!opResponse.success) {
										$.jGrowl(opResponse.message ? opResponse.message: msgServerInternalError);
									}
									if(opResponse.imgInfo) {
										logObject.imgInfo = opResponse.imgInfo;
									}
									if(opResponse.serviceError) {
										serviceError = true;
										$(document).trigger('ggCloneImageOptimizeEndEvent');
									}
								}
								if(currIndex == currLogInd-1) {
									$(document).trigger('ggCloneImageOptimizeEndEvent', [1]);
								}
							}).fail(function (opResponse, statusText) {
								$.jGrowl(msgOpt + ' ' + (logObject.iInd+1) + ' ' + msgOf + ' ' + logObject.iCount + ' ' + msgImages);
								if(currIndex == currLogInd-1 && statusText != "abort") {
									$(document).trigger('ggCloneImageOptimizeEndEvent', [1]);
								}
							});
							return currAjaxSend;
						}

						$.each(urlLogList, function(index, oneElem) {
							ajaxPromise = ajaxPromise.then(function() {
								if(!serviceError) {
									return processOneOptimizeImage(index, oneElem);
								}
							}, function(responce, statusText) {
								if(statusText == "abort") {
									serviceError = true;
								}
								if(!serviceError) {
									return processOneOptimizeImage(index, oneElem);
								} else {
									$.jGrowl(msgServerInternalError);
									$(document).trigger('ggCloneImageOptimizeEndEvent');
								}
							});
						});
					}

				} else {
					$.jGrowl($('#ggMsgImgOptimizationErrorOcured').val());
					$(document).trigger('ggCloneImageOptimizeEndEvent');
				}
			}).fail(function () {
				$.jGrowl($('#ggMsgImgOptimizationErrorOcured').val());
				$(document).trigger('ggCloneImageOptimizeEndEvent');
			});
		} else {
			$(document).trigger('ggCloneImageOptimizeEndEvent');
		}
    });

	Controller.prototype.checkForCdn = (function() {
		var galleryId = parseInt(this.getParameterByName('gallery_id'), 10)
		,	cdnParams = null
		,	self = this
		,	galleryInfo
		,	galleries = {};
		galleries[galleryId] = null;

		try {
			cdnParams = JSON.parse($('#ggCdnParams').val());
		} catch(e) {
			cdnParams = null;
		}
		
		$(document).on('ggCloneCdnEndEvent', function(event, res1) {
			if(galleryInfo && res1 == 1) {
				var request = SupsysticGallery.Ajax.Post({
					module: 'optimization',
					action: 'saveCdnInfoToDb',
					data: {
						'gallery-obj': galleryInfo,
						'serviceCode': cdnParams.current,
					},
				});
				// nothing to show
				var ajax1 = request.send(function (response) {
					app.Loader.hide();
					window.location = $('#ggCreateClone').attr('data-url') + '&gallery_id=' + galleryId;;
				}).fail(function(response2) {
					app.Loader.hide();
					window.location = $('#ggCreateClone').attr('data-url') + '&gallery_id=' + galleryId;;
				});
			} else {
				app.Loader.hide();
				window.location = $('#ggCreateClone').attr('data-url') + '&gallery_id=' + galleryId;
			}
		});
		
		if(cdnParams 
			&& cdnParams.current
			&& cdnParams.setting
			&& cdnParams.setting[cdnParams.current]
			&& cdnParams.setting[cdnParams.current].zone_name
			&& cdnParams.setting[cdnParams.current].u_name
			&& cdnParams.setting[cdnParams.current].base_ftp_path
			&& cdnParams.setting[cdnParams.current].u_pass) {

			var request = app.Ajax.Post({
				module: 'optimization',
				action: 'getCdnPhotoList',
				data: {
					'optimize-preview': 1,
					'galleries': galleries,
					'isFilePath': 1,
				},
			});

			app.Loader.show($('#ggMsgGalleryTransferToCnd').val());
			request.send(function (response) {
				if (response && response.success == true && response.photos && response.galleryInfo) {

					var keys = Object.keys(galleries)
					,	photoList = response.photos
					,	currPhoto = 0
					,	serviceError = false
					,	hasError = false
					,	ajaxPromise = new $.Deferred().resolve()
					,	oneRequest
					,	photoLogList = []
					,	currLogInd = 0
					,	countPhoto = 0
					,	triggerRun = false
					,	msgTransfer = $('#ggMsgTransfer').val()
					,	msgOf = $('#ggMsgOf').val()
					,	msgImages = $('#ggMsgImages').val()
					,	msgServerInternalError = $('#ggMsgServerInternalError').val();

					galleryInfo = response.galleryInfo;

					// prepare Log List
					for(var key in keys) {
						currPhoto = 0;
						if(photoList[keys[key]] && photoList[keys[key]].length > 0) {
							countPhoto = photoList[keys[key]].length;
							while(currPhoto < countPhoto) {
								photoLogList[currLogInd] = {
									'iInd': currPhoto,
									'iCount': countPhoto,
									'photoObj': photoList[keys[key]][currPhoto],
								};
								currLogInd++;
								currPhoto++;
							}
						}
					};

					function processOneTransferImage(currIndex, logCdnObject) {
						oneRequest = app.Ajax.Post({
							module: 'optimization',
							action: 'transferOneImage',
							data: {
								'auth_data': cdnParams,
								'isDelete': 0,
								'photoObj': logCdnObject.photoObj,
							},
						});

						this.ajaxSendObj = oneRequest.send(function(opResponse) {
							$.jGrowl(msgTransfer + ' ' + (logCdnObject.iInd+1) + ' ' + msgOf + ' ' + logCdnObject.iCount + ' ' + msgImages);
							if(opResponse) {
								if(!opResponse.success) {
									$.jGrowl(opResponse.message ? opResponse.message: msgServerInternalError);
									hasError = true;
								}
							}
							if(currIndex == currLogInd-1) {
								$(document).trigger('ggCloneCdnEndEvent', [1]);
							}
						}).fail(function (opResponse, statusText) {
							if(statusText == 'error') {
								$.jGrowl(opResponse.statusText);
								hasError = true;
							}
							$.jGrowl(msgTransfer + ' ' + (logCdnObject.iInd+1) + ' ' + msgOf + ' ' + logCdnObject.iCount + ' ' + msgImages);
							if(currIndex == currLogInd-1 && statusText != "abort") {
								$(document).trigger('ggCloneCdnEndEvent', [1]);
							}
						});
						return this.ajaxSendObj;
					}

					$.each(photoLogList, function(index, oneElem) {
						ajaxPromise = ajaxPromise.then(function() {
							if(!serviceError) {
								return processOneTransferImage(index, oneElem);
							}
						}, function(responce, statusText) {
							if(statusText == "abort") {
								serviceError = true;
							} else if(statusText == 'error') {
								$.jGrowl(responce.statusText);
								hasError = true;
							}
							if(!serviceError) {
								return processOneTransferImage(index, oneElem);
							}
						});
					});

				} else {
					$.jGrowl(msgServerInternalError);
					$(document).trigger('ggCloneCdnEndEvent');
				}
			}).fail(function () {
				$.jGrowl(msgServerInternalError);
				$(document).trigger('ggCloneCdnEndEvent');
			});
		} else {
			$(document).trigger('ggCloneCdnEndEvent');
		}
	});

	Controller.prototype.callExtenedFunc = (function(funcName, funcParams) {
		// is settings exists
		if(this.checkCurrentSettPage) {
			if(this.constructor.prototype[funcName]) {
				if(!funcParams) {
					funcParams = [];
				}
				return this.constructor.prototype[funcName].call(this, funcParams);
			} else {
				console.log("Error! Can't find function: " + funcName);
			}
		}
		return null;
	});

    $(document).ready(function () {
        var qs = new URI().query(true), controller;

        if (qs.module === 'galleries' && qs.action === 'settings') {
            controller = new Controller();

            $('a').not('.hi-icon.fa, .iris-palette, .nav-tab, .wp-color-result, .gg-anchor-nav-links, .caption-available-in-pro-link, .sggLinkToProVer').on('click', function(event) {
                if (controller.settingsChanged && !confirm($('.settings-wrap').data('leave-confirm'))) {
                    event.stopPropagation();
                    event.preventDefault();
                    return false;
                }
            });

            controller.setScroll();
            controller.initSaveDialog();
            controller.initDeleteDialog();
            controller.initLoadDialog();
            controller.initThemeDialog();
            controller.initEffectsDialog();
            controller.initIconsDialog();
            controller.initLoaderPrevieDialog();
            controller.togglePreload();

            controller.initEffectPreview();

            controller.initShadowDialog();
            controller.initImportSettingDialog();
			controller.initCloneButton();
            controller.initShadowSelect();
            controller.openShadowDialog();

            controller.toggleArea();
            controller.toggleShadow();
            controller.toggleBorder();
            controller.toggleCaptions();
            controller.togglePopUp();
            controller.toggleIcons();
            controller.toggleHorizontallScroll();

            controller.initSocialSharing();
            controller.initThemeSelect();

            controller.savePosts();
            controller.savePages();

            controller.showReviewNotice();

            controller.saveButton();
            controller.togglePosts();
            controller.togglePostsTable();
            controller.toggleAutoPosts();
            controller.areaNotifications();
            controller.setInputColor();
            controller.toggleSlideShow();

            controller.initOpenByLink();

            controller.makeSettingsDefault();

            controller.polaroidEffectSettings();
			controller.initOtherPluginsConf();

            controller.initCustomButtonsPrevieDialog();
			controller.checkCloneParam();

            // Save as preset dialog
            $('#btnSaveAsPreset').on('click', controller.openSaveDialog);

            // Delete preset dialog
            $('#btnDeletePreset').on('click', controller.openDeleteDialog);

            // Load from preset dialog
            $('#btnLoadFromPreset').on('click', controller.openPresetDialog);

            // Delete gallery
            $('.delete').on('click', controller.remove);

            // Change the tab
            $('.change-tab')
                .on('click', $.proxy(controller.changeTab, controller));

            // Open theme dialog
            $('#chooseTheme').on('click', controller.openThemeDialog);

            // Open effects dialog
            $('#chooseEffect').on('click', controller.openEffectsDialog);

            // Cover
            $('.covers img').on('click', controller.selectCover);

			controller.initSubMenuFastLinks();
			$(document).trigger('sggInitGallerySettingsPro', controller);
			//controller.callExtenedFunc('initExtendedGallerySettings', ['params1', 'params2']);
			// prevent click for icons
			$(document).on('click', '#preview .hi-icon.fa', function(event) {
				event.preventDefault();
			});
        $(document).one('input ifClicked', '.supsystic-plugin :input',function(event) {
            controller.settingsChanged = true;
        });

		} else if(qs.module === 'galleries' && qs.action === 'view') {
			var viewController = new ggSettingsView();
			var galleryTabs = new ggGalleryTabs();
		}
    });

	function ggSettingsView() {
		this.init();
	}

	ggSettingsView.prototype.init = (function() {
		this.initPerPageSelector();
	});

	ggSettingsView.prototype.initPerPageSelector = (function() {
		var self1 = this;
		$('#gg-pagination-per-page').on('change', function(){
			var param = $(this).val()
			,	paramsArr = self1.getArrayFromQuery();
			paramsArr['gpp'] = param;
			delete paramsArr['gp'];
			var urlQuery = $.param(paramsArr);
			if(urlQuery && urlQuery.length) {
				window.location.search = '?' + urlQuery;
			}
		});
	});

	ggSettingsView.prototype.getArrayFromQuery = (function() {
		var res = {};
		if(window.location.search && window.location.search.length) {
			var urlQquery = window.location.search.substring(1);
			if(urlQquery && urlQquery.length) {
				var urlParams = urlQquery.split('&');
				if(urlParams && urlParams.length) {
					for(var i = 0; i < urlParams.length; i++) {
						var pair = urlParams[i].split('=');
						res[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
					}
				}
			}
		}
		return res;
	});

    function ggGalleryTabs() {
		var mtiSelf = this;
		$('.gg-tab-links .gg-tab-link').on('click', function() {
			var $self = $(this)
			,	$parent = $self.parent();

			$parent.find('.gg-tab-link').each(function() {
				$(this).removeClass('active');
			});
			$self.addClass('active');

			if($parent.data('tabs') && $self.data('tab-info')) {
				mtiSelf.tabsVisibilityUpdate($parent.data('tabs'), $self.data('tab-info'));
			}
		});
	};

	ggGalleryTabs.prototype.tabsVisibilityUpdate = (function(parentDataInfo, thisDataInfo) {
		$('.gg-tab-pages[data-tabs="' + parentDataInfo + '"] .gg-tab-page').addClass('ggSettingsDisplNone')
		$('.gg-tab-pages[data-tabs="' + parentDataInfo + '"] .gg-tab-page[data-tab-info="' + thisDataInfo + '"]').removeClass('ggSettingsDisplNone');
	});

	/**
	 * function run functionHandler when size of divSelector changed
	 * work only for Height
	 * @param divSelector
	 * @param functionHandler
	 */
	function resizeEvent(divSelector, functionHandler) {
		if(functionHandler && divSelector) {
			var _resizeInterval = setInterval(_resizeIntervalTick, 200)
			,	_lastHeight = 0;

			function _resizeIntervalTick() {
				var elementHeight = $(divSelector).height();
				if(elementHeight != _lastHeight) {
					_lastHeight = elementHeight;
					functionHandler();
				}
			};
		}
	}

}(window.SupsysticGallery = window.SupsysticGallery || {}, jQuery));

// Preview

(function ($, Gallery) {
    var getSelector = (function (fieldName) {
		return '.caption-type[data-gg-cb-type="captions-icons"] [name="' + fieldName + '"]';
    });


    function ImagePreview(enabled) {
        this.$window = $('#preview.gallery-preview');

        if (enabled) {
            this.init();
        }

        this.$window.on('preview.refresh', $.proxy(function(event) {
            this.init();
        }, this));
    }

    ImagePreview.prototype.setProp = (function (selector, props) {
        this.$window.find(selector).css(props);
    });

    ImagePreview.prototype.setDataset = (function (selector, name, value) {
        this.$window.find(selector).attr(name, value);
    });

    ImagePreview.prototype.initBorder = (function () {
        var fieldNames = {
            type: 'thumbnail[border][type]',
            color: 'thumbnail[border][color]',
            width: 'thumbnail[border][width]',
            radius: 'thumbnail[border][radius]',
            radiusUnit: 'thumbnail[border][radius_unit]'
        };

        $(getSelector(fieldNames.type)).on('change', $.proxy(function (e) {
            this.setProp('figure', { borderStyle: $(e.currentTarget).val() });
        }, this)).trigger('change');

        $('#border-color a.wp-color-result').attrchange({
            trackValues: true,
            callback: function (e) {
                if(e.attributeName == 'style') {
                    $('#preview .grid-gallery-caption').css('border-color', e.newStyle);
                }
            }
        });

        $(getSelector(fieldNames.color)).on('change', $.proxy(function (e) {
            this.setProp('figure', { borderColor: $(e.currentTarget).val() });
        }, this)).trigger('change');

        $(getSelector(fieldNames.width)).bind('change paste keyup', $.proxy(function (e) {
            this.setProp('figure', { borderWidth: $(e.currentTarget).val() });
        }, this)).trigger('change');

        $(getSelector(fieldNames.radius) + ',' + getSelector(fieldNames.radiusUnit))
            .bind('change paste keyup', $.proxy(function () {
                var $value = $(getSelector(fieldNames.radius)),
                    $unit  = $(getSelector(fieldNames.radiusUnit)),
                    unitValue = 'px';

                if (parseInt($unit.val(), 10) == 1) {
                    unitValue = '%';
                }

                this.setProp('figure', { borderRadius: $value.val() + unitValue });

            }, this))
            .trigger('change');
    });

	ImagePreview.prototype.updateIcons = (function() {
		var captBuilderVal = $('.ggUserCaptionBuilderCl:checked').val()
		,	captionBuilderIconsEnable = $('#captionBuilderIconsEnable:checked').length
		,	captionIconsEnable = $('#icons-enable:checked').length
		,	showFewIconsSel = $('#showFewIconsSel').val()
		,	toShowVideoIcon = 0
		,	toShowLinkIcon = 0
		,	toShowPopupIcon = 0
		,	toShowIcons = 0
		,	$previewVideoIcon = $('#preview .hi-icon.gg-icon-video')
		,	$previewLinkIcon = $('#preview .hi-icon.gg-icon-link')
		,	$previewPopupIcon = $('#preview .hi-icon.gg-icon-popup')
		;
		if(captBuilderVal == 1 && captionBuilderIconsEnable) {
			toShowIcons = 1
		} else if(captBuilderVal == 0 && captionIconsEnable) {
			toShowIcons = 1
		}
		// is icons visible
		if(toShowIcons == 1) {
			if(showFewIconsSel == 'params') {
				toShowVideoIcon = $('#showVideoIconInp:checked').length;
				toShowLinkIcon = $('#showLinkIconInp:checked').length;
				toShowPopupIcon = $('#showPopupIconInp:checked').length;
			} else {
				toShowVideoIcon = 1;
				toShowLinkIcon = 1;
				toShowPopupIcon = 1;
			}
		}
		// icon type to show
		if(toShowVideoIcon == 1) {
			$previewVideoIcon.removeClass('ggSettingsDisplNone');
		} else {
			$previewVideoIcon.addClass('ggSettingsDisplNone');
		}
		if(toShowLinkIcon == 1) {
			$previewLinkIcon.removeClass('ggSettingsDisplNone');
		} else {
			$previewLinkIcon.addClass('ggSettingsDisplNone');
		}
		if(toShowPopupIcon == 1) {
			$previewPopupIcon.removeClass('ggSettingsDisplNone');
		} else {
			$previewPopupIcon.addClass('ggSettingsDisplNone');
		}
	});

	ImagePreview.prototype.initSharedPropsForIcons = (function() {
		var selfIp = this;

		$('#showVideoIconInp').on('ifChanged', function() {
			selfIp.updateIcons();
		});
		$('#showLinkIconInp').on('ifChanged', function() {
			selfIp.updateIcons();
		});
		$('#showPopupIconInp').on('ifChanged', function() {
			selfIp.updateIcons();
		});
		// Init Show Few Icons parameter
		$('#showFewIconsSel').on('change', function() {
			var $this = $(this)
			,	$sggFewIconsShowingRow = $('#sggFewIconsShowingRow')
			,	selVal = $this.val()
			;
			if(selVal == 'default') {
				$sggFewIconsShowingRow.addClass('ggSettingsDisplNone');
			} else {
				$sggFewIconsShowingRow.removeClass('ggSettingsDisplNone');
			}
			selfIp.updateIcons();
		});
		$('#showFewIconsSel').trigger('change');
	});

    ImagePreview.prototype.initShadow = (function () {
        var _this = this;

        var fieldNames = {
                color: getSelector('thumbnail[shadow][color]'),
                blur: getSelector('thumbnail[shadow][blur]'),
                x: getSelector('thumbnail[shadow][x]'),
                y: getSelector('thumbnail[shadow][y]')
            },
            selectors = $.map(fieldNames, function(item) {
                return item;
            });

        updateShadowProp = function(properties) {
            _this.setProp('figure', properties);
        }

        $(selectors.join(',')).off('change paste keyup').on('change paste keyup', function() {
            boxShadow = $(fieldNames.x).val() + 'px ' + $(fieldNames.y).val() + 'px ' + $(fieldNames.blur).val() + 'px ' + $(fieldNames.color).val();
            _this.$window.find('figure')
            .attr('data-box-shadow', boxShadow)
            .trigger('shadowChange');
        });

        $('[name="use_shadow"]').off('change').on('change', function() {
            if ($(this).val() == 1) {
                $(fieldNames.x).trigger('change');
            } else {
                updateShadowProp({
                    boxShadow: 'none'
                });
            }
        });

        $('[name="use_shadow"]:checked').trigger('change');
    });

    ImagePreview.prototype.initMouseShadow = (function() {
        var self = this,
        wrapper = {
            element: '#preview figure.grid-gallery-caption',
            $node: $('#preview figure.grid-gallery-caption'),
            toggleEvents: function() {
                this.$node.off('hover', showOver);
                this.$node.off('hover', hideOver);
            }
        },
        shadow = wrapper.$node.data('box-shadow'),
        showOver = function(event) {
            if (event.type === 'mouseenter') {
                $(this).css('box-shadow', shadow);
            } else {
                $(this).css('box-shadow', 'none');
            }
        },
        hideOver = function(event) {
            if (event.type === 'mouseenter') {
                $(this).css('box-shadow', 'none');
            } else {
                $(this).css('box-shadow', shadow);
            }
        };

        wrapper.$node.on('shadowChange', function() {
            shadow = $(this).attr('data-box-shadow');
            $('#useMouseOverShadow').trigger('change');
        });

        $('#useMouseOverShadow').on('change',function() {
            value = parseInt($('#useMouseOverShadow option:selected').val(), 10);
            wrapper.toggleEvents();

            if (value == 1) {
                wrapper.$node.css('box-shadow', 'none');
                wrapper.$node.on('hover', showOver);
            }

            if (value == 2) {
                wrapper.$node.css('box-shadow', shadow);
                wrapper.$node.on('hover', hideOver);
            }

            if(!value) {
                wrapper.$node.css('box-shadow', shadow);
            }

        }).trigger('change');
    });

    ImagePreview.prototype.initOverlayShadow = (function() {
        var wrapper = {
            element: '.grid-gallery-caption img',
            $node: $('#preview figure.grid-gallery-caption')
        },
        $toggle = $('[name="thumbnail[shadow][overlay]"]'),
        self = this,
        overlayShadow = function(event) {
            if (event.type === 'mouseenter') {
                self.setProp(wrapper.element, {opacity: '1.0'});
            } else {
                 self.setProp(wrapper.element, {opacity: '0.2'});
            }
        };

        $toggle.on('change', function() {
            var value = parseInt($('option:selected', $toggle).val(), 10);
            wrapper.$node.off('hover', overlayShadow);
            if (value) {
                self.setProp(wrapper.element, {opacity: '0.2'});
                wrapper.$node.on('hover', overlayShadow);
            } else {
                self.setProp(wrapper.element , {opacity: '1.0'});
            }
        }).trigger('change');
    });

    ImagePreview.prototype.previewCaptionHide = function() {
        $('.gallery-preview .grid-gallery-caption')
            .data('grid-gallery-type', 'none')
            .attr('data-grid-gallery-type', 'none');
        this.initCaptionEffects();
        $('#preview figcaption').hide();
    };

    ImagePreview.prototype.previewCaptionShow = function(fields) {
        $('#preview figcaption').show();
        this.setDataset('figure', 'data-grid-gallery-type', $('#overlayEffect').val());

        $('#effectsPreview').find('figure:not(.available-in-pro)').bind('click', $.proxy(function (e) {
            this.setDataset('figure', 'data-grid-gallery-type', $(e.currentTarget).data('grid-gallery-type'));
        }, this)).trigger('change');

        $(getSelector(fields.bg)).bind('change', $.proxy(function (e) {
            var color = hexToRgb($(e.currentTarget).val());
            backgroundColor = 'transparent';
            if (color) {
                backgroundColor = 'rgba(' + color.r + ',' + color.g + ',' + color.b + ',' +
                    (1 - $(getSelector(fields.opacity)).val() / 10) + ')';
            }

            if(this.$window.find('figure').data('grid-gallery-type') == 'polaroid'){
                this.setProp('figcaption', {
                    backgroundColor: 'transparent'
                });
            } else {
                this.setProp('figcaption', {
                    backgroundColor: backgroundColor
                });
            }

            this.$window.trigger('updateCaptionBackground', backgroundColor);
        }, this)).trigger('change');

        $(getSelector(fields.fg)).bind('change', $.proxy(function (e) {
            this.setProp('figcaption', { color: $(e.currentTarget).val() });
        }, this)).trigger('change');

        function hexToRgb(hex) {
            var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
            return result ? {
                r: parseInt(result[1], 16),
                g: parseInt(result[2], 16),
                b: parseInt(result[3], 16)
            } : null;
        }

        $(getSelector(fields.opacity)).bind('change', $.proxy(function (e) {
            $(getSelector(fields.bg)).trigger('change');
        }, this));

        $(getSelector(fields.size) + ',' + getSelector(fields.sizeUnit))
            .bind('change', $.proxy(function (e) {
                var $size = $(getSelector(fields.size)),
                    $unit = $(getSelector(fields.sizeUnit)),
                    unitValue = 'px';

                switch (parseInt($unit.val(), 10)) {
                    case 0:
                        unitValue = 'px';
                        break;
                    case 1:
                        unitValue = '%';
                        break;
                    case 2:
                        unitValue = 'em';
                        break;
                }

                this.setProp('figcaption', { fontSize: $size.val() + unitValue });
            }, this)).trigger('change');

        $(getSelector(fields.align)).on('change', $.proxy(function (e) {
            var value = '';

            if($(e.currentTarget).val() != 'auto') {
                value = $(e.currentTarget).val();
            }

            this.setProp('figcaption', { textAlign: value });
        }, this)).trigger('change');

        $(getSelector(fields.fontFamily)).on('change', $.proxy(function (e) {
            var fontFamily = $(getSelector(fields.fontFamily)).val();
			if(!fontFamily || fontFamily == 'Default') return;
            if(!window || !window.sggStandartFontsList || $.inArray(fontFamily.replace(/\"/g, ''), window.sggStandartFontsList) == -1) {
                WebFont.load({
                    google: {
                        families: [fontFamily]
                    }
                });
            }
            this.setProp('figcaption', { fontFamily: '"' + fontFamily + '"' + ', serif' });
        }, this)).trigger('change');

        $(getSelector(fields.position)).on('change', $.proxy(function (e) {
            var position = $(getSelector(fields.position)).val();
            this.setProp('.grid-gallery-figcaption-wrap', { verticalAlign: position });
        }, this)).trigger('change');

        var hideFigcaptionTimer;
        $elements = $();
        for (var i in fields) {
            $.merge($elements, $(getSelector(fields[i])));
        };

        $elements.on('change keyup input paste', $.proxy(function () {
            self = this;
            $('#preview .grid-gallery-caption').addClass('hovered')
            clearTimeout(hideFigcaptionTimer);
            hideFigcaptionTimer = setTimeout(function() {
                $('#preview .grid-gallery-caption').removeClass('hovered');
            }, 3000);
        }, this));
    };

    ImagePreview.prototype.initCaption = (function () {
        var fields = {
            effect: 'thumbnail[overlay][effect]',
            position: 'thumbnail[overlay][position]',
            bg: 'thumbnail[overlay][background]',
            fg: 'thumbnail[overlay][foreground]',
            opacity: 'thumbnail[overlay][transparency]',
            size: 'thumbnail[overlay][text_size]',
            sizeUnit: 'thumbnail[overlay][text_size_unit]',
            align: 'thumbnail[overlay][text_align]',
            fontFamily: 'thumbnail[overlay][font_family]'
        },	selfIp = this;

		$('[name="thumbnail[overlay][enabled]"]').on('change', function(event) {
			var isCaptionBuilderEnabled = selfIp.callExtenedFunc('isCaptionBuilderEnabled', []);
			if(isCaptionBuilderEnabled) {
				selfIp.callExtenedFunc('initBackgroundEnableChangeHandler');
			} else {
				var isCaptionEnabled = event.target.value;
				if(isCaptionEnabled == 'true') {
					selfIp.previewCaptionShow(fields);
				} else {
					selfIp.previewCaptionHide();
				}
			}
		});
		$('[name="thumbnail[overlay][enabled]"]').off('ifChanged').on('ifChanged', function(event) {
			// code runnen twice
			var $overlayEnabled = $('[name="thumbnail[overlay][enabled]"]:checked');
			if($overlayEnabled.length) {
				selfIp.initCaptionsAndIcons();
			}
		});
    });

	//ImagePreview.prototype.getCssParamsForCaption = (function() {
	//
	//});

    ImagePreview.prototype.getCssParamsForIcons = (function(paramsToGet) {
		var returnObj = {};

		if(!paramsToGet || paramsToGet.effectName) {
			var $iconEffectName = $('#iconsEffectName');
			returnObj['effectName'] = $iconEffectName.val();
		}
		if(!paramsToGet || paramsToGet.color) {
			var	$iconsColor = $('#iconsColor');
			returnObj['color'] = $iconsColor.val();
		}
		if(!paramsToGet || paramsToGet.colorOnHover) {
			var $iconsHoverColor = $('#iconsHoverColor');
			returnObj['colorOnHover'] = $iconsHoverColor.val();
		}
		if(!paramsToGet || paramsToGet.bgColor) {
			var	$iconsBgColor = $('#iconsBackgroundColor');
			returnObj['bgColor'] = $iconsBgColor.val();
		}
		if(!paramsToGet || paramsToGet.bgColorOnHover) {
			var	$iconsHoverBgColor = $('#iconsBackgroundHoverColor');
			returnObj['bgColorOnHover'] = $iconsHoverBgColor.val();
		}
		if(!paramsToGet || paramsToGet.fontSize) {
			var	$iconsSize = $('#iconsSize');
			returnObj['fontSize'] = $iconsSize.val();
		}
		if(!paramsToGet || paramsToGet.distance) {
			var	$iconsDistance = $('#iconsMargin');
			returnObj['distance'] = $iconsDistance.val();
		}
		if(!paramsToGet || paramsToGet.overlayIsShowing) {
			var	$iconsOverlayIsShowed = $('#iconsOverlay');
			returnObj['overlayIsShowing'] = $iconsOverlayIsShowed.val();
		}

		if(!paramsToGet || paramsToGet.overlayColor) {
			var	$iconsOverlayColor = $('#iconsOverlayColor');
			returnObj['overlayColor'] = $iconsOverlayColor.val();
		}
		if(!paramsToGet || paramsToGet.overlayTransparency) {
			var	$iconsOverlayTransparency = $('#iconsOverlayTransparency')
			,	transpVal = parseInt($iconsOverlayTransparency.val());
			;
			if(!isNaN(transpVal)) {
				returnObj['overlayTransparency'] = 1 - (transpVal / 10);
			} else {
				returnObj['overlayTransparency'] = 1;
			}
		}
		return returnObj;
	});

	ImagePreview.prototype.initSimpleIcons = (function() {
		var selfIp = this
		,	$iconEffectName = $('#iconsEffectName')
		,	$iconsColor = $('#iconsColor')
		,	$iconsHoverColor = $('#iconsHoverColor')
		,	$iconsBgColor = $('#iconsBackgroundColor')
		,	$iconsHoverBgColor = $('#iconsBackgroundHoverColor')
		,	$iconsSize = $('#iconsSize')
		,	$iconsDistance = $('#iconsMargin')
		,	$figureIconsBlock = $('#preview .sggFigCaptionIconsEntry')
		;
		$iconEffectName.off('change').on('change', function() {
			selfIp.setIconParams($figureIconsBlock, {'effectName': $iconEffectName.val()});
		});
		$iconsColor.off('change').on('change', function() {
			selfIp.setIconParams($figureIconsBlock, {'color': $iconsColor.val()});
		});
		$iconsHoverColor.off('change').on('change', function() {
			selfIp.setIconParams($figureIconsBlock, {'colorOnHover': $iconsHoverColor.val()});
		});
		$iconsBgColor.off('change').on('change', function() {
			selfIp.setIconParams($figureIconsBlock, {'bgColor': $iconsBgColor.val()});
		});
		$iconsHoverBgColor.off('change').on('change', function() {
			selfIp.setIconParams($figureIconsBlock, {'bgColorOnHover': $iconsHoverBgColor.val()});
		});
		$iconsSize.off('change keyup paste').on('change keyup paste', function() {
			selfIp.setIconParams($figureIconsBlock, {'fontSize': $iconsSize.val()});
		});
		$iconsDistance.off('change keyup paste').on('change keyup paste', function() {
			selfIp.setIconParams($figureIconsBlock, {'distance': $iconsDistance.val()});
		});
	});

	ImagePreview.prototype.initSimpleOverlay = (function($simpleOverlayBlock) {
		var	$iconsOverlayIsShowed = $('#iconsOverlay')
		,	$iconsOverlayTransparency = $('#iconsOverlayTransparency')
		,	$iconsOverlayColor = $('#iconsOverlayColor')
		,	selfIp = this
		;
		$iconsOverlayIsShowed.off('change').on('change', function() {
			selfIp.setSimpleOverlay($simpleOverlayBlock, {
				'overlayIsShowing': $iconsOverlayIsShowed.val(),
				'overlayColor': $iconsOverlayColor.val(),
				'overlayTransparency': $iconsOverlayTransparency.val(),
			});
		});
		$iconsOverlayColor.off('change').on('change', function() {
			selfIp.setSimpleOverlay($simpleOverlayBlock, {
				'overlayIsShowing': $iconsOverlayIsShowed.val(),
				'overlayColor': $iconsOverlayColor.val(),
				'overlayTransparency': $iconsOverlayTransparency.val(),
			});
		});
		$iconsOverlayTransparency.off('change').on('change', function() {
			selfIp.setSimpleOverlay($simpleOverlayBlock, {
				'overlayIsShowing': $iconsOverlayIsShowed.val(),
				'overlayColor': $iconsOverlayColor.val(),
				'overlayTransparency': $iconsOverlayTransparency.val(),
			});
		});
	});

	ImagePreview.prototype.setSimpleOverlay = (function($overlayBlock, paramsToGet) {
		var isOverlayShow
		,	color
		,	transpVal
		,	notSetted = true
		;
		if(!$overlayBlock || !$overlayBlock.length) {
			$overlayBlock = $('#preview .grid-gallery-caption')
		}
		if(paramsToGet && paramsToGet.overlayIsShowing == 'true' && paramsToGet.overlayColor) {
			transpVal = parseInt(paramsToGet.overlayTransparency);
			if(!isNaN(transpVal)) {
				transpVal = 1 - (transpVal / 10);
				color = hexToRgbA(paramsToGet.overlayColor, transpVal);
				$overlayBlock.css({'background-color': color});
				notSetted = false;
			}
		}

		if(notSetted) {
			$overlayBlock.css({'background-color': 'transparent'});
		}
	});

	ImagePreview.prototype.setIconParams = (function($iconWrapper, params) {
		var $iconList = $iconWrapper.find('.hi-icon');

		if(params) {
			if(params.effectName) {
				var oldClassArr = this.findClassByStr($iconWrapper, 'hi-icon-effect')
				,	tmpVal = params.effectName;
				for(var indTmpInd = 0; indTmpInd < oldClassArr.length; indTmpInd++) {
					$iconWrapper.removeClass(oldClassArr[indTmpInd]);
				}

				$iconWrapper.addClass(tmpVal);
				tmpVal = tmpVal.substr(0, tmpVal.length - 1);
				$iconWrapper.addClass(tmpVal);
			}
			if(params.distance) {
				var distance = parseInt(params.distance);
				if(!isNaN(distance)) {
					$iconList.each(function(ind, item) {
						var $currItem = $(item);
						$currItem.css({
							'margin-left': distance + 'px',
							'margin-right': distance + 'px',
						});
					});
				}
			}
			if(params.color) {
				$('#sggSettingsIconColorStyle').html('.hi-icon {color: ' + params.color + ' !important;}');
			}
			if(params.colorOnHover) {
				$('#sggSettingHiIconHoverColorStyle').html('.hi-icon:hover { color: ' + params.colorOnHover + ' !important; }');
			}
			if(params.bgColor) {
				$('#sggSettingsIconBgColorStyle').html('.hi-icon { background: ' + params.bgColor + ' !important; }');
			}
			if(params.bgColorOnHover) {
				$('#sggSettingHiIconHoverBgStyle').html('.hi-icon:hover { background: ' + params.bgColorOnHover + ' !important; }');
			}
			if(params.fontSize) {
				var fontSize = parseInt(params.fontSize);
				if(!isNaN(fontSize)) {
					$('#sggSettingHiIconBeforeFontSizeStyle').html(
						'.hi-icon:before {font-size: ' + fontSize + 'px !important;' +
						'line-height: ' + 2*fontSize + 'px !important;}'
					);
					$('#sggSettingsIconSizeStyle').html(
						'.hi-icon {width: ' + 2*fontSize + 'px !important;' +
						'height: ' + 2*fontSize + 'px !important;}'
					);
				}
			}
		}
	});

    ImagePreview.prototype.initCaptionsAndIcons = (function() {
		var captBuilderEnabled = $('input.ggUserCaptionBuilderCl:checked').val() == 1
		,	captionEnabled = $('input[name="thumbnail[overlay][enabled]"]:checked').val() == 'true'
		,	iconsEnabled = $('input[name="icons[enabled]"]:checked').val() == 'true'
		,	$preview = $('#preview')
		,	$iconsOverlayIsShowed = $('#iconsOverlay')
		,	$iconsOverlayTransparency = $('#iconsOverlayTransparency')
		,	$iconsOverlayColor = $('#iconsOverlayColor')
		,	$figure = $preview.find('.grid-gallery-caption')
		// when use Icons and Captions then added 2nd block for effects
		,	$figureNewCaptionBlock = $figure.find('.sggCcBlockAfter')
		,	$figureIconsBlock = $figure.find('.sggFigCaptionIconsEntry')
		,	$figureCaptionBlock = $figure.find('.sggFigcaptionCaptionWrapper')
		,	$figcaptionBlock = $figure.find('figcaption')
		,	effectCode = $('#overlayEffect').val()
		,	previewInited = false
		,	selfIp = this
		;
		if(!captBuilderEnabled) {
			if(captionEnabled && iconsEnabled) {

				if(['icons-sodium-left', 'icons-sodium-top'].indexOf(effectCode) != -1) {
					// additional panel in figure
					$figureNewCaptionBlock.removeClass('ggSettingsDisplNone');
					$figureIconsBlock.removeClass('ggSettingsDisplNone');
					$figureCaptionBlock.addClass('ggSettingsDisplNone');

					var iconSetts = this.getCssParamsForIcons(false)
					,	oldClassObjArr = this.findClassByStr($figureNewCaptionBlock, 'caption-with-');
					selfIp.setIconParams($figureIconsBlock, iconSetts);

					if(!selfIp.isInitSimpleIcons) {
						selfIp.initSimpleIcons();
						selfIp.isInitSimpleIcons = 1;
					}
					if(!selfIp.isInitSimpleOverlay) {
						selfIp.initSimpleOverlay($figcaptionBlock);
						selfIp.isInitSimpleOverlay = 1;
					}

					// first init BgColor
					selfIp.setSimpleOverlay($figcaptionBlock, {
						'overlayIsShowing': $iconsOverlayIsShowed.val(),
						'overlayColor': $iconsOverlayColor.val(),
						'overlayTransparency': $iconsOverlayTransparency.val(),
					});
					// remove old class and set new
					for(var indTmpInd = 0; indTmpInd < oldClassObjArr.length; indTmpInd++) {
						$figureNewCaptionBlock.removeClass(oldClassObjArr[indTmpInd]);
					}
					$figureNewCaptionBlock.addClass('caption-with-' + effectCode);
					previewInited = true;
				} else {
					$figureNewCaptionBlock.addClass('ggSettingsDisplNone');
					$figureIconsBlock.addClass('ggSettingsDisplNone');
					$figureCaptionBlock.removeClass('ggSettingsDisplNone');
				}
			} else {
				$figureNewCaptionBlock.addClass('ggSettingsDisplNone');
				$figureIconsBlock.addClass('ggSettingsDisplNone');
				$figureCaptionBlock.removeClass('ggSettingsDisplNone');
				$figcaptionBlock.show();
				$figcaptionBlock.removeClass('ggSettingsTop0');
				if(captionEnabled) {

				} else if(iconsEnabled) {
					$figureIconsBlock.removeClass('ggSettingsDisplNone');
					$figureCaptionBlock.addClass('ggSettingsDisplNone');
					$figcaptionBlock.addClass('ggSettingsTop0');
					// set bg
					selfIp.setSimpleOverlay($figcaptionBlock, {
						'overlayIsShowing': $iconsOverlayIsShowed.val(),
						'overlayColor': $iconsOverlayColor.val(),
						'overlayTransparency': $iconsOverlayTransparency.val(),
					});
				} else {
					$figcaptionBlock.hide();
				}
			}
		}
		$('input[name="icons[enabled]"]').off('ifChanged').on('ifChanged', function(event) {
			// runned twice
			var $checkedElem = $('input[name="icons[enabled]"]:checked');
			if($checkedElem.length) {
				selfIp.initCaptionsAndIcons();
			}
		});
		return previewInited;
	});

	ImagePreview.prototype.init = (function () {
		var selfIp = this;
		//this.$window.draggable();
		this.initBorder();
		this.initShadow();
		this.initMouseShadow();
		this.initOverlayShadow();
		this.initSharedPropsForIcons();

		this.previewSettingsKeys = {};
		this.objectsData = new sggDataSelectorsCache();
		this.objectsData.init({
			'keys': this.previewSettingsKeys,
		});

		// ???
		this.initCaption();
		this.initCaptionEffects();

		this.initCaptionsAndIcons();
    });

    ImagePreview.prototype.captionCalculations = (function() {
        var heightRecalculate = function() {
            var figcaption = $('div#preview > figure > figcaption'),
                captionStyle = {
                    'height': figcaption.innerHeight(),
                    'display': 'table'
                },
                wrap = figcaption.find('div.grid-gallery-figcaption-wrap');
            figcaption.css(captionStyle);
            wrap.css('display', 'table-cell');
        };
        $('div#preview > figure').on('change', function() {
            heightRecalculate();
        });
    });

    ImagePreview.prototype.checkDirection = function($element, e) {
        var w = $element.width(),
            h = $element.height(),
            x = ( e.pageX - $element.offset().left - ( w / 2 )) * ( w > h ? ( h / w ) : 1 ),
            y = ( e.pageY - $element.offset().top - ( h / 2 )) * ( h > w ? ( w / h ) : 1 );

        return Math.round(( ( ( Math.atan2(y, x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3) % 4;
    };

    ImagePreview.prototype.getCssFromString = (function(cssString) {
        var propArr = [];
        if(cssString && cssString.split) {
            var arrStyle = cssString.split(';');
            if(arrStyle.length) {
                for(var indA1 in arrStyle) {
                    var strTemp = arrStyle[indA1].trim();
                    if(strTemp.length) {
                        var oneStyleArr = strTemp.split(':');
                        if(oneStyleArr.length == 2) {
                            propArr[oneStyleArr[0].trim()] = oneStyleArr[1].trim();
                        }
                    }

                }
            }
        }
        return propArr;
    });

    ImagePreview.prototype.objectToCssString = (function(styleArr) {
        var cssString = ''
        ,   objectKeys = Object.keys(styleArr);

        if(objectKeys.length) {
            for(var indA1 in objectKeys) {
                cssString += objectKeys[indA1] + " : " + styleArr[objectKeys[indA1]] + "; ";
            }
        }
        return cssString;
    });

    ImagePreview.prototype.initCaptionEffects = (function () {
        var self = this, figure = $('#preview figure.grid-gallery-caption');

		if(figure.attr('data-grid-gallery-type') == 'polaroid') {
			if (!this.defaultStyles) {
				this.defaultStyles = {
					figureStyle: figure.attr('style'),
					imageStyle: figure.find('img').attr('style')
				}
			};
		} else {
			// get preview figure params
			var figureWithStyle = $("#preview figure.grid-gallery-caption")
			,	imageStyleObj = self.getCssFromString(figureWithStyle.find('img').attr('style'));
			// remove image size properties
			if(imageStyleObj['height']) {
				delete imageStyleObj['height'];
			}
			if(imageStyleObj['width']) {
				delete imageStyleObj['width'];
			}
			this.defaultStyles = {
				figureStyle: figureWithStyle.attr('style'),
				imageStyle: self.objectToCssString(imageStyleObj),
			}
		}
        figure.each(function() {
			$(this).removeAttr('style').attr('style', self.defaultStyles.figureStyle);
			$(this).find('img').removeAttr('style').attr('style', self.defaultStyles.imageStyle);

            if(!$(this).find('.polaroid-bg-wrap').length){
                $(this).find('img').wrap('<div class="polaroid-bg-wrap">');
            }
            // $(this).off('mouseenter mouseleave');
            $(this).find('figcaption').removeClass();
            $(this).off('mouseenter mouseleave');

            if ($(this).data('grid-gallery-type') == 'cube') {
                $(this).on('mouseenter mouseleave', function(e) {
                    var $figcaption = $(this).find('figcaption'),
                        direction = self.checkDirection($(this), e),
                        classHelper = null;

                    switch (direction) {
                        case 0:
                            classHelper = 'cube-' + (e.type == 'mouseenter' ? 'in' : 'out') + '-top';
                            break;
                        case 1:
                            classHelper = 'cube-' + (e.type == 'mouseenter' ? 'in' : 'out') + '-right';
                            break;
                        case 2:
                            classHelper = 'cube-' + (e.type == 'mouseenter' ? 'in' : 'out') + '-bottom';
                            break;
                        case 3:
                            classHelper = 'cube-' + (e.type == 'mouseenter' ? 'in' : 'out') + '-left';
                            break;
                    }
                    $figcaption.removeClass()
                        .addClass(classHelper);
                });
            }

            if ($(this).data('grid-gallery-type') == 'polaroid' &&
                $(this).closest('#preview').length > 0) {

				var $img = $(this).find('img')
				,	$galleryType = $('select[name="area[grid]"]')
				,	$imgGalleryWidth = $('input[name="area[photo_width]"]')
				,	$imgGalleryHeight = $('input[name="area[photo_height]"]')
				,	realImgHeight = $img[0].naturalHeight
				,	realImgWidth = $img[0].naturalWidth
				,	scaleRatio = realImgWidth / realImgHeight
				,	frameWidth = parseInt($('.caption-type[data-gg-cb-type="captions-icons"] [name="thumbnail[overlay][polaroidFrameWidth]"]').val())
				,	$figcaption = $(this).find('figcaption')
				,	$polaroidWrapper = $('.polaroid-bg-wrap')
				,	imageWidth
				,	imageHeight
				;

				if($galleryType.val() == 2) {
					// only image height
					//imageHeight = parseInt($polaroidWrapper.outerHeight());
					//imageWidth = imageHeight * scaleRatio;
					//// cal width with border
					//imageWidth = imageWidth - (2*frameWidth);
					//imageHeight = imageWidth/scaleRatio;
					imageWidth = parseInt($polaroidWrapper.outerWidth()) - (frameWidth*2);
					imageHeight = imageWidth / scaleRatio;
				} else {
					imageWidth = parseInt($polaroidWrapper.outerWidth()) - (frameWidth*2);
					imageHeight = imageWidth / scaleRatio;
				}

				$img[0].style.setProperty('width', imageWidth + 'px', 'important');
				$img[0].style.setProperty('height', imageHeight + 'px', 'important');
                $img[0].style.setProperty('margin', '0 auto', 'important');
                $img[0].style.setProperty('padding-top', frameWidth + 'px', 'important');

                $(this).css({
                    'width': $(this).width(),
                });

                $figcaption.css('padding', frameWidth + 'px');

				var $backgroundColor = $('input[name="thumbnail[overlay][background]"]').val()
				,	$transparency = $('select[name="thumbnail[overlay][transparency]"]').val()
				,	css = hexToRgbA($backgroundColor, transparencyConvert[$transparency] );

				$(this).css({
					'background-color': css
				});
				$(this).find('figcaption').css({'background': 'none'});

                if ($('#polaroid-scattering select').val() == 'true') {
                    $(this).css({
                        'transform': 'rotate(' + (-3 + Math.random() * (10 - 3)) + 'deg)'
                    });
                    $('#preview .grid-gallery-caption').addClass('polaroid-scattering');
                } else {
                    $('#preview .grid-gallery-caption').removeClass('polaroid-scattering');
                }

                if ($('#polaroid-animation select').val() == 'true') {
                    $('#preview .grid-gallery-caption').addClass('polaroid-animation');
                } else {
                    $('#preview .grid-gallery-caption').removeClass('polaroid-animation');
                }
            }else{
				var $backgroundColor = $('input[name="thumbnail[overlay][background]"]').val()
				,	$transparency = $('select[name="thumbnail[overlay][transparency]"]').val()
				,	css = hexToRgbA($backgroundColor, transparencyConvert[$transparency] );

				$(this).find('figcaption').css({'background-color': css});

			}
        });
    });

	ImagePreview.prototype.callExtenedFunc = (function(funcName, funcParams) {
		// is settings exists
		if(this.initCurrSettingsPro) {
			if(this.constructor.prototype[funcName]) {
				if(!funcParams) {
					funcParams = [];
				}
				return this.constructor.prototype[funcName].call(this, funcParams);
			} else {
				console.log("Error! Can't find function: " + funcName);
			}
		}
		return null;
	});

	ImagePreview.prototype.getCaptionObjectByKey = (function(key) {
		// is @key string ?
		if(key.trim) {
			return this.objectsData.get(key);
		} else {
			return this.objectsData.getFromArray(key);
		}
	});

	ImagePreview.prototype.getPreviewRowObjectByCode = (function(code) {
		var $rowObject = null;

		$rowObject = this.callExtenedFunc('getPreviewRowObjectByCodePro', code)
		return $rowObject;
	});

	ImagePreview.prototype.findClassByStr = (function($element, codeStr) {
		var res = [];
		if($element && $element.length) {
			if ($element[0].classList && $element[0].classList.length) {
				var classList = $element[0].classList
					,	ind2 = 0;
				while(ind2 < classList.length) {
					if(classList[ind2].indexOf(codeStr) != -1) {
						res.push(classList[ind2]);
					}
					ind2++;
				}
			}
		}
		return res;
	});

	ImagePreview.prototype.setStyleByArrayCodes = (function(objectCode, styleCodesObject) {
		var codeList = Object.keys(this.previewSettingsKeys);
		if(objectCode &&  codeList.indexOf(objectCode) != -1) {
			var stylesKeys = [];

			if(styleCodesObject) {
				stylesKeys = Object.keys(styleCodesObject);
			} else {
				stylesKeys = Object.keys(this.previewSettingsKeys[objectCode]);
			}
			this.callExtenedFunc('setStyleByArrayCodesPro', [stylesKeys, objectCode, styleCodesObject])
		}
	});

    $(document).ready(function () {

        jQuery('#importDialog').on('click' , 'button.disabled', function (e) {
            e.preventDefault();
            document.location = $(this).data('src');
        });

        jQuery('input#cmn-preview').click(function() {
            if($(this).is(':checked')) {
                jQuery('#preview figure').show();
            } else {
                jQuery('#preview figure').hide();
            }
        });

        Gallery.ImagePreview = new ImagePreview(true);
		$(document).trigger('sggInitGalleryImagePreviewPro', Gallery.ImagePreview);

		Gallery.sggDataSelectorsCache = sggDataSelectorsCache;

		// Init Caption: run only on One time
		$('[name="thumbnail[overlay][enabled]"]:checked').trigger('change');
		setTimeout(function() {
			$('input[name="icons[enabled]"]:checked').trigger('ifChanged');
		}, 100);
    });

	/* NOW its unusable Code created for mosaic[images][count]
    $("input[type=number]").each(function($index){
        if(this.hasAttribute('min')){
            var item = $(this);
            item.on('change', function($event){
                var max = parseInt($(this).attr('max'));
                if(isNaN(max)){
                    max = Number.MAX_SAFE_INTEGER;
                }
                var min = parseInt($(this).attr('min'));
                if ($(this).val() > max) {
                    $(this).val(max);
                }
                else if ($(this).val() < min) {
                    $(this).val(min);
                }
            });
        }
    });
	/**/

}(jQuery, window.SupsysticGallery = window.SupsysticGallery || {}));


function hexToRgbA(hex, transparent){
	var c;
	if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
		c= hex.substring(1).split('');
		if(c.length== 3){
			c= [c[0], c[0], c[1], c[1], c[2], c[2]];
		}
		c= '0x'+c.join('');
		return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+','+transparent+')';
	}else{
		return 'rgba(111,0,0,0.5)';
	}
}

var transparencyConvert = {
	'0': '0.1',
	'1': '0.2',
	'2': '0.3',
	'3': '0.3',
	'4': '0.4',
	'5': '0.5',
	'6': '0.6',
	'7': '0.7',
	'8': '0.8',
	'9': '0.9',
	'10': '1',
};

(function($)
{
	$.fn.removeStyle = function(style)
	{
		var search = new RegExp(style + '[^;]+;?', 'g');

		return this.each(function()
		{
			$(this).attr('style', function(i, style)
			{
				return style && style.replace(search, '');
			});
		});
	};
}(jQuery));