var superWidth = document.getElementById("superposition").clientWidth - 20;
var superposition = d3.select("#superposition").append("svg")
                                    .attr("width", superWidth)
                                    .attr("height", 100);

// function drawRect(thisElementWidth, start, end, startHeight, endHeight, width, col){

//     var startQuad = xoffset + Math.ceil(start);
//     var endQuad = startQuad + Math.ceil(end*thisElementWidth+1);

//     var quadPoints = (startQuad) + " " + (startHeight + width/2) + ", "
//                         + (startQuad) + " " + (startHeight - width/2) + ", "
//                         + (endQuad) + " " + (endHeight - width/2) + ", "
//                         + (endQuad) + " " + (endHeight + width/2);

//     superposition.append("polygon")
//         .attr("fill", col)
//         .attr("points", quadPoints); 
// }

// function drawArrow(n, i, thisElementWidth, start, gap, startHeight, endHeight, col){

//     var arrowStart = start + xoffset;

//     var length = Math.ceil(gap*thisElementWidth);
//     var newLength = Math.ceil(Math.sqrt(Math.pow(length, 2) + Math.pow(endHeight-startHeight, 2)));
//     var angleDeg = Math.atan2(endHeight - startHeight, gap*thisElementWidth) * 180 / Math.PI;
//     var newColor = (highlighted[n] >= i-gap && highlighted[n] <= i) ? "#66FF00" : col;

//     var height = startHeight;

//     var size = (thisElementWidth+5 > 10) ? 10 : thisElementWidth+5;

//     var triangleLength = (newLength > size) ? size : newLength;

//     var arrowGroup = superposition.append("g");

//     arrowGroup.append("rect")
//         .attr("height", size)
//         .attr("width", newLength - triangleLength + 2)
//         .attr("x", arrowStart)
//         .attr("y", height-size/2)
//         .style("fill", newColor);

//     var trianglePoints = (arrowStart + newLength) + " " + (height) + ", " 
//             + (arrowStart + newLength - triangleLength) + " " + (height + size) + ", " 
//             + (arrowStart + newLength - triangleLength) + " " + (height - size) ; 

//     arrowGroup.append("polygon")
//               .attr("fill", newColor)
//               .attr("points", trianglePoints);  

//     var middle = (endHeight<startHeight) ? -((Math.abs(endHeight-startHeight))/2) : ((Math.abs(endHeight-startHeight))/2);

//     arrowGroup.attr("transform", "rotate("+angleDeg+"," + (arrowStart+(length/2)) + "," + (startHeight+middle) + 
//                     ") translate (0, " + (middle) + ")" );

//     // arrowGroup.on("click", function(){
//     //   highlighted[n] = (highlighted[n] === i) ? 9999 : i;
//     //   redrawD3();
//     //   (highlighted[n] === 9999) ? (resetViewerSelection(n)) : highlightPV(n, alignToNotAlign[n][i]);
//     // });

// }

// function drawHelix(n, j, thisElementWidth, start, gap, startHeight, endHeight, col){

//   var startHelix = start + xoffset;
//   var length = Math.ceil(gap*thisElementWidth);
//   var height = startHeight;

//   var newLength = Math.ceil(Math.sqrt(Math.pow(length, 2) + Math.pow(startHeight-endHeight, 2)));
//   var angleDeg = Math.atan2(endHeight - startHeight, gap*thisElementWidth) * 180 / Math.PI;
//   var newColor = (highlighted[n] >= j-gap && highlighted[n] <= j) ? "#66FF00" : col;

//   var size = (thisElementWidth+9 > 20) ? 20 : thisElementWidth+9;

//   var helixGroup = superposition.append("g");
  
//   var firstShade = (startHelix) + " " + (height - size/2) + ", "
//                         + ((i+size/2>startHelix+newLength) ? startHelix+newLength : startHelix+size/2) + " " + (height - size/2) + ", "
//                         + (startHelix) + " " + (height+size/2) + ", "
//                         + (startHelix - size/4) + " " + (height + size/2) + ", "
//                         + (startHelix - size/4) + " " + (height);

//   helixGroup.append("polygon")
//         .attr("fill", newColor)
//         .attr("opacity", 0.3)
//         .attr("points", firstShade);


