3<link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="./element-editor.html">
<!--<link rel="import" href="./element-thumb-editor.html">-->

<link rel="import" href="./element-minipage.html">
<link rel="import" href="./element-thumb.html">
<link rel="import" href="./element-canvas.html">

<link rel="import" href="../element-text/element-text.html">

<link rel="import" href="../element-image/element-image.html">
<link rel="import" href="../element-image/element-image-editor.html">

<link rel="import" href="../element-gallery/element-gallery.html">
<link rel="import" href="../element-gallery/element-gallery-editor.html">

<link rel="import" href="../element-quick-slide/element-quick-slide.html">
<link rel="import" href="../element-quick-slide/element-quick-slide-editor.html">

<link rel="import" href="../element-video/element-video.html">
<link rel="import" href="../element-video/element-video-editor.html">

<link rel="import" href="../element-swf/element-swf.html">
<link rel="import" href="../element-swf/element-swf-editor.html">
<link rel="import" href="../element-external/element-external-editor.html">

<link rel="import" href="../element-audio/element-audio.html">
<link rel="import" href="../element-audio/element-audio-editor.html">

<!--<link rel="import" href="../element-script/element-script.html">-->

<link rel="import" href="../element-interactive/element-interactive.html">
<link rel="import" href="../element-interactive/element-interactive-editor.html">
<link rel="import" href="../element-interactive/element-interactive-mini.html">

<link rel="import" href="../element-multi/element-multi.html">
<link rel="import" href="../element-multi/element-multi-editor.html">

<dom-module id="main-app">
  <style>
    * {
      -webkit-user-select: none;
      user-select: none;
    }
    :host {
      --paper-tooltip: {
        font-size: 14px!important;
      }
      --zoom-level: .5;
      --outline-zoomed: 1;
    }
    
    app-toolbar {
      background-color: #3f51b5;
      padding: 5px 0;
    }
    
    .mainTitle {
      padding: 10px 30px;
      text-transform: initial;
      overflow: hidden;
      color: #fff;
      text-align: center;
      font-size: 1.3vw;
      max-height: 60px;
    }
    .toolMenu paper-button {
      color: #000000;
      display: block;
      font-size: 14px;
      text-align: left;
    }
    .toolMenu iron-icon {
      width: 18px;
      height: 18px;
      margin-right: 7px;
      vertical-align: top;
    }
    .toolMenu.thumb {
      width: 575px;
      padding: 10px 5px 10px 20px;
      cursor: pointer;
    }
    .topic-title-cnt {
      width: 95px;
      height: 35px;
      overflow-y: hidden;
      margin-bottom: 5px;
    }
    .topic-title {
      width: 95px;
      height: 35px;
      display: table-cell;
      vertical-align: bottom;
      color: #666666;
      font-size: 9px;
      line-height: 12px;
      font-weight: bold;
    }
    .pagenum {
      color: #666666;
      font-size: 10px;
    }
    .miniBox {
      margin: 10px;
      float: left;
    }
    .miniPage {
      width: 85px;
      overflow: hidden;
      display: block;
    }
    .miniPage .container {
      transform-origin: left top;
      background-repeat: no-repeat;
      background-position: left top;
      -webkit-background-size: cover;
      background-size: 100%;
      
      box-sizing: border-box;
    }
    .miniPage * {
      -webkit-user-select: none;
      user-select: none;
    }
    .numPager {
      display: block;
      margin-bottom: 25px;
      width: 35px;
      text-align: center;
    }
    .miniBtn {
      font-size: 10px;
      color: #ffffff;
      text-transform: initial;
    }
    .miniBtn iron-icon {
      display: block;
      margin-bottom: 3px;
    }
    .megaBtn {
      font-size: 16px;
      color: #3f51b5;
      text-transform: initial;
    }
    .megaBtn iron-icon {
      --iron-icon-height: 64px;
      --iron-icon-width: 64px;
      display: block;
      margin-bottom: 3px;
    }
    
    
    
    #registerWindow paper-input {
      margin-top: 0;
    }
    .buttons {
      margin-top: 20px;
    }
    .ttip {
      position: absolute;
      padding: 5px 10px;
      background-color: #333333;
      color: #fff;
      opacity: 0.8;
      font-size: 16px;
      border-radius: 10px;
    }
    .colorMenu {
      padding: 10px;
    }
    .colorMenu paper-button {
      --paper-button: {
        margin: 0;
        padding: 7px;
        min-width: 25px;
      }
    }
    .dot {
      height: 25px;
      width: 25px;
      border-radius: 50%;
      display: inline-block;
      border: 4px solid #ffffff;
      box-shadow: 0 0 5px 0 rgba(0,0,0,0.75);
    }
    .closeBtn {
      font-size: 12px;
      color: #000;
      text-transform: initial;
    }
    #thumbMenu {
      --paper-menu-button-content: {
        width: 620px;
      }
    }
    .topicSelector {
      padding: 5px;
      border-top: 1px solid #c0c0c0;
    }
    .window {
      padding: 0 30px 10px 30px;
      width: 600px;
    }
    
    
    .mainBoard {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #f5f5f5;
      position: relative;
    }

    .workPage {
      transform: scale(var(--zoom-level),var(--zoom-level));
      transform-origin: left top;
      background-repeat: no-repeat;
      background-position: left top;
      -webkit-background-size: cover;
      background-size: 100%;
      box-sizing: border-box;
    }
    
    .navArrows {
      top: 0;
      position: absolute;
      width: 75px;
      height: 100%;
      opacity: 0;
      cursor: pointer;
      transition: opacity .2s ease-out;
      z-index: 1;
    }
    .navArrows:hover {
      opacity: 0.5;
    }
    #leftArrow {
      left: 0;
      background: #ffffff url('../../images/arrow-left.png') center center no-repeat;
    }
    #rightArrow {
      right: 0;
      background: #ffffff url('../../images/arrow-right.png') center center no-repeat;
    }
    
    #innerL, #innerR {
      position: relative;
    }
    #scrollable {
      max-height: 100%;
      overflow-x: hidden;
      overflow-y: hidden;
      touch-action: pan-y!important;
    }
    .notesElement {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;

      box-sizing: border-box;
      transform: scale(var(--zoom-level),var(--zoom-level));
      transform-origin: left top;
    }
  </style>
  <template>
    <app-header-layout has-scrolling-region="" fullbleed="" id="appLayout">
      <app-header id="appHeader" fixed="">
        <app-toolbar>
      
        <!--<paper-button id="chapters" class="miniBtn" toggles>
          <center><iron-icon icon="icons:apps"></iron-icon>Част / Раздел</center>
        </paper-button>-->
        
        <paper-menu-button vertical-offset="45" id="topicMenu" style="padding: 0;">
          <paper-button class="dropdown-trigger miniBtn"><center><iron-icon icon="icons:menu"></iron-icon>Съдържаниe</center></paper-button>
          <paper-material class="dropdown-content toolMenu">
            <template is="dom-repeat" items="{{document.pages}}" as="page" filter="isNewTopic" observe="newTopic topicTitle" id="topicSelector">
              <paper-button on-click="goToPage">{{page.topicTitle}}</paper-button>
            </template>
          </paper-material>
        </paper-menu-button>
        
        <paper-menu-button vertical-offset="45" id="thumbMenu" style="padding: 0;">
          <paper-button class="dropdown-trigger miniBtn"><center><iron-icon icon="icons:description"></iron-icon>Страници</center></paper-button>
          <paper-material class="dropdown-content toolMenu thumb">
            <template is="dom-repeat" items="{{document.pages}}" as="page" observe="newTopic topicTitle" id="thumbSelector">
              <div class="miniBox" on-click="goToThumb">
                <div class="topic-title-cnt"><div class="topic-title">{{page.topicTitle}}</div>&nbsp;</div>
                
                <paper-material class="miniPage" elevation="2" style$="height: {{getMiniHeight(page.style.width, page.style.height)}}px;">
                  <div class="container" style$="width: 85px; height: {{getMiniHeight(page.style.width, page.style.height)}}px; background-image: {{getFileUrl(page.style.backgroundImage)}};"></div>
                </paper-material>
                <div><span class="pagenum">{{getPageNum(page)}}</span></div>
              </div>
            </template>
            <div style="clear: both;"></div>
          </paper-material>
        </paper-menu-button>
        
        <paper-button class="miniBtn" on-click="selectPrev">
          <center><iron-icon icon="icons:arrow-back"></iron-icon>Назад</center>
        </paper-button>
        
        <input is="iron-input" id="pageNumber" value="[[selectedPageNumber]]" prevent-invalid-input="" allowed-pattern="[0-9]" class="numPager">
        
        <paper-button class="miniBtn" on-click="selectNext">
          <center><iron-icon icon="icons:arrow-forward"></iron-icon>Напред</center>
        </paper-button>
        
        <div class="flex mainTitle">[[document.settings.title]]</div>

