var paper, blanket;
var allDoors = new Array();
var selectedDoor = 0;
var maskingMode = 0;  //0=step two prep, 1=step three applying product
//var curDoorProductFilter = '8x7', curDoorFriendlyName = 'Single 8\'x 7\'';
var curDoorProductFilter = '', curDoorFriendlyName = '';
var curRenderDoor = 0;

function maskingInit(mode) {
  maskingMode = mode;
  if (maskingMode != 0) maskingMode = 1;  //0=step 2 prep, 1=step 3 applying product
  
  // Init drawing area
  if (!paper) {
    var imgHouse = getHouseInfo();
    var imgHgt = imgHouse.height;  //document.getElementById('display_project').height;
    var imgWid = imgHouse.width;  //document.getElementById('display_project').width;
    paper = new Raphael(document.getElementById('canvas'), imgWid, imgHgt);
    var canvas = document.getElementById('canvas');
    canvas.onselectstart = function () { return false; }; // ie
    canvas.onmousedown = function () { return false; }; // mozilla
  }
}

function clearCanvas() {
  paper.clear();
  blanket = paper.rect(0, 0, paper.width, paper.height);
  blanket.attr({fill: 'white', opacity: 0});
  
  blanket.mousedown(function (event) {
    if (getCustomColor != '') {
      var x = event.clientX - (document.getElementById('display_image').offsetLeft + document.getElementById('grid_display').offsetLeft + parseInt(document.getElementById('canvas').style.left) + parseInt(document.getElementById('main_div').style.left)) + document.getElementById('display_image').scrollLeft;
      var y = event.clientY - (document.getElementById('display_image').offsetTop + document.getElementById('grid_display').offsetTop) + document.getElementById('display_image').scrollTop;
      var w = parseInt(document.getElementById('display_project').style.width);
      var img = document.getElementById('display_project').src;
      var customColor = pickColor(img, x, y, w);
      SetCustomColor(getCustomColor, customColor);
    }
  });
  
  getCustomColor = '';
  document.getElementById('canvas').style.cursor = '';
  var nid = document.getElementsByTagName('span');
  for (var ni=0; ni<nid.length; ni++) {if (nid[ni].id == 'custom_color_message') nid[ni].style.display = 'none';}
}


function resizeCanvas(origWid, origHgt, newWid, newHgt) {
  if (isNaN(origWid) || isNaN(origHgt) || isNaN(newWid) || isNaN(newHgt)) return;
  //if ((origWid == 0) || (origHgt == 0) || (newWid == 0) || (newHgt == 0)) return;
  
  clearCanvas();
  
  var newMasks = new Array();
  for (var i in allDoors) {
    if (allDoors[i]) {
      var addPathFunction;
      var origPoints = allDoors[i].origPoints;
      var newPoints = scalePoints(allDoors[i].origPoints, newWid, newHgt, origWid, origHgt);
      if (allDoors[i].points.length == 4) {
        addPathFunction = addPath;
      } else if (allDoors[i].points.length == 5) {
        addPathFunction = addBezierPath;
      } else if (allDoors[i].points.length == 6) {
        addPathFunction = addPath;
      } else {
        //some kind of error?
      }
      newMasks.push({newPoints: newPoints, origPoints: origPoints, size: allDoors[i].size, sizeFriendlyName: allDoors[i].sizeFriendlyName, layerID: allDoors[i].layerID,  addPathFunction: addPathFunction});
    }
  }
  
  allDoors = new Array();
  for (i in newMasks) {
    var iDoor = newObject(newMasks[i].newPoints, newMasks[i].addPathFunction, newMasks[i].origPoints);
    allDoors[iDoor].size = newMasks[i].size;
    allDoors[iDoor].sizeFriendlyName = newMasks[i].sizeFriendlyName;
    allDoors[iDoor].layerID = newMasks[i].layerID;
  }
  selectDoor(selectedDoor);

}


function scalePoints(pts, newWid, newHgt, oldWid, oldHgt) {
  var retPoints = new Array();
  for (var i = 0; i < pts.length; i++) {
    var nx = (pts[i].x / oldWid) * newWid;
    var ny = (pts[i].y / oldHgt) * newHgt;
    retPoints[i] = {x: nx, y: ny};
  }
  return retPoints;
}

