// com.tts.initial.html5.datevariable
define([
        "./datevariable.builder",
        "jquery"
        ], function (
            DateVariableBuilder,
            jq
        ){

    "use strict";

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

        // declare private members
        var shellElement,
            textbox,
            parameters = metadata.parameters;

        function getText( parameterName, defaultText ) {
            var paramValue = ( metadata.parameters.get( parameterName, "" ) || "" ).trim();
            return ( paramValue.length > 0 ) ? paramValue : defaultText;
        }

        function createComponent() {
            var parameters = metadata.parameters;

            textbox = new DateVariableBuilder( {
                valueSelect: parameters.asNumber( "value-select", "0" ),
                isAuthoringMode: context.stage.isInAuthoringMode(),
                autoform: {
                    borderColor: parameters.get( "border-color", "#98a7b5" ),
                    borderSize: parameters.get( "border-size", "1" ),
                    borderTransparency: parameters.asNumber( "border-transparency", "0" ),
                    backgroundColor: parameters.get( "background-color", "#cccccc" ),
                    backgroundTransparency: parameters.asNumber( "background-transparency", "0" ),
                },
                text: {
                    fontFamiliy: parameters.asNumber( "font-family", 0 ),
                    fontSize: parameters.get( "font-size", "14" ),
                    isBold: parameters.asBool( "bold" ),
                    isItalic: parameters.asBool( "italic" ),
                    isUnderline: parameters.asBool( "underline" ),
                    color: parameters.get( "color", "#919191" ),
                    textAlign: parameters.get( "text_orientation", "center" ),
                    paddingLeft: parameters.asNumber( "padding-left", "10" ),
                    paddingRight: parameters.asNumber( "padding-right", "10" ),
                    paddingTop: parameters.asNumber( "padding-top", "12" ),
                    paddingBottom: parameters.asNumber( "padding-bottom", "6" )
                },
                date: {
                    delta: parameters.asNumber( "date-delta", "0" ),
                    format: parameters.asNumber( "date-format", "0" ),
                    monthAsName: parameters.asBool( "date-month-as-name" ),
                    leadingZero: parameters.asBool( "date-leading-zero" ),
                    separator: getText( "date-separator", "-" )
                },
                time: {
                    delta: parameters.asNumber( "time-delta", "0" ),
                    format: parameters.asNumber( "time-format", "0" ),
                    ampmFormat: parameters.asBool( "time-ampm" ),
                    leadingZero: parameters.asBool( "time-leading-zero" ),
                    separator: getText( "time-separator", ":" )
                },
                settings: {
                    rotation: parameters.get( "degree", "0" ).replace( /,/g, '.' ),
                    isLiveUpdate: parameters.asBool( "live-update" )
                }
            }, context, metadata ).build();

            shellElement.append( textbox.getElement() );

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

        function createAuthoringShield() {
            return jq( document.createElement( "div" ) )
                .css( {
                    "width": "100%",
                    "height": "100%",
                    "position": "absolute",
                    "opacity": "0.15",
                    "background-image": parameters.get( "background-transparency", "0" ) === 100 ? "url(\"" + context.getPath() + "invis.png\")" : ""
                } );
        }

        // revealing public API
        return {
            onLoading: function () {
                shellElement = jq( context.getElement() );
                context.page.event.bindOnEnter( this );
                context.page.event.bindOnExit( this );
                createComponent();
            },
            onEnterPage: function () {
                if ( parameters.asBool( "live-update" ) ) {
                    textbox.startLiveUpdate();
                }
            },
            onExitPage: function () {
                if ( parameters.asBool( "live-update" ) ) {
                    textbox.stopLiveUpdate();
                }
            }
        };
    };
} );
