window.CopyTheCodeToClipboard = (function(window, document, navigator) {
	var textArea,
		copy;

	function isOS() {
		return navigator.userAgent.match( /ipad|iphone/i );
	}

	function createTextArea(text) {
		textArea       = document.createElement( 'textArea' );
		textArea.value = text;
		document.body.appendChild( textArea );
	}

	function selectText() {
		var range,
			selection;

		if (isOS()) {
			range = document.createRange();
			range.selectNodeContents( textArea );
			selection = window.getSelection();
			selection.removeAllRanges();
			selection.addRange( range );
			textArea.setSelectionRange( 0, 999999 );
		} else {
			textArea.select();
		}
	}

	function copyToClipboard() {
		document.execCommand( 'copy' );
		document.body.removeChild( textArea );
	}

	copy = function(text) {
		createTextArea( text );
		selectText();
		copyToClipboard();
	};

	return {
		copy: copy
	};
})( window, document, navigator );


(function($) {

	CopyTheCodePage = {

		/**
		 * Init
		 */
		init: function()
		{
			this._bind();
			this._preview();
			$( '.copy-the-code .nav-tab-wrapper > .nav-tab:first-child' ).addClass( 'nav-tab-active' );
		},

		_bind: function()
		{
			$( document ).on( 'input', '[name="button-text"], [name="button-copy-text"], [name="button-title"]', CopyTheCodePage._preview );
			$( document ).on( 'change', '[name="style"], [name="button-position"]', CopyTheCodePage._preview );
			$( document ).on( 'click', '.copy-the-code-button', CopyTheCodePage.copyCode );
		},

		/**
		 * Copy to Clipboard
		 */
		copyCode: function( event )
		{
			var btn     = $( this ),
				preview = $( '#preview' ).find( 'pre' ),
				source  = btn.parents( '.copy-the-code-wrap' ).find( preview ),
				oldText = btn.text();

			var buttonMarkup     = $( '.copy-the-code-wrap' ).html() || '';
			var copy_as          = 'text';
			var button_text      = $( '[name="button-text"]' ).val() || '';
			var button_copy_text = $( '[name="button-copy-text"]' ).val() || '';
			var style            = $( '[name="style"]' ).val() || 'button';

			if ( 'text' === copy_as ) {
				var html = source.text();

				// Remove the 'copy' text.
				var tempHTML = html.replace( button_text, '' );

			} else {
				var html = source.html();

				// Remove the <copy> button.
				var tempHTML = html.replace( buttonMarkup, '' );
			}

			// Copy the Code.
			var tempPre = $( "<textarea id='temp-pre'>" ),
				temp    = $( "<textarea>" ),
				brRegex = '/<br\s*[/\]?>/gi';

			// Append temporary elements to DOM.
			$( "body" ).append( temp );
			$( "body" ).append( tempPre );

			// Set temporary HTML markup.
			tempPre.html( tempHTML );

			// Format the HTML markup.
			temp.val( tempPre.text().replace( brRegex, "\r\n" ) ).select();

			// Support for IOS devices too.
			CopyTheCodeToClipboard.copy( tempPre.text().replace( brRegex, "\r\n" ) );

			// Remove temporary elements.
			temp.remove();
			tempPre.remove();

			// Copied!
			btn.text( button_copy_text );
			setTimeout(
				function() {
					if ( 'svg-icon' === style ) {
						btn.html( copyTheCode.buttonSvg );
					} else {
						btn.text( oldText );
					}
				},
				1000
			);
		},

		_preview: function() {
			var button_position = $( '[name="button-position"]' ).val() || '';
			// var value = $( 'select[name="copy-as"]' ).children("option:selected").val() || '';
			var style            = $( '[name="style"]' ).val() || 'button';
			var button_text      = $( '[name="button-text"]' ).val() || '';
			var button_copy_text = $( '[name="button-copy-text"]' ).val() || '';
			var button_title     = $( '[name="button-title"]' ).val() || '';
			var buttonMarkup     = copyTheCode.buttonMarkup || '';

			var markup = '<div class="outer">';
			markup    += '<div class="inner copy-as-text">';
			markup    += '<p>Sample Preview 1</p>';
			markup    += '<pre id="pre-html"></pre>';
			markup    += '</div>';

			markup += '<div class="inner copy-as-html">';
			markup += '<p>Sample Preview 2</p>';
			markup += '<pre id="pre-text"></pre>';
			markup += '</div>';

			markup += '</div>';

			$( '#preview' ).html( markup );
			$( '#preview #pre-html' ).html( copyTheCode.previewMarkup );
			$( '#preview #pre-text' ).text( copyTheCode.previewMarkup );

			if ( 'cover' !== style && 'outside' === button_position ) {
				$( '#preview pre' ).wrap( '<span class="copy-the-code-style-' + style + ' copy-the-code-wrap copy-the-code-outside-wrap"></span>' );
				$( '#preview pre' ).parent().prepend( '<div class="copy-the-code-outside">' + buttonMarkup + '</div>' );
			} else {
				$( '#preview pre' ).wrap( '<span class="copy-the-code-style-' + style + ' copy-the-code-wrap copy-the-code-inside-wrap"></span>' );
				$( '#preview pre' ).append( buttonMarkup );
			}

			$( '#preview' ).find( '.copy-the-code-button' ).attr( 'title', button_title );
			$( '#preview' ).find( '.copy-the-code-button' ).attr( 'style', style );

			if ( 'svg-icon' === style ) {
				$( '[name="button-text"]' ).parents( 'tr' ).hide();
				$( '[name="button-position"]' ).parents( 'tr' ).hide();
			} else {
				$( '[name="button-text"]' ).parents( 'tr' ).show();
				$( '[name="button-position"]' ).parents( 'tr' ).show();
			}
			if ( 'cover' === style ) {
				$( '[name="button-position"]' ).parents( 'tr' ).hide();
			} else {
				$( '[name="button-position"]' ).parents( 'tr' ).show();
			}

			switch ( style ) {
				case 'svg-icon':
						$( '#preview' ).find( '.copy-the-code-button' ).html( copyTheCode.buttonSvg );
					break;
				case 'cover':
				case 'button':
				default:
					$( '#preview' ).find( '.copy-the-code-button' ).html( button_text );
					break;
			}

			$( document ).trigger( 'copy-the-code-style-change', style );

		},

		_switch_tab: function( event ) {
			$( this ).siblings().removeClass( 'nav-tab-active' );
			$( this ).addClass( 'nav-tab-active' );
			$( '#' + $( this ).attr( 'data-id' ) ).siblings().hide();
			$( '#' + $( this ).attr( 'data-id' ) ).show();
		}

	};

	/**
	 * Initialization
	 */
	$(
		function() {
			CopyTheCodePage.init();
		}
	);

})( jQuery );