function getHouseInfo() {
  //theImage = new Image();
  //var img = document.getElementById('display_project');
  //theImage.src = img.src;
  
  var wid = parseInt(document.getElementById('display_project').getAttribute('w'));
  var hgt = parseInt(document.getElementById('display_project').getAttribute('h'));
  
  var zoom = 1;
  if (parseFloat(document.getElementById('canvas').style.width) > 0) zoom = parseFloat(document.getElementById('canvas').style.width) / wid;
  
  return {width:wid, height:hgt, zoom:zoom};
}


function SelectDoorSize(sProductFilter, sDoorSizeFriendly, elem) {
  curDoorProductFilter = sProductFilter;
  curDoorFriendlyName = sDoorSizeFriendly;
  
  if (document.getElementById('doorSizeSelected')) document.getElementById('doorSizeSelected').id = 'doorSize';
  elem.id = 'doorSizeSelected';
  
  document.getElementById('btnAddRectDoor').title = 'Add a Rectangular ' + sDoorSizeFriendly + ' Door...';
  document.getElementById('btnAddCornerDoor').title = 'Add a Cornered ' + sDoorSizeFriendly + ' Door...';
  document.getElementById('btnAddArchDoor').title = 'Add an Arched ' + sDoorSizeFriendly + ' Door...';
}


function computeTrueCornerPoints(points) {
  var m1, b1, m2, b2, m3, b3, dx, dy, x1, y1, x2, y2, x3, y3, x4, y4;
  var m4, b4, xp, yp, xb, yb, bb, mb;
  
  if (points.length == 6) {
    //OUTLINE  .point[1] & .point[2] are the upper corner points; find intersection between left & top lines, and right & top lines;   y = mx + b
    //left line m1 
    dx = points[0].x - points[5].x;  dy = points[0].y - points[5].y;
    if (dx == 0) m1 = 9999999; else m1 = dy / dx;   //vertical slope when m1 = 9999999;
    b1 = points[0].y - m1 * points[0].x;
    //top line m2
    dx = points[1].x - points[2].x;  dy = points[1].y - points[2].y;
    if (dx == 0) m2 = 9999999; else m2 = dy / dx;   //vertical slope when m2 = 9999999;
    b2 = points[1].y - m2 * points[1].x;
    //right line m3
    dx = points[3].x - points[4].x;  dy = points[3].y - points[4].y;
    if (dx == 0) m3 = 9999999; else m3 = dy / dx;   //vertical slope when m1 = 9999999;
    b3 = points[3].y - m3 * points[3].x;
    //find top-left corner
    if (m1 == 9999999) x1 = points[0].x; else x1 = (b2 - b1) / (m1 - m2);
    if (m1 == 9999999) y1 = m2 * x1 + b2; else y1 = m1 * x1 + b1;
    //find top-right corner
    if (m3 == 9999999) x2 = points[3].x; else x2 = (b2 - b3) / (m3 - m2);
    if (m3 == 9999999) y2 = m2 * x2 + b2; else y2 = m3 * x2 + b3;
    //bottom corners
    x3 = points[4].x;  y3 = points[4].y;
    x4 = points[5].x;  y4 = points[5].y;
  }
  else if (points.length == 5) {
    //BEZIER  .point[4] is the bezier point
    //left line m1 
    dx = points[0].x - points[3].x;  dy = points[0].y - points[3].y;
    if (dx == 0) m1 = 9999999; else m1 = dy / dx;   //vertical slope when m1 = 9999999;
    b1 = points[0].y - m1 * points[0].x;
    //top line m2
    dx = points[0].x - points[1].x;  dy = points[0].y - points[1].y;
    if (dx == 0) m2 = 9999999; else m2 = dy / dx;   //vertical slope when m2 = 9999999;
    b2 = points[1].y - m2 * points[1].x;
    //right line m3
    dx = points[1].x - points[2].x;  dy = points[1].y - points[2].y;
    if (dx == 0) m3 = 9999999; else m3 = dy / dx;   //vertical slope when m1 = 9999999;
    b3 = points[1].y - m3 * points[1].x;
    
    //get the tangent to the bezier high-point (which is half the height of parallel line across the bezier point)
    //compute slope perpendicular top line, going though point[4]
    if (m2 == 0) m4 = 9999999; else m4 = -1 / m2;   //vertical slope when m4 = 9999999;
    b4 = points[4].y - m4 * points[4].x;
    //find intersection point between perpendicular line and top line (xp, yp)
    if (m4 == 9999999) xp = points[4].x; else xp = (b2 - b4) / (m4 - m2);
    if (m4 == 9999999) yp = m2 * xp + b2; else yp = m4 * xp + b4;
    //compute halfway point between top line and bezier line through the perpendicular line (xb, yb)
    xb = xp + (points[4].x - xp) / 2; yb = yp + (points[4].y - yp) / 2;
    //get parallel line to top line m2 through xb, yb
    bb = yb - m2 * xb;  mb = m2;
    //find top-left corner
    if (m1 == 9999999) x1 = points[0].x; else x1 = (bb - b1) / (m1 - mb);
    if (m1 == 9999999) y1 = mb * x1 + bb; else y1 = m1 * x1 + b1;
    //find top-right corner
    if (m3 == 9999999) x2 = points[1].x; else x2 = (bb - b3) / (m3 - mb);
    if (m3 == 9999999) y2 = mb * x2 + bb; else y2 = m3 * x2 + b3;
    //bottom corners
    x3 = points[2].x;  y3 = points[2].y;
    x4 = points[3].x;  y4 = points[3].y;
  }
  else if (points.length == 4) {
    //RECTANGLE
    x1 = points[0].x;
    y1 = points[0].y;
    x2 = points[1].x;
    y2 = points[1].y;
    x3 = points[2].x;
    y3 = points[2].y;
    x4 = points[3].x;
    y4 = points[3].y;
  }
  
  return {x1:parseInt(x1), y1:parseInt(y1), x2:parseInt(x2), y2:parseInt(y2), x3:parseInt(x3), y3:parseInt(y3), x4:parseInt(x4), y4:parseInt(y4)};
}


