OverlayApp.js

HTML5Drawing.js

var Overlay = ({
    videoWasRestarted: false,
    items: [
        {
            divId: 'CorporateSoundOverlayItem',
            moveOptions: OverlayCorporateSoundOptions
        },
        {
            divId: 'WebAppsOverlayItem',
            moveOptions: WebAppsOverlayItem
        },
        {
            divId: 'SpatialScenographyOverlayItem',
            moveOptions: OverlaySpatialScenographyOptions
        }
    ],
    correctXPosition: function (left) {
        var offX = Overlay.movie.offset().left;
        return offX + left;
    },
    correctYPosition: function (top) {
        var offY = Overlay.movie.offset().top;
        return offY + top;
    },
    findMinMax: function (sequence) {
        var res = { minX: 1000000, minY: 1000000, maxX: -1, maxY: -1 };
        for (var i = 0; i < sequence.length; i++) {
            var item = sequence[i];
            var x = item[0];
            var y = item[1];
            if (x < res.minX) {
                res.minX = x;
            }
            if (y < res.minY) {
                res.minY = y;
            }
            if (x > res.maxX) {
                res.maxX = x;
            }
            if (y > res.maxY) {
                res.maxY = y;
            }
        }
        return res;
    },
    getEllipseParams: function (minMaxs) {
        var center = { x: Math.round((minMaxs.maxX + minMaxs.minX) / 2), y: Math.round((minMaxs.maxY + minMaxs.minY) / 2) };
        var rx = (minMaxs.maxX - minMaxs.minX) / 2;
        var ry = (minMaxs.maxY - minMaxs.minY) / 2;
        return { center: center, rx: rx, ry: ry };
    },
    startAnimation: function (options) {
        var deltaAlpha = 0.001;
        var speed = options.initialSpeed;
        if (options.item.moveOptions.speedCoef != undefined) {
            speed *= options.item.moveOptions.speedCoef;
        };
        var currentAlpha = (options.item.moveOptions.startAlpha != undefined) ? options.item.moveOptions.startAlpha : 0;
        if (options.item.interval != undefined) {
            clearInterval(options.item.interval);
        }
        options.item.interval = setInterval(function () {
            var initialAlpha = (options.item.moveOptions.startAlpha != undefined) ? options.item.moveOptions.startAlpha : 0;
            if (initialAlpha + 2 * Math.PI >= currentAlpha) {

                var newLeft = Math.floor(options.ellipse.center.x + (options.ellipse.rx * Math.cos(currentAlpha)));
                var newTop = Math.floor(options.ellipse.center.y + (options.ellipse.ry * Math.sin(currentAlpha)));
                deltaAlpha = 0.001;
                for (var i = 0; i < options.item.moveOptions.deltaAlphaCorrection.length; i++) {
                    var correctionAlpha = options.item.moveOptions.deltaAlphaCorrection[i].alpha;
                    if (currentAlpha > correctionAlpha) {
                        deltaAlpha = options.item.moveOptions.deltaAlphaCorrection[i].delta;
                    }
                }


                currentAlpha += deltaAlpha;
                /*if (options.item.divId == 'WebAppsOverlayItem') {
                debugger;
                }*/
                /*if (options.item.divId == 'SpatialScenographyOverlayItem') {
                debugger;
                }*/
                if (options.item.divId == 'CorporateSoundOverlayItem') {
                    debugger;
                }

                console.log(currentAlpha);
                var domElement = $('#' + options.item.divId);
                domElement.css('left', Overlay.correctXPosition(newLeft) + 'px');
                domElement.css('top', Overlay.correctYPosition(newTop) + 'px');
            }
        }, speed);


    },
    animateOverlayItemsPosition: function () {
        if (Overlay.timeInterval != undefined) {
            clearInterval(Overlay.timeInterval);
        }
        var videoDuration = 57000;
        var speed = ((2 * Math.PI) / 0.001) / videoDuration;
        speed *= 75; // magic variable for speed. 
        for (var ind = 0; ind < this.items.length; ind++) {
            var item = this.items[ind];
            var sequence = this.items[ind].moveOptions.movingSequence;
            var minMaxs = this.findMinMax(sequence);
            item.ellipseParams = this.getEllipseParams(minMaxs);
            item.currentAlpha = (item.moveOptions.startAlpha != undefined) ? item.moveOptions.startAlpha : 0;
            item.initialAlpha = item.currentAlpha;
        }
        Overlay.timeInterval = setInterval(function () {
            for (var i = 0; i < Overlay.items.length; i++) {
                var moveItem = Overlay.items[i];
                if (moveItem.initialAlpha + 2 * Math.PI >= moveItem.currentAlpha) {
                    // set position
                    var newLeft = Math.floor(moveItem.ellipseParams.center.x + (moveItem.ellipseParams.rx * Math.cos(moveItem.currentAlpha)));
                    var newTop = Math.floor(moveItem.ellipseParams.center.y + (moveItem.ellipseParams.ry * Math.sin(moveItem.currentAlpha)));
                    var domElement = $('#' + moveItem.divId);
                    domElement.css('left', Overlay.correctXPosition(newLeft) + 'px');
                    domElement.css('top', Overlay.correctYPosition(newTop) + 'px');
                    
                    // change alpha
                    var deltaAlpha = 0.001;
                    for (var j = 0; j < moveItem.moveOptions.deltaAlphaCorrection.length; j++) {
                        var correctionAlpha = moveItem.moveOptions.deltaAlphaCorrection[j].alpha;
                        if (moveItem.currentAlpha > correctionAlpha) {
                            deltaAlpha = moveItem.moveOptions.deltaAlphaCorrection[j].delta;
                        }
                    }
                    moveItem.currentAlpha += deltaAlpha;
                    /*if (options.item.divId == 'WebAppsOverlayItem') {
                    debugger;
                    }*/
                    /*if (options.item.divId == 'SpatialScenographyOverlayItem') {
                    debugger;
                    }*/
                    /*if (options.item.divId == 'CorporateSoundOverlayItem') {
                        debugger;
                    }*/                    
                }
            }
        }, speed);
    },
    get_current_Time: function () {
        return Overlay.movie.attr('currentTime');

    },
    video_ended: function () {
        Overlay.ShouldStop = true;
        Overlay.restart_video();
        Overlay.animateOverlayItemsPosition();
    },
    restart_video: function () {
        Overlay.videoWasRestarted = true;
        Overlay.movie.attr('currentTime', 0);
        Overlay.start_video();
    },
    pause_video: function () {
        Overlay.movie[0].pause();
    },
    start_video: function () {
        //Overlay.movie[0].play();
    }
});