//   for (var i = startHelix; i < startHelix+newLength; i+=size) {
//       var quadPoints = (i) + " " + (height - size/2) + ", "
//                         + (i+size/2) + " " + (height - size/2) + ", "
//                         + (i+size) + " " + (height + size/2) + ", "
//                         + (i+size/2) + " " + (height + size/2);

//       if (i+10 > startHelix+newLength) quadPoints = (i) + " " + (height - size/2) + ", "
//                                                 + (i+size/2) + " " + (height - size/2) + ", "
//                                                 + (i+3*size/4) + " " + (height) + ", "
//                                                 + (i+3*size/4) + " " + (height + size/2) + ", "
//                                                 + (i+size/2) + " " + (height+size/2);

//   helixGroup.append("polygon")
//           .attr("fill", newColor)
//           .attr("points", quadPoints);    

//   }

//   for (var i = startHelix+size/2; i < startHelix+newLength; i+=size) {
//       var quadPoints = (i) + " " + (height + size/2) + ", "
//                         + (i+size/2) + " " + (height + size/2) + ", "
//                         + (i+size) + " " + (height - size/2) + ", "
//                         + (i+size/2) + " " + (height - size/2);

//       if (i+10 > startHelix+newLength) quadPoints = (i) + " " + (height + size/2) + ", "
//                                                 + (i+size/2) + " " + (height + size/2) + ", "
//                                                 + (i+3*size/4) + " " + (height) + ", "
//                                                 + (i+3*size/4) + " " + (height - size/2) + ", "
//                                                 + (i+size/2) + " " + (height-size/2);

//   helixGroup.append("polygon")
//           .attr("fill", newColor)
//           .attr("opacity", 0.5)
//           .attr("points", quadPoints);    

//   }

//   var middle = (endHeight<startHeight) ? -((Math.abs(endHeight-startHeight))/2) : ((Math.abs(endHeight-startHeight))/2);

//   helixGroup.attr("transform", "rotate("+angleDeg+"," + (startHelix+(length/2)) + "," + (startHeight+middle) + 
//                   ") translate (0, " + (middle) + ")" );

//   // helixGroup.on("click", function(){
//   //     highlighted[n] = (highlighted[n] === j) ? 9999 : j;
//   //     redrawD3();
//   //     (highlighted[n] === 9999) ? (resetViewerSelection(n)) : highlightPV(n, alignToNotAlign[n][j]);
//   //   });
// }

function drawSuperposition(n){


  let globalI = 0;
  let lastHeight = 0;

  let superLoopIndex = 0;
  let superLoopShift = null;
  let lastsuperLoopIndex = [];

  for (let i = 0; i < ss[n].length - 1; i++) {
      let thisSS = ss[n][i];
      let initHeight = 75 ;
      let endHeight = 75 ;

      let start = i;
      while (ss[n][i] === thisSS) i++;
      let gap = i - start + 1;

      if (superLoopIndex < loops[n].length && i >= loops[n][superLoopIndex].start){  
        if (superLoopShift == null){
          superLoopShift = loops[n][superLoopIndex].start - start;
          // superLoopShift = atomsFromPdb[n][0][1];
        }
        
        let strt = parseInt(loops[n][superLoopIndex].start) - parseInt(superLoopShift);
        let ennd = parseInt(loops[n][superLoopIndex].end) - parseInt(superLoopShift);

        drawNewLoop(superposition, n,strt,ennd,initHeight,colorMolecule[n],superElementWidth,superLoopIndex);
        superLoopIndex++;
      }

      if (thisSS === 'E') drawJuxtaArrow(superposition, n, i, superElementWidth, globalI, gap, initHeight, endHeight, colorMolecule[n]);
      if (thisSS === 'H') drawJuxtaHelix(superposition, n, i, superElementWidth, globalI, gap, initHeight, endHeight, colorMolecule[n]);
      if (thisSS === '-') drawJuxtaRect(superposition,superElementWidth, globalI,  gap, initHeight, endHeight, 3, "lightgray");
      if (thisSS === 'C') drawJuxtaRect(superposition,superElementWidth, globalI,  gap, initHeight, endHeight, 3, colorMolecule[n]);

      globalI += Math.round( gap * superElementWidth);
  }

}