function clearAll() {
  clearCanvas();
  allDoors = new Array();
  allCircles = new Array();
  selectDoor(-1);
}

function deleteDoor() {
  if (allDoors[selectedDoor]) {
    //clear out the deleted door
    allDoors[selectedDoor] = null;
    clearCanvas();
    
    //rebuild the allDoors array
    var newMasks = new Array();
    for (var i in allDoors) {
      if (allDoors[i]) {
        var addPathFunction;
        if (allDoors[i].points.length == 4) {
          addPathFunction = addPath;
        } else if (allDoors[i].points.length == 5) {
          addPathFunction = addBezierPath;
        } else if (allDoors[i].points.length == 6) {
          addPathFunction = addPath;
        } else {
          //some kind of error?
        }
        newMasks.push({points: allDoors[i].points, origPoints: allDoors[i].origPoints, size: allDoors[i].size, sizeFriendlyName: allDoors[i].sizeFriendlyName, layerID: allDoors[i].layerID, addPathFunction: addPathFunction});
      }
    }
    allDoors = new Array();
    for (i in newMasks) {
      var iDoor = newObject(newMasks[i].points, newMasks[i].addPathFunction, newMasks[i].origPoints);
      allDoors[iDoor].size = newMasks[i].size;
      allDoors[iDoor].sizeFriendlyName = newMasks[i].sizeFriendlyName;
      allDoors[iDoor].layerID = newMasks[i].layerID;
    }
    
    //select the new door
    if (selectedDoor > allDoors.length - 1) selectedDoor = allDoors.length - 1;
    selectDoor(selectedDoor);
  }
}


