/**
 * @summary Plugin Administration.
 *
 * Takes care of changes in the inputs and image selection.
 *
 * @since 0.1.0
 *
 * @var   string  ID       The unique ID of this instance.
 * @var   string  terms    The terms to be animated.
 * @var   string  opts     The plugin options.
 * @var   string  selector The plugin selector name - #id.
 * @var   string  path     The plugin directory.
 *
 * @see js/actus-aninated-tags.js
 * @global actusAnitID, actusAnitTerms, actusAnitOpts, actusAnitDir, actusAnitSelector;
 *
 * @param array  actusAnitParamsAdmin  Parameters received from PHP call.
 * @return  Shows a spinning gear during the saving proccess.
*/


(function( $ ){

    /**
     * Saves input changes.
     *
     * Detects an input change, proccesses the value accordingly and saves it.
     *
     * @var string  $n  Name of input.
     * @var string  $v  Value of input.
     *
     * @global string    $actus_anit_terms    The terms to be animated.
     */
    $( 'body' ).on( 'change', '.actus-anit-input', function() {
        var n = $.trim( $( this ).attr( 'name' ) ),
            v = $( this ).val();

        if ( n == 'ACTUS_ANIT_height' ) {
            $( '.actus-anit-cloud' ).css( 'height', v + 'px' );
        }
        if ( n == 'ACTUS_ANIT_density' ) {
            if ( parseInt( v ) > 50 ) {
                v = 50;
            }
            if ( parseInt( v ) < 1 ) {
                v = 1;
            }
            $( this ).val( v );
            opts.density = v;
            actusAnitOpts.density = v;
            actusAnitArgs.visibleTags = 0;
            $( '.actus-animated-tag' ).remove();
            actusAnitStart();
        }
        // Save value
        itm = this;
        $( '.actus-saving' ).fadeIn( 200 );
        $.post( actusAnitParamsAdmin.ajax_url, {
           _ajax_nonce: actusAnitParamsAdmin.nonce,
            action: 'actus_anit_save',
            name: n,
            value: v
        }, function(data) {
            $( '.actus-saving' ).fadeOut( 200 );
        });
    });



    $( 'body' ).on( 'click', '.actus-anit-add-image', function() {
		
		
        // MEDIA LIBRARY SETUP
        actus_anit_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Select Image',
            button: {
                text: 'Add Image'
            },
            multiple: false
        });
        // SELECT IMAGE
        actus_anit_uploader.on('select', function() {
            var attachment = actus_anit_uploader.state().get('selection').first().toJSON();
            var img_id     = attachment['id'];
            var img_url    = attachment['url']; 

			ANIT_setImage( img_url );

        });
        // MEDIA LIBRARY OPEN
        actus_anit_uploader.on('open', function(){
            var selection = actus_anit_uploader.state().get('selection');
        });
        actus_anit_uploader.open();
        return false;
    });

	

    /**
     * Changes background image.
     *
     * @var string  $n  Name of input.
     * @var string  $v  Filename of the clicked image.
     *
     * @global string    $actus_anit_terms    The terms to be animated.
     */
    $( 'body' ).on( 'click', '.actus-anit-thumb', function() {
        var fname = $.trim( $( this ).attr( 'alt' ) );
		fname = actusAnitDir + 'img/back/' + fname;
		
        $( '.actus-anit-thumbs .actus-anit-thumb' ).removeClass( 'selected' );
        $( this ).addClass( 'selected' );
   
        itm = this;
		ANIT_setImage( fname );
    });



	function ANIT_setImage( fname ){
		     
        if ( fname != 'random' )
            $( '.actus-anit-preview .actus-anit-cloud' ).css(
                'background-image', 'url( ' + fname + ' )'
            );
		
        $( '.actus-saving' ).fadeIn( 200 );
        $.post( actusAnitParamsAdmin.ajax_url, {
            _ajax_nonce: actusAnitParamsAdmin.nonce,
            action: "actus_anit_save",
            name: 'ACTUS_ANIT_background',
            value: fname
        }, function(data) {
            $( '.actus-saving' ).fadeOut( 200 );
        });
		
	}




})(jQuery);