/* global tinymce */

tinymce.PluginManager.add( 'wpeditimage', function( editor ) {

	var toolbar, serializer, touchOnImage, pasteInCaption,

		each = tinymce.each,

		trim = tinymce.trim,

		iOS = tinymce.Env.iOS;

	function isPlaceholder( node ) {

		return !! ( editor.dom.getAttrib( node, 'data-mce-placeholder' ) || editor.dom.getAttrib( node, 'data-mce-object' ) );

	}

	editor.addButton( 'wp_img_remove', {

		tooltip: 'Remove',

		icon: 'dashicon dashicons-no',

		onclick: function() {

			removeImage( editor.selection.getNode() );

		}

	} );

	editor.addButton( 'wp_img_edit', {

		tooltip: 'Edit|button', // '|button' is not displayed, only used for context.

		icon: 'dashicon dashicons-edit',

		onclick: function() {

			editImage( editor.selection.getNode() );

		}

	} );

	each( {

		alignleft: 'Align left',

		aligncenter: 'Align center',

		alignright: 'Align right',

		alignnone: 'No alignment'

	}, function( tooltip, name ) {

		var direction = name.slice( 5 );

		editor.addButton( 'wp_img_' + name, {

			tooltip: tooltip,

			icon: 'dashicon dashicons-align-' + direction,

			cmd: 'alignnone' === name ? 'wpAlignNone' : 'Justify' + direction.slice( 0, 1 ).toUpperCase() + direction.slice( 1 ),

			onPostRender: function() {

				var self = this;

				editor.on( 'NodeChange', function( event ) {

					var node;

					// Don't bother.

					if ( event.element.nodeName !== 'IMG' ) {

						return;

					}

					node = editor.dom.getParent( event.element, '.wp-caption' ) || event.element;

					if ( 'alignnone' === name ) {

						self.active( ! /\balign(left|center|right)\b/.test( node.className ) );

					} else {

						self.active( editor.dom.hasClass( node, name ) );

					}

				} );

			}

		} );

	} );

	editor.once( 'preinit', function() {

		if ( editor.wp && editor.wp._createToolbar ) {

			toolbar = editor.wp._createToolbar( [

				'wp_img_alignleft',

				'wp_img_aligncenter',

				'wp_img_alignright',

				'wp_img_alignnone',

				'wp_img_edit',

				'wp_img_remove'

			] );

		}

	} );

	editor.on( 'wptoolbar', function( event ) {

		if ( event.element.nodeName === 'IMG' && ! isPlaceholder( event.element ) ) {

			event.toolbar = toolbar;

		}

	} );

	function isNonEditable( node ) {

		var parent = editor.$( node ).parents( '[contenteditable]' );

		return parent && parent.attr( 'contenteditable' ) === 'false';

	}

	// Safari on iOS fails to select images in contentEditoble mode on touch.

	// Select them again.

	if ( iOS ) {

		editor.on( 'init', function() {

			editor.on( 'touchstart', function( event ) {

				if ( event.target.nodeName === 'IMG' && ! isNonEditable( event.target ) ) {

					touchOnImage = true;

				}

			});

			editor.dom.bind( editor.getDoc(), 'touchmove', function() {

				touchOnImage = false;

			});

			editor.on( 'touchend', function( event ) {

				if ( touchOnImage && event.target.nodeName === 'IMG' && ! isNonEditable( event.target ) ) {

					var node = event.target;

					touchOnImage = false;

					window.setTimeout( function() {

						editor.selection.select( node );

						editor.nodeChanged();

					}, 100 );

				} else if ( toolbar ) {

					toolbar.hide();

				}

			});

		});

	}

	function parseShortcode( content ) {

		return content.replace( /(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function( a, b, c ) {

			var id, align, classes, caption, img, width;

			id = b.match( /id=['"]([^'"]*)['"] ?/ );

			if ( id ) {

				b = b.replace( id[0], '' );

			}

			align = b.match( /align=['"]([^'"]*)['"] ?/ );

			if ( align ) {

				b = b.replace( align[0], '' );

			}

			classes = b.match( /class=['"]([^'"]*)['"] ?/ );

			if ( classes ) {

				b = b.replace( classes[0], '' );

			}

			width = b.match( /width=['"]([0-9]*)['"] ?/ );

			if ( width ) {

				b = b.replace( width[0], '' );

			}

			c = trim( c );

			img = c.match( /((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)([\s\S]*)/i );

			if ( img && img[2] ) {

				caption = trim( img[2] );

				img = trim( img[1] );

			} else {

				// Old captions shortcode style.

				caption = trim( b ).replace( /caption=['"]/, '' ).replace( /['"]$/, '' );

				img = c;

			}

			id = ( id && id[1] ) ? id[1].replace( /[<>&]+/g,  '' ) : '';

			align = ( align && align[1] ) ? align[1] : 'alignnone';

			classes = ( classes && classes[1] ) ? ' ' + classes[1].replace( /[<>&]+/g,  '' ) : '';

			if ( ! width && img ) {

				width = img.match( /width=['"]([0-9]*)['"]/ );

			}

			if ( width && width[1] ) {

				width = width[1];

			}

			if ( ! width || ! caption ) {

				return c;

			}

			width = parseInt( width, 10 );

			if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {

				width += 10;

			}

			return '<div class="mceTemp"><dl id="' + id + '" class="wp-caption ' + align + classes + '" style="width: ' + width + 'px">' +

				'<dt class="wp-caption-dt">'+ img +'</dt><dd class="wp-caption-dd">'+ caption +'</dd></dl></div>';

		});

	}

	function getShortcode( content ) {

		return content.replace( /(?:<div [^>]+mceTemp[^>]+>)?\s*(<dl [^>]+wp-caption[^>]+>[\s\S]+?<\/dl>)\s*(?:<\/div>)?/g, function( all, dl ) {

			var out = '';

			if ( dl.indexOf('<img ') === -1 || dl.indexOf('</p>') !== -1 ) {

				// Broken caption. The user managed to drag the image out or type in the wrapper div?

				// Remove the <dl>, <dd> and <dt> and return the remaining text.

				return dl.replace( /<d[ldt]( [^>]+)?>/g, '' ).replace( /<\/d[ldt]>/g, '' );

			}

			out = dl.replace( /\s*<dl ([^>]+)>\s*<dt [^>]+>([\s\S]+?)<\/dt>\s*<dd [^>]+>([\s\S]*?)<\/dd>\s*<\/dl>\s*/gi, function( a, b, c, caption ) {

				var id, classes, align, width;

				width = c.match( /width="([0-9]*)"/ );

				width = ( width && width[1] ) ? width[1] : '';

				classes = b.match( /class="([^"]*)"/ );

				classes = ( classes && classes[1] ) ? classes[1] : '';

				align = classes.match( /align[a-z]+/i ) || 'alignnone';

				if ( ! width || ! caption ) {

					if ( 'alignnone' !== align[0] ) {

						c = c.replace( /><img/, ' class="' + align[0] + '"><img' );

					}

					return c;

				}

				id = b.match( /id="([^"]*)"/ );

				id = ( id && id[1] ) ? id[1] : '';

				classes = classes.replace( /wp-caption ?|align[a-z]+ ?/gi, '' );

				if ( classes ) {

					classes = ' class="' + classes + '"';

				}

				caption = caption.replace( /\r\n|\r/g, '\n' ).replace( /<[a-zA-Z0-9]+( [^<>]+)?>/g, function( a ) {

					// No line breaks inside HTML tags.

					return a.replace( /[\r\n\t]+/, ' ' );

				});

				// Convert remaining line breaks to <br>.

				caption = caption.replace( /\s*\n\s*/g, '<br />' );

				return '[caption id="' + id + '" align="' + align + '" width="' + width + '"' + classes + ']' + c + ' ' + caption + '[/caption]';

			});

			if ( out.indexOf('[caption') === -1 ) {

				// The caption html seems broken, try to find the image that may be wrapped in a link

				// and may be followed by <p> with the caption text.

				out = dl.replace( /[\s\S]*?((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)(<p>[\s\S]*<\/p>)?[\s\S]*/gi, '<p>$1</p>$2' );

			}

			return out;

		});

	}

	function extractImageData( imageNode ) {

		var classes, extraClasses, metadata, captionBlock, caption, link, width, height,

			captionClassName = [],

			dom = editor.dom,

			isIntRegExp = /^\d+$/;

		// Default attributes.

		metadata = {

			attachment_id: false,

			size: 'custom',

			caption: '',

			align: 'none',

			extraClasses: '',

			link: false,

			linkUrl: '',

			linkClassName: '',

			linkTargetBlank: false,

			linkRel: '',

			title: ''

		};

		metadata.url = dom.getAttrib( imageNode, 'src' );

		metadata.alt = dom.getAttrib( imageNode, 'alt' );

		metadata.title = dom.getAttrib( imageNode, 'title' );

		width = dom.getAttrib( imageNode, 'width' );

		height = dom.getAttrib( imageNode, 'height' );

		if ( ! isIntRegExp.test( width ) || parseInt( width, 10 ) < 1 ) {

			width = imageNode.naturalWidth || imageNode.width;

		}

		if ( ! isIntRegExp.test( height ) || parseInt( height, 10 ) < 1 ) {

			height = imageNode.naturalHeight || imageNode.height;

		}

		metadata.customWidth = metadata.width = width;

		metadata.customHeight = metadata.height = height;

		classes = tinymce.explode( imageNode.className, ' ' );

		extraClasses = [];

		tinymce.each( classes, function( name ) {

			if ( /^wp-image/.test( name ) ) {

				metadata.attachment_id = parseInt( name.replace( 'wp-image-', '' ), 10 );

			} else if ( /^align/.test( name ) ) {

				metadata.align = name.replace( 'align', '' );

			} else if ( /^size/.test( name ) ) {

				metadata.size = name.replace( 'size-', '' );

			} else {

				extraClasses.push( name );

			}

		} );

		metadata.extraClasses = extraClasses.join( ' ' );

		// Extract caption.

		captionBlock = dom.getParents( imageNode, '.wp-caption' );

		if ( captionBlock.length ) {

			captionBlock = captionBlock[0];

			classes = captionBlock.className.split( ' ' );

			tinymce.each( classes, function( name ) {

				if ( /^align/.test( name ) ) {

					metadata.align = name.replace( 'align', '' );

				} else if ( name && name !== 'wp-caption' ) {

					captionClassName.push( name );

				}

			} );

			metadata.captionClassName = captionClassName.join( ' ' );

			caption = dom.select( 'dd.wp-caption-dd', captionBlock );

			if ( caption.length ) {

				caption = caption[0];

				metadata.caption = editor.serializer.serialize( caption )

					.replace( /<br[^>]*>/g, '$&\n' ).replace( /^<p>/, '' ).replace( /<\/p>$/, '' );

			}

		}

		// Extract linkTo.

		if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' ) {

			link = imageNode.parentNode;