function newObject(points, addPathFunction, origPoints2) {
  var i, k;
  var e = document.getElementById('sizeSelection');
  var iDoor = allDoors.length;  //get new door index
  hideAllPoints();

  var circles = new Array();
  // draw points
  if (maskingMode == 0) {
    for (i = 0; i < points.length; i++){
      circles[i] = paper.circle(points[i].x, points[i].y, 5);  //5 is the radius of the circle
      circles[i].attr({fill: '#9f9', opacity: .5});
      circles[i].mouseover(function (event) {document.body.style.cursor = 'pointer';});
      circles[i].mouseout(function (event) {document.body.style.cursor = 'default';});
    }
  }
  
  var start = function(){
    this.ox = this.attr('cx');
    this.oy = this.attr('cy');
    this.attr({opacity: 1});
    startUpdate(this.ox, this.oy);
  };

  var up = function() {
    this.attr({opacity: .5});
    for (var k = 0; k < allDoors[selectedDoor].circles.length; k++){
      allDoors[selectedDoor].circles[k].toFront();
    }
    allDoors[selectedDoor].path.attr({opacity: .8});
    complete();
  };

  var startX, startY;
  var startUpdate = function(ox, oy) {
    startX = ox;
    startY = oy;
  };
  
  var update = function(i, dx, dy) {
    var zoom = getHouseInfo().zoom;
    allDoors[selectedDoor].points[i].x = startX + dx;
    allDoors[selectedDoor].points[i].y = startY + dy;
    allDoors[selectedDoor].origPoints[i].x = allDoors[selectedDoor].points[i].x / zoom;
    allDoors[selectedDoor].origPoints[i].y = allDoors[selectedDoor].points[i].y / zoom;
    allDoors[selectedDoor].path.remove();
    allDoors[selectedDoor].path = addPathFunction(selectedDoor);
  };
  
  var complete = function() {
    changePerspective();
  };
  
  generateDragFunctions(points.length, circles, start, up, update);
  
  var origPoints = new Array();
  origPoints = points;
  if (origPoints2)
    origPoints = origPoints2; 
  else if (maskingMode == 0) {  //scale the new points to make them into the original points
    var imgHouse = getHouseInfo();
    origPoints = scalePoints(points, imgHouse.width, imgHouse.height, parseInt(document.getElementById('canvas').style.width), parseInt(document.getElementById('canvas').style.height));  
  }
  
  allDoors[iDoor] = {points: points, size: '', sizeFriendlyName: '', layerID: '', path: null, text: null, circles: circles, origPoints: origPoints}; 
  allDoors[iDoor].path = addPathFunction(iDoor);

  for (k = 0; k < allDoors[iDoor].circles.length; k++){
    allDoors[iDoor].circles[k].toFront();
  }
  
  allDoors[iDoor].size = curDoorProductFilter;
  allDoors[iDoor].sizeFriendlyName = curDoorFriendlyName;
   
  return iDoor;
}



function generateDragFunctions(numPoints, circles, start, up, update) {
  for (var i = 0; i < numPoints; i++) {
    applyDrag(circles, i, start, up, update);
  }
}

function applyDrag(circles, index, start, up, update) {
  var moveFunc = function (dx, dy) {
    this.attr({cx: this.ox + dx, cy: this.oy + dy});
    update(index, dx, dy);
    allDoors[selectedDoor].path.attr({opacity: .2});
  };
  if (maskingMode == 0)
    circles[index].drag(moveFunc, start, up);
}


function hideAllPoints() {
  for (var i = 0; i < allDoors.length; i++){
    if (allDoors[i]) {
      if (maskingMode == 0) allDoors[i].path.attr({opacity: .4, fill: '#f99'});
      else allDoors[i].path.attr({opacity: .8, 'fill-opacity': 0});
      for (var k = 0; k < allDoors[i].circles.length; k++){
        allDoors[i].circles[k].hide();
      }
    }
  }
}


function changePerspective() {
  var perspective = '';
  for (var k = 0; k < allDoors.length; k++){
    if (allDoors[k] != null) {
      for (var i = 0; i < allDoors[k].points.length; i++){
        perspective += allDoors[k].points[i].x + ',' + allDoors[k].points[i].y;
        if (i < allDoors[k].points.length - 1){
          perspective += '-';
        }
      }
      if (k < allDoors.length - 1){
        perspective += '|';
      }
    }
  }
  perspective = perspective.replace(new RegExp(',', 'g'), '2C');
}


