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

	"use strict";

    var CoffeeShopBuilder = function( options ){
        var element = [
            "on_the_street",
            "street",
            "cloud",
            "lkw",
            "pkw",
            "tree_1",
            "tree_2",
            "tree_3",
            "tree_4",
            "building_1",
            "building_2",
            "building_3",
            "building_4",
            "building_5",
            "building_6"
        ];

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

            createHotspot( options.shellElement );
        }

        function createElement(elementId){
	        var testId = "sc-scene-onthestreet-" + element[elementId];
            return createSvg( testId, element[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 : createCoffeeShopScene
        };
    };

    /**
	 * @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 getCoreCss(){

            var isStandardPlayer = context.getPlayerName() === "standard";

            var coreStyles = {
                "cursor": "default"
            };

            if( !isStandardPlayer ) {
                coreStyles["width"] = "100%";
                coreStyles["height"] = "100%";
            }

            return coreStyles;
		}

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

            new CoffeeShopBuilder({
                shellElement : shellElement,
                componentPath : context.getPath(),
                elementId: metadata.parameters.asNumber("element", 0),
                colors: {
                    "tts-scene-c1" : metadata.parameters.get("color_c1", "#bde4f7"),
                    "tts-scene-c2" : metadata.parameters.get("color_c2", "#a7a8a9"),
                    "tts-scene-c3" : metadata.parameters.get("color_c3", "#f7e4a5"),
                    "tts-scene-c4" : metadata.parameters.get("color_c4", "#efb344"),
                    "tts-scene-c5" : metadata.parameters.get("color_c5", "#fbf2e4"),
                    "tts-scene-c6" : metadata.parameters.get("color_c6", "#29abe2"),
                    "tts-scene-c7" : metadata.parameters.get("color_c7", "#f4f2f0")
                }
            }).build();

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

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