function init() {
    for (var ind = 0; ind < Overlay.items.length; ind++) {
        var item = Overlay.items[ind];
        var sequence = Overlay.items[ind].moveOptions.movingSequence;
        var minMaxs = Overlay.findMinMax(sequence);
        item.ellipseParams = Overlay.getEllipseParams(minMaxs);
        item.currentAlpha = (item.moveOptions.startAlpha != undefined) ? item.moveOptions.startAlpha : 0;
        item.initialAlpha = item.currentAlpha;
    }
}

function playback() {
    setTimeout(function(){
        rewindMovie()
        syncLabels();

        playback()
    },10); // time frame
}

function rewindMovie() {
    var newTime = Overlay.currMovie.currentTime+0.0085;
    console.debug("rewindMovie",newTime,Overlay.currMovie.duration);
    if(newTime > Overlay.currMovie.duration) {
        newTime = 0;
    }
    Overlay.currMovie.currentTime = newTime // movie position
}

function syncLabels() {
     for (var i = 0; i < Overlay.items.length; i++) {
        var moveItem = Overlay.items[i];
         if (moveItem.initialAlpha + 2 * Math.PI >= moveItem.currentAlpha) {
            // set position
            //console.debug("set postions");
            var newLeft = Math.floor(moveItem.ellipseParams.center.x + (moveItem.ellipseParams.rx * Math.cos(moveItem.currentAlpha)));
            var newTop = Math.floor(moveItem.ellipseParams.center.y + (moveItem.ellipseParams.ry * Math.sin(moveItem.currentAlpha)));
            var domElement = $('#' + moveItem.divId);
            domElement.css('left', Overlay.correctXPosition(newLeft) + 'px');
            domElement.css('top', Overlay.correctYPosition(newTop) + 'px');
            
            var prevLeft = newLeft;
            var prevTop = newTop;
            //console.debug("position",newLeft,newTop);


            // change alpha
            var deltaAlpha = 0.001;
            for (var j = 0; j < moveItem.moveOptions.deltaAlphaCorrection.length; j++) {
                var correctionAlpha = moveItem.moveOptions.deltaAlphaCorrection[j].alpha;
                if (moveItem.currentAlpha > correctionAlpha) {
                    deltaAlpha = moveItem.moveOptions.deltaAlphaCorrection[j].delta;
                }
            }
            moveItem.currentAlpha += deltaAlpha;                
        }
    }
}

$(document).ready(function () {
    Overlay.movie = $('#video');
    Overlay.movie.bind('ended', Overlay.video_ended);
    
    //Overlay.animateOverlayItemsPosition();
    Overlay.currMovie = Overlay.movie[0];
    Overlay.currMovie.pause();

    init()

    setTimeout(function() {
        playback();
    },500) // delay for initialisation purpose
});