function selectDoor(iDoor) {
  //de-select all doors first
  selectedDoor = -1;
  for (var i = 0; i < allDoors.length; i++) {
    if (i != iDoor) {
      if (maskingMode == 0) allDoors[i].path.attr({opacity: .4, fill: '#f99'});
        else allDoors[i].path.attr({opacity: 0, fill: '#f99'});
      for (var k = 0; k < allDoors[i].circles.length; k++) allDoors[i].circles[k].hide();
    }
  }
  
  //selects the door you're looking for
  if (allDoors[iDoor]) {
    if (maskingMode == 0) allDoors[iDoor].path.attr({opacity: .4, fill: '#f99'});
    else allDoors[iDoor].path.attr({opacity: 0, fill: '#f99'});
    allDoors[iDoor].path.toFront();
    for (k = 0; k < allDoors[iDoor].circles.length; k++){
      allDoors[iDoor].circles[k].show();
      allDoors[iDoor].circles[k].toFront();
    }
    if (maskingMode == 0) allDoors[iDoor].path.attr({opacity: .8, fill: '#9f9'});
    else allDoors[iDoor].path.attr({opacity: .8, 'fill-opacity': 0});
    
    selectedDoor = iDoor;
  }  
  
  //if we're in design mode, select the tab that corresponds to this selected door
  if ((selectedDoor != -1)&&(selectedDoor != curRenderDoor)&&(maskingMode == '1')) {
    curRenderDoor = selectedDoor;
    //load the product list
    ShowViewTabProductOptions(allDoors[curRenderDoor].layerID);
  }
}


function addPath(iDoor) {
  var k;
  var dragging = false;
  var over = false;
  var startX, startY, diffX, diffY;
  
  var pathString = 'M';
  for (var i = 0; i < allDoors[iDoor].points.length; i++){
    pathString += + allDoors[iDoor].points[i].x + ' ' + allDoors[iDoor].points[i].y + 'L';
  }
  pathString += 'L' + allDoors[iDoor].points[0].x + ' ' + allDoors[iDoor].points[0].y;
  
  var path = paper.path(pathString);
  if (maskingMode == 0) path.attr({stroke: 'red', fill: '#9f9', opacity: .8});
  else path.attr({stroke: 'red', 'stroke-width': 2, fill: '#9f9', opacity: 0});
  
  path.mousedown(function (event) {
    if (maskingMode == 0) dragging = true;
    startX = event.clientX;
    startY = event.clientY;
    selectDoor(iDoor);
  });
  
  path.mousemove(function (event) {
    if ((dragging)&&(maskingMode == 0)) {
      this.attr({opacity: .4, fill: '#9f9'});
      diffX = event.clientX - startX;
      diffY = event.clientY - startY;
      startX = event.clientX;
      startY = event.clientY;
      var zoom = getHouseInfo().zoom;
      for (var i = 0; i < allDoors[selectedDoor].points.length; i++) {
        allDoors[selectedDoor].points[i].x = allDoors[selectedDoor].points[i].x + diffX;
        allDoors[selectedDoor].points[i].y = allDoors[selectedDoor].points[i].y + diffY;
        allDoors[selectedDoor].origPoints[i].x = allDoors[selectedDoor].points[i].x / zoom;
        allDoors[selectedDoor].origPoints[i].y = allDoors[selectedDoor].points[i].y / zoom;
      }
      this.translate(diffX, diffY);
      for (var k = 0; k < allDoors[selectedDoor].circles.length; k++){
        allDoors[selectedDoor].circles[k].translate(diffX, diffY);
        allDoors[selectedDoor].circles[k].show();
      }
    }
  });
  
  path.mouseup(function (event) {
    if (dragging == true) {
      dragging = false;
      if (maskingMode == 0) {
        this.attr({opacity: .8});
        this.attr({opacity: .8, fill: '#9f9'});
        changePerspective();
      }
    }
  });

  path.mouseover(function (event) {
    document.body.style.cursor = 'pointer';
    over = true;
  });
  
  path.mouseout(function (event) {
    document.body.style.cursor = 'default';
    over = false;
    if (dragging == true) {  //the mouse moved outside the boundaries while being dragged, stop dragging
      dragging = false;
      if (maskingMode == 0) {
        this.attr({opacity: .8});
        this.attr({opacity: .8, fill: '#9f9'});
        changePerspective();
      }
    }
  });

  blanket.mousedown(function (event) {
    if (!over) selectDoor(-1);
  });

  return path;
}


