CINXE.COM
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name = "share_book_description" property="og:description" name="description" content="Check out how FlipViewer can help you with your publishing" /> <meta name = "share_book_title" property="og:title" content="DEFINE_TITLE" /> <meta name = "share_book_image_url" property="og:image" content="DEFINE_URL_TO_IMAGE" /> <meta name = "share_book_image_width" property="og:image:width" content="150" /> <meta name = "share_book_image_height" property="og:image:height" content="200" /> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" type="text/css" href="css/customize-toolbar.css" /> <style> </style> </head> <body> <audio id="audio" preload="auto"> <source src="audio/flipsnd.wav" type="audio/wav" controls></source> </audio> <div style="opacity: 0; margin-bottom: 0px! important;" class="container" id="slideshow_container"> </div> <div id="Install" data-role="Install"> <div id="Defense"> <div> <table> <tr> <td><span>Please enter your password:</span><span>The password appears to be incorrect. Please contact your publisher for more details.</span></td> </tr> </table> </div> <div> <table> <tr> <td nowrap><span>Password:</span></td> <td><input type="password" value="" /></td> <td><button><span>Submit</span></button></td> </tr> </table> </div> </div> </div> <div id="Audioplayer" data-role="Audioplayer" class=""> </div> <div id="Atmosphere" data-role="Atmosphere"> <div id="pageBorder" class="pageBorder" style="display: none;"> </div> </div> <div id="Fulltext" data-role="Fulltext"> </div> <div id="Thick" data-role="Thick"> <div class="dummy-text" style="display:none;"> <a href="javascript:void(0)" class="close-alert"></a> Please begin writing on a page within <span class="count-down-innerhtml">10</span> seconds to highlight content. </div> </div> <div id="Anchor" data-role="Anchor"></div> <div id="HighDefinition" data-role="HighDefinition"> <div id="HighDefinitionContentScroller"></div> </div> <div id="FlyOver" data-role="FlyOver" class="Menu FlyOver-main"> <div class="Header"><b><span>Table of Contents</span></b></div> <div id="FlyOverContent" class="Content"> <div id="FlyOverContentScroller" class="Scroller"></div> </div> </div> <div id="Panorama" data-role="Panorama" class="Menu Panorama-main"> <div class="Header"><b><span>Thumbnails</span></b></div> <hr> <div class="Description">Click on a thumbnail to jump directly to the page:</div> <div id="PanoramaContent" class="Content"> <div id="PanoramaContentScroller" class="Scroller"></div> </div> </div> <div id="Seek" data-role="Seek" class="Menu Seek-main"> <div class="Header"><b><span>Search</span></b></div> <hr> <div class="Description">Enter your keywords below to start searching:</div> <div class="Prompt"><input type="text" value="" /></div> <div id="SeekContent" class="Content"> <div id="SeekContentScroller" class="Scroller"></div> </div> </div> <div id="Tagged" data-role="Tagged" class="Menu Tagged-main"> <div class="Header"><b><span>List of Bookmarks</span></b></div> <hr> <div class="Which"> <div id="BookmarkCastor" class="Itemize"><img src="skin/add.png" /><input type="hidden" value="" /><span></span></div> <div id="BookmarkPollux" class="Itemize"><img src="skin/add.png" /><input type="hidden" value="" /><span></span></div> </div> <div id="TaggedContent" class="Content"> <div id="TaggedContentScroller" class="Scroller"></div> </div> </div> <div id="Specify"> <div> <table> <tr> <td nowrap><span>For Page Number:</span></td> <td nowrap><span></span></td> </tr> <tr> <td nowrap><span>Bookmark Text:</span></td> <td><input class="new-form" type="text" size="30" value="" /></td> </tr> <tr> <td nowrap><span>Bookmark Color:</span></td> <td><input type="text" name="unique-name-1" class="insert-value" data-palette='[{"ff0000":"#ff0000"},{"8700ff":"#8700ff"},{"ffed00":"#ffed00"},{"d4531f":"#d4531f"},{"156086":"#156086"},{"33690c":"#33690c"},{"C2185B": "#C2185B"},{"F8BBD0": "#F8BBD0"},{"CDDC39": "#CDDC39"},{"212121": "#212121"},{"730f7b": "#730f7b"},{"B6B6B6": "#B6B6B6"},{"aad4ad":"#aad4ad"},{"ffa500":"#ffa500"},{"132a8e":"#132a8e"}]' size="7" id="book-mark-color" style="display:none;"></td> </tr> </table> </div> <div align="right"> <table> <tr> <td><button class="edit-bookmark">Submit</button></td> <td><button class="add-bookmark" id="add-new-bookmark" style="display:none">Add</button></td> <td><button class="btn-cancel-bookmark">Cancel</button></td> </tr> </table> </div> </div> <div id="Reminder" data-role="Reminder" class="Menu Reminder-main"> <div class="Header"><b><span>Manage Notes</span></b></div> <hr> <div class="Which"> <div><textarea></textarea></div><br /></div> <div id="ReminderContent" class="Content"> <div id="ReminderContentScroller" class="Scroller"></div> </div> </div> <div id="Luminiser" data-role="Luminiser" class="Menu Luminiser-main"> <div class="Header"><b><span>Highlight Content</span></b></div> <hr> <div class="Which form-outer"> <div><input type="radio" name="Mode" value="Rectangular" /><span>Rectangular</span> <input type="radio" name="Mode" value="Hand-Written" /><span>Free-Form</span> </div> <div><span>Highlight Line Width:</span> <select class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option></select></div> <div><span>Highlight Color:</span> <input type="text" name="unique-name-n" data-palette='[{"ff0000":"#ff0000"},{"8700ff":"#8700ff"},{"ffed00":"#ffed00"},{"d4531f":"#d4531f"},{"156086":"#156086"},{"33690c":"#33690c"},{"C2185B": "#C2185B"},{"F8BBD0": "#F8BBD0"},{"CDDC39": "#CDDC39"},{"212121": "#212121"},{"730f7b": "#730f7b"},{"B6B6B6": "#B6B6B6"},{"aad4ad":"#aad4ad"},{"ffa500":"#ffa500"},{"132a8e":"#132a8e"}]' size="7" style="display:none;" class="apply-color"></div> </div> </div> <div id="Library" data-role="Library" class="Menu Library-main"> <div class="Header"><b><span>Archived Issues</span></b></div> <div id="LibraryContent" class="Content"> <div id="LibraryContentScroller" class="Scroller"></div> </div> </div> <div id="Pioneer" data-role="Pioneer" class="Menu Pioneer-main"> <div class="Header"><b><span>More</span></b></div> <hr> <div class="Content more-info-content"> <div id="NotePioneer" class="Itemize"><i class="icon-tag icons"></i><span class="IsSubMenu">Manage Notes</span></div> <div id="PenPioneer" class="Itemize"><i class="icon-note icons"></i><span class="IsSubMenu">Highlight Content</span></div> <div id="PrintPioneer" class="Itemize"><i class="icon-printer icons"></i><span class="IsSubMenu">Print Pages</span></div> <div id="SaveAsPioneer" class="Itemize"><i class="icon-cloud-download icons"></i><span class="IsSubMenu">Download Pages as PDF</span></div> <div id="ShareMailPioneer" class="Itemize"><i class="icon-envelope icons"></i><span>Share by e-mail</span></div> <div id="ShareFacePioneer" class="Itemize"><i class="icon-social-facebook icons"></i><span>Share on Facebook</span></div> <div id="ShareTwitterPioneer" class="Itemize"><i class="icon-social-twitter icons"></i><span>Share on Twitter</span></div> <div id="ArchivePioneer" class="Itemize"><i class="icon-briefcase icons"></i><span class="IsSubMenu">Magazine Archive</span></div> <div id="OfflinePioneer" class="Itemize"><img src="skin/offline_.png" /><span>Download in Offline App</span></div> <div id="SignaturePioneer" class="Itemize"><i class="icon-user icons"></i><span class="IsSubMenu">About Us</span></div> </div> </div> <div id="Xerography" data-role="Xerography" class="Menu Xerography-main"> <div class="Header"><b><span>Print Single Page</span></b></div> <hr> <div class="Content"> <div id="XerographyCastor" class="Itemize"><i class="icon-printer icons"></i><input type="hidden" value="" /><span></span></div> <div id="XerographyPollux" class="Itemize"><i class="icon-printer icons"></i><input type="hidden" value="" /><span></span></div> </div> </div> <div id="PDF" data-role="PDF" class="Menu PDF-main"> <div class="Header"><b><span>Download As PDF</span></b></div> <hr> <div class="Content"> <div id="PDFAll" class="Itemize"><i class="icon-cloud-download icons"></i><span>Complete Document</span></div> <div id="PDFCastor" class="Itemize"><i class="icon-cloud-download icons"></i><input type="hidden" value="" /><span></span></div> <div id="PDFPollux" class="Itemize"><i class="icon-cloud-download icons"></i><input type="hidden" value="" /><span></span></div> </div> </div> <div id="AboutUsPanel" data-role="AboutUsPanel" class="Menu"> <div class="Header"><b><span></span></b></div> <hr> <div id="AboutUsPanelContent" class="Content"> <div id="AboutUsPanelContentScroller" class="Scroller"> <div id="JointVenture"> <div><img /></div> <table> <tr> <td nowrap><b><span>Title:</span></b> </td> <td><span></span></td> </tr> <tr> <td nowrap><b><span>Company:</span></b> </td> <td><span></span></td> </tr> <tr> <td nowrap><b><span>Website:</span></b> </td> <td><span></span></td> </tr> <tr> <td nowrap><b><span>Address:</span></b> </td> <td><span></span></td> </tr> <tr> <td nowrap><b><span>Telephone:</span></b> </td> <td><span></span></td> </tr> <tr> <td nowrap><b><span>E-mail:</span></b> </td> <td><span></span></td> </tr> <tr> <td nowrap><b><span>Author:</span></b> </td> <td><span></span></td> </tr> </table> </div> <div class="Sectionize"></div> <div id="TradeMark"> <table> <tr valign="middle"> <td><img src="skin/flipviewer_xpress.png" /></td> <td> <p class="copyright-text"> Copyright © 2007-2018 </p> <p class="copyright-text"> Revanton Pte. Ltd. </p> <a href="http://www.flipviewer.com" class="copyright-text-a">www.flipviewer.com</a> <p class="copyright-text">HTML5 Viewer - <span id="">Version 2.1.1 Build 153</span></p> </td> </tr> </table> </div> <div class="Sectionize"></div> <div id="Patent"> <table> <tr valign="middle"> <td><span>Protected by U.S. Patent No.</span> <span>6,064,384; 6,407,757; 6,496,803; 6,701,301; 6,725,203; 6,762,775; 6,976,225; 7,079,111; 7,165,039; 7,376,582; 7,555,724</span><br /> <span>Other Patents Pending. All Rights Reserved.</span><br /></td> </tr> </table> </div> </div> </div> </div> <div id="World" data-role="World"> <div id="Tension" class="fadeIn"> <div id="MoreWorld" class="Bar tooltip Pioneer-main" title="More" data-thumbnail="Pioneer"><i class="icon-options-vertical icons"></i></div> <div id="fullscreen" class="Bar requestfullscreen tooltip" title="Fullscreen"><i class="icon-size-fullscreen icons"></i></div> <div id="fullscreen-full" class="Bar exitfullscreen" style="display: none"><i class="icon-size-actual icons"></i></div> <input type="hidden" class="bookmark-status" value="disabled"> <input type="hidden" class="drone-leftvalue"> <input type="hidden" class="drone-rightvalue"> <div id="IButtonWorld" class="Bar tooltip IButton-main" title="Information" data-thumbnail="IButton"><i class="icon-info icons"></i></div> <div id="PrinterWorld" class="Bar tooltip Xerography-main" title="Print Pages" data-thumbnail="Panorama"><i class="icon-printer icons"></i></div> <div id="BookmarkWorld" class="Bar tooltip Tagged-main" title="Bookmarks" data-thumbnail="Tagged"><i class="icon-pin icons"" aria-hidden="true"></i></div> <div id="SearchWorld" class="Bar tooltip Seek-main" title="Search" data-thumbnail="Seek"><i class="icon-magnifier icons"></i></div> <div id="ThumbnailWorld" class="Bar tooltip Panorama-main" title="Thumbnails" data-thumbnail="Panorama"><i class="icon-grid icons"></i></div> <div id="TOCWorld" class="Bar tooltip FlyOver-main" title="Table of Contents"><i class="icon-list icons"></i></div> <div id="Axis"> <div><span></span><input type="text" value="1" /></div> </div> <div id="Us"><img /></div> </div> <div id="Pulley"></div> </div> <div id="Compass" data-role="Compass"> <div id="Laplace"></div> <div id="Derivative"></div> <div id="Streaming"></div> </div> <div id="Offline" data-role="Offline"> <div class="Sleeve"> <div><img src="skin/close.png" /></div> </div> <div class="Scarf"> <table> <tr> <td align="center"> <div><img src="skin/offline.png" /><b><span>DOWNLOAD</span></b></div> </td> <td><span>Click on the "Download" button to view and download this publication in the FlipViewer Offline App</span></td> </tr> </table> </div> </div> <div id="Curtain" data-role="Curtain"> <img /> <div><span>Landscape Mode Unsupported on Mobile Phone</span></div> </div> <div id="Navigate" data-role="Navigate"> <img id="launchingPageLogoOrCover" /> <div id="loadingText" style="display: none">Preparing issue</div> <div class="NavigateBookIssueTitle" id="bookName" style="display: none">bookNameStr</div> <div id="fvxLogo" style="display: block;background-image: url('./img/fvxlogo.png'); height: 20px;width: 120px;background-size: 100%;height: 45px;background-repeat: no-repeat;background-position: initial;background-blend-mode: border-box;background-color: transparent; z-index: 5; display: none"></div> <div class="sk-cube-grid" style="position: absolute;opacity: 0.5;background: black;z-index:5; display:none;"> <div class="sk-cube sk-cube1"></div> <div class="sk-cube sk-cube2"></div> <div class="sk-cube sk-cube3"></div> <div class="sk-cube sk-cube4"></div> <div class="sk-cube sk-cube5"></div> <div class="sk-cube sk-cube6"></div> <div class="sk-cube sk-cube7"></div> <div class="sk-cube sk-cube8"></div> <div class="sk-cube sk-cube9"></div> </div> <div id="bottomShadow"></div> </div> <div id="customContentLeftButton" style="color: green; width: 40px; min-height: 50px; position: absolute; top: 100px; left: 0px; z-index: -10; text-align: center;"></div> <div id="customContentRightButton" style="color: green; width: 40px; min-height: 50px; position: absolute; top: 350px; z-index: -10; text-align: center;"></div> <div id="slider" class="zoomSlider"> </div> <div class="minusZoomButton"> </div> <div class="plusZoomButton"> </div> </div> <script src="js/libs.min.js"></script> <script type="text/javascript"> const loadingTextStr = document.title; //"Lade Ausgabe"; const bookNameStr = ""; function positionElements() { var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; var oneThirdH = h / 3 / 2; var twoThirdH = h / 3 * 2; var threeThirdH = h / 3 * 3; var itemWCover = 0; var itemHCover = 0; $("#launchingPageLogoOrCover").show(); $("#loadingText").show(); $("#bookName").show(); $(".sk-cube-grid").show(); $("#fvxLogo").show(); $("#bookName").text(function() { return $(this).text().replace("bookNameStr", bookNameStr); }); $("#loadingText").text(function() { // return $(this).text().replace("loadingTextStr", loadingTextStr); }); var coverIsLandscape = ($("#launchingPageLogoOrCover").width() > $("#launchingPageLogoOrCover").height()); if (coverIsLandscape) { itemWCover = 200; // image can be wider than normal } else { itemWCover = 200; } $("#launchingPageLogoOrCover").css("width", itemWCover + "px"); // set real image width var itemWCover = $("#launchingPageLogoOrCover").width(); var itemHCover = $("#launchingPageLogoOrCover").height(); var itemWbookname = $("#bookName").width(); var coverPosY = (twoThirdH - 1.0 * itemHCover); if (coverIsLandscape) coverPosY = h / 2 - itemHCover / 2; if (coverPosY < 200) coverPosY = 200; // position launching page logo $("#launchingPageLogoOrCover").css("position", "absolute"); $("#launchingPageLogoOrCover").css("left", (w / 2 - itemWCover / 2) + "px"); $("#launchingPageLogoOrCover").css("top", coverPosY + "px"); itemWfvxLogo = $("#fvxLogo").width(); itemHfvxLogo = $("#fvxLogo").height(); // position fvxlogo $("#fvxLogo").css("position", "absolute"); $("#fvxLogo").css("left", (w / 2 - itemWfvxLogo / 2) + "px"); $("#fvxLogo").css("top", (h - 1 * itemHfvxLogo) - 0 + "px"); // position anmiation directly on top of launching logo $(".sk-cube-grid").css("position", "absolute"); $(".sk-cube-grid").css("left", $("#launchingPageLogoOrCover").offset().left + "px"); $(".sk-cube-grid").css("top", coverPosY + "px"); $(".sk-cube-grid").css("width", $("#launchingPageLogoOrCover").width()); $(".sk-cube-grid").css("height", $("#launchingPageLogoOrCover").height()); // position bookname & loadingtext $("#bookName").css("top", 90 + "px"); $("#bookName").css("position", "absolute"); $("#bookName").css("left", (w / 2 - itemWbookname / 2) - 10 + "px"); $("#bookName").css("margin-left", (-10) + "px"); $("#loadingText").css("top", 30 + "px"); $("#loadingText").css("position", "absolute"); $("#loadingText").css("left", (w / 2 - itemWbookname / 2) - 10 + "px"); $("#loadingText").css("margin-left", (-10) + "px"); // position bottom shadow $("#bottomShadow").css("width", w + "px"); $("#bottomShadow").css("top", (h - $("#bottomShadow").height()) + "px"); } positionElements(); setTimeout(function() { positionElements() }, 100); </script> <script type="text/javascript"> window.ytfullscreen = false; // if (typeof console == "undefined") // console = { // log: function() {} // }; document.ontouchmove = function(event) { event.preventDefault(); } function initialize() { $(document).trigger("initialize"); window.Install.setUp(); } function onYouTubeIframeAPIReady() { window.Install.you_tubed = true; }; function onPlayerPlaybackQualityChange(event) { if(fullscreen != null) window.ytfullscreen = true; else window.ytfullscreen = false; return; setTimeout(function () { if(window.ytIsPlaying == true) if(window.ytfullscreen == true) window.ytfullscreen = false; else window.ytfullscreen = true; }, 500); return; } // The API calls this function when the player's state changes. function onPlayerStateChange(event) { switch(event.data) { case YT.PlayerState.UNSTARTED: window.ytfullscreen = false; break; case YT.PlayerState.ENDED: window.ytplaying = false; window.ytfullscreen = false; break; case YT.PlayerState.PLAYING: window.ytIsPlaying = true; break; case YT.PlayerState.PAUSED: break; case YT.PlayerState.BUFFERING: break; case YT.PlayerState.CUED: break; } } // It must be declared early before 'engine.js' is included below so that it is invoked before all other orientation-change functions will be. $(document).bind("orientationChange", function (e) { window.scrollTo(0, 0); $('#Atmosphere').hide(); window.Install.measure(); window.Install.shape(); $("#Curtain").hide(); if((device.name == "iPhone") || (device.name == "GalaxyS2") || (device.name == "GalaxyS3")) { if(window.Install.orientation == "Landscape") { if(!window.Personalize.landscape_attain) { window.Curtain.specialize(); $("#Curtain").show(); } } } }); $(function () { $('.more-info-content').slimScroll({ height: 'auto' }); }); $(document).ready(function () { // new loading screen // $("#audio-player-setup").load("js/audioplayer_setup.html", function(){}); positionElements(); // zoomSlider start zoomSlider(); // setup slider position $('div.slider').hide(); // hide on start // zoomSlider end $('.close-alert').click(function () { $('.dummy-text').hide(); }); browser.detect(); if(browser.name === "Firefox") { $("html").css("position", "fixed"); $(window).scroll(function (event) { event.preventDefault(); }); } device.detect(); synchronizer.initialize(); if(device.is_it_in_iframe) { window.addEventListener("message", function (message) { if(message.data.initialize) initialize(); else if(message.data.orientationChange) { window.orientation = message.data.orientation; $(document).trigger("orientationChange"); } }, false); } else initialize(); }); flowplayer.conf = { engine: "html5", fullscreen: false, native_fullscreen: true, splash: true, embed: false }; $(window).unload(function () { if((window.Install.FlipAnalyzer != null) && (window.Install.FlipAnalyzer.url != null) && (window.Install.FlipAnalyzer.url != "")) $.post(window.Install.FlipAnalyzer.url + "/bClose.cgi", { key: window.Install.FlipAnalyzer.token }); }); var fullscreen = false; document.addEventListener("fullscreenchange", onFullScreenChange, false); document.addEventListener("webkitfullscreenchange", onFullScreenChange, false); document.addEventListener("mozfullscreenchange", onFullScreenChange, false); function onFullScreenChange() { fullscreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement; // console.log('onresize fullscreenfullscreen ' + JSON.stringify(fullscreen)); if(fullscreen == null 聽|| fullscreen == undefined) { $('#fullscreen').removeClass('bar-active'); fullscreen = false; window.ytfullscreen = false; } // if in fullscreen mode fullscreenElement won't be null } window.addEventListener('load', function () { window.onresize = function () { // console.log('onresize 1 ' + fullscreen); // console.log('onresize 1' + window.ytfullscreen); if (fullscreen != null) { if (window.ytfullscreen == true) { return; } if (window.ytfullscreen == false) $(document).trigger("orientationChange"); // // new loading screen // positionElements(); // zoomSlider(); } else if((fullscreen == false || fullscreen == undefined || fullscreen == null) && window.ytfullscreen == false || fullscreen != null && window.ytfullscreen == true) { if(window.ytfullscreen == true) return; $(document).trigger("orientationChange"); // new loading screen positionElements(); zoomSlider(); } } }); // window.addEventListener('load', function () { // window.onresize = function () { // //console.log('onresize 1 ' + fullscreen); // //console.log('onresize 1' + window.ytfullscreen); // if(fullscreen == null && window.ytfullscreen == false || fullscreen != null && window.ytfullscreen == false) { // if(window.ytfullscreen == true) return; // $(document).trigger("orientationChange"); // // new loading screen // positionElements(); // zoomSlider(); // } // } // }); function zoomSlider() { /* $(".ui-slider-handle").draggable({ axis: "x", containment: "parent" }); */ var $this = $(window); var width = $this.width(); var height = $this.height(); var offset = $this.offset(); var centerX = width / 2; var centerY = height / 2; var sliderWidth = $("div.slider").width(); var xPos = width / 2 - sliderWidth / 2; //console.log("slider" + xPos); $("div.slider").css({ 'position': 'absolute' }); $("div.slider").css({ 'top': height - 40 }); $("div.slider").css({ 'left': xPos }); } </script> <script type="text/javascript" src="js/global.js"></script> <script type="text/javascript" src="js/personalize.js"></script> <script type="text/javascript" src="js/utility.js"></script> <script type="text/javascript" src="js/platform.js"></script> <script src="js/flipviewer.min.js"></script> <script> function loadApp() { var flipbook = $('.flipbook'); // Check if the CSS was already loaded // Mousewheel // Arrows // Create the flipbook // Show canvas $('#canvas').css({ visibility: 'visible' }); } // Hide canvas </script> </body> </html>