function $(x) {
  return document.getElementById(x);
}

var email = '',
api_key = '';

function load() {
  chrome.storage.sync.get(["b_email","b_api_key"],function(date){
    $('email').value = (date.b_email ? date.b_email : '');
    $('api_key').value = (date.b_api_key ? date.b_api_key : 'SNGrQsRGuIbIEfraKJK0');
  });
  console.log('body loaded.');
}

function save() {
  chrome.storage.sync.set({"b_email": $('email').value, "b_api_key": $('api_key').value}, function() {
    console.log('saved.');
  });
}

function notify(text) {
  if(window.webkitNotifications) {
    if(window.webkitNotifications.checkPermission() > 0) {
      RequestPermission(notify);
    } else {
      var notification = webkitNotifications.createNotification(
        './48.png',
        'Sended',
        text
      );
      notification.ondisplay = function() {
        setTimeout('notification.cancel()', 5000);
      };
      notification.show();
    }
  }
}

function RequestPermission(callback) {
  window.webkitNotifications.requestPermission(callback);
}

function boxcar(sendmessage) {
  console.log('hah');
  var message = (sendmessage ? sendmessage : document.getElementById('message').value);

  var req = new XMLHttpRequest();
  req.onreadystatechange = function() {
    // TODO: do sth here based on failure/success.
    if (req.readyState == 4){
      // 4 = "loaded"
      if (req.status == 200) {
        console.log('Send it.');
        // notify(message).show();
        // background 不能触发 show() !?
      }
      else if(req.status == 400){
        console.log('No application/event defined');
      }
      else if(req.status == 401){
        console.log('Invalid username/password');
      }
    }
  };
  chrome.storage.sync.get(["b_email","b_api_key"], function(date){
    // email= (date.b_email ? date.b_email : chrome.tabs.create({url: "options.html#email"}));
    // api_key = (date.b_api_key ? date.b_api_key : chrome.tabs.create({url: "options.html#email"}));
    email= (date.b_email ? date.b_email : window.open({url: "options.html#email"}));
    api_key = (date.b_api_key ? date.b_api_key : window.open({url: "options.html#email"}));
    
    var params = 'email=' + email + '&notification[from_screen_name]=Chrome&notification[message]=' + message;
    req.open('POST', 'http://boxcar.io/devices/providers/' + api_key + '/notifications?' + params, true);
    req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    req.send(params);
  });
  // $('console').innerHTML = 'send it!';
}

chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
  if(request.greeting == "hello") {
    boxcar(request.text);
    console.log(request.text);
  }
});

@@ -1073,30 +1073,8 @@
 ) %7B%0A
-  console.log('hah');%0A
   va
@@ -1161,526 +1161,77 @@
 e);%0A
-%0A
   
-var req = new XMLHttpRequest();%0A  req.onreadystatechange = function() %7B%0A    // TODO: do sth here based on failure/success.%0A    if (req.readyState == 4)%7B%0A      // 4 = %22loaded%22%0A      if (req.status == 200) %7B%0A        console.log('Send it.');%0A        // notify(message).show();%0A        // background %E4%B8%8D%E8%83%BD%E8%A7%A6%E5%8F%91 show() !?%0A      %7D%0A      else if(req.status == 400)%7B%0A        console.log('No application/event defined');%0A      %7D%0A      else if(req.status == 401)%7B%0A        console.log('Invalid username/password');%0A      %7D%0A    %7D%0A  %7D
+console.log(%22boxcar:%22 + message);%0A%0A  var req = new XMLHttpRequest()
 ;%0A  
@@ -1303,96 +1303,168 @@
     
-//
+var
  email
-= (date.b_email ? date.b_email : chrome.tabs.create(%7Burl: %22options.html#email%22%7D)
+_page = chrome.extension.getURL('options.html#email');%0A    var api_key_page = chrome.extension.getURL('options.html#email');%0A    console.log(email_page
 );%0A 
@@ -1469,24 +1469,21 @@
 %0A    // 
-api_key 
+email
 = (date.
@@ -1476,39 +1476,37 @@
  email= (date.b_
-api_key
+email
  ? date.b_api_ke
@@ -1499,23 +1499,21 @@
  date.b_
-api_key
+email
  : chrom
@@ -1532,36 +1532,20 @@
 e(%7Burl: 
-%22options.html#email%22
+page
 %7D));%0A   
@@ -1599,35 +1599,27 @@
 pen(
-%7Burl: %22options.html#email%22%7D
+email_page, %22popup%22
 ));%0A
@@ -1629,17 +1629,16 @@
  api_key
- 
 = (date.
@@ -1682,36 +1682,56 @@
 pen(
-%7Burl:
+api_key_page,
  %22
+p
 op
-tions.html#email%22%7D)
+up%22));%0A    console.log(api_key
 );%0A 
@@ -1935,19 +1935,9 @@
 ions
-?' + params
+'
 , tr
@@ -2016,24 +2016,561 @@
 lencoded');%0A
+    req.onreadystatechange = function() %7B%0A      // TODO: do sth here based on failure/success.%0A      if (req.readyState == 4)%7B%0A        // 4 = %22loaded%22%0A        if (req.status == 200) %7B%0A          console.log('Send it.');%0A          // notify(message).show();%0A          // background %E4%B8%8D%E8%83%BD%E8%A7%A6%E5%8F%91 show() !?%0A        %7D%0A        // else if(req.status == 400)%7B%0A        //   console.log('No application/event defined');%0A        // %7D%0A        // else if(req.status == 401)%7B%0A        //   console.log('Invalid username/password');%0A        // %7D%0A      %7D%0A    %7D;%0A
     req.send

change chrome.tabs.create and XMLHttpRequest method