//Bezier
function addBezierPath(iDoor) {
  var k;
  var dragging = false;
  var over = false;
  var startX, startY, diffX, diffY;

  var pathString = 'M' + allDoors[iDoor].points[0].x + ' ' + allDoors[iDoor].points[0].y;

  for (var i = 0.0; i < 1.0; i += 0.01) {
    pathString = pathString +
      'L' + (((1 - i) * (1 - i) * allDoors[iDoor].points[0].x) + 2 * ((1 - i) * i * allDoors[iDoor].points[4].x) + i * i * allDoors[iDoor].points[1].x) + ' '
      + (((1 - i) * (1 - i) * allDoors[iDoor].points[0].y) + 2 * ((1 - i) * i * allDoors[iDoor].points[4].y) + i * i * allDoors[iDoor].points[1].y);
  }

  pathString = pathString +
    'L' + allDoors[iDoor].points[1].x + ' ' + allDoors[iDoor].points[1].y +
    'L' + allDoors[iDoor].points[2].x + ' ' + allDoors[iDoor].points[2].y +
    'L' + allDoors[iDoor].points[3].x + ' ' + allDoors[iDoor].points[3].y +
    'L' + allDoors[iDoor].points[0].x + ' ' + allDoors[iDoor].points[0].y;


  var path = paper.path(pathString);
  if (maskingMode == 0) path.attr({stroke: 'red', fill: '#9f9', opacity: .8});
  else path.attr({stroke: 'red', 'stroke-width': 2, fill: '#9f9', opacity: 0});
  
  path.mousedown(function (event) {
    if (maskingMode == 0) dragging = true;
    startX = event.clientX;
    startY = event.clientY;
    selectDoor(iDoor);
  });
  
  path.mousemove(function (event) {
    if ((dragging)&&(maskingMode == 0)) {
      this.attr({opacity: .4, fill: '#9f9'});
      diffX = event.clientX - startX;
      diffY = event.clientY - startY;
      startX = event.clientX;
      startY = event.clientY;
      var zoom = getHouseInfo().zoom;
      for (var i = 0; i < allDoors[selectedDoor].points.length; i++) {
        allDoors[selectedDoor].points[i].x = allDoors[selectedDoor].points[i].x + diffX;
        allDoors[selectedDoor].points[i].y = allDoors[selectedDoor].points[i].y + diffY;
        allDoors[selectedDoor].origPoints[i].x = allDoors[selectedDoor].points[i].x / zoom;
        allDoors[selectedDoor].origPoints[i].y = allDoors[selectedDoor].points[i].y / zoom;
      }
      this.translate(diffX, diffY);
      for (var k = 0; k < allDoors[selectedDoor].circles.length; k++){
        allDoors[selectedDoor].circles[k].translate(diffX, diffY);
        allDoors[selectedDoor].circles[k].show();
      }
    }
  });
  
  path.mouseup(function (event) {
    if (dragging == true) {
      dragging = false;
      if (maskingMode == 0) {
        this.attr({opacity: .8});
        this.attr({opacity: .8, fill: '#9f9'});
        changePerspective();
      }
    }
  });

  path.mouseover(function (event) {
    document.body.style.cursor = 'pointer';
    over = true;
  });
  
  path.mouseout(function (event) {
    document.body.style.cursor = 'default';
    over = false;
    if (dragging == true) {  //the mouse moved outside the boundaries while being dragged, stop dragging
      dragging = false;
      if (maskingMode == 0) {
        this.attr({opacity: .8});
        this.attr({opacity: .8, fill: '#9f9'});
        changePerspective();
      }
    }
  });
  
  blanket.mousedown(function (event) {
    if (!over) selectDoor(-1);
  });

  return path;
}

//============================================
function createMasksFromProject() {
  var j = -1, firstSelectedDoor = -1;
  //init
  clearCanvas();
  allDoors = new Array();
  
  var appNode = appXML.getElementsByTagName('layers')[0];
  if (appNode) {
    var nodes = appNode.getElementsByTagName('layer');
    for (var i=0; i<nodes.length; i++) {
      //create objects on paper for each layer
      if (nodes[i].getAttribute('layerType') == 'RWDoor') {
        if (nodes[i].getAttribute('p6')) {
          newOutline(nodes[i]);
        }
        else if (nodes[i].getAttribute('p5')) {
          newBezier(nodes[i]);
        }
        else if (nodes[i].getAttribute('p4')) {
          newRectangle(nodes[i]);
        }
        else {
          //create p1-4 values from perspectiveP1-4
          nodes[i].setAttribute('p1', nodes[i].getAttribute('perspectiveP1'));
          nodes[i].setAttribute('p2', nodes[i].getAttribute('perspectiveP2'));
          nodes[i].setAttribute('p3', nodes[i].getAttribute('perspectiveP3'));
          nodes[i].setAttribute('p4', nodes[i].getAttribute('perspectiveP4'));
          newRectangle(nodes[i]);
        }
        
        //assign the layerID (whenever newOutline, newBezier, or newRectangle is called, selectedDoor is set to the newest allDoors index)
        allDoors[selectedDoor].layerID = nodes[i].getAttribute('layerID');
        if (firstSelectedDoor == -1) firstSelectedDoor = selectedDoor;
      }
    }
    curRenderDoor = firstSelectedDoor;
    selectedDoor = -1;
  }
}


