console.log('Yooooooooooo, I am front.js, I am pretty!! ')

document.onmouseup = function() {
  content = window.getSelection();
  // [!!] click submit button should not do anything.
  if (content.rangeCount > 0) {
    var range = content.getRangeAt(0);
    if (range.toString()) {
      console.log(event.clientX);
      console.log(event.clientY);
      createDivs(range);
      $('#swifty-light-box').css('top', window.pageYOffset + event.clientY + 10);
      $('#swifty-light-box').css('left', window.pageXOffset + event.clientX) + 10;
    }
  }
};

function createDivs(content) {
  var text = document.createTextNode('Swifttttttttttty');
  var input = document.createElement('input');
  input.type = 'text';
  // input.value = 'add some annotation...';
  var submit = document.createElement('div');
  submit.id = 'submit';
  var submitText = document.createTextNode('收藏！');
  submit.appendChild(submitText);

  var div = document.createElement('div');
  div.appendChild(text);
  div.appendChild(input);
  div.appendChild(submit);
  div.id = 'swifty-light-box';
  
  if (document.body.firstChild){
    document.body.insertBefore(div, document.body.firstChild);
  } else {
    document.body.appendChild(div);
  }
  
  submitDiv(div,content);
}
function submitDiv(div,content){
  $('#submit').on('click', function(){
    console.log('clickkkkkkkkkkkkkkkkkkkk')
    var url = window.location.toString();
    var title = $(document).attr("title");
    var annotation = $('#swifty-light-box input').text();
    getEmail();
  })
}

getEmail = function(){
  accessToken = "";
  var port = chrome.runtime.connect({name: "knockknock"});
  port.postMessage({joke: "Knock knock"});
  port.onMessage.addListener(function(msg) {
    console.log('I am front.js, I am listeing to msg~~~~');
    console.log('give me accessToken!!!: ', msg.accessToken);
    accessToken = msg.accessToken;
    $.getJSON('https://graph.facebook.com/me?'+accessToken)
      .success(function(data){
        var url = window.location.toString();
        var title = $(document).attr("title");
        var annotation = $('#swifty-light-box input').val();
        console.log($('#swifty-light-box input'));
        console.log($('#swifty-light-box input').val());
        console.log('email:',data.email);
        console.log('url:',url);
        console.log('title:',title);
        console.log('annotation:',annotation);
        $.ajax({
          url: "http://swifty.dev/api/quotes/",
          type: 'post',
          data: {
            email: data.email,
            content: content,
            title: title,
            url: url,
            annotation: annotation
          },
          dataType: 'json',
          success: function(data) {
            console.log("success!! ",data);
          },
          error: function(data) {
            console.log("fail.. QQ ",data);
          }
        });
        var d = document.getElementById('swifty-light-box');
        $('body').removeChild(d);
        return data.email;
    });
  });
}
@@ -51,16 +51,465 @@
 tty!! ')
+%0AboxVanish = true;%0AlastX = 0;%0AlastY = 0;%0A%0A// $('#swifty-light-box').on('click', function()%7B%0A//   boxVanish = false;%0A// %7D)%0A%0A// $('body').on('click', function()%7B%0A  // console.log(this);%0A  // if ( ($(this).attr(%22id%22) != 'swifty-light-box') && ($(this).attr(%22id%22) != 'annotation') && ($(this).attr(%22id%22) != 'submit'))%0A  //   $('#swifty-light-box').remove();%0A  // console.log('boddddy');%0A  // $('#swifty-light-box').remove();%0A  // boxVanish = true;%0A// %7D)
 %0A%0Adocume
@@ -625,16 +625,72 @@
 ything.%0A
+  // if (content.rangeCount %3E 0 && boxVanish == true) %7B%0A
   if (co
@@ -883,41 +883,70 @@
     
-$('#swifty-light-box').css('top',
+thisY = window.pageYOffset + event.clientY + 10;%0A      thisX =
  win
@@ -945,33 +945,33 @@
 sX = window.page
-Y
+X
 Offset + event.c
@@ -979,15 +979,14 @@
 ient
-Y
+X
  + 10
-)
 ;%0A  
@@ -1021,56 +1021,210 @@
 ss('
-left', window.pageXOffset + event.clientX) + 10;
+top', thisY);%0A      $('#swifty-light-box').css('left', thisX);%0A      // if( submitBtn == false && lastX != thisX && lastY != thisY)%7B%0A      //   lastX = thisX;%0A      //   lastY = thisY;%0A      %0A      // %7D
 %0A   
@@ -1393,16 +1393,43 @@
 'text';%0A
+  input.id = 'annotation';%0A
   // inp
@@ -2226,16 +2226,23 @@
 etEmail(
+content
 );%0A  %7D)%0A
@@ -2264,18 +2264,57 @@
 unction(
-)%7B
+content)%7B%0A  content = content.toString();
 %0A  acces
@@ -3633,130 +3633,8 @@
 %7D);%0A
-        var d = document.getElementById('swifty-light-box');%0A        $('body').removeChild(d);%0A        return data.email;%0A
     

delete box, not finished.