eframeOrigin = 'https://e2see.de';


$.fn.eFrameInit = function(){
    this.wrap('<div class="e-frame-container"></div>');
    var cont = this.parent();
    var html = '\
      <style>\
      .e-frame-container {\
          transition: height 0ms;\
      }\
      .e-frame-container > iframe {\
          border: 0;\
          width: 100%;\
          height: 100%;\
          background: rgba(0,0,0,.3) !important;\
          overflow: auto !important;\
      }\
      html[data-e-frame="fullScreen"],\
      html[data-e-frame="fullScreen"] body {\
        height: 100%;\
      }\
      html[data-e-frame="fullScreen"] .e-frame-container > iframe {\
          position: fixed  !important;\
          left:0  !important;\
          top: 0  !important;\
          border: 0  !important;\
          margin: 0  !important;\
          width: 100% !important;\
          height: 100%  !important;\
          background: rgba(0,0,0,.8) !important;\
          z-index:9999;\
      }\
      </style>\
    ';
    cont.append(html);
}


$.fn.eFrameScrollToElem = function(options) {

    $frame = this;
    $box   = $frame.parent('.e-frame-container');

    var settings = $.extend({
                        pos         :0,
                        delay       :0,
                        duration    :180,
                        topOffset   :0,
                        afterScroll :function(){}
                        }, options);


    //zielpixel höher anvisieren;

    var framePos  = $box.offset().top;
    var scrollPos = $(window).scrollTop();
    var targetPos = (framePos + settings.pos) - settings.topOffset;

    // aber nicht höher als 0 ;)
    if (targetPos < 0){
        targetPos = 0;
    }


    setTimeout(function(){
        $('html, body').animate({
                            scrollTop:  targetPos,
                        },
                        parseInt(settings.duration)
                        ).promise().then(function(){
                            settings.afterScroll.call();
                        });
    }, settings.delay);


    return this;
}


$.fn.sonSays = function(data) {

    $frame = this;
    $box   = $frame.parent('.e-frame-container');
    var action = 'none';

    if (data.action == 'fullScreenMe'){
        $('html').attr('data-e-frame', 'fullScreen');
        action = 'haveFullScreenYou';


    }else if(data.action == 'resizeMe'){
        $box.height(data.params.windowHeight);
        action = 'haveResizeYou';


    }else if(data.action == 'staticMe'){
        $('html').attr('data-e-frame', 'static');
        $box.height(data.params.windowHeight);
        action = 'haveStaticYou';


    }else if(data.action == 'scrollMe'){
         $frame.eFrameScrollToElem(data.params);
         action = 'haveScrollYou';
    }


    var rect = $box[0].getBoundingClientRect();
    var par  = {
                leftMargin  : rect.x,
                rightMargin : window.innerWidth - rect.x - rect.width,
                };

    var post = {action: action, params: par};
    $frame[0].contentWindow.postMessage(post, eframeOrigin);
}


$(document).ready(function() {
    var $eFrame = $('.e-frame');
    $eFrame.eFrameInit();

    window.addEventListener('message', receiveMessage);

    function receiveMessage(event) {
        if (event.origin !== eframeOrigin)
        return;
        $eFrame.sonSays(event.data);
    }

});


/* cdn 2ms */