// com.tts.initial.html5.blur
define( [
	"./offset.service",
	"jquery"
],
	function (
		OffsetService,
		jq
	) {

		"use strict";

		/**
		 * @constructor
		 */
		return function ( context, metadata ) {

			var shellElement,
				offsetService = new OffsetService( context ),
				isStandardPlayer = context.getPlayerName() === "standard",
				isInAuthoringMode = false,
				blurImage,
				inlineSVG,
				blurOutside = metadata.parameters.asBool( "blur_outside", false ),
				intensity = 5;

			// create an object shield so we are able to select and drag element
			function createAuthoringShield( shellElement ) {
				shellElement.append( jq( document.createElement( "div" ) )
					.css( {
						"width": "100%",
						"height": "100%",
						"display": "block",
						"background-image": "url(\"" + context.getPath() + "invis.png\")",
						"overflow": "hidden"
					} ) );
			}

			function loadImage() {
				var result = {},
					url,
					bgImageNode,
					bgImage,
					img;

				if ( isStandardPlayer ) {
					bgImageNode = jq( context.getPositioningElement() ).closest( '.ttclasssimulation' );
					bgImage = bgImageNode.children( '.ttclasssimulationimgbg' );
					result.fileNameURL = bgImage.attr( 'src' );
					result.width = bgImage.width();
					result.height = bgImage.height();
					result.left = bgImageNode.position().left;
					result.top = bgImageNode.position().top;
				} else {	
					url = jq( context.getPositioningElement() ).closest( '.ttclasssimulation' ).css( "background-image" ).replace( /"/g, "" ).replace( "url(", "" );
					url = url.slice( 0, -1 );
					result.fileNameURL = url;
					img = new Image();
					img.src = url;
					result.width = img.width;
					result.height = img.height;
					img = null;
					result.left = parseInt(jq( context.getPositioningElement() ).closest( '.ttclasssimulation' ).css( "left" ).replace( "px", "" ));
					result.top = parseInt(jq( context.getPositioningElement() ).closest( '.ttclasssimulation' ).css( "top" ).replace( "px", "" ));
				}

				return result;
		}

			function createBlurArea() {
				var image = loadImage(),
					positionX = offsetService.getGlobalOffset( context.getPositioningElement() ).left,
					positionY = offsetService.getGlobalOffset( context.getPositioningElement() ).top,
					size = {
						width: metadata.getWidth(),
						height: metadata.getHeight()
					},
					filter,
					gaussianBlur,
					clipPath,
					rect,
					imageWithClipPath,
					imageWithFullBlur;

				blurImage = document.createElement( "div" );

				blurImage.setAttribute( "id", "blurImage" + metadata.getId() );
				blurImage.style.width = image.width + "px";
				blurImage.style.height = image.height + "px";
				blurImage.style.position = "absolute";
				blurImage.style.top = ( -positionY + image.top) + "px";
				blurImage.style.left = ( -positionX + image.left) + "px";
				
				inlineSVG = document.createElementNS( "http://www.w3.org/2000/svg", "svg" );
				inlineSVG.setAttributeNS( null, "viewbox", "0 0 " + image.width + " " + image.height );
				inlineSVG.setAttributeNS( null, "width", image.width );
				inlineSVG.setAttributeNS( null, "height", image.height );

				filter = document.createElementNS( "http://www.w3.org/2000/svg", "filter" );
				filter.setAttributeNS( null, "id", "blur-image" + metadata.getId() );

				gaussianBlur = document.createElementNS( "http://www.w3.org/2000/svg", "feGaussianBlur" );
				gaussianBlur.setAttributeNS( null, "in", "SourceGraphic" );
				gaussianBlur.setAttributeNS( null, "stdDeviation", intensity );

				clipPath = document.createElementNS( "http://www.w3.org/2000/svg", "clipPath" );
				clipPath.setAttributeNS( null, "id", "clip-path" + metadata.getId());

				rect = document.createElementNS( "http://www.w3.org/2000/svg", "rect" );
				rect.setAttributeNS( null, "width", size.width );
				rect.setAttributeNS( null, "height", size.height );
				rect.setAttributeNS( null, "x", positionX - image.left );
				rect.setAttributeNS( null, "y", positionY - image.top );
				rect.setAttributeNS( null, "stroke-width", 0 );
				rect.setAttributeNS( null, "fill", "white" );
				rect.setAttributeNS( null, "opacity", "1" );

				filter.appendChild( gaussianBlur );
				clipPath.appendChild( rect );

				imageWithClipPath = document.createElementNS( "http://www.w3.org/2000/svg", "image" );
				imageWithClipPath.setAttributeNS( null, "href", image.fileNameURL );
				imageWithClipPath.setAttributeNS( null, "width", image.width );
				imageWithClipPath.setAttributeNS( null, "height", image.height );
				imageWithClipPath.setAttributeNS( null, "clip-path", "url(#clip-path"  + metadata.getId() + ")" );

				imageWithFullBlur = document.createElementNS( "http://www.w3.org/2000/svg", "image" );
				imageWithFullBlur.setAttributeNS( null, "href", image.fileNameURL );
				imageWithFullBlur.setAttributeNS( null, "width", image.width );
				imageWithFullBlur.setAttributeNS( null, "height", image.height );
				imageWithFullBlur.setAttributeNS( null, "filter", "url(#blur-image" + metadata.getId() + ")" );

				if ( blurOutside ) {
					inlineSVG.appendChild( filter );
					inlineSVG.appendChild( clipPath );
					inlineSVG.appendChild( imageWithFullBlur );
					inlineSVG.appendChild( imageWithClipPath );
				} else {
					imageWithClipPath.setAttributeNS( null, "filter", "url(#blur-image" + metadata.getId() + ")" );

					inlineSVG.appendChild( filter );
					inlineSVG.appendChild( clipPath );
					inlineSVG.appendChild( imageWithClipPath );
				}

				blurImage.appendChild( inlineSVG );
			}

			function removeBlur() {
				jq( blurImage ).remove();
				blurImage = null;
				inlineSVG = null;
            }

		// revealing public API
		return {
			onLoading: function () {
				context.page.event.bindOnEnter( this );
				context.page.event.bindOnExit( this );
				shellElement = context.getElement();
				isInAuthoringMode = !!context.stage.isInAuthoringMode();
				if ( isInAuthoringMode ) {
					createAuthoringShield( jq(shellElement) );
				}
			},
			onEnterPage: function () {
				createBlurArea();
				shellElement.appendChild( blurImage );
			},
			onExitPage: function () {
				removeBlur();
			}
		};
	};
});
