<link href="https://fonts.googleapis.com/css?family=Oswald:300,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
<script src=" https://cdn.jsdelivr.net/npm/vue"></script>

<div id = "holder"></div>
<div id="app-4">

<!-- <div id = "canvasPart"> 
    <p>{{ poem[0].userInput}}</p>
        <p>{{ poem[1].userInput}}</p>
        <p>{{ poem[2].userInput}}</p>
        <p>{{ poem[3].userInput}}</p>
</div> -->
  <div class="vueHold">
    
<!-- <div  id = "userPart"> -->
<!--       <div id="prompts">
      1. Write The Lines Of Your Poem
    </div> -->
<!--     <div id="note">
      2. Press Anywhere On The Yellow To Make Your Poem
    </div> -->

    <!-- Four Inputs With Prompts from Data -->

    <!--   titles -->
    <div class="title" v-for="prompt in poem">
      {{ prompt.stage }}
      <br>
      <!--       inputs connected to the value property of the data model -->
      <input v-model="prompt.value" placeholder="... ">

    </div>
<button id = "makeButton" v-on:click="raphaelMake">Re-Create</button>
    


 
</div>
   <div id = "title">
<h1> The Transformation of Silence into Language and Action</h1>
  </div>
</div>
   

body {
background-color: rgba(15, 59, 114, 1);
color: #fffff8;
max-width: 800px;
    font-family: 'Oswald', sans-serif;
font-size: 1.3vw;
}
#app-4{
/*   height: 100%; */
}
h1{
  font-family: 'Archivo Black', sans-serif;
  font-size: 7.5em;
/*   line-height: 2em; */
}



#makeButton{
  font-family: 'Archivo Black', sans-serif;
  font-size: 125%;
  width: 50%;
  height:10% ;
    background-color:#B4303D;
  outline: none;
  border: none;
  color: #f4f4f4;
}

#title{
  position: absolute;
  top: 0;
  width: 65%;
/*   height: 100%; */
}
.vueHold {
  position: absolute;
  background-color: rgba(15, 59, 114, .1);    
  color: #FAFAFA;
  text-align: center;
  width: 45%;
  left: 55%;
  margin: auto;
  height: 50vh;
  top: 40vh;
  z-index: 1;
}


.title{
  font-size: 130%;
  color: #BBE1FF;
/*   color: #F9EB1B; */
  font-weight: 500;
}


input {
  background-color: rgba(68, 68, 68, .8);
color: #f4f4f4;
  width: 80%;
  margin: auto;
  margin-bottom: .5em;
  height: 3em;
  font-size: 90%;
  outline: none;
border: none;
  opacity: .5;
  
}

input:focus {
  outline: none;
  border: 0em solid #6B0062;
    background-color: #003771;
}

