FMPSystems.Position = extendClass(FMPSystems, {
    // function which initializes the events on the provided element.
    // the function requires plain javascript element (not jQuery) as parameter
    init: function(el){
        this.containerElement = el;
        this.boundCursorPosition = this.cursorPosition.bind(this);
        this.boundClickHandler = this.handleClick.bind(this);

        el.addEventListener('mousemove', this.boundCursorPosition);
        el.addEventListener('click', this.boundClickHandler);
    },

    // function which removes all the events and handlers from the element.
    disable: function(){
        var el = this.containerElement,
            player = el.getElementsByClassName('player')[0];

        // handle the case in which the disable method is called before initalization
        // if this is the case, throw an error displaying the problem
        if(el){
            el.removeEventListener('mousemove', this.boundCursorPosition);
            el.removeEventListener('click', this.boundClickHandler);
            player ? player.remove() : '';
        }
        else{
            throw new Error('The step was not initalized, the disable function can be called only after initialization.');
        }
    },

    // function to reset data
    reset: function(){
        var el = this.containerElement,
            player = el.getElementsByClassName('player')[0];

        // handle the case in which the disable method is called before initalization
        // if this is the case, throw an error displaying the problem
        if(el){
            player ? player.remove() : '';
        }
        else{
            throw new Error('The step was not initalized, the reset function can be called only after initialization.');
        }
    },

    // save the mouse position in an object in order to have access to the values
    // in other methods as well
    mousePosition: {},

    // function which updates the 'mousePosition' object with the new values while the
    // user changes the mouse position
    // the function expects the event object as parameter
    cursorPosition: function(e){
        var el = this.containerElement,
            offset = el.getBoundingClientRect();

        // get the cursor position relative to the scroll position of the page
        this.mousePosition = {
            mouseX: e.pageX - offset.left || e.clientX - offset.left,
            mouseY: e.pageY - offset.top || e.clientY - offset.top
        };
    },

    // function which handles the click event on the desired element.
    // it creates the player element and adds the required coordinates.
    handleClick: function(){
        var el = this.containerElement,
            player = el.getElementsByClassName('player')[0];

        // if the player element is already created remove it and create a new player element
        player ? player.remove() : '';
        this.createPlayerElement();
        this.addCoordinates();
    },

    // function which creates the player 'div' and adds it to the DOM in the
    // required position
    createPlayerElement: function(){
        var player = document.createElement('div'),
            el = this.containerElement,
        // get the scroll position in order to precisely calculate the elements position
            scrollOffset = {
                top: window.pageYOffset || document.documentElement.scrollTop,
                left: window.pageXOffset || document.documentElement.scrollLeft
            };

        player.className = 'player';
        player.style.display = 'none';

        el.appendChild(player);

        // calculate the position of the element in a relative manner, in order for when the user resizes the browser
        // to keep the distances proportional
        $(player).css({
            top: (this.mousePosition.mouseY - $(player).width() / 2 - scrollOffset.top) / el.offsetHeight * 100 + '%',
            left: (this.mousePosition.mouseX - $(player).height() / 2 - scrollOffset.left) / el.offsetWidth * 100 + '%',
            display: 'block'
        });
    },

    // creates the coordinates used to populate the data-attributes of the player element
    // the coordinates ranges are: x - from -1 to 1; y - from 0 to 1
    createCoordinates: function(){
        var coordinates = {},
            el = this.containerElement,
            scrollOffset = {
                top: window.pageYOffset || document.documentElement.scrollTop,
                left: window.pageXOffset || document.documentElement.scrollLeft
            };

        // create the coordinates, x - coordinate ranges from -1 to 1; y - coordinate ranges from 0 to 1
        coordinates.X = Math.round((this.mousePosition.mouseX - scrollOffset.left) / $(el).width() * 100);
        coordinates.Y = Math.round((this.mousePosition.mouseY - scrollOffset.top) / $(el).height() * 100);

        return coordinates;
    },

    // creates the data attributes and adds the correct values to them
    addCoordinates: function(){
        var el = this.containerElement,
            player = el.getElementsByClassName('player')[0],
            coordinates = this.createCoordinates();

        player.setAttribute('data-x-axis', coordinates.X);
        player.setAttribute('data-y-axis', coordinates.Y);
    },

    // method used for getting the coordinates data from the player element
    // it returns and object with 'x' and 'y' properties which hold the given coordinates.
    getData: function(){
        var player = $('.player')[0];

        // if the function is called before creating any coordinates (player element) then
        // throw an error which tells the user to create the element first, and then call this function
        if(player){
            return {
                x: parseInt(player.getAttribute('data-x-axis'), 10),
                y: parseInt(player.getAttribute('data-y-axis'), 10)
            };
        }
        else{
            throw new Error('The coordinates data were not added, add the player and try again.');
        }
    },

    // method used to set coordinates data onto the player element
    // this method also creates the element and adds it to the page in the appropriate position
    // it expects and object as parameter which holds the 'x' and 'y' properties with the appropriate values
    setData: function(obj){
        var player = document.createElement('div'),
            existingPlayer = $('.player'),
            el = this.containerElement,
            xPosition = obj.x,
            yPosition = obj.y;

        // if the player element already exists, remove it and create a new element with the added coordinates
        if(existingPlayer.length){
            existingPlayer.remove();
        }

        // if the input values are out of the accepted range, then throw errors accordingly
        if(obj.x > 100 || obj.x < 0){
            throw new Error('The X coordinate is out of range, the range is from 0 to 100');
        }

        if(obj.y > 100 || obj.y < 0){
            throw new Error('The Y coordinate is out of range, the range is from 0 to 100');
        }

        player.className = 'player';

        player.setAttribute('data-x-axis', obj.x);
        player.setAttribute('data-y-axis', obj.y);

        el.appendChild(player);

        // position the element in respect to the input coordinates
        $(player).css({
            left: 'calc(' + xPosition + '% - ' + player.offsetHeight / 2 + 'px)',
            top: 'calc(' + yPosition + '% - ' + player.offsetWidth / 2 + 'px)'
        });
    },

    /**
     * load data from event
     *
     * @param {object} event
     */
    load: function(event){
        var eventData = event.getData();

        if(eventData.coordinates !== undefined){
            this.setData(eventData.coordinates);
        }
        else {
            this.reset();
        }
    },

    /**
     * save data to event, returns true if data was changed
     *
     * @param {object} event
     *
     * @returns {boolean}
     */
    save: function(event){
        try {
            var eventData = event.getData();

            //check if data unset or changed and set if so
            if(eventData.coordinates === undefined || this.compareData(eventData.coordinates) === false){
                event.data.coordinates = this.getData();

                return true;
            }
        }
        catch(e){}

        return false;
    },

    /**
     * compare data with current set data, return true if identical
     *
     * @param {object} data
     *
     * @returns {boolean}
     */
    compareData: function(data){
        var currentData = this.getData();

        return (data.x === currentData.x && data.y === currentData.y);
    }
});