wp.TimelineWP = 'undefined' === typeof( wp.TimelineWP ) ? {} : wp.TimelineWP;

(function( $, TimelineWP ){

    var TimelineWPGalleryResizer = Backbone.Model.extend({
    	defaults: {
            'columns': 12,
            'gutter': 10,
            'containerSize': false,
            'size': false,
        },

        initialize: function( args ){
            var resizer = this;

            this.set( 'containerSize', jQuery( '#timeline-wp-uploader-container .timeline-wp-uploader-inline-content' ).width() );

            // Get options
            this.set( 'gutter', parseInt( wp.TimelineWP.Settings.get('gutter') ) );

        	// calculate block size.
        	this.generateSize();

            // Listen to column and gutter change
            // this.listenTo( wp.TimelineWP.Settings, 'change:columns', this.changeColumns );
            this.listenTo( wp.TimelineWP.Settings, 'change:gutter', this.changeGutter );

            // Listen to window resize
            jQuery( window ).on( 'resize', $.proxy( this.windowResize, this ) );
            new ResizeSensor( jQuery( '#timeline-wp-uploader-container .timeline-wp-uploader-inline-content' ), function() {
                resizer.windowResize();
            });
        },
        
        generateSize: function(){
        	var columns = this.get( 'columns' ),
        		gutter = this.get( 'gutter' ),
        		containerWidth = this.get( 'containerSize' ),
        		size;

        	/* 
        	   We will calculate the size ( width and height, because every item is a square ) of an item.
    		   The formula is : from the container size we will subtract gutter * number of columns and then we will dived by number of columns
        	 */
        	size = Math.floor( ( containerWidth - ( gutter * ( columns - 1 ) ) ) / columns );
        	this.set( 'size', size );
        },
        /* 
           Here we will calculate the new size of the item.
           This will be called after resize event, that means the item is resized and we need to check it.
           currentSize is the new size of the item after we resized it.
         */
        calculateSize: function( currentSize ){
        	var size = this.get( 'size' ),
        		columns = Math.round( currentSize / size ),
        		gutter = this.get( 'gutter' ),
                containerColumns = this.get( 'columns' ),
        		correctSize;

            if ( columns > containerColumns ) {
                columns = containerColumns;
            }

        	correctSize = size * columns + ( gutter * ( columns - 1 ) );
        	return correctSize;
        },

        // Get columns from width/height
        getSizeColumns: function( currentSize ){
            var size = this.get( 'size' );
            return Math.round( currentSize / size );
        },

        windowResize: function() {
            var currentSize = this.get( 'containerSize' ),
                newSize = jQuery( '#timeline-wp-uploader-container .timeline-wp-uploader-inline-content' ).width();

            // Check if container size have been changed.
            if ( currentSize == newSize ) {
                return;
            }

            // Change Container Width
            this.set( 'containerSize', newSize );

            // Resize Items
            this.resizeItems();

        },

        resizeItems: function(){

            // Generate new sizes.
            this.generateSize();

            if ( 'undefined' != typeof wp.TimelineWP.Items && wp.TimelineWP.Items.length > 0 ) {

                // Resize all items when gutter or columns have changed.
                wp.TimelineWP.Items.each( function( item ){
                    item.resize();
                });

            }

            if ( 'custom-grid' == TimelineWP.Settings.get( 'type' ) ) {
                // Change packary columnWidth & columnHeight
                wp.TimelineWP.GalleryView.setPackaryOption( 'columnWidth', this.get( 'size' ) );
                wp.TimelineWP.GalleryView.setPackaryOption( 'rowHeight', this.get( 'size' ) );

                // Update Grid
                wp.TimelineWP.GalleryView.setPackaryOption( 'gutter', parseInt( this.get( 'gutter' ) ) );

                // Reset Packary
                wp.TimelineWP.GalleryView.resetPackary();
            }

        },

        changeColumns: function( model, value ){
            this.set( 'columns', value );

            // Resize all gallery items
            this.resizeItems();

        },

        changeGutter: function( model, value ){
            this.set( 'gutter', parseInt( value ) );

            // Resize all gallery items
            this.resizeItems();

        }

    });

    var TimelineWPGalleryView = Backbone.View.extend({

    	isSortable : false,
    	isResizeble: false,
        refreshTimeout: false,
        updateIndexTimeout: false,

    	initialize: function( args ) {

    		// This is the container where the gallery items are.
    		this.container = this.$el.find( '.timeline-wp-uploader-inline-content' );

            // Helper Grid container
            this.helperGridContainer = this.$el.parent().find( '.timeline-wp-helper-guidelines-container' );
            this.helperGrid = this.$el.find( '#timeline-wp-grid' );

            // Listen to grid toggle
            this.helperGridContainer.on( 'change', 'input', $.proxy( this.updateSettings, this ) );

    		// Listent when gallery type is changing.
        	this.listenTo( wp.TimelineWP.Settings, 'change:type', this.checkSettingsType );

        	// Enable current gallery type
        	this.checkGalleryType( wp.TimelineWP.Settings.get( 'type' ) );

            // Grid
            this.gridView = new wp.TimelineWP.previewer['helpergrid']({ 'el' : this.$el.find( '#timeline-wp-grid' ), 'galleryView' : this });

        },

        updateSettings: function( event ) {
            var value,
                setting = event.target.dataset.setting;

            value = event.target.checked ? 1 : 0;

            wp.TimelineWP.Settings.set( 'helpergrid', value );

            if ( value ) {
                this.helperGrid.hide();
            }else{
                this.helperGrid.show();
            }

        },

        checkSettingsType: function( model, value ) {
        	this.checkGalleryType( value );
        },

        checkGalleryType: function( type ) {

            if ( 'creative-gallery' == type ) {

            	// If resizeble is enable we will destroy it
            	if ( this.isResizeble ) {
            		this.disableResizeble();
            	}

            	// If sortable is not enabled, we will initialize it.
            	if ( ! this.isSortable ) {
            		this.enableSortable();
            	}

                this.helperGridContainer.find( '.timeline-wp-helper-guidelines-wrapper' ).hide();
                this.container.removeClass( 'timeline-wp-custom-grid' ).addClass( 'timeline-wp-creative-gallery' );

            }else if ( 'custom-grid' == type ) {

            	// If sortable is enable we will destroy it
            	if ( this.isSortable ) {
            		this.disableSortable();
            	}

            	// If resizeble is not enabled, we will initialize it.
            	if ( ! this.isResizeble ) {
            		this.enableResizeble();
            	}

                this.helperGridContainer.find( '.timeline-wp-helper-guidelines-wrapper' ).show();
                if ( ! wp.TimelineWP.Settings.get( 'helpergrid' ) ) {
                    this.helperGrid.show();
                }

                this.container.removeClass( 'timeline-wp-creative-gallery' ).addClass( 'timeline-wp-custom-grid' );

            }
        },

        enableSortable: function() {
            var galleryView = this;

        	this.isSortable = true;
        	this.container.sortable( {
    	        items: '.timeline-wp-single-image',
    	        cursor: 'move',
    	        forcePlaceholderSize: true,
    	        placeholder: 'timeline-wp-single-image-placeholder',
                stop: function( event, ui ) {
                    var itemsIDs = galleryView.container.sortable( 'toArray' );
                    itemsIDs.forEach( function( itemID, i ) {
                        var id = "#" + itemID;
                        $( id ).trigger( 'TimelineWP:updateIndex', { 'index': i } );
                    });
                }
    	    } );
        },

        disableSortable: function() {
        	this.isSortable = false;
        	this.container.sortable( 'destroy' );
        },

        enableResizeble: function() {

        	this.isResizeble = true;
            this.$el.addClass( 'timeline-wp-resizer-enabled' );

            if ( 'undefined' == typeof wp.TimelineWP.Resizer ) {
                wp.TimelineWP.Resizer = new wp.TimelineWP.previewer['resizer']({ 'galleryView': this });
            }

        	this.container.packery({
        		itemSelector: '.timeline-wp-single-image',
                gutter: parseInt( wp.TimelineWP.Resizer.get( 'gutter' ) ),
                columnWidth: wp.TimelineWP.Resizer.get( 'size' ),
                rowHeight: wp.TimelineWP.Resizer.get( 'size' ),
    		});

            this.container.on( 'layoutComplete', this.updateItemsIndex );
            this.container.on( 'dragItemPositioned', this.updateItemsIndex );
        },

        disableResizeble: function() {
    		this.isResizeble = false;
            this.$el.removeClass( 'timeline-wp-resizer-enabled' );
            this.container.packery( 'destroy' );
        },

        bindDraggabillyEvents: function( item ){
        	if ( this.isResizeble ) {
        		this.container.packery( 'bindUIDraggableEvents', item );
        	}
        },

        resetPackary: function() {
            var view = this;

            if ( this.refreshTimeout ) {
                clearTimeout( this.refreshTimeout );
            }

            this.refreshTimeout = setTimeout(function () {        
                view.container.packery();
            }, 200);

        },

        updateItemsIndex: function(){

            var container = this;

            if ( this.updateIndexTimeout ) {
                clearTimeout( this.updateIndexTimeout );
            }
            
            this.updateIndexTimeout = setTimeout( function() {
                var items = $(container).packery('getItemElements');
                $( items ).each( function( i, itemElem ) {
                    $( itemElem ).trigger( 'TimelineWP:updateIndex', { 'index': i } );
                });
            }, 200);

        },

        setPackaryOption: function( option, value ){

            var packaryOptions = this.container.data('packery');
            if ( 'undefined' != typeof packaryOptions ) {
                packaryOptions.options[ option ] = value;
            }

        },

    });

    var TimelineWPGalleryGrid = Backbone.View.extend({

        containerHeight: 0,
        currentRows: 0,
        updateGridTimeout: false,

        initialize: function( args ) {
            var view = this;

            this.galleryView = args.galleryView;
            if ( 'undefined' == typeof wp.TimelineWP.Resizer ) {
                wp.TimelineWP.Resizer = new wp.TimelineWP.previewer['resizer']({ 'galleryView': this.galleryView });
            }
            
            this.containerHeight = this.galleryView.container.height();

            // Listent when gallery type is changing.
            this.listenTo( wp.TimelineWP.Settings, 'change:type', this.checkSettingsType );

            // Listent when gallery gutter is changing.
            this.listenTo( wp.TimelineWP.Settings, 'change:gutter', this.changeGutter );

            // Listen when column width is changing
            this.listenTo( wp.TimelineWP.Resizer, 'change:size', this.updateGrid );

            // On layout complete
            this.galleryView.container.on( 'layoutComplete', function( event ){
                view.updateGrid();
            });

            // Enable current gallery type
            this.checkGalleryType( wp.TimelineWP.Settings.get( 'type' ) );

        },

        checkSettingsType: function( model, value ) {
            this.checkGalleryType( value );
        },

        checkGalleryType: function( type ) {
            if ( 'creative-gallery' == type ) {
                this.$el.hide();
            }else if ( 'custom-grid' == type ) {
                if ( ! wp.TimelineWP.Settings.get( 'helpergrid' ) ) {
                    this.$el.show();
                }

                // Generate grid
                this.generateGrid();
            }
        },

        generateGrid: function() {
            var view = this,
                neededRows = 0,
                columnWidth = wp.TimelineWP.Resizer.get( 'size' ),
                gutter = wp.TimelineWP.Resizer.get( 'gutter' ),
                neededItems = 0,
                neededContainerHeight = 0,
                containerHeight = 0,
                minContainerHeight = 0,
                parentHeight = this.$el.parent().height();

            containerHeight = view.$el.height();
            minContainerHeight = ( columnWidth + gutter ) * 3 - gutter;

            if ( containerHeight < minContainerHeight ) {
                containerHeight = minContainerHeight;
            }

            neededRows = Math.round( ( containerHeight + gutter ) / ( columnWidth + gutter ) ) + 1;
            neededContainerHeight = ( neededRows ) * ( columnWidth + gutter ) - gutter;

            while( containerHeight < neededContainerHeight ) {
                neededContainerHeight = neededContainerHeight - ( columnWidth + gutter );
            }

            this.$el.height( neededContainerHeight );
            $( '#timeline-wp-uploader-container' ).css( 'min-height', minContainerHeight + 'px' );
            if ( neededContainerHeight > parentHeight ) {
                this.$el.parent().height( neededContainerHeight );
            }

            if ( neededRows > this.currentRows ) {

                neededItems = ( neededRows - this.currentRows ) * 12;
                this.currentRows = neededRows;

                for ( var i = 1; i <= neededItems; i++ ) {
                    this.$el.append( '<div class="timeline-wp-grid-item"></div>' );
                }

                this.$el.find( '.timeline-wp-grid-item' ).css( { 'width': columnWidth, 'height' : columnWidth, 'margin-right' : gutter, 'margin-bottom' : gutter } );

            }

        },

        updateGrid: function() {
            var view = this,
                neededRows = 0,
                columnWidth = wp.TimelineWP.Resizer.get( 'size' ),
                gutter = wp.TimelineWP.Resizer.get( 'gutter' ),
                neededItems = 0,
                neededContainerHeight = 0,
                containerHeight = 0,
                packery = view.galleryView.container.data('packery'),
                parentHeight = this.$el.parent().height();

            if ( 'undefined' == typeof packery ) {
                return;
            }

            containerHeight = packery.maxY - packery.gutter;
            minContainerHeight = ( columnWidth + gutter ) * 3 - gutter;

            if ( containerHeight < minContainerHeight ) {
                containerHeight = minContainerHeight;
            }

            neededRows = Math.round( ( containerHeight + gutter ) / ( columnWidth + gutter ) ) + 1;
            neededContainerHeight = ( neededRows ) * ( columnWidth + gutter ) - gutter;

            while( containerHeight < neededContainerHeight ) {
                neededContainerHeight = neededContainerHeight - ( columnWidth + gutter );
            }

            this.$el.height( neededContainerHeight );
            $( '#timeline-wp-uploader-container' ).css( 'min-height', minContainerHeight + 'px' );
            if ( neededContainerHeight > parentHeight ) {
                this.$el.parent().height( neededContainerHeight );
            }

            neededItems = ( neededRows - this.currentRows ) * 12;
            this.currentRows = neededRows;

            for ( var i = 1; i <= neededItems; i++ ) {
                this.$el.append( '<div class="timeline-wp-grid-item"></div>' );
            }

            this.$el.find( '.timeline-wp-grid-item' ).css( { 'width': columnWidth, 'height' : columnWidth, 'margin-right' : gutter, 'margin-bottom' : gutter } );

        },

        changeGutter: function() {
            var view = this,
                neededRows = 0,
                columnWidth = wp.TimelineWP.Resizer.get( 'size' ),
                gutter = wp.TimelineWP.Resizer.get( 'gutter' ),
                neededItems = 0,
                neededContainerHeight = 0,
                containerHeight = 0,
                packery = view.galleryView.container.data('packery');

            if ( 'undefined' == typeof packery ) {
                return;
            }

            containerHeight = packery.maxY - packery.gutter;

            if ( containerHeight < 300 ) {
                containerHeight = 300;
            }

            neededRows = Math.round( ( containerHeight + gutter ) / ( columnWidth + gutter ) ) + 1;
            neededContainerHeight = ( neededRows ) * ( columnWidth + gutter ) - gutter;

            while( containerHeight < neededContainerHeight ) {
                neededContainerHeight = neededContainerHeight - ( columnWidth + gutter );
            }

            this.$el.height( neededContainerHeight );

            this.$el.find( '.timeline-wp-grid-item' ).css( { 'width': columnWidth, 'height' : columnWidth, 'margin-right' : gutter, 'margin-bottom' : gutter } );

        }

    });

    TimelineWP.previewer = {
        'resizer' : TimelineWPGalleryResizer,
        'helpergrid' : TimelineWPGalleryGrid,
        'view' : TimelineWPGalleryView
    }

}( jQuery, wp.TimelineWP ))

