var artProject = Class.create();

artProject.prototype = {
  element: null,

  initialize: function(id, props) {
    this.props = Object.extend({
      canvasW: 400,
      canvasH: 300,
      z_index: 0
    }, props || {});
    this.element = $(id);
    this.element.innerHTML = this.uiHTML();
    this.canvasW = this.props.canvasW;
    this.canvasH = this.props.canvasH;
    this.z_index = this.props.z_index;
    this.wallcolor = document.getElementsByClassName("wallcolor", this.element)[0];
    this.frameHolder = document.getElementsByClassName("frameHolder", this.element)[0];
    this.filletHolder = document.getElementsByClassName("filletHolder", this.element)[0];
    this.tmatHolder = document.getElementsByClassName("topMatHolder", this.element)[0];
    this.mmatHolder = document.getElementsByClassName("mmatHolder", this.element)[0];
    this.bmatHolder = document.getElementsByClassName("bottommatHolder", this.element)[0];
    this.linerHolder = document.getElementsByClassName("linerHolder", this.element)[0];
    this.vgHolder = document.getElementsByClassName("vgHolder", this.element)[0];
    this.imageHolder = document.getElementsByClassName("imgHolder", this.element)[0];
    Element.setStyle(this.wallcolor, {
      width: this.wallcolor.parentNode.offsetWidth + "px",
      height: this.wallcolor.parentNode.offsetHeight + "px"
    });
    Element.setOpacity(this.wallcolor, 0.5);
  },

  drawProject: function() {
    var k1,k2;
    if(needTurnImage==1) {
      var imageH = image.imageSizeX * 8;//image width if pixel
      var imageW = image.imageSizeY * 8;//image height if pixel
      var frameHeightPx = frame.frameWidth != undefined ? frame.frameWidth * 8 : null;
      var frameWidthPx = frame.frameHeight != undefined ? frame.frameHeight * 8 : null;
    } else {
      var imageW = image.imageSizeX * 8;//image width if pixel
      var imageH = image.imageSizeY * 8;//image height if pixel
      var frameWidthPx = frame.frameWidth != undefined ? frame.frameWidth * 8 : null;
      var frameHeightPx = frame.frameHeight != undefined ? frame.frameHeight * 8 : null;
    }
    if( isCFramePresent() ) {
      calculateCFrameEmptySpaces();
    } else {
      frame.cFrameSpaceL = 0;
      frame.cFrameSpaceT = 0;
      frame.cFrameSpaceR = 0;
      frame.cFrameSpaceB = 0;
    }
    var topMatWidthPx = topMatWidth * 8;
    var middleMatWidthPx = middleMatWidth * 8;
    var bottomMatWidthPx = bottomMatWidth * 8;
    var frameSideWidthPx = frame.width * 8;

    var filletWidthPx = fillet.width * 8;
    var linerWidthPx = liner.width * 8;
    //scaled the image
    if(isCFramePresent()) {
      k1 = new Number((this.canvasW-20)/(Number(2*frameSideWidthPx + frameWidthPx)));
      k2 = new Number((this.canvasH-60)/(Number(2*frameSideWidthPx + frameHeightPx)));
    } else {
      k1 = new Number((this.canvasW-20)/(Number(imageW + 2*topMatWidthPx + 2*middleMatWidthPx + 2*bottomMatWidthPx + 2*frameSideWidthPx + 2*linerWidthPx)));
      k2 = new Number((this.canvasH-60)/(Number(imageH + 2*topMatWidthPx + 2*middleMatWidthPx + 2*bottomMatWidthPx + 2*frameSideWidthPx + 2*linerWidthPx)));
    }
    k1 = Math.min(k1, k2);

    imageW = Math.ceil(imageW * k1);
    imageH = Math.ceil(imageH * k1);
    frameWidthPx = Math.ceil(frameWidthPx * k1);
    frameHeightPx = Math.ceil(frameHeightPx * k1);
    topMatWidthPx = Math.ceil(topMatWidthPx * k1);
    middleMatWidthPx = Math.ceil(middleMatWidthPx * k1);
    bottomMatWidthPx = Math.ceil(bottomMatWidthPx * k1);
    frameSideWidthPx = Math.ceil(frameSideWidthPx * k1);
    filletWidthPx = Math.ceil(filletWidthPx * k1);
    linerWidthPx = Math.ceil(linerWidthPx * k1);
    var cropPosPx1 = Math.ceil(cropPos1 * 8 * k1);
    var cropPosPx2 = Math.ceil(cropPos2 * 8 * k1);
    var cropPosPx3 = Math.ceil(cropPos3 * 8 * k1);
    var cropPosPx4 = Math.ceil(cropPos4 * 8 * k1);

    //crop
    var realdx = bottomMatWidthPx + middleMatWidthPx + grooveDeltaX;
    var allx = bottomMatWidthPx + middleMatWidthPx + topMatWidthPx + frameSideWidthPx + linerWidthPx;
    if(realdx > allx) {
      grooveDeltaX = allx - middleMatWidthPx - bottomMatWidthPx;
      grooveDeltaY = allx - middleMatWidthPx - bottomMatWidthPx;
    }

    layoutX = new Number(Number(frameSideWidthPx) + Number(linerWidthPx) + Number(topMatWidthPx) + Number(bottomMatWidthPx) + Number(middleMatWidthPx));
    layoutY = layoutX;
    if(this.no_offsets)
      offsets = [0, 0];
    else
      offsets = Position.positionedOffset(this.element);
    layoutX += Math.ceil(Number(offsets[0] + this.canvasW/2 - Number(Number(layoutX) + Number(imageW/2))));
    layoutY += Math.ceil(Number(offsets[1] + this.canvasH/2 - Number(Number(layoutY) + Number(imageH/2))));
    //dimensions of layers
    //fillet
    //size
    var filletSizeX = Number(Number(imageW - cropPosPx2 - cropPosPx4));
    var filletSizeY = Number(Number(imageH - cropPosPx1 - cropPosPx3));
    //layout
    var filletLayoutX = Number(Number(layoutX) + Number(cropPosPx4));
    var filletLayoutY = Number(Number(layoutY) + Number(cropPosPx1));
    //bottom mat
    //size
    var bottomMatSizeX = Number(Number(filletSizeX) + Number(2*bottomMatWidthPx));
    var bottomMatSizeY = Number(Number(filletSizeY) + Number(2*bottomMatWidthPx));
    //layout
    var bottomMatLayoutX = Number(Number(filletLayoutX) - bottomMatWidthPx);
    var bottomMatLayoutY = Number(Number(filletLayoutY) - bottomMatWidthPx);
    //middle mat
    //size
    var middleMatSizeX = Number(Number(bottomMatSizeX) + Number(2*middleMatWidthPx));
    var middleMatSizeY = Number(Number(bottomMatSizeY) + Number(2*middleMatWidthPx));
    //layout
    var middleMatLayoutX = Number(Number(bottomMatLayoutX) - middleMatWidthPx);
    var middleMatLayoutY = Number(Number(bottomMatLayoutY) - middleMatWidthPx);
    //top mat
    //size
    var topMatSizeX = Number(Number(middleMatSizeX) + Number(2*topMatWidthPx));
    var topMatSizeY = Number(Number(middleMatSizeY) + Number(2*topMatWidthPx));
    //layout
    var topMatLayoutX = Number(middleMatLayoutX - topMatWidthPx);
    var topMatLayoutY = Number(middleMatLayoutY - topMatWidthPx);
    //liner
    //size
    var linerSizeX = Number(Number(topMatSizeX) + Number(2*linerWidthPx));
    var linerSizeY = Number(Number(topMatSizeY) + Number(2*linerWidthPx));
    //layout
    var linerLayoutX = Number(topMatLayoutX - linerWidthPx);
    var linerLayoutY = Number(topMatLayoutY - linerWidthPx);
    //frame
    if(frameWidthPx != 0) {
      var frameSizeX = Number(frameWidthPx + Number(2*frameSideWidthPx));
      var frameSizeY = Number(frameHeightPx + Number(2*frameSideWidthPx));
      var frameLayoutX = Math.ceil(Number(offsets[0] + this.canvasW/2 - Number(frameSizeX/2)));
      var frameLayoutY = Math.ceil(Number(offsets[1] + this.canvasH/2 - Number(frameSizeY/2)));
    } else {
      var frameSizeX = Number(Number(linerSizeX) + Number(2*frameSideWidthPx));
      var frameSizeY = Number(Number(linerSizeY) + Number(2*frameSideWidthPx));
      if(frame.id) {
        frameWidthPx = frameSizeX - Number(2*frameSideWidthPx);
        frameHeightPx = frameSizeY - Number(2*frameSideWidthPx);
      }
      //layout
      var frameLayoutX = Math.ceil(Number(linerLayoutX - frameSideWidthPx));
      var frameLayoutY = Math.ceil(Number(linerLayoutY - frameSideWidthPx));
    }
    //modes of the groove
    groovew = middleMatSizeX;
    grooveh = middleMatSizeY;
    groovelx = middleMatLayoutX;
    groovely = middleMatLayoutY;
    groovew += 2*grooveDeltaX;
    groovelx -= grooveDeltaX;
    grooveh += 2*grooveDeltaY;
    groovely -= grooveDeltaY;
    //coords of the beveled edges
    belx = Number(Number(bottomMatLayoutX) + Number(bottomMatWidth-1));
    bely = Number(Number(bottomMatLayoutY) + Number(bottomMatWidth-1));
    bew = bottomMatSizeX - 2*(bottomMatWidth-1);
    beh = bottomMatSizeY - 2*(bottomMatWidth-1);
    var ff = navigator.appName.indexOf('Microsoft')!=-1 ? 0 : 1;
//    $H(this.element.childNodes).each(function(el) {Element.hide(el);});
    Element.hide(this.tmatHolder);
    Element.hide(this.mmatHolder);
    Element.hide(this.bmatHolder);
    if(frameSideWidthPx > 0 && frame.type == 'frame' && frame.texture_path) {
      Element.setStyle(this.frameHolder, {
        'margin-left': "-" + (frameSizeX/2) + "px",
        'margin-top': "-" + (frameSizeY/2) + "px",
        top: "50%",
        left: "50%",
        //left: frameLayoutX + "px",
        //top: frameLayoutY + "px",
        width: frameSizeX + "px",
        height: frameSizeY + "px",
        zIndex: this.z_index + 3,
        marginRight: 2.5
      });
      Element.show(this.frameHolder);
      this.frameHolder.innerHTML = "<img class='fixed_png' src='frame_generator.php?f=" + frame.texture_path + "&w=" + new Number(frameSizeX - new Number(2*frameSideWidthPx)) + "&h=" + new Number(frameSizeY - new Number(2*frameSideWidthPx)) + "&scale=" + frameSideWidthPx + "' width=" + frameSizeX + " height=" + frameSizeY + ">";
    }
    if(frameSideWidthPx > 0 && frame.type == 'cframe' && !frame.texture_path) {
      Element.setStyle(this.frameHolder, {
        'margin-left': "-" + (frameSizeX/2) + "px",
        'margin-top': "-" + (frameSizeY/2) + "px",
        top: "50%",
        left: "50%",
        //left: frameLayoutX + "px",
        //top: frameLayoutY + "px",
        width: frameSizeX + "px",
        height: frameSizeY + "px",
        zIndex: this.z_index + 3
      });
      Element.show(this.frameHolder);
      this.frameHolder.innerHTML = "<table cellpadding=0 cellspacing=0><tr>"+
      this.tdImg(frame.frameParts[0], frameSideWidthPx, frameSideWidthPx)+
      this.tdImg(frame.frameParts[1], frameWidthPx, frameSideWidthPx)+
      this.tdImg(frame.frameParts[2], frameSideWidthPx, frameSideWidthPx)+
      "</tr><tr>"+
      this.tdImg(frame.frameParts[3], frameSideWidthPx, frameHeightPx)+
      "<td></td>"+
      this.tdImg(frame.frameParts[4], frameSideWidthPx, frameHeightPx)+
      "</tr><tr>"+
      this.tdImg(frame.frameParts[5], frameSideWidthPx, frameSideWidthPx)+
      this.tdImg(frame.frameParts[6], frameWidthPx, frameSideWidthPx)+
      this.tdImg(frame.frameParts[7], frameSideWidthPx, frameSideWidthPx)+
      "</tr></table>";
    }
    if(linerWidthPx > 0) {
      Element.setStyle(this.linerHolder, {
        'margin-left': "-" + (linerSizeX/2) + "px",
        'margin-top': "-" + (linerSizeY/2) + "px",
        top: "50%",
        left: "50%",
        //left: linerLayoutX + "px",
        //top: linerLayoutY + "px",
        width: linerSizeX + "px",
        height: linerSizeY + "px",
        position: "absolute",
        zIndex: this.z_index + 9,
        marginRight: 2.5
      });
      Element.show(this.linerHolder);
      this.linerHolder.innerHTML = "<img class='fixed_png' src='frame_generator.php?type=liner&f=" + liner.texture_path + "&w=" + new Number(linerSizeX - new Number(2*linerWidthPx)) + "&h=" + new Number(linerSizeY - new Number(2*linerWidthPx)) + "&scale=" + linerWidthPx + "' width=" + linerSizeX + " height=" + linerSizeY + ">";
    }
    if(topMatWidth > 0) {
      Element.show(this.tmatHolder);
      Element.setStyle(this.tmatHolder, {
        'margin-left': "-" + (topMatSizeX/2) + "px",
        'margin-top': "-" + (topMatSizeY/2) + "px",
        top: "50%",
        left: "50%",
        //left: topMatLayoutX + "px",
        //top: topMatLayoutY + "px",
        width: (topMatSizeX) + "px",
        height: (topMatSizeY) + "px",
        position: "absolute",
        zIndex: this.z_index + 5,
        marginRight: 2.5,
        border: "0px none #000000"
      });
      if( topMat.color )
        Element.setStyle(this.tmatHolder, {
          backgroundImage: "",
          backgroundColor: topMat.color
        });
      else
        Element.setStyle(this.tmatHolder, {
          backgroundImage: "url('../resources/" + topMat.texture_path + "')",
          backgroundColor: ''
        });
    }
    if( middleMatWidth > 0) {
      Element.setStyle(this.mmatHolder, {
        'margin-left': "-" + (middleMatSizeX/2) + "px",
        'margin-top': "-" + (middleMatSizeY/2) + "px",
        top: "50%",
        left: "50%",
        //left: (middleMatLayoutX) + "px",
        //top: (middleMatLayoutY) + "px",
        width: (middleMatSizeX) + "px",
        height: (middleMatSizeY) + "px",
        position: "absolute",
        border: "0px none #000000",
        zIndex: this.z_index + 6,
        marginRight:2.5
      });
      Element.show(this.mmatHolder);
      if( middleMat.color )
        Element.setStyle(this.mmatHolder, {
          backgroundImage: "",
          backgroundColor: middleMat.color
        });
      else
        Element.setStyle(this.mmatHolder, {
          backgroundImage: "url('../resources/" + middleMat.texture_path + "')",
          backgroundColor: ""
        });
      if( topMatWidth >0 )
        Element.setStyle(this.mmatHolder,{
          'margin-left': "-" + ((middleMatSizeX+2*ff)/2) + "px",
          'margin-top': "-" + ((middleMatSizeY+2*ff)/2) + "px",
          top: "50%",
          left: "50%",
          //left: (middleMatLayoutX) + "px",
          //top: (middleMatLayoutY) + "px",
          width: (middleMatSizeX+2*ff) + "px",
          height: (middleMatSizeY+2*ff) + "px",
          border: "1px solid " + this.selectColor(middleMat)
        });
    }
    if( bottomMatWidth > 0 ) {
      Element.setStyle(this.bmatHolder, {
        'margin-left': "-" + (bottomMatSizeX/2) + "px",
        'margin-top': "-" + (bottomMatSizeY/2) + "px",
        top: "50%",
        left: "50%",
        //left: (bottomMatLayoutX) + "px",
        //top: (bottomMatLayoutY) + "px",
        width: (bottomMatSizeX) + "px",
        height: (bottomMatSizeY) + "px",
        position: "absolute",
        border: "0px none #000000",
        zIndex: this.z_index + 7,
        marginRight:2.5
      });
      Element.show(this.bmatHolder);
      if( bottomMat.color )
        Element.setStyle(this.bmatHolder, {
          backgroundColor: bottomMat.color,
          backgroundImage: ""
        });
      else
        Element.setStyle(this.bmatHolder, {
          backgroundColor: "",
          backgroundImage: "url('../resources/" + bottomMat.texture_path + "')"
        });
      if( topMatWidth > 0 || middleMatWidth > 0 )
        Element.setStyle(this.bmatHolder, {
          'margin-left': "-" + ((bottomMatSizeX-2*ff)/2) + "px",
          'margin-top': "-" + ((bottomMatSizeY-2*ff)/2) + "px",
          top: "50%",
          left: "50%",
          //left: (bottomMatLayoutX) + "px",
          //top: (bottomMatLayoutY) + "px",
          width: (bottomMatSizeX-2*ff) + "px",
          height: (bottomMatSizeY-2*ff) + "px",
          border: "1px solid " + this.selectColor(bottomMat)
        });
    }
    if(filletWidthPx > 0) {
      Element.setStyle(this.filletHolder, {
        'margin-left': "-" + (filletSizeX/2) + "px",
        'margin-top': "-" + (filletSizeY/2) + "px",
        top: "50%",
        left: "50%",
        //left: filletLayoutX + "px",
        //top: filletLayoutY + "px",
        width: filletSizeX + "px",
        height: filletSizeY + "px",
        position: "absolute",
        zIndex: this.z_index + 11,
        marginRight:2.5
      });
      Element.show(this.filletHolder);
      this.filletHolder.innerHTML = "<img class='fixed_png' src='frame_generator.php?type=fillet&f=" + fillet.texture_path + "&w=" + new Number(filletSizeX - new Number(2*filletWidthPx)) + "&h=" + new Number(filletSizeY - new Number(2*filletWidthPx)) + "&scale=" + filletWidthPx + "' width=" + filletSizeX + " height=" + filletSizeY + ">";
    }
    if(groove > 0) {
      this.vgrooveShow();
    }
    var clips = "rect("
      +(cropPosPx1==0?" auto":" "+( Math.floor(cropPosPx1))+"px")
      +(cropPosPx2==0?" auto":" "+( Math.ceil(imageW-cropPosPx2))+"px")
      +(cropPosPx3==0?" auto":" "+( Math.ceil(imageH-cropPosPx3))+"px")
      +(cropPosPx4==0?" auto":" "+( Math.floor(cropPosPx4)+"px"))
      +")";
      ///////
      
    var imageholdermarginleft = "-" + ((eval(Math.ceil(imageW-cropPosPx2)) - (eval(Math.floor(cropPosPx4))))/2) - (eval(Math.floor(cropPosPx4)));

    var imageholdermargintop = "-" + ((eval(Math.ceil(imageH-cropPosPx3)) - (eval(Math.floor(cropPosPx1))))/2) - (eval(Math.floor(cropPosPx1)));
    
        
    Element.setStyle(this.imageHolder, {
      'margin-left': imageholdermarginleft + "px",
      'margin-top': imageholdermargintop + "px",
      top: "50%",
      left: "50%",
      //left: (layoutX) + "px",
      //top: (layoutY) + "px",
      width: imageW + "px",
      height: imageH + "px",
      zIndex: this.z_index + 10,
      border: "none",
      clip: clips
    });
    Element.show(this.imageHolder);
   this.imageHolder.innerHTML = "<img id='wImg' name='wImg' src='" + image.src + "' width=" + imageW + " height=" + imageH + ">";
    if( topMatWidth > 0 || middleMatWidth > 0 || bottomMatWidth > 0 ) {
      Element.setStyle(this.imageHolder, {
        width: (imageW-2*ff) + "px",
        height: (imageH-2*ff) + "px"
      });
      $('wImg').width -= 2*(1-ff);
      $('wImg').height -= 2*(1-ff);
      Element.setStyle($('wImg'), {
        border: "1px solid " + this.selectColor((bottomMatWidth > 0 ? bottomMat : (middleMatWidth > 0 ? middleMat : topMat)))
      });
    } else {
      Element.setStyle($('wImg'), {
        border: "none"
      });
    }
  },

  tdImg: function(src,w,h) {
  var res = "<td><img src='../resources/";
  res += src+"'";
  if( w ) res+= " width='"+w+"'";
  if( h ) res+= " height='"+h+"'";
  res+="/></td>"
  return res;
  },

  vgrooveShow: function() {
    if((topMat.color == "fffaf0") || (middleMat.color == "fffaf0") || (bottomMat.color == "fffaf0") ||
       (topMat.color == "f0fff0") || (middleMat.color == "f0fff0") || (bottomMat.color == "f0fff0") ||
       (topMat.color == "f5fffa") || (middleMat.color == "f5fffa") || (bottomMat.color == "f5fffa") ||
       (topMat.color == "fff5ee") || (middleMat.color == "fff5ee") || (bottomMat.color == "fff5ee") ||
       (topMat.color == "fffafa") || (middleMat.color == "fffafa") || (bottomMat.color == "fffafa") ||
       (topMat.color == "f8f8ff") || (middleMat.color == "f8f8ff") || (bottomMat.color == "f8f8ff") ||
       (topMat.color == "ffffff") || (middleMat.color == "ffffff") || (bottomMat.color == "ffffff") ||
       (topMat.color == "f5f5f5") || (middleMat.color == "f5f5f5") || (bottomMat.color == "f5f5f5") ||
       (topMat.color == "fffff0") || (middleMat.color == "fffff0") || (bottomMat.color == "fffff0") ||
       (topMat.color == "fff8dc") || (middleMat.color == "fff8dc") || (bottomMat.color == "fff8dc") ||
       (topMat.color == "eee8cd") || (middleMat.color == "eee8cd") || (bottomMat.color == "eee8cd") ||
       (topMat.color == "ffffe0") || (middleMat.color == "ffffe0") || (bottomMat.color == "ffffe0") ||
       (topMat.color == "fafad2") || (middleMat.color == "fafad2") || (bottomMat.color == "fafad2") ||
       (topMat.color == "fffacd") || (middleMat.color == "fffacd") || (bottomMat.color == "fffacd"))
      vgcolor = "#cccccc";
    else
      vgcolor = "#fffaf0";
    var ff = navigator.appName.indexOf('Microsoft')!=-1 ? 0 : 1;
    Element.setStyle(this.vgHolder, {
      position: 'absolute',
      left: (groovelx) + "px",
      top: (groovely) + "px",
      width: (groovew+2*ff) + "px",
      height: (grooveh+2*ff) + "px",
      zIndex: this.z_index + 9,
      border: "1px solid " + vgcolor
    });
    Element.show(this.vgHolder);
  },

  selectColor: function(mat) {
    if((mat.color == "fffaf0") || (mat.color == "f5f5f5") ||
       (mat.color == "f0fff0") || (mat.color == "fffff0") ||
       (mat.color == "f5fffa") || (mat.color == "fff8dc") ||
       (mat.color == "fff5ee") || (mat.color == "eee8cd") ||
       (mat.color == "fffafa") || (mat.color == "ffffe0") ||
       (mat.color == "f8f8ff") || (mat.color == "fafad2") ||
       (mat.color == "ffffff") || (mat.color == "fffacd"))
        vgcolor = "#cccccc";
    else
      vgcolor = "#fffaf0";
    if(groove > 0) {
      Element.setStyle(this.vgHolder, {
        border: "1px solid " + vgcolor
      });
    }
    return vgcolor;
  },
  
  getDimensions: function(){
    var dimensionsDivs = [];
    dimensionsDivs["wallcolor"] = this.wallcolor.getDimensions();
    dimensionsDivs["frameHolder"] = this.frameHolder.getDimensions();
    dimensionsDivs[ "linerHolder"] = this.linerHolder.getDimensions();
    dimensionsDivs["topMatHolder"] = this.tmatHolder.getDimensions();
    dimensionsDivs["mmatHolder"] = this.mmatHolder.getDimensions();
    dimensionsDivs["bottommatHolder"] = this.bmatHolder.getDimensions(); 
    dimensionsDivs["filletHolder"] = this.filletHolder.getDimensions();
    dimensionsDivs["imgHolder"] = this.imageHolder.getDimensions();
    dimensionsDivs["vgHolder"] = this.vgHolder.getDimensions();


    return dimensionsDivs;
  },
  
  uiHTML: function() {
    return '<div id="wallcolor" class="wallcolor" style="z-index:0;"></div>' +
      '<div id="frameHolder" class="frameHolder"></div>' +
      '<div id="aaa" class="note"><a href="#" style="text-decoration:underline;">close</a> or Esc Key</div>' +
      '<div id="filletHolder" class="filletHolder"></div>' +
      '<div id="topMatHolder" class="topMatHolder"></div>' +
      '<div id="mmatHolder" class="mmatHolder"></div>' +
      '<div id="bottommatHolder" class="bottommatHolder"></div>' +
      '<div id="vgHolder" class="vgHolder"></div>' +
      '<div id="linerHolder" class="linerHolder"></div>' +
      '<div id="imgHolder" class="imgHolder"></div>';
  }
}