// com.tts.initial.html5.quiz.ddtarget.autoform
define(["jquery"], function( jq ) {

    "use strict";

    function TargetElementBuilder( context, metadata ){

        var parameters = metadata.parameters,
            backgroundImage = createBackgroundImageModel(),
            fonts = [
                'Arial, Helvetica, sans-serif',
                '"Times New Roman", Times, serif',
                'Verdana, Geneva, sans-serif',
                '"Courier New", Courier, monospace',
                'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
                '"Droid Serif", "Times New Roman", Times, serif'
            ],
            isAssessmentMode = context.stage.isInAssessmentMode();

        function getFont( index ) {
            var fontIndex = (index > 0 && index < fonts.length) ? index-1: 0;
            return fonts[fontIndex];
        }

        function asRgbaValue( colorParameterName, defaultColor, transparencyParameterName ) {

            var color = hexToRgb( parameters.get(colorParameterName, defaultColor)),
                alpha = asAlpha( parameters.asNumber(transparencyParameterName, 0) );

            return "rgba(" + color.r + ", " + color.g + ", " + color.b + ", " + alpha + ")";
        }

        function hexToRgb( hex ) {
            var parsingResult = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
            return parsingResult ? {
                r: parseInt(parsingResult[1], 16),
                g: parseInt(parsingResult[2], 16),
                b: parseInt(parsingResult[3], 16)
            } : {
                r: 0,
                g: 0,
                b: 0
            };
        }

        function asAlpha( percentValue ) {
            return (100 - percentValue) / 100;
        }

        function createTarget(){

            var	fontSize = parameters.get("font-size", "14" ),
                borderSize = parameters.get("border-size", "1"),
                borderAMSize = parameters.get("border-size-am", "1"),
                target,
                setDifferentAssessmentDesign = (isAssessmentMode && parameters.asBool("different-assessment-design")) ? true : false;


            target = jq(document.createElement("div"))
                .css({
                    "position": "absolute",
                    "width" : "100%",
                    "height" : "100%",
                    "background-color": setDifferentAssessmentDesign ? asRgbaValue("background-color-am", "#cccccc", "background-transparency-am") : asRgbaValue( "background-color", "#cccccc", "background-transparency" ),
                    "font-family" : getFont( parameters.asNumber("font-family", 0 ) ),
                    "font-size" : fontSize + "px",
                    "font-weight" : "bold",
                    "font-style" : "normal",
                    "color" : parameters.get("color", "#919191" ),
                    "line-height" : fontSize + "px",
                    "padding-left" : (parameters.asNumber("padding-left", "15") - parseInt(borderSize)) + "px",
                    "padding-right" : (parameters.asNumber("padding-right", "15") - parseInt(borderSize)) + "px",
                    "padding-top" : (parameters.asNumber("padding-top", "15") - parseInt(borderSize)) + "px",
                    "text-align" : parameters.get("text_orientation", "center"),
                    "box-sizing" : "border-box"
                })
                .html( parameters.get( "text", "" ) );

            if (setDifferentAssessmentDesign) {
                target.css({
                    "border": (borderAMSize > 0) ? borderAMSize + "px solid " + asRgbaValue("border-color-am", "#98a7b5", "border-transparency-am") : "0"
                })
            } else {
                target.css({
                    "border": (borderSize > 0) ? borderSize + "px solid " + asRgbaValue("border-color", "#98a7b5", "border-transparency") : "0"
                })
            }

            backgroundImage.initialize( target );

            return target;
        }

        function createBackgroundImageModel() {

            var backgroundImage = parameters.get( "bg_image", null ),
                backgroundImageAssessment = metadata.parameters.get( "bg_image_assessment", null ),
                backgroundFileName = "",
                bgHeight = 0,
                bgLayer;

            if ( isAssessmentMode && backgroundImageAssessment ) {
                backgroundImage = backgroundImageAssessment;
            }

            if (backgroundImage) {
                backgroundFileName = context.stage.getSharedPath() + backgroundImage.fileName;
                bgHeight = backgroundImage.height / 2;
            }

            return {
                initialize : function( jqElement ){

                    if( !backgroundFileName || backgroundFileName.length === 0 || !jqElement ){
                        return;
                    }

                    bgLayer = jqElement;

                    bgLayer.css({
                        "background-image": "url(\"" + backgroundFileName + "\")",
                        "background-position" : "0px 0px"
                    });
                },
                setDefaultStyle : function(){
                    if( bgLayer ){
                        bgLayer.css("background-position", "0px 0px");
                    }
                },
                setDragOverTargetStyle : function(){
                    if( bgLayer ) {
                        bgLayer.css("background-position", "0px -" + bgHeight + "px" );
                    }
                }
            };
        }


        return {

            build : function() {

                var targetDiv = createTarget();

                return {
                    getTargetDiv : function() {
                        return targetDiv;
                    },
                    setDefaultStyle : backgroundImage.setDefaultStyle,
                    setDragOverTargetStyle : backgroundImage.setDragOverTargetStyle
                }
            }
        }
    }

    return TargetElementBuilder;
});
