function onePage() {

  this.maxStageWidth    = 530;
  this.maxStageHeight   = 400;

  this.maxPreviewWidth  = 50;
  this.maxPreviewHeight = 60;
  this.maxLayoutWidth   = 50;
  this.maxLayoutHeight  = 50;
  this.isCupPage        = false;

  this.setQualityLightPosition = function(light, CBID, CB) {
    if(CBID.split("_")[3] == 1 && parseInt(CB.style.width) == 100) {
      Element.setStyle(light, { top: (this.bleedVertical * this.PageWidth / 100 * this.Pagefactor) + "px"});
    }
    return light;
  }

  this.getView = function() {
    return "Photobook";
  }

  this.appendCanvasBorder = function(page, canvasBorder, ID, w, h, l, t, border, alpha) {
    canvasBorder.className  = "borderCanvas";
    canvasBorder.id         = ID;
    Element.setStyle(canvasBorder, border);
    Element.setOpacity(canvasBorder, alpha);
    Element.setStyle(canvasBorder, { width:  w + "%" });
    Element.setStyle(canvasBorder, { height: h + "%" });
  /*
   * Bemerkung vom Nikolaj:
   *
   * Unbegreiflicherweise kommt IE 6 nicht mit der Angabe top: 0(%|px|em) klar. Aus diesem Grund die
   * Umkehrung.
   */
    if(t == 0) {
      Element.setStyle(canvasBorder, { bottom:  (100 - h) + "%" });
    }
    else {
      Element.setStyle(canvasBorder, { top: t + "%" });
    }
    Element.setStyle(canvasBorder, { left: l + "%" });
    page.appendChild(canvasBorder);
  }

  this.showCanvasBorder = function(lay) {
    if(this.borderLayouts[lay.id]) {
      Element.setStyle($('borderTopCanvas'),    { background: 'transparent'});
      Element.setStyle($('borderBottomCanvas'), { background: 'transparent'});
      Element.setStyle($('borderLeftCanvas'),   { background: 'transparent'});
      Element.setStyle($('borderRightCanvas'),  { background: 'transparent'});
    } else {
      Element.setStyle($('borderTopCanvas'),    { background: '#ffffff'});
      Element.setStyle($('borderBottomCanvas'), { background: '#ffffff'});
      Element.setStyle($('borderLeftCanvas'),   { background: '#ffffff'});
      Element.setStyle($('borderRightCanvas'),  { background: '#ffffff'});
    }
  }

  this.setCanvasBorder = function(page) {

    var borderCanvas = getElementsByClass("borderCanvas", page, "div");

    if(borderCanvas.length == 0) {

      var canvasBorder = document.createElement("div");
      var bv = this.roundValue(this.bleedVertical, 1);
      var bh = this.roundValue(this.bleedHorizontal, 1);

      // border dashed
      this.appendCanvasBorder(page, canvasBorder.cloneNode(true), "borderTopCanvas"    ,(100-bh*2) ,bv         ,bh       ,0        ,{ borderBottom: "1px dashed red" }, 0.5);
      this.appendCanvasBorder(page, canvasBorder.cloneNode(true), "borderBottomCanvas" ,(100-bh*2) ,bv         ,bh       ,(100-bv) ,{ borderTop: "1px dashed red" }, 0.5);
      this.appendCanvasBorder(page, canvasBorder.cloneNode(true), "borderLeftCanvas"   ,bh         ,(100-bv*2) ,0        ,bv       ,{ borderRight: "1px dashed red" }, 0.5);
      this.appendCanvasBorder(page, canvasBorder.cloneNode(true), "borderRightCanvas"  ,bh         ,(100-bv*2) ,(100-bh) ,bv       ,{ borderLeft: "1px dashed red" }, 0.5);
      // quadrat
      this.appendCanvasBorder(page, canvasBorder.cloneNode(true), "borderWhiteLeftTopCanvas"     ,bh, bv ,0        ,0        ,{ border: "none" }, 1);
      this.appendCanvasBorder(page, canvasBorder.cloneNode(true), "borderWhiteRightTopCanvas"    ,bh, bv ,(100-bh) ,0        ,{ border: "none" }, 1);
      this.appendCanvasBorder(page, canvasBorder.cloneNode(true), "borderWhiteLeftBottomCanvas"  ,bh, bv ,0        ,(100-bv) ,{ border: "none" }, 1);
      this.appendCanvasBorder(page, canvasBorder.cloneNode(true), "borderWhiteRightBottomCanvas" ,bh, bv ,(100-bh) ,(100-bv) ,{ border: "none" }, 1);
    }
  }

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

  this.getNoLayout = function (Nr) {
    return true;
  }

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

  this.setNextPage = function(step) {}

  this.handlePage = function(e, relatedPage) {

    var setPage = $("PhotobookPage_1");

    this.unsetDesktopActiveBox(getElementsByClass("ContentBox_active", $("PhotobookDesktop"), "div")[0]);

    // set the PageContent
    if(setPage.hasChildNodes()) {
      for(var i = 0; i < setPage.childNodes.length; i++) {
        if(setPage.childNodes[i].className == "ContentBox" || setPage.childNodes[i].className == "ContentBox_active") {
          this.setPageContent(setPage, setPage.childNodes[i], 1, "Photobook");
        }
      }
    }

    //this.setDesktopContentBox();
    var Nr = parseInt(this.desktopPages[this.PageSide]);
    this.setColor(Nr, false, this.Page[Nr].type, this.PageSide);

    e = this.setActivePage(e);

    return e.firstChild;
  }

  this.getActivePage = function(cssClass, SearchNode) {
    return "PhotobookPage_1";
  }

  this.scrollFunk = function(ScrollBox, change) {}

  // Im Tassen-Editor die Position des Hintergundbildes (Tasse) an die Position des Bildes anpassen
  this.setBackgroundPosition = function(pageID, PhotoboookFrame) {
    if(this.isCupPage) {
      var photobookWidth      = parseInt($("Photobook").getStyle("width"));
      var photobookFrameWidth = parseInt(PhotoboookFrame.getStyle("width"));
      var pageWidth           = parseInt($(pageID).getStyle("width"));
      // TODO: hier spielt ein statischer Wert eine Rolle, welcher dem Hintergundbild entnommen wurde
      // Dynamisieren oder als Klasseneigenschaft speichern
      var backgroundPositionX = (photobookWidth - photobookFrameWidth) / 2 + pageWidth - 140;
      Element.setStyle($("Photobook"),    { backgroundPosition: backgroundPositionX + "px 20px"});
    }
  }

  this.setPageStyle = function(Page, factor, PageClass, PageNumber, cupHeight) {
    Element.setStyle(Page, { backgroundColor: 'transparent'});

    // Wenn es sich um eine Tasse handelt, mussen Höhe und Breite des Bildes so gesetzt sein, dass
    // die Proportionen zur Tasse stimmen (Designvorgaben)
    if(!isNaN(cupHeight)) {
      this.isCupPage = true;
      var availableHeight     = parseInt($("Photobook").getStyle("height"));
      var availableWidth      = parseInt($("Photobook").getStyle("width"));
      var photobookFrameWidth = parseInt($("PhotobookFrame").getStyle("width"));
      // Diese Werte wurden dem Hintergundbild entnommen
      // TODO: Die werte sollen dynamisch errechnet oder wenigstens in Klasseneigenschften
      // geseichert sein
      var imageHeight = 256;    // Höhe des Hintergundbildes
      var imageCupHeight = 210; // Höhe der Tasse im Bild
      factor = (imageCupHeight / cupHeight);
    }

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

    if(!isNaN(cupHeight)) {
      var newTop = ((imageCupHeight - parseInt(Page.style.height))/2 + 38);
      Page.style.top = newTop + "px";
    }
  }

  this.init = function (bookPageLayout, PageNumberL, PageNumber) {
     //for singelePages
     this.setPageSide("Left");
     this.activePreview = 1;

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

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

    // init Bookpages
    var bookPage                 = $("BookPage_1");
    var PhotobookFrame           = $("PhotobookFrame");
    var PreviewPage              = $("Preview");
    var Desktop                 = $("PhotobookDesktop");

    this.maxPages   = this.PageCount;
    this.minPageNr  = 1;
    this.maxPageNr  = this.PageCount;

     if($("PhotobookPageLeft")) {
      $("PhotobookPageLeft").id  = "PhotobookPage_1";
     }

    if (this.projectXML[1]) {
      this.buildPageContent(1, bookPage, "PhotobookPage_1", this.Pagefactor, this.projectXML[1], "Photobook");
    } else {
      this.setPageLayout(bookPage, this.Pagefactor, "PhotobookPage_1", 1);
    }

    this.setColor(this.minPageNr, false, this.Page[this.minPageNr].type, "Left");

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

    // PhotobookDesktopSize
    var BorderWith  = 4;
    this.DesktopWidth    = (this.PageWidth * this.Pagefactor + BorderWith + 1);
    this.DesktopHeight  = (this.PageHeight * this.Pagefactor + 25);

    Desktop.style.width   = this.DesktopWidth + "px";
    Desktop.style.height   = this.DesktopHeight + 20 + "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';

    // Position des HIntergundbildes setzen (bewirkt nur bei Tassen was)
    this.setBackgroundPosition("PhotobookPage_1", PhotobookFrame);

    // set DesktopPage
    this.setDropZoneDesktop();
    this.handlePage($("PhotobookPage_1"), true, false);
    this.setDesktopContentBox();

    // register content for preloading
    var addContent = getElementsByClass("ContentBox", $("PhotobookDesktop"), "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[(tabMenuList.length-1)], tabMenuList);
    }
    else {
      this.showTab(null, tabMenuList[0], 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, cup_height) {

  var xml_layout = product_type + "_all";

  $('PhotobookDesktop').getElementsByTagName("p")[0].childNodes[0].data = page_width/10 + "cm x " + page_height/10 + "cm";

  // add pageBleed
  page_width  = parseFloat(page_width);
  page_height = parseFloat(page_height);

  // start singlePage
  onePage.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, cup_height);
  project = new onePage();
  project.pageType = 'one';

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