//=================================================================

function getLayerXml() {
  var sXML = '', j = 0;
  for (var i = 0; i < allDoors.length; i++) {
  //for (var i = allDoors.length - 1; i >= 0; i--) {
    var curDoor = allDoors[i];
    if (curDoor) {
      j = j + 1;
      var layerName = 'Door ' + j;  //escape(curDoor.sizeFriendlyName);
      var productFilter = curDoor.size;
      var p1 = curDoor.origPoints[0].x.toString() + ',' + curDoor.origPoints[0].y.toString()
      var p2 = curDoor.origPoints[1].x.toString() + ',' + curDoor.origPoints[1].y.toString()
      var p3 = curDoor.origPoints[2].x.toString() + ',' + curDoor.origPoints[2].y.toString()
      var p4 = curDoor.origPoints[3].x.toString() + ',' + curDoor.origPoints[3].y.toString()
      var p5 = null;
      var p6 = null;
      if (curDoor.origPoints.length > 4) {
        var p5 = curDoor.origPoints[4].x.toString() + ',' + curDoor.origPoints[4].y.toString();
        if (curDoor.origPoints.length > 5) {
          var p6 = curDoor.origPoints[5].x.toString() + ',' + curDoor.origPoints[5].y.toString();
        }
      }
      
      var persp = computeTrueCornerPoints(curDoor.origPoints);
      var perspectiveP1 = persp.x1.toString() + ',' + persp.y1.toString();
      var perspectiveP2 = persp.x2.toString() + ',' + persp.y2.toString();
      var perspectiveP3 = persp.x3.toString() + ',' + persp.y3.toString();
      var perspectiveP4 = persp.x4.toString() + ',' + persp.y4.toString();
      
      sXML += '<layer layerID="' + i + '" layerName="' + layerName + '" layerType="RWDoor" productFilter="' + productFilter + '" \n';
      sXML += ' p1="' + p1 + '" p2="' + p2 + '" p3="' + p3 + '" p4="' + p4 + '" ';
      if (p5) sXML += ' p5="' + p5 + '" ';
      if (p6) sXML += ' p6="' + p6 + '" ';
      sXML += ' \n';
      sXML += ' perspectiveP1="' + perspectiveP1 + '" perspectiveP2="' + perspectiveP2 + '" perspectiveP3="' + perspectiveP3 + '" perspectiveP4="' + perspectiveP4 + '" \n';
      sXML += ' visible="1" shadows="0" opacity="450" shineLevel="0" shine="0" zoom="0" \n';
      sXML += ' rotationAngle="0" multiplierWid="1" multiplierHgt="1" offsetX="0" offsetY="0" /> \n';
    }
  }
  return sXML;
}

//======================================

