// com.tts.initial.html5.sl.pagevisited
define(["jquery"], function (jq) {

	"use strict";

	var PageSenderListenerFactory = function( options, context, metadata ){

			var type = metadata.parameters.get("type", "sender"),
				id = metadata.parameters.get("id", 1),
				globalValueCounter = new GlobalPageVisitProvider({
					"variableId": "sLP" + id,
					"groupId": "tts.senderListener"
				}, context);

			return {
				create: function () {

					if (context.stage.isInAuthoringMode()) {
						return new AuthoringView(globalValueCounter, context, {
							"bgImage": "url(\"" + context.getPath() + "invis.png\")",
							"caption": type === "sender" ? "sender" : "listener"
						});
					}

					if (type === "listener") {
						return new ChildShowingListener(globalValueCounter, context, {
							"scInstance": options.scInstance
						});
					}

					return new HiddenSender(globalValueCounter, context, {
						"listenerClassId": options.listenerClassId
					});
				}
			};
		},

		GlobalPageVisitProvider = function( options, context ){

			function isTriggered() {
				return (context.stage.variable.get( options.variableId, options.groupId ));
			}

			return {
				reset : function(){
					context.stage.variable.set(options.variableId, false, options.groupId);
				},
				applyValue : function(){
					context.stage.variable.set(options.variableId, true, options.groupId);
				},
				checkValue : isTriggered
			};
		},

		HiddenSender = function( globalValueMediator, context, options ){

			var	button = jq(document.createElement("span"))
				.css({
					"width" : "100%",
					"height" : "100%",
					"display" : "block"
				});

			function onUserAction() {
                globalValueMediator.applyValue();
				jq("." + options.listenerClassId).trigger("senderListenerSamePageRefresh");
			}

			return {
				getElement : function(){
					return button;
				},
				bindEvents : function(){},
				removeEvents : function(){},
				count : function(){
                    onUserAction();
				},
				refresh : function(){
				}
			};
		},

		ChildShowingListener = function( globalValueMediator, context, options ){

			var shellElement = jq( context.getElement() ),
				positioningElement = jq( context.getPositioningElement() ),
				isHTML4Player = context.getPlayerName() === "standard",
				view = jq(document.createElement("span"))
					.css({
						"width" : "100%",
						"height" : "100%",
						"display" : "block",
						"visibility" : "hidden"
					});

			function refresh(){

				var pageWasVisited = globalValueMediator.checkValue(),
					setVisibility = function( pageVisited ) {
						var visiblityValue = pageVisited ? "visible" : "hidden";
						positioningElement.css("visibility", visiblityValue);
						if (isHTML4Player) {
							shellElement.find("svg").css("visibility", visiblityValue);
						}
					};

				setVisibility( pageWasVisited );
				setTimeout(function(){
					context.page.event.trigger( options.scInstance, pageWasVisited ? "visited" : "notvisited" );
				}, 20);
			}

			return {
				getElement : function(){
					return view;
				},
				bindEvents : function(){
					// if sender and listener are on same page, we have to make sure listener
					// will refresh after sender action occured
					shellElement.on("senderListenerSamePageRefresh", refresh);
				},
				removeEvents : function(){
					shellElement.off("senderListenerSamePageRefresh", refresh);
				},
				count : function(){},
				refresh : refresh
			};
		},

		AuthoringView = function( globalValueMediator, context, options ){

			var view = jq(document.createElement("div"))
					.css({
						"width": "100%",
						"height": "100%",
						"display": "block",
						"opacity": "0.15",
						"background-image": options.bgImage,
						"overflow" : "hidden"
					}),
				caption = jq(document.createElement("span"))
					.css({
						"position" : "absolute",
						"display" : "block",
						"top" : "100%",
						"left" : "5px",
						"color" : "#000000",
						"font-size" : "16px",
						"line-height" : "100%"
					})
					.text( options.caption );

			view.append( caption );
			globalValueMediator.reset();

			return {
				getElement : function(){
					return view;
				},
				bindEvents : function(){},
				count : function(){},
				refresh : function(){}
			};
		};

	return function (context, metadata) {

		var scElementId_prefix = "senderListenerPage_",
            scElementId_postfix = "_" + metadata.parameters.get("id", 1) + "_" + metadata.page.getId(),
			eventsAdded = false,
			component;

		function createHTML( scInstance ) {

			var objElement = jq( context.getElement() )
				.addClass( scElementId_prefix + metadata.parameters.get("type", "sender") + scElementId_postfix  )
				.css({
					"width" : metadata.getWidth(),
					"height" : metadata.getHeight()
				});

			component =	new PageSenderListenerFactory({
                    "listenerClassId" : scElementId_prefix + "listener" + scElementId_postfix,
                	"scInstance": scInstance
            	},
				context, metadata ).create();
			objElement.append( component.getElement() );
		}

		function bindEvents(){
			eventsAdded = true;
			component.bindEvents();
		}

		function removeEvents(){
			eventsAdded = false;
			component.removeEvents();
		}

		return {
			onLoading: function () {
				context.page.event.bindOnEnter(this);
				context.page.event.bindOnExit(this);
				createHTML( this );
			},

			onEnterPage: function () {
				if( !eventsAdded ) {
					bindEvents();
				}
				component.count();
			},

			onAllComponentsReady: function () {
				component.refresh();
			},

			onExitPage: function () {
				if( eventsAdded ) {
					removeEvents();
				}
			}
		};
	};
});
