// com.tts.initial.html5.sitemap
define([
		"./sitemaptextbox.builder",
		"jquery"
		], function (
			SitemapTextboxBuilder,
			jq
		){

	"use strict";

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

        var shellElement,
            button,
            buttonInitialized = false,
            isInAuthoringMode = false,
            isInPreviewMode = false,
            pointerUpEventName, pointerDownEventName, pointerMoveEventName, pointerLeaveEventName,
            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'
            ];

        function initializeButton(){
            if( buttonInitialized ){
                return;
            }
            buttonInitialized = true;

            initPointerEventNames(shellElement);

            var scParams = metadata.parameters,
                imageArray = {
                    marker : loadImage("marker", scParams.get("marker_image", null)),
                    icons : loadImage("icons", scParams.get("icons_image", null))
                };

            button = new SitemapTextboxBuilder({
                pointerEvents : {
                    pointerUp : pointerUpEventName,
                    pointerDown : pointerDownEventName,
                    pointerMove : pointerMoveEventName,
                    pointerLeave : pointerLeaveEventName
                },
                instanceID : metadata.getId(),
                AuthoringMode : isInAuthoringMode,
                PreviewMode : isInPreviewMode,

                sitemapWidth : scParams.asNumber("sitemap_width", "350"),
                sitemapHeight : scParams.asNumber("sitemap_height", "500"),
                includeSteps : scParams.asBool("include_steps"),
                position : scParams.asNumber("sitemap_location", "5"),
                borderColor : scParams.get("border_color", "#999999"),
                borderWidth : scParams.asNumber("border_width", "2"),
                borderTransparency : (scParams.asNumber("borderTransparency", "0")),
                fillColor : scParams.get("fill_color", "#ffffff"),
                fillTransparency : (scParams.asNumber("fillColorTransparency", "0")),
                separatorColor : scParams.get("separator_color", "#d1d1d1"),
                separatorWidth : scParams.asNumber("separator_width", "2"),
                separatorTransparency : (scParams.asNumber("separatorTransparency", "0")),

                image : imageArray,

                fontFamily : getFont(scParams.get("font-family","0")),
                fontSize : scParams.get("font-size", "14"),
                sectionTextColor : scParams.get("section_text_color", "#142534"),
                sectionHoverTextColor : scParams.get("section_hover_color", "#fd7326"),
                pageTextColor : scParams.get("page_text_color", "#142534"),
                pageHoverTextColor : scParams.get("page_hover_color", "#fd7326"),
                paddingLeft : scParams.asNumber("padding-left", "10"),
                paddingRight : scParams.asNumber("padding-right", "10"),
                paddingTop : scParams.asNumber("padding-top", "2"),
                paddingBottom : scParams.asNumber("padding-bottom", "2"),
                cutTitles : scParams.asBool("cut_titles")
                
            }, context, metadata).build();

            shellElement.css({
                "width": scParams.asNumber("sitemap_width", "300") + "px",
                "height": scParams.asNumber("sitemap_height", "500") + "px"
            });

            shellElement.append( button.getElement() );

            context.page.interaction.provokesFeedback( button.getElement(), false );
            context.page.interaction.provokesAutosolve( button.getElement(), false );

            if (isInAuthoringMode) {
                createAuthoringShield();
            }
        }

        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 "marker": 
                            result.fileNameURL = context.getPath() + "marker.png";
                            result.width = 14;
                            result.height = 14;
                            break;
                        case "icons": 
                            result.fileNameURL = context.getPath() + "icons.png";
                            result.width = 14;
                            result.height = 28;
                            break;
                        default:
                            return null;
                    } 
                }      

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

        function initPointerEventNames() {
            if( !pointerUpEventName ) {
                var nodeName = getHotspotElementNodeName();

                pointerUpEventName = context.device.getUpEvents( nodeName );
                pointerDownEventName = context.device.getDownEvents( nodeName );
                pointerMoveEventName = context.device.getMoveEvents( nodeName );
                pointerLeaveEventName = context.device.getReleaseEvents( nodeName );
            }
        }

        function getHotspotElementNodeName() {
            return shellElement.get(0).nodeName
                ? shellElement.get(0).nodeName
                : "document";
        }

        // create an object shield so we are able to select and drag element
        function createAuthoringShield() {
            shellElement.append(jq(document.createElement("div"))
                .css({
                    "position": "absolute",
                    "left": 0,
                    "top": 0,
                    "background-color": "transparent",
                    "opacity": "0.4",
                    "width": "100%",
                    "height": "100%",
                    "z-index": "9999"
                }));
        }
	
		// revealing public API
		return {

            onLoading: function () {

                context.page.event.bindOnEnter(this);
                context.page.event.bindOnExit(this);

                shellElement = jq(context.getElement());

                isInAuthoringMode = !!context.stage.isInAuthoringMode();
                isInPreviewMode = !!context.stage.isInPreviewMode();

                initializeButton(shellElement);
            },

            onEnterPage: function() {
                button.onEnterPage();
            },

            onExitPage: function() {
                button.onExitPage();
            }
        };
	};
});