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

    "use strict";

    function RotatableTextBoxBuilder(options) {

        function createRotatableImage() {
            var image = jq(document.createElement("img"))
                .attr({
                    "src": options.image.fileNameURL
                })
                .css({
                    "width": "100%",
                    "height": "100%",
                    "position": "relative",
                    "-webkit-transform": "rotate(" + parseInt(options.rotation.replace(/,/g, '.')) + "deg)",
                    /* Saf3.1+, Chrome */
                    "-moz-transform": "rotate(" + parseInt(options.rotation.replace(/,/g, '.')) + "deg)",
                    /* FF3.5+ */
                    "-ms-transform": "rotate(" + parseInt(options.rotation.replace(/,/g, '.')) + "deg)",
                    /* IE9 */
                    "-o-transform": "rotate(" + parseInt(options.rotation.replace(/,/g, '.')) + "deg)",
                    /* Opera 10.5 */
                    "transform": "rotate(" + parseInt(options.rotation.replace(/,/g, '.')) + "deg)"
                });

            return image;
        }

        return {

            build: function () {

                var imageDiv = createRotatableImage();

                return {
                    getImageDiv: function () {
                        return imageDiv;
                    }
                }
            }
        }
    }

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

        // declare private members
        var parameters = metadata.parameters,
            image,
            imageSource = loadImage("image", parameters.get("image", null)),
            shellElement;

        function createComponent() {
            image = new RotatableTextBoxBuilder({
                image: imageSource,
                rotation: parameters.get("degree", "0")
            }).build();

            shellElement.css(getCoreCss())
                .append(image.getImageDiv());

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

        function getCoreCss(){
            var coreStyles = {
				"cursor" : "default"
            };

            if (!parameters.asBool("origin-size")) {
                coreStyles["width"] = parameters.asNumber("width", "300") + "px";
                coreStyles["height"] = parameters.asNumber("height", "200") + "px";
            } else {
                coreStyles["width"] = imageSource.width + "px";
                coreStyles["height"] = imageSource.height + "px";
            }

            return coreStyles;
        }

        function loadImage(key, image) {
            var result = {};

            if (image) {
                result.fileNameURL = context.stage.getSharedPath() + image.fileName;
                result.width = image.width;
                result.height = image.height;
            }
            else {
                switch (key) {
                    case "image":
                        result.fileNameURL = context.getPath() + "image.png";
                        result.width = 300;
                        result.height = 200;
                        break;
                    default:
                        return null;
                }
            }

            return result;
        }

		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());
                createComponent(context, metadata);
            }
        };
	};
});
