
function singlePage() {

  this.maxStageWidth    = 530;
  this.maxStageHeight   = 280;
  this.maxPreviewWidth  = 60;
  this.maxPreviewHeight = 60;

  if(this.browserIndex >= 0) {
    this.maxLayoutWidth   = 50;
    this.maxLayoutHeight  = 50;
  } else {
    this.maxLayoutWidth   = 60;
    this.maxLayoutHeight  = 60;
  }

  this.pageBleed        = 0; // bleed in mm

  this.setCanvasBorder = function(page) {}

  this.showCanvasBorder = function(lay) {}

  this.setQualityLightPosition = function(light, CBID) {
    return light;
  }

  this.getView = function() {
    return 'Preview';
  }

  this.getPageName = function (Nr) {
    if(this.Numbers[Nr]) {
      Nr = this.Numbers[Nr].name;
    }
    return Nr;
  }

  this.getCoverColor = function (color, page) {
    // setzt die Seitenfarbe und gibt coverfarbe zurück
    Element.setStyle(page, { background: 'transparent' });
    return color;
  }

  this.getNoLayout = function (Nr) {

    var lay = true;

    if(Nr == -1) {
      lay = false;
    }
    return lay;
  }

  this.getPageTagnameByNr = function(Nr) {
    return 'page';
  }

  this.setNextPage = function(step) {

    this.lastPage = parseInt(project.getActivePage('PhotobookPage', 'PhotobookDesktop').split('_')[1]);

    var nextStep = parseInt(this.desktopPages[this.PageSide]) + step;

    if (nextStep > this.maxPageNr) {
      nextStep = this.minPageNr;
    }

    if (nextStep < this.minPageNr) {
      nextStep = this.maxPageNr;
    }

    if ($('PreviewPage_' + nextStep)) {
       this.changePage($('PreviewPage_' + nextStep));
    } else if ($('PreviewPage_' + nextStep)) {
       this.changePage($('PreviewPage_' + nextStep));
    }
  }

  this.handlePreviewPage = function (e, PageClass, PageNumber) {

    var setPagesArray   = new Array();
    this.activePreview   = PageNumber;
    var idPageLeft      = PageClass + '_' + this.desktopPages['Left'];

    // set DesktopPages (Number and ID)
    this.desktopPages['Left']   = PageNumber;

    var PhotobookPageLeft   = $(idPageLeft);
    PhotobookPageLeft.id     = PageClass + '_' + PageNumber;
    PhotobookPageLeft.parentNode.getElementsByTagName('p')[0].childNodes[0].data = this.getPageName(parseInt(PageNumber));

    // set DesktopPageStatus: active
    var newID = e.id.split('_')[0];

    this.setActiveSide($('PreviewPage_' + PageNumber).parentNode.id.split('_')[1]);

    this.handlePage($(PageClass + '_' + PageNumber), false);

    return PageNumber;
  }

  this.handlePage = function(e, relatedPage) {

    if(!e.parentNode || !e.parentNode.id)
     return;

    var activePage = e.parentNode.id.split('_')[1];

    if(!activePage) {
      activePage = 'Desktop';
    }

    // change single- or double- Page
    if(!(this.activePageNr == activePage || activePage == 'Desktop')) {
      // save the last Page
      this.safeDataFromPage($('PhotobookPage_' + this.desktopPages['Left']), this.desktopPages['Left']);
      this.deregisterAllDrags();
      this.setActiveBox('');
    }

    // change PreviewPage / PhotobookPage
    if(relatedPage) {

      var PageClass = e.parentNode.className;

      if(PageClass == 'Preview') {
        var factor        = this.Pagefactor;
        var newPageClass  = 'Photobook';
        PhotobookPageID   = this.handlePreviewPage(e, newPageClass + 'Page', e.parentNode.id.split('_')[1]);
      }
      else {
        var factor        = this.Previewfactor;
        var newPageClass   = 'Preview';
        PhotobookPageID   = this.handlePreviewPage(e, newPageClass + 'Page', this.activePreview);
      }

      this.setPageLayout($(PageClass + 'Page' + '_' + PhotobookPageID), factor, $(newPageClass + 'Page' + '_' + PhotobookPageID).id, PhotobookPageID);

      if(e.parentNode.className == 'Photobook') {
          this.setDropZonePreview($(newPageClass + 'Page' + '_' + PhotobookPageID));
      }
      this.unsetAllPreviewActiveBoxes(e.id.split('_')[1]);
    }

    e = this.setActivePage(e);

    return e.firstChild;
  }

  this.setPageStyle = function(Page, factor, PageClass, PageNumber) {

    if (PageClass == 'PreviewPage' || PageClass == 'PreviewPage_active') {
      if (this.Page[parseInt(PageNumber)]) {
        Element.setStyle(Page, { backgroundColor: '#' + this.Page[parseInt(PageNumber)].color });
      }
    } else {
      Element.setStyle(Page, { backgroundColor: 'transparent'});
    }

    Page.style.width   = Math.floor(parseFloat(Page.getAttribute('floatWidth')) * factor) + 'px';
    Page.style.height = Math.floor(parseFloat(Page.getAttribute('floatHeight')) * factor) + 'px';
  }

  this.setPreviewPage = function(PageNumber, Layout, PreviewListeTemplate, PreviewClone) {

    PreviewClone.id = 'Preview_' + PageNumber;

    var newPreviewPage     = getElementsByClass('PreviewPage', PreviewClone, 'div');
    newPreviewPage[0].id   = newPreviewPage[0].id + '_' + PageNumber;
    var newPreview         = PreviewListeTemplate.firstChild.appendChild(PreviewClone);

    if (this.projectXML[PageNumber]) {
      this.buildPageContent(PageNumber, Layout, newPreviewPage[0].id, this.Previewfactor, this.projectXML[PageNumber], 'Preview');
    }
    else {
      if (project.Page[PageNumber].layout) {
        Layout = $('BookPage_' + project.Page[PageNumber].layout);
      }
      this.setPageLayout(Layout, this.Previewfactor, newPreviewPage[0].id, PageNumber);
    }

    newPreview.getElementsByTagName('p')[0].childNodes[0].data   = this.getPageName(PageNumber);

    newPreview.style.display = 'block';

  }

  this.setDesktopPage = function(Page, Layout, PageNumber, side, paragraph) {
    Page.id = 'PhotobookPage' + side + '_' + PageNumber;
    Page.parentNode.getElementsByTagName('p')[paragraph].childNodes[0].data = this.getPageName(PageNumber);
    this.setPageLayout(Layout, this.Pagefactor, Page.id, PageNumber);
  }

  this.init = function (bookPageLayout, PageNumberL, PageNumber) {


    bookPageLayout = 'BookPage_24';

     //for singelePages
     this.setPageSide('Left');
     this.activePreview = 1;

     //set scrollFunk
     this.setScroll(true, -1);

    // unregister Dropzones
    dndMgr.dropZones = new Array();

    this.desktopPages['Left']      = PageNumber;
    this.desktopPageNames['Left']  = 'PhotobookPage_';
    this.previewPageNames['Left']  = 'PreviewPage_';

    // init Bookpages
    var bookPage                 = $(bookPageLayout);
    var PhotobookFrame           = $('PhotobookFrame');
    var PreviewPage              = $('Preview');
    var Desktop                 = $('PhotobookDesktop');

    //********************************************************************************************************************************//
    //******************************************************** Init Previews *********************************************************//
    //********************************************************************************************************************************//

    var PreviewListeTemplate = $('PreviewListeTemplate');

    // PreviewListeTemplate leeren
    if(PreviewListeTemplate.firstChild.hasChildNodes()){
      while(PreviewListeTemplate.firstChild.hasChildNodes()) {
        PreviewListeTemplate.firstChild.removeChild(PreviewListeTemplate.firstChild.firstChild);
      }
    }

    // init Previews
    var PreviewPageInnerWidth = parseFloat(bookPage.firstChild.getAttribute('floatWidth'));
    var BorderWidth            = 4;

    // Calculation for Preview-List-Width: ((Pagewidth * Viewfactor * 2) + MarginLeft + MarginRight + PaddingLeft + PaddingRight + BorderWidth)
    this.setPreviewPageWidth((parseFloat(bookPage.getAttribute('floatWidth')) * this.Previewfactor) + 10 + BorderWidth);

    PreviewListeTemplate.firstChild.style.width           = (this.PreviewPageWidth * this.maxPages + 20) + 'px';
    PreviewPage.style.border                               = '1px solid #000000';
    PreviewPage.getElementsByTagName('p')[0].style.width   = this.PreviewWidth   + 'px';
    PreviewPage.style.height                              = this.PreviewHeight   + 10 + 'px';    // 10 = CSS -padding,-border...
    PreviewListeTemplate.style.height                     = this.PreviewHeight   + 40 + 'px';    // 30  = CSS -padding,-border... + Paragraph

    // set preview-Pages
    for(var p=(this.page_cover_last); p < this.maxPages; p++) {
      this.setPreviewPage(p, bookPage, PreviewListeTemplate, PreviewPage.cloneNode(true));
    }

    this.minPageNr = this.page_cover_last;
    this.maxPageNr = this.PageCount;

    // nachdem alle preview pages eingebunden sind
    $('PreviewList').style.height = PreviewListeTemplate.offsetHeight + 20 + 'px';    // PreviewListeTemplate.style.height + scrollbalkenhöhe + 8(top) + 12(bottom)

    //********************************************************************************************************************************//
    //******************************************************** Init Desktop **********************************************************//
    //********************************************************************************************************************************//

    // PhotobookDesktopSize
    this.DesktopWidth      = (this.PageWidth * this.Pagefactor + BorderWidth + 1);
    this.DesktopHeight    = (this.PageHeight * this.Pagefactor + 25);
    Desktop.style.width   = this.DesktopWidth + 'px';
    Desktop.style.height   = this.DesktopHeight + 'px';

    // PhotobookFrameSize for Pages
    this.bgCoverSize[0]           = (this.PageWidth * this.Pagefactor);
    this.bgCoverSize[1]            = (this.PageHeight * this.Pagefactor);

    // PhotobookFrameSize for Cover
    this.bgCoverSize[-1]          = (this.CoverHeight * this.Pagefactor) + 6;
    PhotobookFrame.style.width     = this.bgCoverSize[0] + (this.CoverHeight * 0.08) + 'px';
    PhotobookFrame.style.height   = (parseInt(Desktop.style.height) + 10) + 'px';

    $('toolbar_step_forward').style.top  = (this.bgCoverSize[1]/2-10) + 'px';
    $('toolbar_step_backward').style.top = (this.bgCoverSize[1]/2-10) + 'px';

    var activePreviewPage = $('PreviewPage_' + PageNumber);

    // set DesktopPage
    this.setDesktopPage(Desktop.childNodes[0], activePreviewPage, PageNumber, '', 0);
    this.scrollFunk('PreviewListeTemplate',true);
    this.setActivePage(activePreviewPage);
    this.handlePage(activePreviewPage, true, false);
    this.setDesktopContentBox();
    this.saveProject('saveAll');
    this.setDropZoneDesktop();

    var pageNr = parseInt(this.desktopPages['Left']);
    this.setColor(pageNr, false, this.Page[pageNr].type);

    // register content for preloading
    var addContent = getElementsByClass('ContentBox', $('PhotobookDesktop'), 'div');
    addContent = addContent.concat(getElementsByClass('ContentBox', $('PreviewListeTemplate'), 'div'));
    // start the preloader
    preloader = new contentPreloader(addContent);
    setTimeout(function() { preloader.projectPreloader() }.bind(this), 100);
    // init active Box
    this.setDesktopActiveBox($('PhotobookDesktop').childNodes[0].childNodes[0]);
    this.setActiveBox($('PhotobookDesktop').childNodes[0].childNodes[0].id.split('Photobook')[1]);

    // init Tab menu
    var tabMenuList = $('projectPalette').getElementsByTagName('li');
    if(this.firstStart == 1) {
      this.showTab(null, tabMenuList[1], tabMenuList);
    }
    else {
      this.showTab(null, tabMenuList[1], tabMenuList);
    }
  }
}

startEditor = function(open_project, user_id, project_id, format, cover, surface, page_width, page_height, page_count, cover_color, linen_color, leather_color, page_color, show_page, product_type, firstStart, projectOptions) {

  var xml_layout = product_type + '_' + format;

  // start singlePage
  singlePage.prototype = new PageEditor(user_id, project_id, format, cover, surface, page_width, page_height, page_count, cover_color, linen_color, leather_color, page_color, show_page, product_type, xml_layout, firstStart, projectOptions);
  project = new singlePage();
  project.pageType = 'single';

  // initalise the project XML, init, open Project by ID, Sides
   project.getProjectXML(true, 1);
}
