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

	"use strict";

    var AvatarBuilder = function( options ){

        function createAvatar(){
            jq(options.shellElement)
                .append( createLegs() )
                .append( createBody() )
                .append( createFace() )
                .append( createArms() )
                .data('options', {
                    style: options.style,
                    mood: options.mood,
                    arms: options.arms,
                    legs: options.legs
                });

            createHotspot( options.shellElement );
        }

        function createBody(){
	        var testId = "sc-avatar-" + options.style + "-body";
            return createSvg( testId, options.style + "-base.svg");
        }

        function createFace(){
        	var testId = "sc-avatar-" + options.style + "-face-" + options.mood;
            return createSvg( testId, options.style + "-l1-" + options.mood + ".svg");
        }

        function createArms(){
	        var testId = "sc-avatar-" + options.style + "-arms-" + options.arms;
            return createSvg( testId, options.style + "-l2-" + options.arms + ".svg");
        }

        function createLegs(){
	        var testId = "sc-avatar-" + options.style + "-legs-" + options.legs;
            return createSvg( testId, options.style + "-l3-" + options.legs + ".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 : createAvatar
        };
    };

    /**
	 * @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 createAvatar( shellElement ){
            shellElement.css( getCoreCss() );

            new AvatarBuilder({
                shellElement : shellElement,
                componentPath : context.getPath(),
                style: metadata.parameters.get("style", "emma"),
                mood: metadata.parameters.asNumber("mood", 1),
                arms: metadata.parameters.asNumber("pose_arms", 1),
                legs: metadata.parameters.asNumber("pose_legs", 1),
                colors: {
                    "tts-avatar-clothes1" : metadata.parameters.get("color_jacket", "#FF0000"),
                    "tts-avatar-clothes2" : metadata.parameters.get("color_shirt", "#2A2C68"),
                    "tts-avatar-clothes3" : metadata.parameters.get("color_pants", "#658BB0"),
                    "tts-avatar-shoes" : metadata.parameters.get("color_shoes", "#E42320"),
                    "tts-avatar-hair" : metadata.parameters.get("color_hair", "#000000"),
                    "tts-avatar-skin" : metadata.parameters.get("color_skin", "#BB9778"),
                    "tts-avatar-face" : metadata.parameters.get("color_face", "#D8AF89")
                }
            }).build();

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

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