var artProject = Class.create();
var objId;
artProject.prototype = {
  element: null,

  initialize: function(id, props) {
    objId=id;
	this.props = Object.extend({
      canvasW: 800,
      canvasH: 600,
      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() {
	pxfactor = 8;
    var k1,k2;
	//alert(image.imageSizeX + " : " + image.imageSizeY);
    
    if(needTurnImage==1) {
      var imageH = image.imageSizeX * pxfactor;//image width if pixel
      var imageW = image.imageSizeY * pxfactor;//image height if pixel
      var frameHeightPx = frame.frameWidth != undefined ? frame.frameWidth * pxfactor : null;
      var frameWidthPx = frame.frameHeight != undefined ? frame.frameHeight * pxfactor : null;
    } else {
	  var imageW = image.imageSizeX * pxfactor;//image width if pixel
      var imageH = image.imageSizeY * pxfactor;//image height if pixel
      var frameWidthPx = frame.frameWidth != undefined ? frame.frameWidth * pxfactor : null;
      var frameHeightPx = frame.frameHeight != undefined ? frame.frameHeight * pxfactor : null;
	  
    }
	
    if( isCFramePresent() ) {
      calculateCFrameEmptySpaces();
    } else {
      frame.cFrameSpaceL = 0;
      frame.cFrameSpaceT = 0;
      frame.cFrameSpaceR = 0;
      frame.cFrameSpaceB = 0;
     }
    var topMatWidthPx = topMatWidth * pxfactor;
    var middleMatWidthPx = middleMatWidth * pxfactor;
    var bottomMatWidthPx = bottomMatWidth * pxfactor;
    var frameSideWidthPx = frame.width * pxfactor;

    var filletWidthPx = fillet.width * pxfactor;
    var linerWidthPx = liner.width * pxfactor;
	//alert("frameWidth: " + frame.width );
    //scaled the image
	//alert("here:" + frameSideWidthPx + " : " + frameWidthPx + " : " + linerWidthPx);
    /* 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)));
    } */
	if(objId=="prjPreviewHolder")
	{
		availableWidth = 697 - 100;
		availableHeight = 349 - 20;
	}
	else
	{
		availableWidth = this.canvasW-20;
		availableHeight = this.canvasH-60;
	}
	if(isCFramePresent()) {
      k1 = new Number((availableWidth)/(Number(frameSideWidthPx + frameWidthPx)));
      k2 = new Number((availableHeight)/(Number(frameSideWidthPx + frameHeightPx)));
    } else {
	  //alert(imageW + " : " + topMatWidthPx + " : "  + middleMatWidthPx + " : "  + bottomMatWidthPx + " : "  + frameSideWidthPx + " : "  + linerWidthPx);
      k1 = new Number((availableWidth)/(Number(imageW + topMatWidthPx + middleMatWidthPx + bottomMatWidthPx + frameSideWidthPx + linerWidthPx)));
      k2 = new Number((availableHeight)/(Number(imageH + topMatWidthPx + middleMatWidthPx + bottomMatWidthPx + frameSideWidthPx + linerWidthPx)));
    }
	//alert(k1 + " : " + k2);
	//k1 = Math.min(k1, k2);
	k1 = Math.min(k1, k2) > 1 ? Math.min(k1,k2) : 1;
	
	if(imageW * k1 > availableWidth || imageH * k1 > availableHeight){
		if(imageW * k1 > availableWidth){
			ratio = availableWidth / imageW;
			imageW = availableWidth;
			imageH = availableHeight * ratio;
		}
		if(imageH * k1 > availableHeight){
			ratio = availableHeight / imageH;
			imageH = availableHeight;
			imageW = availableWidth * ratio;
		}
	}
    var imageW = imageW * k1;
    var imageH = imageH * k2;
	
	//alert(imageW + " : " + imageH);
    var frameWidthPx = frameWidthPx * k1;
    var frameHeightPx = frameHeightPx * k1;
    var topMatWidthPx = topMatWidthPx * k1;
    var middleMatWidthPx = middleMatWidthPx * k1;
    var bottomMatWidthPx = bottomMatWidthPx * k1;
    var frameSideWidthPx = frameSideWidthPx * k1;
    var filletWidthPx = filletWidthPx * k1;
    var linerWidthPx = linerWidthPx * k1;
    //alert("frameX: " + frameWidthPx);
	//alert("frameY: " + frameHeightPx);
	//alert("frameSideX:" + frameSideWidthPx);
    cropPosPx1 = cropPos1 * pxfactor * k1;
    cropPosPx2 = cropPos2 * pxfactor * k1;
    cropPosPx3 = cropPos3 * pxfactor * k1;
    cropPosPx4 = cropPos4 * pxfactor * 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 = Math.ceil(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);
	  if(objId=="prjPreviewHolder")
	  {
		 offsets[0] += 248/2;
	  }
	  
	}
    //layoutX += Number(offsets[0] + this.canvasW/2 - Number(Number(layoutX) + Number(imageW/2)))+Number(60);
	
	if(objId=="prjPreviewHolder")
	{
		layoutX += Number(offsets[0] + this.canvasW/2 - Number(Number(layoutX) + Number(imageW/2)))+Number(35);
		layoutY += Number(offsets[1] + this.canvasH/2 - Number(Number(layoutY) + Number(imageH/2)))+Number(20);
	}
	else
	{
		layoutX += Number(offsets[0] + this.canvasW/2 - Number(Number(layoutX) + Number(imageW/2)));
    	layoutY += 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))+Number(200);
	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 = Number(offsets[0] + this.canvasW/2 - Number(frameSizeX/2));
      var frameLayoutY = 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 = Number(linerLayoutX - frameSideWidthPx);
      var frameLayoutY = 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);});
    if(frameSideWidthPx > 0 && frame.type == 'frame' && frame.texture_path) {
      Element.setStyle(this.frameHolder, {
        left: frameLayoutX + "px",
        top: frameLayoutY + "px",
        width: frameSizeX + "px",
        height: frameSizeY + "px",
        zIndex: this.z_index + 3
      });
      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, {
        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, {
        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, {
        left: topMatLayoutX + "px",
        top: topMatLayoutY + "px",
        width: topMatSizeX + "px",
        height: topMatSizeY + "px",
        position: "absolute",
        zIndex: this.z_index + 5,
        marginRight:2.5
      });
      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, {
        left: (middleMatLayoutX-ff) + "px",
        top: (middleMatLayoutY-ff) + "px",
        width: (middleMatSizeX+ff+2) + "px",
        height: (middleMatSizeY+ff+2) + "px",
        position: "absolute",
        border: "none",
        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, {
          border: "1px solid " + this.selectColor(middleMat)
        });
    }
    if( bottomMatWidth > 0 ) {
      Element.setStyle(this.bmatHolder, {
        left: (bottomMatLayoutX-ff) + "px",
        top: (bottomMatLayoutY-ff) + "px",
        width: (bottomMatSizeX+ff+2) + "px",
        height: (bottomMatSizeY+ff+2) + "px",
        position: "absolute",
        border: "none",
        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, {
          border: "1px solid " + this.selectColor(bottomMat)
        });
    }
    if(filletWidthPx > 0) {
      Element.setStyle(this.filletHolder, {
        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":" "+( ff!=0 ? cropPosPx1 : Math.ceil(cropPosPx1))+"px")
      +(cropPosPx2==0?" auto":" "+( ff!=0 ? (imageW-cropPosPx2) : Math.ceil(imageW-cropPosPx2))+"px")
      +(cropPosPx3==0?" auto":" "+( ff!=0 ? (imageH-cropPosPx3) : Math.ceil(imageH-cropPosPx3))+"px")
      +(cropPosPx4==0?" auto":" "+( ff!=0 ? cropPosPx4 : Math.ceil(cropPosPx4)+"px"))
      +")";
    Element.setStyle(this.imageHolder, {
      left: (layoutX) + "px",
      top: (layoutY) + "px",
      width:  imageW + "px", //"398px", 
      height: imageH + "px",
      zIndex: this.z_index + 10,
      clip: clips
    });
    Element.show(this.imageHolder);
	
	
    this.imageHolder.innerHTML = "<img src='" + image.src + "' width=" + imageW + " height=" + imageH + ">";
	//this.imageHolder.innerHTML = "<img src='" + image.src + "' width='"+img_width+"' height='"+img_height+"'>";
  if( topMatWidth > 0 || middleMatWidth > 0 || bottomMatWidth > 0 )
    Element.setStyle(this.imageHolder, {
      border: "1px solid " + this.selectColor((bottomMatWidth > 0 ? bottomMat : (middleMatWidth > 0 ? middleMat : topMat)))
    });
   else
    Element.setStyle(this.imageHolder, {
      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-ff) + "px",
      top: (groovely-ff) + "px",
      width: (groovew+ff) + "px",
      height: (grooveh+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;
  },

  uiHTML: function() {
    return '<div class="wallcolor" style="z-index:0;position:relative;"></div>' +
      '<div class="frameHolder"></div>' +
      '<div class="filletHolder"></div>' +
      '<div class="topMatHolder"></div>' +
      '<div class="mmatHolder"></div>' +
      '<div class="bottommatHolder"></div>' +
      '<div class="vgHolder"></div>' +
      '<div class="linerHolder"></div>' +
      '<div class="imgHolder"></div>';
  }

}