(function($) {

    $.belowthefold = function(element, settings) {
        var fold = $(window).height() + $(window).scrollTop();
        return fold <= $(element).offset().top - settings.threshold;
    };

    $.abovethetop = function(element, settings) {
        var top = $(window).scrollTop();
        return top >= $(element).offset().top + $(element).height() - settings.threshold;
    };

    $.rightofscreen = function(element, settings) {
        var fold = $(window).width() + $(window).scrollLeft();
        return fold <= $(element).offset().left - settings.threshold;
    };

    $.leftofscreen = function(element, settings) {
        var left = $(window).scrollLeft();
        return left >= $(element).offset().left + $(element).width() - settings.threshold;
    };

    $.inviewport = function(element, settings) {
        return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
    };

    $.extend($.expr[':'], {
        "below-the-fold": function(a, i, m) {
            return $.belowthefold(a, {threshold : 0});
        },
        "above-the-top": function(a, i, m) {
            return $.abovethetop(a, {threshold : 0});
        },
        "left-of-screen": function(a, i, m) {
            return $.leftofscreen(a, {threshold : 0});
        },
        "right-of-screen": function(a, i, m) {
            return $.rightofscreen(a, {threshold : 0});
        },
        "in-viewport": function(a, i, m) {
            return $.inviewport(a, {threshold : 0});
        }
    });


})(jQuery);


/* Adopted from this example https://codepen.io/GreenSock/pen/gnoDc */

var content = document.getElementById("content");
var maxScrollY = content.scrollHeight - content.offsetHeight;
var maxScrollX = content.scrollWidth - content.offsetWidth;
var floors = 5;
var rooms = 3;
var draggableInstance = '';
setDraggableDirection();


//if the user flicks/spins/drags with momentum, a tween is created, but if the user interacts again before the tween is
// done, we must kill that tweens (so as not to fight with the user). This method kills any tweens of the knob or the content's scrollProxy.
function killTweens() {
    var myVar = this.target;
    var i = 0;
    TweenLite.killTweensOf([content, draggableInstance.scrollProxy]);
}
content.addEventListener("mousewheel", killTweens);
content.addEventListener("DOMMouseScroll", killTweens);

// Dynamically set the bounds of draggable for the current using a viewport plugin
//$(":in-viewport")
//$(":below-the-fold")
//$(":above-the-top")
//$(":left-of-screen")
//$(":right-of-screen")
function setDraggableDirection() {
    var divInVP = $("div[name|='level']:in-viewport").attr('name');
    var divInVPObj = $("div[name|='level']:in-viewport");
    var divAboveVP = $("div[name|='level']:above-the-top").attr('name');
    var divBelowVP = $("div[name|='level']:below-the-fold").attr('name');
    var divleftVP = $("div[name|='level']:left-of-screen").attr('name');
    var divRightVP = $("div[name|='level']:right-of-screen").attr('name');
    //console.log('Div in viewport:   ' + divInVP);
    //console.log('Div above viewport:   ' + divAboveVP);
    //console.log('Div below viewport:   ' + divBelowVP);
    //console.log('Div left of viewport:   ' + divleftVP);
    //console.log('Div right of viewport:   ' + divRightVP);
    // update the movement to horizontal or vertical or both

    // first test if in a room if so then only allow x(horizontal) scrolling
    var roomPattern = /Room/g;
    var inRoom = '';
    inRoom = divInVP.match(roomPattern);

    if (typeof inRoom !== 'undefined' && inRoom !== null) {

        if (inRoom.toString() == 'Room' ) {
            //console.log ('In a room - dragCreate("scrollLeft")');
            draggableInstance.destroy;
            dragCreate("scrollLeft");
            return;
        }

    }



    // Cleanup faults viewport values for rooms on right ans left (rooms to right don't exist if not on same level)
    if (typeof divRightVP != 'undefined') {
        // regex pattern for stripping out level
        var levelPattern = /level-[0-9]/g;
        var inVPLevel = divInVP.match(levelPattern);
        // strip out the room number
        var levelRightOfIs = divRightVP.match(levelPattern);
        // test if there is a room to the right if so then allow x,y scrolling
        if (inVPLevel.toString() == levelRightOfIs.toString()) {
            //console.log('Valid rooms to the right - dragCreate("scroll")');
            draggableInstance.destroy;
            dragCreate("scroll");
        } else {
            //console.log ('maxScrollY: ' + maxScrollY);
            //console.log('No rooms to the right - dragCreate("scrollTop")');
            draggableInstance.destroy;
            dragCreate("scrollTop");
        }
    }
}

function dragCreate(scrollType) {


//create the X,Y content Draggable
    Draggable.create(content, {
        type: scrollType,
        edgeResistance: 0.5,
        throwProps: true,
        onDragStart: killTweens,
        onThrowComplete: setDraggableDirection,
        lockAxis: true,
        snap: {
            x: function (endValue) {
                var step = maxScrollX / (rooms - 1);
                //console.log ('maxScrollX:  ' + maxScrollX);
                //console.log ('Step this much:  ' + step);
                //console.log ('Snapping x to: ' + Math.abs( Math.round(endValue / step) * -step ));
                //console.log ('   endValue: ' + endValue);
                return Math.abs(Math.round(endValue / step) * -step);
            },
            y: function (endValue) {
                var step = maxScrollY / (floors - 1);
                //console.log ('maxScrollY:  ' + maxScrollY);
                //console.log ('   y is: ' + Math.round( endValue / step) * -step);
                return Math.round(endValue / step) * -step;
            }
        }
    });

//grab the Draggable instances for the content and the knob, and store them in variables so that we can reference them in other functions very quickly.
    draggableInstance = Draggable.get(content);


}


// Set up a eventHandler for each child of the content so we can adjust the bounties of the draggable object
$('#content').children().click(function () {
    var whatIsI = this;
    var i = 0;
});

function scrollTo(level) {
    // floor or room?
    // get the position of the element
    var locXY = $(level).position();
    var locY = locXY.top;
    var locX = locXY.left;
    //console.log('X: ' + locX + '   Y: ' + locY);
    var myTween = TweenMax.to(content, 1, {scrollTo: {x: locX, y: locY}, ease: Power3.easeOut, onComplete:setDraggableDirection});
}