function newRectangle(layerNode, doorSizeTest) {
  if (allDoors.length == 4) {
    alert('You may only have four doors at any one time.\n\nTo add a different door, please delete one first.');
    return false;
  }
  
  if ((curDoorProductFilter == '')&&(doorSizeTest)) {
    alert('Please select the door size (above) before adding a door...');
    return false;
  }
  
  var pts = '', x, y, i, dWid, dHgt;
  var points = new Array();
  if (!layerNode) {
    if (curDoorProductFilter == '8x7') {dWid = 200; dHgt = 175;}
    if (curDoorProductFilter == '8x8') {dWid = 200; dHgt = 200;}
    if (curDoorProductFilter == '16x7') {dWid = 400; dHgt = 175;}
    if (curDoorProductFilter == '16x8') {dWid = 400; dHgt = 200;}
    var zoom = getHouseInfo().zoom;
    points[0] = {x: 150 * zoom,          y: 100 * zoom};
    points[1] = {x: (150 + dWid) * zoom, y: 100 * zoom};
    points[2] = {x: (150 + dWid) * zoom, y: (100 + dHgt) * zoom};
    points[3] = {x: 150 * zoom,          y: (100 + dHgt) * zoom};
  }
  else {
    //get the points from the layernode
    for (i=1; i<=4; i++) {
      pt = layerNode.getAttribute('p' + i);
      x = parseFloat(pt.split(',')[0]);
      y = parseFloat(pt.split(',')[1]);
      points[i-1] = {x: x, y: y};
    }
  }
  var iDoor = newObject(points, addPath);
  selectedDoor = iDoor;
}

function newOutline(layerNode, doorSizeTest) {
  if (allDoors.length == 4) {
    alert('You may only have four doors at any one time.\n\nTo add a different door, please delete one first.');
    return false;
  }
  
  if ((curDoorProductFilter == '')&&(doorSizeTest)) {
    alert('Please select the door size (above) before adding a door...');
    return false;
  }
    
  var dWid, dHgt;
  var points = new Array();
  if (!layerNode) {
    if (curDoorProductFilter == '8x7') {dWid = 200; dHgt = 175;}
    if (curDoorProductFilter == '8x8') {dWid = 200; dHgt = 200;}
    if (curDoorProductFilter == '16x7') {dWid = 400; dHgt = 175;}
    if (curDoorProductFilter == '16x8') {dWid = 400; dHgt = 200;}
    var zoom = getHouseInfo().zoom;
    points[0] = {x: 170 * zoom,          y: 140 * zoom};
    points[1] = {x: 195 * zoom,          y: 115 * zoom};
    points[2] = {x: (145 + dWid) * zoom, y: 115 * zoom};
    points[3] = {x: (170 + dWid) * zoom, y: 140 * zoom};
    points[4] = {x: (170 + dWid) * zoom, y: (140 + dHgt) * zoom};
    points[5] = {x: 170 * zoom,          y: (140 + dHgt) * zoom};
  }
  else {
    //get the points from the layernode
    for (i=1; i<=6; i++) {
      pt = layerNode.getAttribute('p' + i);
      x = parseFloat(pt.split(',')[0]);
      y = parseFloat(pt.split(',')[1]);
      points[i-1] = {x: x, y: y};
    }
  }
  var iDoor = newObject(points, addPath);
  selectedDoor = iDoor;
}

function newBezier(layerNode, doorSizeTest) {
  if (allDoors.length == 4) {
    alert('You may only have four doors at any one time.\n\nTo add a different door, please delete one first.');
    return false;
  }
  
  if ((curDoorProductFilter == '')&&(doorSizeTest)) {
    alert('Please select the door size (above) before adding a door...');
    return false;
  }
  
  var dWid, dHgt;
  var points = new Array();
  if (!layerNode) {
    if (curDoorProductFilter == '8x7') {dWid = 200; dHgt = 175;}
    if (curDoorProductFilter == '8x8') {dWid = 200; dHgt = 200;}
    if (curDoorProductFilter == '16x7') {dWid = 400; dHgt = 175;}
    if (curDoorProductFilter == '16x8') {dWid = 400; dHgt = 200;}
    var zoom = getHouseInfo().zoom;
    points[0] = {x: 190 * zoom,              y: 140 * zoom};
    points[1] = {x: (190 + dWid) * zoom,     y: 140 * zoom};
    points[2] = {x: (190 + dWid) * zoom,     y: (140 + dHgt) * zoom};
    points[3] = {x: 190 * zoom,              y: (140 + dHgt) * zoom};
    points[4] = {x: (190 + dWid / 2) * zoom, y: 110 * zoom};
  }
  else {
    //get the points from the layernode
    for (i=1; i<=5; i++) {
      pt = layerNode.getAttribute('p' + i);
      x = parseFloat(pt.split(',')[0]);
      y = parseFloat(pt.split(',')[1]);
      points[i-1] = {x: x, y: y};
    }
  }
  var iDoor = newObject(points, addBezierPath);
  selectedDoor = iDoor;
}