// com.tts.initial.html5.iframe
// HTML4 / HTML5: No differences
define(["jquery"], function (jq) {

	"use strict";

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

		function createFrame(shellElement) {

            /**
             * available sandbox attribute exceptions:
			 *
             *   allow-same-origin - allows the iframe to access cookies and local storage from the parent, as if it came from the same domain.
             *   allow-top-navigation - allows the iframe to navigate the parent to a different URL.
             *   allow-forms - allows form submission
             *   allow-scripts - allows JavaScript execution
             *   allow-popups - allows the iframe to open new windows or tabs
             *   allow-pointer-lock - allows pointer lock
             *   allow-presentation - allows Web content to access presentation displays and use them for presenting Web content.
             */

			var frameElement = jq(document.createElement("iframe")),
                iFrameAttributes = {
                    "sandbox" : "allow-scripts allow-same-origin allow-popups allow-presentation",
                    "src" : metadata.parameters.get( "url" ),
                    "frameBorder" : "0",
                    "overflow" : "hidden"
                },
	            optionalAttributes = [
		            "name",
		            "scrolling",
		            "allow",
		            "allowTransparency"
	            ];

			jq.each( optionalAttributes, function( index, attributeName ){
				var attrParamValue = metadata.parameters.get( attributeName );
				if( attrParamValue.length > 0 ){
					iFrameAttributes[attributeName] = attrParamValue;
				}
			});

			frameElement
				.attr( iFrameAttributes )
				.css({
                    "border" : "0",
					"width" : metadata.getWidth(),
					"height" : metadata.getHeight()
				});

			shellElement.append(frameElement);	
		}

		function removeFrame(shellElement){
			shellElement.empty();
		}

		// create an object shield so we are able to select and drag element
		function createAuthoringShield(shellElement) {
			var authoringView = jq( document.createElement("div") );
			authoringView.css({
				"width" : "100%",
				"height" : "100%",
				"position" : "absolute",
				"opacity" : "0.15",
				"background-image" : "url(\"" + context.getPath() + "invis.png\")",
				"text-align" : "center",
				"line-height" : metadata.getHeight() + "px",
				"font-size" : "24px"
			})
			.text( "iFrame" );
			shellElement.append( authoringView );
		}

		function createPreviewShield(shellElement) {
			var authoringView = jq( document.createElement("div") );
			authoringView.css({
				"width" : "100%",
				"height" : "100%",
				"position" : "absolute",
				"opacity" : "0.15",
				"background-image" : "url(\"" + context.getPath() + "invis.png\")",
				"text-align" : "center",
				"line-height" : metadata.getHeight() + "px",
				"font-size" : "24px"
			})
			.text( "Not available in preview" );
			shellElement.append( authoringView );
		}
		
		// revealing public API
		return {
			onLoading : function() {
				context.page.event.bindOnEnter(this);
				context.page.event.bindOnExit(this);

				if( context.stage.isInAuthoringMode() ) {
					createAuthoringShield(jq(context.getElement()));
					return;
				}
				if( context.stage.isInPreviewMode() ) {
					createPreviewShield(jq(context.getElement()));
					return;
				}
			},
			onEnterPage : function() {
				if( context.stage.isInAuthoringMode() ) {
					createAuthoringShield(jq(context.getElement()));
					return;
				}
				if( context.stage.isInPreviewMode() ) {
					createPreviewShield(jq(context.getElement()));
					return;
				}
				createFrame(jq(context.getElement()));
			},
			onExitPage : function() {
				removeFrame(jq(context.getElement()));
			}
		};
	};
});