<!--        <div style="width: 150px;"></div>-->

        <paper-button id="noteTools" class="miniBtn" toggles="">
          <center><iron-icon icon="icons:gesture"></iron-icon>Инструменти<br>за маркиране</center>
        </paper-button>
        
        <iron-collapse id="noteCont" horizontal="">
          <div style="width: 300px;">
            <paper-menu-button id="pencilMenu" vertical-offset="45">
              <paper-button id="pencil" class="dropdown-trigger miniBtn">
                <center><iron-icon icon="icons:create"></iron-icon>Молив<br>&nbsp;</center>
              </paper-button>
              <paper-material class="dropdown-content colorMenu">
                <template is="dom-repeat" items="[[colorArray]]" as="group">
                  <div class="layout horizontal">
                    <template is="dom-repeat" items="[[group]]" as="color">
                      <paper-button on-click="setPencil"><div class="dot" style$="background-color: #[[color]];"></div></paper-button>
                    </template>
                  </div>
                </template>
                <div class="layout horizontal end-justified">
                  <paper-button on-click="stopPencil" class="closeBtn"><iron-icon icon="icons:close"></iron-icon>изключи молив</paper-button>
                </div>
              </paper-material>
            </paper-menu-button>
            <paper-menu-button id="brushMenu" vertical-offset="45">
              <paper-button id="brush" class="dropdown-trigger miniBtn">
                <center><iron-icon icon="image:brush"></iron-icon>Четка<br>&nbsp;</center>
              </paper-button>
              <paper-material class="dropdown-content colorMenu">
                <template is="dom-repeat" items="[[colorArray]]" as="group">
                  <div class="layout horizontal">
                    <template is="dom-repeat" items="[[group]]" as="color">
                      <paper-button on-click="setBrush"><div class="dot" style$="background-color: #[[color]];"></div></paper-button>
                    </template>
                  </div>
                </template>
                <div class="layout horizontal end-justified">
                  <paper-button on-click="stopBrush" class="closeBtn"><iron-icon icon="icons:close"></iron-icon>изключи четка</paper-button>
                </div>
              </paper-material>
            </paper-menu-button>
            <paper-button id="eraser" class="miniBtn">
              <center><iron-icon icon="icons:radio-button-unchecked"></iron-icon>Гума<br>&nbsp;</center>
            </paper-button>
            <paper-button id="removeNotes" class="miniBtn">
              <center><iron-icon icon="icons:clear"></iron-icon>Изчисти<br>маркирането</center>
            </paper-button>
          </div>
        </iron-collapse>

        <paper-button id="interactions" class="miniBtn" toggles="">
          <center><iron-icon icon="hardware:mouse"></iron-icon><span id="interactions1Txt">Покажи допълнителни</span><br><span id="interactions2Txt">активни зони</span></center>
        </paper-button>

        <!--
        <paper-button id="single" class="miniBtn" toggles>
          <center><iron-icon icon="editor:insert-drive-file"></iron-icon>Единична<br />страница</center>
        </paper-button>
        -->

        <paper-button id="zoom" class="miniBtn" toggles="">
          <center><iron-icon icon="icons:settings-overscan"></iron-icon><span id="zoom1Txt">Увеличи</span><br><span id="zoom2Txt">страницата</span></center>
        </paper-button>
        
        <paper-menu-button horizontal-offset="-200" vertical-offset="45" id="shareMenu" style="padding: 0;">
          <paper-button class="dropdown-trigger miniBtn"><center><iron-icon icon="icons:send"></iron-icon>Сподели<br>връзка</center></paper-button>
          <paper-material class="dropdown-content toolMenu thumb" style="width: 225px;">
            <paper-button on-click="shareToGoogle">
              <div class="layout horizontal">
                <div><img src="/images/ico-google-classroom.png" alt=""></div>
                <div class="flex" style="height: 32px; line-height: 32px; padding-left: 10px; text-transform: capitalize;">Google Classroom</div>
              </div>
            </paper-button>
            <paper-button on-click="shareToTeams">
              <div class="layout horizontal">
                <div><img src="/images/ico-teams.png" alt=""></div>
                <div class="flex" style="height: 32px; line-height: 32px; padding-left: 10px; text-transform: capitalize;">Microsoft Teams</div>
              </div>
            </paper-button>
            <paper-button on-click="shareToFacebook">
              <div class="layout horizontal">
                <div><img src="/images/ico-facebook.png" alt=""></div>
                <div class="flex" style="height: 32px; line-height: 32px; padding-left: 10px; text-transform: capitalize;">Facebook</div>
              </div>
            </paper-button>
          </paper-material>
        </paper-menu-button>
        
        <!--
        <paper-button id="document-open" class="miniBtn">
          <center><iron-icon icon="icons:folder"></iron-icon>Отвори<br />проект</center>
        </paper-button>
        <paper-button id="document-reload" class="miniBtn">
          <center><iron-icon icon="icons:cached"></iron-icon>Презареди<br />проекта</center>
        </paper-button>
        -->
          </app-toolbar>
        </app-header>
      
        <div class="mainBoard" id="mainBoard" style="background-color: #eee;">
          <div id="leftArrow" class="navArrows" on-click="selectPrev"></div>
          <div class="flex layout horizontal center-justified" id="scrollable">
            <div class="layout horizontal" id="innerBoard">
              <div id="innerL">
                <template is="dom-if" if="{{hasPage(selectedLPage)}}" restamp="">
                  <element-canvas class="notesElement" page="{{selectedLPage}}" effective-zoom="[[effectiveZoom]]" active-tool="[[activeTool]]" pencil-color="[[pencilColor]]" brush-color="[[brushColor]]"></element-canvas>
                  <paper-material class="workPage" elevation="4" style$="width: {{selectedLPage.style.width}}px; height: {{selectedLPage.style.height}}px; background-color: {{selectedLPage.style.backgroundColor}}; background-image: {{getFileUrl(selectedLPage.style.backgroundImage)}}; padding-top: {{selectedLPage.style.paddingTop}}px; padding-right: {{selectedLPage.style.paddingRight}}px; padding-bottom: {{selectedLPage.style.paddingBottom}}px; padding-left: {{selectedLPage.style.paddingLeft}}px;" on-click="zoomLPage">
                    <template is="dom-repeat" items="{{selectedLPage.objects}}">
                      <element-minipage on-click="elementSettingsClick" item="{{item}}" effective-zoom="{{effectiveZoom}}" active="{{interactions}}" style$="z-index: {{getElementZindex(item.isThumb)}};" on-tooltip="toolTip" on-tooltiphide="toolTipHide"></element-minipage>
                    </template>
                    </paper-material>
                  </template>
              </div>
              <div id="innerR">
                <template is="dom-if" if="{{hasPage(selectedRPage)}}" restamp="">
                  <template is="dom-if" if="{{isDoublePage(zoomLevel, isSinglePage)}}" restamp="">
                    <element-canvas class="notesElement" page="{{selectedRPage}}" effective-zoom="[[effectiveZoom]]" active-tool="[[activeTool]]" pencil-color="[[pencilColor]]" brush-color="[[brushColor]]"></element-canvas>
                    <paper-material class="workPage" elevation="4" style$="width: {{selectedRPage.style.width}}px; height: {{selectedRPage.style.height}}px; background-color: {{selectedRPage.style.backgroundColor}}; background-image: {{getFileUrl(selectedRPage.style.backgroundImage)}}; padding-top: {{selectedRPage.style.paddingTop}}px; padding-right: {{selectedRPage.style.paddingRight}}px; padding-bottom: {{selectedRPage.style.paddingBottom}}px; padding-left: {{selectedRPage.style.paddingLeft}}px;" on-click="zoomRPage">
                      <template is="dom-repeat" items="{{selectedRPage.objects}}" index-as="elId">
                        <element-minipage on-click="elementSettingsClick" item="{{item}}" effective-zoom="{{effectiveZoom}}" active="{{interactions}}" style$="z-index: {{getElementZindex(item.isThumb)}};" on-tooltip="toolTip" on-tooltiphide="toolTipHide"></element-minipage>
                      </template>
                    </paper-material>
                  </template>
                </template>
              </div>

              <div class="ttip" id="tTip" style="display: none;">{{elemTooltipText}}</div>
                <!-- TODO ???????????????????????????? -->
              <array-selector id="pageSelector" items="{{document.pages}}" toggle="false" selected="{{selectedPage}}"></array-selector>
              <array-selector id="pageLSelector" items="{{document.pages}}" toggle="false" selected="{{selectedLPage}}"></array-selector>
              <array-selector id="pageRSelector" items="{{document.pages}}" toggle="false" selected="{{selectedRPage}}"></array-selector>
            </div>
          </div>
          <div id="rightArrow" class="navArrows" on-click="selectNext"></div>
        </div>
      
    </app-header-layout>

    <!-- PROMPT DIALOG -->
    <paper-dialog modal="" id="promptWindow" entry-animation="scale-up-animation" style="display: none;">
      <h2>{{prompt.title}}</h2>
      <div style="padding: 5px 25px 15px 25px;">{{prompt.message}}</div>
      <div class="buttons">
        <paper-button dialog-dismiss="">НЕ</paper-button>
        <paper-button dialog-confirm="" raised="">ДА</paper-button>
      </div>
    </paper-dialog>
    <!-- PROMPT DIALOG -->
    
    <!-- PROGRESS DIALOG -->
    <paper-dialog modal="" id="loadingWindow" class="window" exit-animation="fade-out-animation" style="width: 250px; display: none;">
      <center>
        <h2 style="margin-bottom: 30px;">Зареждане</h2>
        <paper-spinner-lite active="" class="thick"></paper-spinner-lite>
      </center>
    </paper-dialog>
    <!-- PROGRESS DIALOG -->
    
    
    <!-- REGISTER DIALOG -->
    <paper-dialog modal="" id="registerWindow" class="window" exit-animation="fade-out-animation" style="display: none">
      <h2>Регистрация</h2>
      <div style="padding: 5px 25px 5px 25px">Моля, въведете регистрационен код, Вашето име и E-mail адрес.<br>Можете да се свържете с нас на телефони: <strong>0888/50 22 78</strong>, <strong>0888/50 22 79</strong> или <strong>052/36 32 74</strong>, ако имате нужда от помощ.<br>Регистрационният код е валиден за една компютърна конфигурация.</div>
      <paper-input label="Регистрационен код:" id="authCode"></paper-input>
      <div id="regWindowNameMail" style="display: none">
        <div style="padding: 5px 25px 0 25px; color: red">Моля, въведете Вашето име и E-mail адрес:</div>
        <paper-input label="Име:" id="authName"></paper-input>
        <paper-input label="E-mail:" id="authEmail"></paper-input>
      </div>
      <div class="buttons">
        <paper-button dialog-confirm="" raised="">РЕГИСТРАЦИЯ</paper-button>
      </div>
    </paper-dialog>
    <!-- REGISTER DIALOG -->
    <!-- REGISTER DIALOG
    <paper-dialog modal="" id="registerWindow" class="window" exit-animation="fade-out-animation" style="display: none">
      <h2>Регистрация</h2>
      <div style="padding: 5px 25px 5px 25px">
        <div style="font-size: 12pt;">Моля, въведете E-mail адреса и паролата от регистрацията Ви в<br><a href="http://www.e-uchebnici.com" target="_blank">www.e-uchebnici.com</a></div>
        <paper-input label="E-mail адрес:" id="email"></paper-input>
        <paper-input label="Парола:" id="pass" type="password"></paper-input>
        <div id="regWindowError" style="display: none">
          <div style="padding: 5px 25px 0 25px; color: red">Невалидни E-mail адрес или парола.<br>Моля, проверете ги и опитайте отново.</div>
        </div>
        <br>
        Можете да се свържете с нас на телефони: <strong>0888/50 22 78</strong>, <strong>0888/50 22 79</strong> или <strong>052/36 32 74</strong>, ако имате нужда от помощ.
      </div>
      
      <div class="buttons">
        <paper-button dialog-confirm="" raised>СТАРТ</paper-button>
      </div>
    </paper-dialog>
    REGISTER DIALOG -->
    
    <paper-dialog modal="" id="trialWindow" entry-animation="scale-up-animation" style="display: none">
      <h2>Периодът за използване е изтекъл.</h2>
      <div style="padding: 5px 25px 15px 25px">Можете да се свържете с Издателство Бит и Техника за валиден активизационен код, на телефони:<br>&nbsp;&nbsp;&nbsp;- 0888/50 22 78;<br>&nbsp;&nbsp;&nbsp;- 0888/50 22 79;<br>&nbsp;&nbsp;&nbsp;- 052/36 32 74.</div>
      <div class="buttons">
        <paper-button dialog-dismiss="" raised="">ИЗХОД</paper-button>
      </div>
    </paper-dialog>
    
    <paper-dialog modal="" id="failWindow" entry-animation="scale-up-animation" style="display: none;">
      <h2>Регистрация</h2>
      <div style="padding: 5px 25px 15px 25px;">
        <div style="font-size: 12pt;">Нямате достъп до това издание.<br>Влезте в профила си в <a href="http://www.e-uchebnici.com" target="_blank">www.e-uchebnici.com</a>,<br>въведете активизационен код и натиснете бутона "Опитай отново".</div>
        <br>Можете да се свържете с Издателство Бит и Техника, ако имате нужда от помощ, на телефони:<br>&nbsp;&nbsp;&nbsp;- 0888/50 22 78;<br>&nbsp;&nbsp;&nbsp;- 0888/50 22 79;<br>&nbsp;&nbsp;&nbsp;- 052/36 32 74.</div>
      <div class="buttons">
        <paper-button dialog-confirm="" raised="">ОПИТАЙ ОТНОВО</paper-button>
        <paper-button dialog-dismiss="">ИЗХОД</paper-button>
      </div>
    </paper-dialog>
    <paper-dialog modal="" id="netErrorWindow" entry-animation="scale-up-animation" style="display: none;">
      <h2>Регистрация</h2>
      <div style="padding: 5px 25px 15px 25px;">Няма връзка с Интернет. Да опитам ли отново?</div>
      <div class="buttons">
        <paper-button dialog-confirm="" raised="">ОПИТАЙ ОТНОВО</paper-button>
        <paper-button dialog-dismiss="">ИЗХОД</paper-button>
      </div>
    </paper-dialog>
    <!-- REGISTER DIALOG -->
    
    <!-- CHAPTER DIALOG -->
