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

	"use strict";

    var IconBuilder = function( options ){

        function createIcon(){
            jq(options.shellElement)
                .append( createElement(options.elementId) );

            createHotspot( options.shellElement );
        }

        function createElement(elementId){
	        var testId = "sc-icons-" + elementId;
            return createSvg( testId, "sc-icons-" + elementId + ".svg");
        }

        function createSvg( testId, fileName ) {
            var svgWrapper = createSvgWrapper( testId ),
                jqSvg = svgWrapper.html("<object type=\"image/svg+xml\"></object>")
                .children()
                .first()
                .attr({
                    "width": "100%",
                    "height": "100%"
                })
                .css({
	                "pointer-events" : "none" //ensure event bubbling for swipe
                });

            if( options.colors ){
                addColorChange( jqSvg.get(0), options.colors );
            }

            jqSvg.attr( "data", options.componentPath + "svg/" + fileName );

            return svgWrapper;
        }

        function createSvgWrapper( testId ){
            return jq(document.createElement("div"))
                .css({
                    "position": "absolute",
                    "left": 0,
                    "top": 0,
                    "width": "100%",
                    "height": "100%"
                })
                .addClass( testId );
        }

        /**
         * Hotspot element to enable ttkf-trigger and interaktion handling
         *
         * @param shellElement
         */
        function createHotspot( shellElement ) {

            var hotspot = jq( document.createElement("div") )
                .css({
                    "position" : "absolute",
                    "width" : "100%",
                    "height" : "100%",
                    "cursor" : "auto",
                    "opacity" : "0"
                });

            shellElement.append( hotspot );
        }

        function addColorChange( svg, colors ) {
            svg.addEventListener("load", function () {
                var svgObj = jq(svg.contentDocument);
                jq.each(colors, function (cssClassSelector, color) {
                    var svgPart = svgObj.find("[class=" + cssClassSelector + "]");
                    svgPart.attr("fill", color);
                });
            }, false);
        }

        return {
            build : createIcon
        };
    };

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

		// create an object shield so we are able to select and drag element
		function createAuthoringShield(shellElement) {
			shellElement.prepend(jq(document.createElement("div"))
				.css({
                    "width": "100%",
                    "height": "100%",
                    "position": "absolute"
				}));
		}

		function createIcon( shellElement ){
            shellElement.css({
                "width": metadata.getWidth() + "px",
                "height": metadata.getHeight() + "px"
            });

            new IconBuilder({
                shellElement : shellElement,
                componentPath : context.getPath(),
                elementId: metadata.parameters.asNumber("element", 1),
                colors: {
                    "sc-icon-color" : metadata.parameters.get("icon_color", "#000000")
                }
            }).build();

            if( context.stage.isInAuthoringMode() ) {
                createAuthoringShield( shellElement );
            }
		}

		// revealing public API
		return {
			onLoading: function () {
				createIcon( jq(context.getElement()) );
			}
		};
	};
});