var app4 = new Vue({
  el: '#app-4',
  data: {
    poem:[
      
      {
  "stage":"Why do we speak?",
  "userInput":" ",
      "value": " "
}, 

{

"stage": "Of what are we afraid?",
"userInput": " ",
      "value": " ",
  
},
{

  "stage": "What have we survivied?",
  "userInput": " ",
      "value": " "
  
},

{
  "stage": "How have we/do we resist?",
  "userInput":" ",
      "value": " "
  
},

{
  "stage": "How are we healing?",
  "userInput": " ",
      "value": " "
  
}
    ],
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  },
  methods:{



//make a vue method to have raphael  make elements to canvas
    raphaelMake: function(){

      //hide the form
            var divSelector = $('#app-4');
      divSelector.hide();
      
// Raphael function for connecting shapes
      Raphael.fn.connection = function (obj1, obj2, line, bg) {
    if (obj1.line && obj1.from && obj1.to) {
        line = obj1;
        obj1 = line.from;
        obj2 = line.to;
    }
var bb1 = obj1.getBBox(),
        bb2 = obj2.getBBox(),
        p = [{x: bb1.x + bb1.width / 2, y: bb1.y - 1},
        {x: bb1.x + bb1.width / 2, y: bb1.y + bb1.height + 1},
        {x: bb1.x - 1, y: bb1.y + bb1.height / 2},
        {x: bb1.x + bb1.width + 1, y: bb1.y + bb1.height / 2},
        {x: bb2.x + bb2.width / 2, y: bb2.y - 1},
        {x: bb2.x + bb2.width / 2, y: bb2.y + bb2.height + 1},
        {x: bb2.x - 1, y: bb2.y + bb2.height / 2},
        {x: bb2.x + bb2.width + 1, y: bb2.y + bb2.height / 2}],
        d = {}, dis = [];
    for (var i = 0; i < 4; i++) {
        for (var j = 4; j < 8; j++) {
            var dx = Math.abs(p[i].x - p[j].x),
                dy = Math.abs(p[i].y - p[j].y);
            if ((i == j - 4) || (((i != 3 && j != 6) || p[i].x < p[j].x) && ((i != 2 && j != 7) || p[i].x > p[j].x) && ((i != 0 && j != 5) || p[i].y > p[j].y) && ((i != 1 && j != 4) || p[i].y < p[j].y))) {
                dis.push(dx + dy);
                d[dis[dis.length - 1]] = [i, j];
            }
        }
    }
    if (dis.length == 0) {
        var res = [0, 4];
    } else {
        res = d[Math.min.apply(Math, dis)];
    }
    var x1 = p[res[0]].x,
        y1 = p[res[0]].y,
        x4 = p[res[1]].x,
        y4 = p[res[1]].y;
    dx = Math.max(Math.abs(x1 - x4) / 2, 10);
    dy = Math.max(Math.abs(y1 - y4) / 2, 10);
    var x2 = [x1, x1, x1 - dx, x1 + dx][res[0]].toFixed(3),
        y2 = [y1 - dy, y1 + dy, y1, y1][res[0]].toFixed(3),
        x3 = [0, 0, 0, 0, x4, x4, x4 - dx, x4 + dx][res[1]].toFixed(3),
        y3 = [0, 0, 0, 0, y1 + dy, y1 - dy, y4, y4][res[1]].toFixed(3);
    var path = ["M", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");
    if (line && line.line) {
        line.bg && line.bg.attr({path: path});
        line.line.attr({path: path});
    } else {
        var color = typeof line == "string" ? line : "#000";
        return {
            bg: bg && bg.split && this.path(path).attr({stroke: bg.split("|")[0], fill: "none", "stroke-width": bg.split("|")[1] || 3}),
            line: this.path(path).attr({stroke: color, fill: "none"}),
            from: obj1,
            to: obj2
        };
    }
};

      
      
var el;
// window.onload = function () {
var color, i, ii, tempS, tempT,
// Function to drag shapes 
dragger = function () {
  // Original coords for main element
  this.ox = this.type == "ellipse" ? this.attr("cx") : this.attr("x");
  this.oy = this.type == "ellipse" ? this.attr("cy") : this.attr("y");
  if (this.type != "text") this.animate({"fill-opacity": .2}, 500);  
     // Original coords for pair element
    this.pair.ox = this.pair.type == "ellipse" ? this.pair.attr("cx") : this.pair.attr("x");
    this.pair.oy = this.pair.type == "ellipse" ? this.pair.attr("cy") : this.pair.attr("y");
  if (this.pair.type != "text") this.pair.animate({"fill-opacity": .2}, 500);            
        },
    
    
 move = function (dx, dy) {
                // Move main element
  var att = this.type == "ellipse" ? {cx: this.ox + dx, cy: this.oy + dy} : 
                                               {x: this.ox + dx, y: this.oy + dy};
            this.attr(att);
            
                // Move paired element
   att = this.pair.type == "ellipse" ? {cx: this.pair.ox + dx, cy: this.pair.oy + dy} : 
                                               {x: this.pair.ox + dx, y: this.pair.oy + dy};
            this.pair.attr(att);            
            
                // Move connections
            // for (i = connections.length; i--;) {
            //     r.connection(connections[i]);
            // }
            // r.safari();
        },
up = function () {
                // Fade original element on mouse up
   if (this.type != "text") this.animate({"fill-opacity": 0}, 500);
            
                // Fade paired element on mouse up
  if (this.pair.type != "text") this.pair.animate({"fill-opacity": 0}, 500);            
        },

/* End the additional raphael.js code*/

/* Start making the user input into raphael elements*/
        
paper  = Raphael("holder", 1000, 1000)

let texts = []
let shapes = [];
let makerHolder = [];
      //set better way to randomize or intentioanlly set shape of positions
positionX = 150;
positionY = 250;
for (var i = 0; i < app4.poem.length; i++){
    let textGrabber = paper.text(positionX, positionY, app4.poem[i].stage)
    let shapeGrabber = paper.ellipse(positionX, positionY, 75, 75)
     let maker = paper.text(positionX+150, positionY+20, app4.poem[i].value)
    let shapeGrabberTwo = paper.ellipse(positionX+150, positionY+20, 75, 75)
     
    texts.push(textGrabber)
    shapes.push(shapeGrabber)
    shapes.push(shapeGrabberTwo)
  
    texts.push(maker)
  
    positionX += 75
    positionY += 75
 
      }


     // for(var i = 0; i < 5; i+=1) {
          for (i = 0, ii = texts.length; i < ii; i++) {
        color = Raphael.getColor();
tempS = shapes[i].attr({fill: color, stroke: "#E1498D", "fill-opacity": 1, "stroke-width": 2, cursor: "move"});
        tempT = texts[i].attr({fill:"#FCF7F7", "font-family":'Alegreya Sans SC', "font-size": 25, cursor: "move"});
              


        shapes[0].attr({stroke: "#E1498D", fill: "#E1498D"});
        shapes[1].attr({stroke: "#3287E3", fill: "#3287E3"});
        shapes[2].attr({stroke: "#D60011", fill: "#D60011"});
        shapes[3].attr({stroke: "#17B594", fill: "#17B594"});

   shapes[i].drag(move, dragger, up);
   shapes[i].node.onclick = app4.showLines(paper);
        texts[i].drag(move, dragger, up);
        texts[i].node.onclick = app4.showLines(paper);

        tempS.node.onclick = app4.showLines(paper)
        tempT.node.onclick = app4.showLines(paper)
        
        // Associate the elements
        tempS.pair = tempT;
        tempT.pair = tempS;
    }
 

  }, 


  showLines: function(paper){


  }
}
})