<!--  <paper-dialog modal id="chapWindow" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop no-cancel-on-outside-click style="display: none;">
    <h2>Изберете част</h2>
    <div style="padding: 5px 25px 0 25px;">
      <paper-button id="chap1btn" class="megaBtn">
        <center>
          <img src="../../chap1.jpg" /><br />
          Част 1
        </center>
      </paper-button>
      <paper-button id="chap2btn" class="megaBtn">
        <center>
          <img src="../../chap2.jpg" /><br />
          Част 2
        </center>
      </paper-button>
    </div>
    <div style="padding-bottom: 15px;">
      Когато пожелаете, можете да отворите друга част<br />от бутона <iron-icon icon="icons:apps"></iron-icon> (Част / Раздел) в менюто.
    </div>
    
  </paper-dialog>-->
  <!-- CHAPTER DIALOG -->
  
    <template is="dom-repeat" items="{{document.pages}}" as="page">
      <link rel="preload" as="image" href$="{{getFileUrl(page.style.backgroundImage)}}" media="(max-width: 600px)">
    </template>
    
    <form id="openProjectForm" enctype="multipart/form-data" style="width:0px;height:0;overflow:hidden"><input name="filename" type="file" id="openProjectBrowser" accept=".bit"></form>
  </template>

  <script>Polymer({
  is: 'main-app',
  properties: {
    basepath: {
      type: String,
      value: ''
    },
    idn: {
      type: String,
      value: ''
    },
    loadurl: {
      type: String,
      value: ''
    },
    document: {
      type: Object,
      notify: true,
      value: null
    },
    prompt: {
      type: Object,
      notify: true
    },
    selectedPageIndex: {
      type: Number,
      value: null
    },
    selectedPageNumber: {
      type: String,
      value: ''
    },
    zoomLevel: {
      type: String,
      notify: true,
      value: 'fith'
    },
    isSinglePage: {
      type: Boolean,
      notify: true,
      value: false
    },
    interactions: {
      type: Boolean,
      notify: true,
      value: false
    },
    effectiveZoom: {
      type: Number,
      notify: true,
      value: .5
    },
    displayedElement: {
      type: Object,
      value: null
    },
    percentLoaded: {
      type: Number,
      value: 0
    },
    activeTool: {
      type: String,
      value: ''
    },
    elemTooltipText: {
      type: String,
      value: ''
    },
    audioPlaying: {
      type: Boolean,
      value: false
    },
    colorArray: {
      type: Array,
      value: [['ffffff', '000000', '9e9e9e', 'ffeb3c', 'fec107'], ['ff0000', 'fe5722', 'ff9700', 'ea1e63', '795547'], ['4cb050', '8bc24a', 'cddc39', '009788', '607d8b'], ['3f51b5', '2196f3', '00bcd5', '673bb7', '9c28b1']]
    },
    pencilColor: {
      type: String,
      value: '3f51b5'
    },
    brushColor: {
      type: String,
      value: 'ff0000'
    },
    documentFileName: {
      type: String,
      value: ''
    }
  },
  listeners: {
    //'chapters.tap': 'chapters',
    //'chap1btn.tap': 'chap1',
    //'chap2btn.tap': 'chap2',
    'noteTools.tap': 'noteToolsBtn',
    'eraser.tap': 'eraserBtn',
    'removeNotes.tap': 'removeNotesBtn',
    'zoom.tap': 'changeZoomBtn',
    'interactions.tap': 'interactionsBtn',
    //'single.tap': 'changeSingleBtn',
    'pageNumber.change': 'selectPageInput',
    'keydown': 'keyHandler'
  },

  /* -------------------------------------------------------- */
  changeZoomBtn: function () {
    //this.hideActiveTool();
    if (this.$.pageLSelector.selected !== null) {
      this.zoomLPage();
    } else {
      this.zoomRPage();
    }
  },
  zoomLPage: function () {
    if (this.$.pageLSelector.selected !== null) {
      this.changeZoom();
      var index = this.document.pages.indexOf(this.$.pageLSelector.selected);
      this.selectPageByIndex(index);
      this.selectedPageIndex = index;
    }
  },
  zoomRPage: function () {
    if (this.$.pageRSelector.selected !== null) {
      this.changeZoom();
      var index = this.document.pages.indexOf(this.$.pageRSelector.selected);
      this.selectPageByIndex(index);
      this.selectedPageIndex = index;
    }
  },
  changeZoom: function () {
    if (this.zoomLevel === 'fitw') {
      this.zoomLevel = 'fith';
      this.$.zoom.style.background = '#3f51b5';
      this.$.zoom.style.color = '#ffffff'; //            this.$.zoom1Txt.innerText = 'Увеличи';
      //            this.$.zoom2Txt.innerText = 'страницата';
    } else {
      this.zoomLevel = 'fitw';
      this.$.zoom.style.background = '#ffffff';
      this.$.zoom.style.color = '#3f51b5'; //            this.$.zoom1Txt.innerText = 'Разтвор';
      //            this.$.zoom2Txt.innerText = '(намали)';
    }

    this.resize();
  },
  resize: function () {
    var mainBoardPaddingWidth = 85;
    var mainBoardPaddingHeight = 20;
    var mainBoardPaddingWidthZoomed = 85;
    var mainBoardPaddingHeightZoomed = 10;
    var coef = 1;

    if (this.document !== null) {
      if (this.zoomLevel === 'fith') {
        this.$.appLayout.scrollTop = 0; //this.$.mainBoard.style.overflowY = 'hidden';

        var newHeight = window.innerHeight - this.$.appHeader.clientHeight - 2 * mainBoardPaddingHeight;

        if (this.activeTool === '') {
          if (this.$.pageLSelector.selected !== null) {
            this.$.innerL.style.cursor = 'zoom-in';
          }

          if (this.$.pageRSelector.selected !== null) {
            this.$.innerR.style.cursor = 'zoom-in';
          }
        }

        var pageHeight = this.document.pages[this.selectedPageIndex].style.height;

        if (typeof pageHeight !== 'undefined' && pageHeight !== 0) {
          coef = newHeight / pageHeight;
        }

        if (this.isSinglePage) {
          var tmpWidth = this.document.pages[this.selectedPageIndex].style.width * coef - -2 * mainBoardPaddingWidth;

          if (tmpWidth > this.$.mainBoard.clientWidth) {
            coef = (this.$.mainBoard.clientWidth - 2 * mainBoardPaddingWidth) / this.document.pages[this.selectedPageIndex].style.width;
          }
        } else {
          var tmpWidth = 2 * this.document.pages[this.selectedPageIndex].style.width * coef - -2 * mainBoardPaddingWidth;

          if (tmpWidth > this.$.mainBoard.clientWidth) {
            coef = (this.$.mainBoard.clientWidth / 2 - mainBoardPaddingWidth) / this.document.pages[this.selectedPageIndex].style.width;
          }
        }

        this.$.scrollable.scrollTo(0, 0);
        this.$.mainBoard.style.padding = mainBoardPaddingHeight + 'px ' + mainBoardPaddingWidth + 'px';
        this.$.innerR.style.display = 'block'; //this.$.notesR.style.display = 'block';

        var widthL = this.document.pages[this.selectedPageIndex].style.width * coef;
        var widthR = this.document.pages[this.selectedPageIndex].style.width * coef;
        this.$.innerBoard.style.width = 1 * (widthL + widthR) + 'px';

        if (this.isSinglePage) {
          this.$.innerBoard.style.width = widthL + 'px';
        }

        this.$.innerBoard.style.height = newHeight + 'px';
        this.$.innerL.style.width = widthL + 'px';
        this.$.innerL.style.height = newHeight + 'px';
        this.$.innerR.style.width = widthR + 'px';
        this.$.innerR.style.height = newHeight + 'px';
        this.$.scrollable.style.overflowY = 'hidden'; //this.$.innerL.style.touchAction = 'auto';
      } else if (this.zoomLevel === 'fitw') {
        this.$.appLayout.scrollTop = 0; //this.$.mainBoard.style.overflowY = 'auto';

        var newWidth = this.$.mainBoard.clientWidth - 2 * mainBoardPaddingWidthZoomed;

        if (this.activeTool === '') {
          if (this.$.pageLSelector.selected !== null) {
            this.$.innerL.style.cursor = 'zoom-out';
          }

          if (this.$.pageRSelector.selected !== null) {
            this.$.innerR.style.cursor = 'zoom-out';
          }
        }

        var pageWidth = this.document.pages[this.selectedPageIndex].style.width;

        if (typeof pageWidth !== 'undefined' && pageWidth !== 0) {
          coef = newWidth / pageWidth;
        }

        this.$.mainBoard.style.padding = mainBoardPaddingHeightZoomed + 'px ' + mainBoardPaddingWidthZoomed + 'px';
        this.$.innerR.style.display = 'none'; //this.$.notesR.style.display = 'none';

        this.$.innerBoard.style.width = newWidth + 'px';
        this.$.innerBoard.style.height = this.document.pages[this.selectedPageIndex].style.height * coef + 'px';
        this.$.innerL.style.width = newWidth + 'px';
        this.$.innerL.style.height = this.document.pages[this.selectedPageIndex].style.height * coef + 'px';
        this.$.scrollable.style.overflowY = 'auto'; //this.$.scrollable.style.touchAction = 'pan-y';
      }

      this.effectiveZoom = coef;
      this.customStyle['--zoom-level'] = String(this.effectiveZoom);

      if (this.effectiveZoom < 1) {
        this.customStyle['--outline-zoomed'] = String(Math.round(1 / this.effectiveZoom));
      } else {
        this.customStyle['--outline-zoomed'] = '1';
      }

      this.updateStyles();
    }
  },

  /* -------------------------------------------------------- */
  setPencil: function (e) {
    this.pencilColor = e.model.color;
    this.$.pencilMenu.close();

    if (this.activeTool !== 'pencil') {
      this.hideActiveTool();
      this.$.pencil.style.background = '#ffffff';
      this.$.pencil.style.color = '#3f51b5';
      this.activeTool = 'pencil';
      this.activateTool();
    }
  },
  stopPencil: function (e) {
    this.hideActiveTool();
    this.$.pencilMenu.close();
  },
  setBrush: function (e) {
    this.brushColor = e.model.color;
    this.$.brushMenu.close();

    if (this.activeTool !== 'brush') {
      this.hideActiveTool();
      this.$.brush.style.background = '#ffffff';
      this.$.brush.style.color = '#3f51b5';
      this.activeTool = 'brush';
      this.activateTool();
    }
  },
  stopBrush: function (e) {
    this.hideActiveTool();
    this.$.brushMenu.close();
  },
  eraserBtn: function (e) {
    if (this.activeTool !== 'eraser') {
      this.hideActiveTool();
      this.$.eraser.style.background = '#ffffff';
      this.$.eraser.style.color = '#3f51b5';
      this.activeTool = 'eraser';
      this.activateTool();
    } else {
      this.hideActiveTool();
    }
  },
  removeNotesBtn: function (e) {
    Polymer.dom(this.root).querySelectorAll('element-canvas').forEach(function (can) {
      can.clear();
    });
    this.hideActiveTool();
  },
  activateTool: function () {
    if (this.$.pageLSelector.selected !== null) {
      this.$.innerL.style.cursor = 'crosshair';
    }

    if (this.$.pageRSelector.selected !== null) {
      this.$.innerR.style.cursor = 'crosshair';
    }
  },
  hideActiveTool: function () {
    if (this.activeTool === 'pencil') {
      this.$.pencil.style.background = '#3f51b5';
      this.$.pencil.style.color = '#ffffff';
    } else if (this.activeTool === 'brush') {
      this.$.brush.style.background = '#3f51b5';
      this.$.brush.style.color = '#ffffff';
    } else if (this.activeTool === 'eraser') {
      this.$.eraser.style.background = '#3f51b5';
      this.$.eraser.style.color = '#ffffff';
    }

    if (this.zoomLevel === 'fitw') {
      if (this.$.pageLSelector.selected !== null) {
        this.$.innerL.style.cursor = 'zoom-out';
      }

      if (this.$.pageRSelector.selected !== null) {
        this.$.innerR.style.cursor = 'zoom-out';
      }
    } else {
      if (this.$.pageLSelector.selected !== null) {
        this.$.innerL.style.cursor = 'zoom-in';
      }

      if (this.$.pageRSelector.selected !== null) {
        this.$.innerR.style.cursor = 'zoom-in';
      }
    }

    this.activeTool = '';
  },
  noteToolsBtn: function (e) {
    this.$.noteCont.toggle();

    if (this.$.noteCont.opened !== true) {
      this.$.noteCont.hide();
      this.$.noteTools.style.background = '#3f51b5';
      this.$.noteTools.style.color = '#ffffff';
      this.hideActiveTool();
    } else {
      this.$.noteCont.show();
      this.$.noteTools.style.background = '#ffffff';
      this.$.noteTools.style.color = '#3f51b5';
    }
  },

  /* -------------------------------------------------------- */
  keyHandler: function (e) {
    if (e.keyCode === 39 || e.keyCode === 40) {
      this.selectNext();
    } else if (e.keyCode === 37 || e.keyCode === 38) {
      this.selectPrev();
    }
  },
  getElementZindex: function (isThumb) {
    if (isThumb) {
      return '1000';
    }

    return '1';
  },
  getMiniHeight: function (width, height) {
    return 85 * height / width;
  },
  getMiniZoom: function (width) {
    return 85 / width;
  },
  //        changeSingleBtn: function() {
  //          this.hideActiveTool();
  //          if(this.isSinglePage) {
  //            this.isSinglePage = false;
  //            this.$.single.style.background = '#3f51b5';
  //            this.$.single.style.color = '#ffffff';
  //          } else {
  //            this.isSinglePage = true;
  //            this.$.single.style.background = '#ffffff';
  //            this.$.single.style.color = '#3f51b5';
  //          }
  //          this.selectPageByIndex(this.selectedPageIndex);
  //        },
  interactionsBtn: function () {
    this.hideActiveTool();

    if (this.interactions) {
      this.deactivateAll();
    } else {
      this.activateAll();
    }
  },
  activateAll: function () {
    this.interactions = true;
    this.$.interactions.style.background = '#ffffff';
    this.$.interactions.style.color = '#3f51b5';
    this.$.interactions1Txt.innerText = 'Скрий допълнителни'; //this.$.interactions2Txt.innerText = '';
    //          var parent = this;
    //          this.document.pages[this.selectedPageIndex].objects.forEach(function (obj) {
    //            var index = parent.document.pages[parent.selectedPageIndex].objects.indexOf(obj);
    //            parent.set('document.pages.'+parent.selectedPageIndex+'.objects.'+index+'.active', true);
    //          });
  },
  deactivateAll: function () {
    if (this.interactions === false) {
      return true;
    }

    this.interactions = false;
    this.$.interactions.style.background = '#3f51b5';
    this.$.interactions.style.color = '#ffffff';
    this.$.interactions1Txt.innerText = 'Покажи допълнителни'; //          this.$.interactions2Txt.innerText = '';
    //          var parent = this;
    //          this.document.pages[this.selectedPageIndex].objects.forEach(function (obj) {
    //            var index = parent.document.pages[parent.selectedPageIndex].objects.indexOf(obj);
    //            parent.set('document.pages.'+parent.selectedPageIndex+'.objects.'+index+'.active', false);
    //          });
  },
  isDoublePage: function (zoomLevel, isSinglePage) {
    if (isSinglePage) {
      return true;
    }

    if (zoomLevel === 'fith') {
      return true;
    }

    return false;
  },
  hasPage: function (pageSelector) {
    if (pageSelector !== null) {
      return true;
    }

    return false;
  },
  toolTip: function (e) {
    this.elemTooltipText = e.detail.title;
    this.$.tTip.style.display = "block";
    this.$.tTip.style.left = Math.round(this.$.mainBoard.clientWidth / 2 - this.$.tTip.clientWidth / 2) + "px";
    this.$.tTip.style.top = Math.round(this.$.mainBoard.clientHeight / 2 - this.$.tTip.clientHeight / 2) + "px"; //this.$.tTip.style.left = Math.round(e.detail.x * this.effectiveZoom) + "px";
    //this.$.tTip.style.top = Math.round(e.detail.y * this.effectiveZoom) + "px";
    //this.$.tTip.style.left = e.detail.x + "px";
    //this.$.tTip.style.top = e.detail.y + "px";
  },
  toolTipHide: function (e) {
    this.$.tTip.style.display = "none";
  },
  getExtension: function (filename) {
    var i = filename.lastIndexOf('.');
    return i < 0 ? '' : filename.substr(i);
  },

  /* -------------------------------------------------------- */
  goToPage: function (e) {
    this.$.topicMenu.close();
    var item = this.$.topicSelector.itemForElement(e.target);
    var index = this.document.pages.indexOf(item);
    this.selectPageByIndex(index);
  },
  goToThumb: function (e) {
    this.$.thumbMenu.close();
    var item = this.$.thumbSelector.itemForElement(e.target);
    var index = this.document.pages.indexOf(item);
    this.selectPageByIndex(index);
  },
  selectNext: function () {
    this.hideActiveTool();
    var newIndex = this.selectedPageIndex + 1;

    if (!this.isSinglePage && this.zoomLevel === 'fith') {
      newIndex += 1;
    }

    if (newIndex >= this.document.pages.length) {
      newIndex = this.document.pages.length - 1;
    }

    this.selectPageByIndex(newIndex);
  },
  selectPrev: function () {
    this.hideActiveTool();
    var newIndex = this.selectedPageIndex - 1;

    if (!this.isSinglePage && this.zoomLevel === 'fith') {
      newIndex -= 1;
    }

    if (newIndex < 0) {
      newIndex = 0;
    }

    this.selectPageByIndex(newIndex);
  },
  selectPageInput: function () {
    var parent = this;
    var num = Number(this.$.pageNumber.value);

    if (num > 0 && num <= this.document.pages.length) {
      this.document.pages.forEach(function (page, index) {
        if (Number(page.number) === num) {
          parent.selectPageByIndex(index);
        }
      });
    }
  },
  selectPageByNumber: function (num) {
    var parent = this;

    if (num > 0 && num <= this.document.pages.length) {
      this.document.pages.forEach(function (page, index) {
        if (Number(page.number) === num) {
          parent.selectPageByIndex(index);
        }
      });
    }
  },
  //        selectPage: function(page) {
  //          var index = this.document.pages.indexOf(page);
  //          this.selectPageByIndex(index);
  //        },
  selectPageByIndex: function (index) {
    //this.deactivateAll();
    if (this.document !== null) {
      var evenIndex;
      var oddIndex;

      if (index % 2 === 0 || index === 0) {
        oddIndex = index - 1;
        evenIndex = index;
      } else {
        evenIndex = index + 1;
        oddIndex = index;
      }

      this.selectedPageIndex = index;
      this.selectedPageNumber = this.document.pages[index].number;

      if (this.isSinglePage || this.zoomLevel === 'fitw') {
        this.$.pageLSelector.toggle = false;
        this.$.pageLSelector.select(this.document.pages[index]);
      } else if (this.zoomLevel === 'fith') {
        this.selectedPageIndex = evenIndex;

        if (oddIndex >= 0) {
          this.selectedPageIndex = oddIndex;
          this.$.pageLSelector.toggle = false;
          this.$.pageLSelector.select(this.document.pages[oddIndex]);
        } else {
          this.$.pageLSelector.clearSelection();
          this.$.innerL.style.cursor = 'default';
        }

        ;

        if (evenIndex < this.document.pages.length) {
          this.$.pageRSelector.toggle = false;
          this.$.pageRSelector.select(this.document.pages[evenIndex]);
        } else {
          this.$.pageRSelector.clearSelection();
          this.$.innerR.style.cursor = 'default';
        }
      }

      this.async(function () {
        this.resize();
      });
    }
  },

  /* -------------------------------------------------------- */
  elementSettingsClick: function (e) {
    e.stopPropagation();
    this.elementSettings(e.model.item);
  },
  elementSettings: function (item) {
    if (this.audioPlaying === true) {
      return null;
    }

    this.displayedElement = item;
    var parent = this;
    var newElem = null;

    if (item !== null) {
      if (item.type === 'image' && item.isThumb) {
        newElem = document.createElement('element-image-editor');
      }

      if (item.type === 'interactive') {
        newElem = document.createElement('element-interactive-editor');
      }

      if (item.type === 'multi') {
        newElem = document.createElement('element-multi-editor');
      }

      if (item.type === 'gallery') {
        newElem = document.createElement('element-gallery-editor');
      }

      if (item.type === 'quick-slide') {
        newElem = document.createElement('element-quick-slide-editor');
      }

      if (item.type === 'video' && item.isThumb) {
        newElem = document.createElement('element-video-editor');
      }

      if (item.type === 'swf' && item.isThumb) {
        newElem = document.createElement('element-swf-editor');
      }

      if (item.type === 'external' && item.isThumb) {
        newElem = document.createElement('element-external-editor');
      }

      if (item.type === 'audio' && item.isThumb) {
        newElem = document.createElement('element-audio-editor');
      }

      if (item.type === 'pagelink' && item.pagenum > 0) {
        parent.selectPageByIndex(item.pagenum - 1);
      }

      if (newElem !== null) {
        newElem.item = item;
        newElem.effectiveZoom = this.effectiveZoom;
        newElem.addEventListener('iron-overlay-closed', function () {
          document.body.removeChild(newElem); //                parent.deselectActiveElement();

          this.displayedElement = null;

          if (item.type === 'audio' && item.isThumb) {
            parent.audioPlaying = false;
          }
        });
        document.body.appendChild(newElem);
        newElem.settingsEdit();

        if (item.type === 'audio' && item.isThumb) {
          parent.audioPlaying = true;
        }
      }
    }
  },

  /* -------------------------------------------------------- */
  promptDialog: function (title, message, callback) {
    this.set('prompt.title', title);
    this.set('prompt.message', message);
    var parent = this;
    var promptWindow = this.$.promptWindow;

    function dialogHandler(e) {
      promptWindow.removeEventListener('iron-overlay-closed', dialogHandler);

      if (e.detail.confirmed === true) {
        callback(parent);
      }
    }

    promptWindow.addEventListener('iron-overlay-closed', dialogHandler);
    promptWindow.open();
  },
  getPageNum: function (item) {
    if (item.isSystem !== true && item.num !== '') {
      return 'стр. ' + String(item.number);
    }

    return '';
  },
  isNewTopic: function (item) {
    return item.newTopic === true && item.topicTitle !== '';
  },
  getFileUrl: function (url) {
    if (url && url !== '') {
      var newUrl = this.document.fileDir + "/" + url;
      return 'url("' + newUrl.replace(/\\/g, '/') + '")';
    }

    return '';
  },

  /* -------------------------------------------------------- */
  //        chapters: function() {
  //          this.documentLoad();
  //        },
  //        chap1: function() {
  //          this.$.chapWindow.close();
  //          this.documentFileName = this.document1FileName;
  //          this.documentLoadReal();
  //        },
  //        chap2: function() {
  //          this.$.chapWindow.close();
  //          this.documentFileName = this.document2FileName;
  //          this.documentLoadReal();
  //        },
  //        documentLoadChapters: function() {
  //          if(typeof this.document2FileName !== 'undefined' && this.document2FileName !== '') {
  //            var promptWindow = this.$.chapWindow;
  //            function dialogHandler(e) {
  //              promptWindow.removeEventListener('iron-overlay-closed', dialogHandler);
  //            }
  //            promptWindow.addEventListener('iron-overlay-closed', dialogHandler);
  //            promptWindow.open();
  //          } else {
  //            //this.documentFileName = this.document1FileName;
  //            this.documentLoadReal();
  //          }
  //        },
  //        documentReload: function() {
  //          var fs = require('fs');
  //          var parent = this;
  //          fs.readFile(this.document.workDir + this.document.fileName + '.bit', 'utf8', function (err, data) {
  //              if (err) {
  //                console.log(err);
  //              } else {
  //                var tmpDocument = JSON.parse(data);
  //                
  //              tmpDocument.workDir = parent.document.workDir;
  //              tmpDocument.fileDir = parent.document.fileName;
  //              tmpDocument.pages.forEach(function (page) {
  //                page.selected = false;
  //                page.objects.forEach(function (object) {
  //                  object.active = false;
  //                });
  //              });
  //
  //              parent.set('document', tmpDocument);
  //              parent.selectPage(parent.document.pages[parent.selectedPageIndex]);
  //
  //              parent.async(function() {
  //                parent.resize();
  //              });
  //              }
  //            });
  //        },
  //        documentOpenTap: function() {
  //          this.documentLoad();
  //        },
  documentLoad: function (projectFile, loadPage, initZoom) {
    this.loadurl = this.basepath + this.idn + '.bit';
    var parent = this;
    loadPage = typeof loadPage !== 'undefined' ? loadPage : 0;
    this.$.loadingWindow.open();
    var client = new XMLHttpRequest();
    client.open('GET', this.loadurl);

    client.onreadystatechange = function () {
      if (client.readyState === XMLHttpRequest.DONE) {
        if (client.status === 200) {
          var tmpDocument = JSON.parse(client.responseText);
          tmpDocument.fileName = this.idn;
          app.basepath = parent.basepath + parent.idn + '_files/';
          tmpDocument.workDir = app.basepath;
          tmpDocument.fileDir = app.basepath;
          parent.set('document', tmpDocument);
          parent.selectPageByIndex(0);
          parent.$.loadingWindow.close();
          parent.async(function () {
            parent.resize();

            if (loadPage > 0) {
              if (initZoom === 1) {
                parent.changeZoom();
              }

              parent.selectPageByIndex(loadPage);
            }
          });
        }
      }
    };

    client.send();
  },
  attached: function () {
    var parent = this;
    window.addEventListener("resize", function () {
      parent.resize();
    });
    window.addEventListener("keydown", function (e) {
      parent.keyHandler(e);
    });
  },
  getSharingParams: function () {
    var params = window.location.origin + window.location.pathname + '?p=' + this.selectedPageIndex;

    if (this.zoomLevel === 'fitw') {
      params += '&z=1';
    }

    return params;
  },
  shareToGoogle: function () {
    window.open('https://classroom.google.com/share?url=' + encodeURIComponent(this.getSharingParams()), 'classroom-popup', 'width=700,height=600');
  },
  shareToTeams: function () {
    window.open('https://teams.microsoft.com/share?href=' + encodeURIComponent(this.getSharingParams() + '&referrer=e-uchebnici.com'), 'teams-popup', 'width=700,height=600');
  },
  shareToFacebook: function () {
    window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(this.getSharingParams() + '&referrer=e-uchebnici.com'), 'facebook-popup', 'width=700,height=600');
  },
  ready: function () {
    this.prompt = {
      title: '',
      message: ''
    };
    this.elementAttribs = {
      paddingTop: 0,
      paddingBottom: 0,
      paddingLeft: 0,
      paddingRight: 0,
      borderWidth: 0,
      borderColor: '#c0c0c0',
      marginTop: 0,
      marginBottom: 0,
      marginLeft: 0,
      marginRight: 0
    };
    this.document = {
      settings: {
        title: '',
        autosave: 10
      },
      defaults: {
        width: 1537,
        height: 2048,
        paddingTop: 80,
        paddingBottom: 80,
        paddingLeft: 80,
        paddingRight: 80
      },
      pages: [{
        position: 0,
        number: 1,
        isCover: false,
        isSystem: false,
        selected: true,
        newTopic: false,
        topicTitle: '',
        style: {
          backgroundImage: '',
          backgroundColor: '#ffffff',
          width: 1537,
          height: 2048,
          paddingTop: 80,
          paddingBottom: 80,
          paddingLeft: 80,
          paddingRight: 80
        },
        objects: []
      }]
    };
    var parent = this;

    if (this.isSinglePage) {
      this.$.innerR.style.display = 'none'; //this.$.notesR.style.display = 'none';
    }

    var initPage = 0;
    var initZoom = 0;
    var urlParams = new URLSearchParams(window.location.search);

    if (urlParams.get('p')) {
      initPage = parseInt(urlParams.get('p'), 10);
    }

    if (urlParams.get('z')) {
      initZoom = parseInt(urlParams.get('z'), 10);
    }

    this.documentLoad('', initPage, initZoom);
  }
});</script>

</dom-module>