( function ( $ ) {
    'use strict';
    $( document ).ready( function ( $ ) {
	$( '.mfc-bg-color-field' ).wpColorPicker();
	$( '.mfc-text-color-field' ).wpColorPicker();
    } );
} )( jQuery );

( function ( $, CategoryImage ) {

    var _uploadFrame;
    var debugEnabled = false;

    var $mUploadButton = $( '#mfc_category_image_upload_button' );
    var $mRemoveButton = $( '#mfc_category_image_remove_button' );
    var $mImageHolder = $( '#mfc_category_image_imageholder' );
    var $mAttachment = $( '#mfc_category_image_attachment' );


    //var clearAttachment = function(){
    //	$mAttachment.val('');
    //	$mImageHolder.html('');
    //};


    CategoryImage = $.extend( CategoryImage, {

	options: {
	    holder_max_width: 180
	},

	debug: function ( message ) {
	    if ( window.console && debugEnabled ) {
		console.log( message );
	    }
	},

	hasCategoryImage: function () {
	    return ( $mAttachment.val() !== '' );
	},

	createPlaceHolder: function ( _src ) {

	    $mImageHolder.html( '<img id="mfc_category_image_image" style="diplay:none;" />' );

	    $( '#mfc_category_image_image' ).load( function () {

		var $el = $( this );

		var width = $el.width();
		var height = $el.height();
		var ratio = 0;

		var maxWidth = CategoryImage.options.holder_max_width;

		if ( width > maxWidth ) {
		    ratio = maxWidth / width;

		    $el.width( maxWidth );
		    $el.height( height * ratio );
		}

		$el.fadeIn( 'fast' );

	    } ).attr( {
		src: _src
	    } );
	},
	toggleRemoveButton: function () {

	    CategoryImage.debug( CategoryImage.hasCategoryImage() );


	    if ( !CategoryImage.hasCategoryImage() ) {
		$mRemoveButton.css( 'display', 'none' );
	    } else {
		$mRemoveButton.css( 'display', 'inline-block' );
	    }

	},

	removePlaceHolder: function () {
	    $mImageHolder.html( '' );
	},

	events: {

	    onClickShowMediaManager: function ( e ) {

		e.preventDefault();

		if ( _uploadFrame ) {
		    _uploadFrame.open();
		    return;
		}

		var _mediaParams = {
		    title: CategoryImage.label.title,
		    button: {
			text: CategoryImage.label.button
		    },
		    library: {
			type: 'image'
		    },
		    multiple: false
		};

		if ( CategoryImage.hasCategoryImage() ) {
		    _mediaParams = $.extend( _mediaParams, {
			editing: true
		    } );
		}

		_uploadFrame = wp.media.frames.file_frame = wp.media( _mediaParams );
		_uploadFrame.on( 'select', CategoryImage.events.onSelectAttachmentFromMediaManager );
		_uploadFrame.on( 'open', CategoryImage.events.onOpenMediaManager );
		_uploadFrame.open();

	    },

	    onClickRemoveAttachment: function ( e ) {
		e.preventDefault();

		$mAttachment.val( '' );

		CategoryImage.removePlaceHolder();
		CategoryImage.toggleRemoveButton();
	    },

	    onOpenMediaManager: function () {

		if ( CategoryImage.hasCategoryImage() ) {

		    var selection = _uploadFrame.state().get( 'selection' );
		    var id = parseInt( $mAttachment.val(), 10 );

		    CategoryImage.debug( id );

		    var attachment = wp.media.attachment( id );

		    attachment.fetch();

		    selection.add( attachment ? [ attachment ] : [ ] );
		}
	    },
	    onSelectAttachmentFromMediaManager: function () {

		var _attachment = _uploadFrame.state().get( 'selection' ).first().toJSON();

		CategoryImage.debug( _attachment );

		if ( _attachment ) {
		    CategoryImage.createPlaceHolder( _attachment.url );
		    $mAttachment.val( _attachment.id );
		}

		CategoryImage.toggleRemoveButton();
		_uploadFrame.close();
	    }
	}
    } );


    $mUploadButton.on( 'click', CategoryImage.events.onClickShowMediaManager );
    $mRemoveButton.on( 'click', CategoryImage.events.onClickRemoveAttachment );

    CategoryImage.toggleRemoveButton();

} )( jQuery, ( typeof CategoryImage === 'undefined' ? { } : CategoryImage ) );