// com.tts.initial.html5.library
define([
        "./picture-gallery.builder",
        "jquery"
        ], function (
            PictureGalleryBuilder,
            jq
        ){

    "use strict";

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

        var shellElement,
            pictureGallery,
            buttonInitialized = false,
            isInAuthoringMode = false,
            pointerUpEventName, pointerDownEventName,
            maxImages = 7;

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

            initPointerEventNames();

            var scParams = metadata.parameters,
                pictures = new Array(),
                controlImages = {
                    back : loadImage("back-image", scParams.get("back-image", null)),
                    next : loadImage("next-image", scParams.get("next-image", null))
                },
                pictureGalleryWidth = metadata.getWidth(),
                pictureGalleryHeight = metadata.getHeight();
            
            for(var i = 0; i < maxImages; i++){
                if(scParams.get("picture_" + (i + 1), null)){
                    pictures.push(loadImage("picture_" + (i + 1), scParams.get("picture_" + (i + 1), null)))
                }
            }

            if(pictures.length == 0){
                var result = {};
                result.fileNameURL = context.getPath() + "picture_gallery.jpg";
                result.width = 640;
                result.height = 360;
                pictures.push(result);
            }

            shellElement.css({
                "width": pictureGalleryWidth + "px",
                "height": pictureGalleryHeight + "px"
            });

            pictureGallery = new PictureGalleryBuilder({
                instanceId: metadata.getId(),
                backgroundColor: scParams.get("background-color", null),
                backgroundTransparency: scParams.asNumber("background-transparency", "0"),
                pictureBackgroundColor: scParams.get("picture-background-color", null),
                pictureBackgroundColorTransparency: scParams.asNumber("picture-background-color-transparency", "0"),
                picturePadding : scParams.asNumber("picture-padding", "0"),
                width: pictureGalleryWidth,
                height: pictureGalleryHeight,
                indicatorColor : scParams.get("indicator-color", null),
                indicatorColorActive : scParams.get("active-indicator-color", null),
                indicatorPadding : scParams.asNumber("indicator-padding", "25"),
                indicatorSize : scParams.asNumber("indicator-size", "24"),
                picture : pictures,
                controlImage : controlImages,
                pointerEvents : {
                    pointerUp : pointerUpEventName,
                    pointerDown : pointerDownEventName
                }
            }, context, metadata).build();

            shellElement.append( pictureGallery.getElement() );

            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 "back-image": 
                            result.fileNameURL = context.getPath() + "back.png";
                            result.width = 60;
                            result.height = 150;
                            break;
                        case "next-image": 
                            result.fileNameURL = context.getPath() + "next.png";
                            result.width = 60;
                            result.height = 150;
                            break;
                        default:
                            return null;
                    }      
                }

            return result;
        }

        // 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"
                }));
        }

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

                pointerUpEventName = context.device.getUpEvents(nodeName);
                pointerDownEventName = context.device.getDownEvents(nodeName);
            }
        }

        function getHotspotElementNodeName() {
            return "document";
        }

        function unlockNavigation() {
            if (context.stage.isInAuthoringMode() || (typeof(context.stage.trigger) === "undefined")) {
                return;
            }
            context.stage.trigger.unlock( metadata.getId() );
        }

        function bindEvents() {

            if (context.stage.isInAuthoringMode()) {
                return;
            }

            if (!pictureGallery || !buttonInitialized) {
                return;
            }

            removeEvents();

            // back-Element
            context.device.attachFirstSupportedEvent( pictureGallery.getBackButton().getElement(), pointerDownEventName, pictureGallery.getBackButton().onMouseDown );
            context.device.attachFirstSupportedEvent( pictureGallery.getBackButton().getElement(), "pointermove mousemove", pictureGallery.getBackButton().onMouseOver );
            context.device.attachFirstSupportedEvent( pictureGallery.getBackButton().getElement(), "pointerout mouseout", pictureGallery.getBackButton().onMouseLeave );
            context.device.attachFirstSupportedEvent( pictureGallery.getBackButton().getElement(), pointerUpEventName, pictureGallery.onBackMouseUp );

            // next-Element
            context.device.attachFirstSupportedEvent( pictureGallery.getNextButton().getElement(), pointerDownEventName, pictureGallery.getNextButton().onMouseDown );
            context.device.attachFirstSupportedEvent( pictureGallery.getNextButton().getElement(), "pointermove mousemove", pictureGallery.getNextButton().onMouseOver );
            context.device.attachFirstSupportedEvent( pictureGallery.getNextButton().getElement(), "pointerout mouseout", pictureGallery.getNextButton().onMouseLeave );
            context.device.attachFirstSupportedEvent( pictureGallery.getNextButton().getElement(), pointerUpEventName, pictureGallery.onNextMouseUp );
        }

        function removeEvents() {
            unlockNavigation();
            if (!pictureGallery || !buttonInitialized) {
                return;
            }

            initPointerEventNames();

            // back-Element
            context.device.removeFirstSupportedEvent( pictureGallery.getBackButton().getElement(), pointerDownEventName, pictureGallery.getBackButton().onMouseDown );
            context.device.removeFirstSupportedEvent( pictureGallery.getBackButton().getElement(), "pointermove mousemove", pictureGallery.getBackButton().onMouseOver );
            context.device.removeFirstSupportedEvent( pictureGallery.getBackButton().getElement(), "pointerout mouseout", pictureGallery.getBackButton().onMouseLeave );
            context.device.removeFirstSupportedEvent( pictureGallery.getBackButton().getElement(), pointerUpEventName, pictureGallery.onBackMouseUp );

            // next-Element
            context.device.removeFirstSupportedEvent( pictureGallery.getNextButton().getElement(), pointerDownEventName, pictureGallery.getNextButton().onMouseDown );
            context.device.removeFirstSupportedEvent( pictureGallery.getNextButton().getElement(), "pointermove mousemove", pictureGallery.getNextButton().onMouseOver );
            context.device.removeFirstSupportedEvent( pictureGallery.getNextButton().getElement(), "pointerout mouseout", pictureGallery.getNextButton().onMouseLeave );
            context.device.removeFirstSupportedEvent( pictureGallery.getNextButton().getElement(), pointerUpEventName, pictureGallery.onNextMouseUp );
        }

		// revealing public API
		return {
			// declare public members
			onLoading: function () {

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

				shellElement = jq(context.getElement());

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

                initializeButton();
            },

            onEnterPage: function() {
                bindEvents();
            },

            onExitPage: function () {
                removeEvents();
			}
		};
	};
});