(function($) {

zeit.cms.declare_namespace('zeit.content.article');


zeit.content.article.PreviewTabs = gocept.Class.extend({

    SESSION_KEY: 'zeit.content.article.preview.selected',

    construct: function(id) {
        var self = this;
        self.initialize_tabs(id);
        self.restore_selection();
    },

    initialize_tabs: function(id) {
        var self = this;
        self.tabs = $(id).tabs();
        $(id)[0].preview_tab = self;
        self.tabs.tabs('add', '#preview-tablet', 'iPad');
        self.tabs.tabs('add', '#preview-full', 'Desktop');

        self.tabs.bind('tabsselect', function(event, ui) {
            var id = $(ui.tab).attr('href');
            self.save_selection(id);
        });
    },

    save_selection: function(id) {
        var self = this;
        window.sessionStorage.setItem(self.SESSION_KEY, id);
    },

    restore_selection: function() {
        var self = this;
        var id = window.sessionStorage.getItem(self.SESSION_KEY);
        self.tabs.tabs('select', id);
    }

});


MochiKit.Signal.connect(window, 'cp-editor-loaded', function() {
    if ($('#preview-tabs').length) {
        
        new zeit.content.article.PreviewTabs('#preview-tabs');
        
        window.addEventListener("message", function(e){
            if (e.data.tablet){
                $('#preview-tablet').css('height',(e.data.height_obj.offsetHeight+20)+"px");
            } 
            else if (!e.data.tablet){
                $('#preview-full').css('height',(e.data.height_obj.offsetHeight+20)+"px");
            }
        }, false)


        /* We need this observer since an iframe with display:none
         * cannot determine the height of its viewport correctly.
         *
         * The observer checks if a tab is activated an therefore the
         * iframe neds to be reloaded.
         */
        
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.attributeName=="class" && 
                    $(mutation.target).attr("class").indexOf("ui-tabs-hide") == -1 &&
                    Number($(mutation.target).css('height').replace("px","")) <= 500){
                    mutation.target.src = mutation.target.src; 
                } 
            });   
        });

        var config = { attributes: true, childList: false, characterData: false }
        observer.observe(document.getElementById("preview-full"),config);        
        observer.observe(document.getElementById("preview-tablet"),config);        
    }

});

})(jQuery);

@@ -710,19 +710,608 @@
         
-%7D);
+    self.reload_frame(id);%0A        %7D);%0A        %0A        $('#edit-form-article-content').bind('fold',function(e,folded)%7B%0A            if (!folded)%7B%0A                var id = window.sessionStorage.getItem(self.SESSION_KEY);%0A                if ($(id).css('height')==%22500px%22)%7B%0A                    $(id).data('reloaded',false);%0A                    self.reload_frame(id);%0A                %7D    %0A            %7D%0A        %7D); %0A    %7D,%0A%0A    reload_frame: function(id) %7B%0A        if (!$(id).data('reloaded'))%7B%0A            $(id).data('reloaded',true);%0A            $(id).attr(%22src%22, $(id).attr(%22src%22));%0A        %7D
 %0A    %7D,%0A
@@ -1559,32 +1559,69 @@
 f.SESSION_KEY);%0A
+        $(id).data('reloaded',true);%0A
         self.tab
@@ -1773,16 +1773,35 @@
 %0A       
+ var preview_tabs =
  new zei
@@ -1925,20 +1925,26 @@
         
-if (
+var id =  
 e.data.t
@@ -1952,206 +1952,73 @@
 blet
-)%7B%0A                $('#preview-tablet').css('height',(e.data.height_obj.offsetHeight+20)+%22px%22);%0A            %7D %0A            else if (!e.data.tablet)%7B%0A                $('#preview-full').css('
+ ? %22#preview-tablet%22 : %22#preview-full%22;%0A            var 
 height
-',(
+ = 
 e.da
@@ -2047,1044 +2047,135 @@
 ight
-+20)+%22px%22);%0A            %7D%0A        %7D, false)%0A%0A%0A        /* We need this observer since an iframe with display:none%0A         * cannot determine the height of its viewport correctly.%0A         *%0A         * The observer checks if a tab is activated an therefore the%0A         * iframe neds to be reloaded.%0A         */%0A        %0A        var observer = new MutationObserver(function(mutations) %7B%0A            mutations.forEach(function(mutation) %7B%0A                if (mutation.attributeName==%22class%22 && %0A                    $(mutation.target).attr(%22class%22).indexOf(%22ui-tabs-hide%22) == -1 &&%0A                    Number($(mutation.target).css('height').replace(%22px%22,%22%22)) %3C= 500)%7B%0A                    mutation.target.src = mutation.target.src; %0A                %7D %0A            %7D);   %0A        %7D);%0A%0A        var config = %7B attributes: true, childList: false, characterData: false %7D%0A        observer.observe(document.getElementById(%22preview-full%22),config);        %0A        observer.observe(document.getElementById(%22preview-tablet%22),config);        
+; %0A            if (height %3E= 500)%7B%0A               $(id).css('height',(height+20)+%22px%22);%0A            %7D%0A        %7D, false);
 %0A    %7D%0A
-%0A
 %7D);%0A

Simplify resizing of preview iframes.