page('/', function(){
  $('#landing-page').removeClass('hidden');
  $('#chat-page').addClass('hidden');
  $('#for-geeks-button').on('click', function(){
    $('#for-geeks').removeClass('closed');
  });
  setupLandingPage();
});

page('/:chatId', function(ctx){
  $('#chat-page').removeClass('hidden');
  $('#landing-page').addClass('hidden');
  var chatId = ctx.params.chatId;
  startChat(chatId);
});

page.start();

function setupLandingPage(){
  $('#new-chat-button').on('click', function(){
    var newChatId = uuid.v4();
    page.show('/' + newChatId);
  });
}


function startChat(roomId){

  // DOM refs
  var $chatPage = $('#chat-page'),
      $chatSettings = $('#chat-settings'),
      $chatInfoMessage = $('#chat-info-box'),
      $localVideo = $('#local-video'),
      $remoteVideo = $('#remote-video'),
      $messageInputContainer = $('#message-input'),
      $messageInput = $messageInputContainer.find('input'),
      $messages = $('#messages'),
      $messagesList = $messages.find('ul'),
      $inviteLink = $('#invite-link a');

  var inviteLink = "mailto:?subject=Let's chat together";
  inviteLink += '&body=Join me on '+ window.location.origin + '/' + roomId;
  $inviteLink.attr('href', inviteLink);
  // reference to the pair.
  var pair = null;


  $('i.settings-hide').on('click', function(){
    $chatSettings.removeClass('opened').addClass('closed');
  });

  $('i.settings-show').on('click', function(){
    $chatSettings.removeClass('closed').addClass('opened');
  });

  // make messages draggable
  $messages.drags({handle: 'ul'});

  var newInfoMessage = function(msg){
    $chatInfoMessage.html(msg);
    $chatPage.addClass('no-chat');
  };


  var renderMessage = function(message, mine){
    var html = '<li ';
    if(mine){
      html += 'class="mine">';
    }else{
      html += 'class="not-mine">';
    }
    html += message;
    html += '</li>';
    $messagesList.append(html);
    var $allMessages = $('#messages ul li');
    var scrollSize = $allMessages.innerHeight() * $allMessages.length;
    $messagesList.animate({scrollTop: scrollSize}, 300);
  };


  var setupChatPage = function(pair){
    var dc = pair.getDataChannel('messagechannel');
//    dc.onmessage = renderNewMessage;
//    dc.onopen = function () {
//      console.log('datachannel opened');
//    };
    dc.onerror = function (error) {
      console.log("Data Channel Error:", error);
    };

    dc.onmessage = function (event) {
      console.log("Got Data Channel Message:", event.data);
    };

    dc.onopen = function () {
      dc.send("Hello World!");
    };

    dc.onclose = function () {
      console.log("The Data Channel is Closed");
    };
    $chatPage.removeClass('no-chat').addClass('remote-video-started');
    $messageInput.on('keydown', function(evt) {
      if(evt.keyCode === 13) {
        var newMessage = $messageInput.val(),
            messageStr = JSON.stringify({ time: Date.now(), msg: newMessage});
        renderMessage(newMessage, true);
        if(dc.readyState === 'open') {
          console.log('datachannel is open');
          dc.send(messageStr);
        }
        $messageInput.val('');
      }
    });
  };


  var unsetupChatPage = function(){
    $chatPage.addClass('no-chat').removeClass('remote-video-started');
    $messageInput.off('keydown');
  };
  var renderNewMessage = function(evt){
    console.log('received new message', evt);
    var messageObj = JSON.parse(evt.data);
    renderMessage(messageObj.msg, Date.now(), false);
  };

  // Connect to GoInstant
  window.webrtc = new SimpleWebRTC({
    // the id/element dom element that will hold "our" video
    localVideoEl: 'local-video',
    // the id/element dom element that will hold remote videos
    remoteVideosEl: 'remote-video',
    // immediately ask for camera access
    autoRequestMedia: true,
    media: {
        video: true,
        audio: false
    },
  });


  webrtc.on('readyToCall', function() {
    console.log('ready to call');
    webrtc.createRoom(roomId, function (err, name) {
      if (err) {
        // join room
        webrtc.joinRoom(roomId);
      } else {
        console.log('room was created', err, name);
      }
    });
  });

  webrtc.on('videoAdded', function(video, peer) {
    console.log('peer added', peer);
    // assign peer to only possible pair.
    if(!pair){
      pair = peer;
      setupChatPage(pair);
    }
  });

  webrtc.on('videoRemoved', function(video, peer) {
    if(peer){
      pair = null;
      unsetupChatPage();
      newInfoMessage('Seems like you are alone now...');
    }
  });
}

@@ -2541,30 +2541,119 @@
     
-dc.send(%22Hello World!%22
+ console.log(%22The Data Channel is Opened%22);%0A      dc.send(JSON.stringify(%7B time: Date.now(), msg: 'connected'%7D)
 );%0A 

add better logs