.chat
  .messages
    .message
      .bot
        Type something with "gif me funny cat" to see what happens ;)
  .input
    %form#chat{action: "#", method: "post"}
      %input.text{contenteditable: true, placeholder: "Type your message here..."}

$bg: "http://cdn9.staztic.com/app/a/2063/2063481/whatsapp-wallpaper-pack-hd-600519-0-s-156x156.jpg";

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

body {
  background-color: #e74c3c;
  font-family: Arial;
}

.chat {
  width: 300px;
  height: 500px;
  background-image: url($bg);
  background-size: cover;
  background-position: center center;
  position: absolute;
  border: 5px solid #000;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 20px #000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  box-sizing: border-box;
  .messages {
    position: absolute;
    left: 0;
    bottom: 60px;
    height: auto;
    width: 100%;
    .message {
      padding: 20px 10px;
      width: 100%;
      box-sizing: border-box;
      .you, .bot {
        border-radius: 10px;
        padding: 10px;
        width: 75%;
        position: relative;
        img {
          width: 100%;
          border-radius: 10px;
          display: block;
        }
        &:before {
          padding: 5px;
          border-radius: 5px;
          position: absolute;
          top: -15px;
          font-weight: bold;
          color: #fff;
          font-size: 12px;
        }
      }
      .you {
        background: #2ecc71;
        float: right;
        &:before {
          content: "You:";
          background-color: #2ecc71;
          right: 10px;
        }
      }
      .bot {
        background-color: #3498db;
        float: left;
        &:before {
          content: "Bot:";
          background-color: #3498db;
          left: 10px;
        }
      }
      &:after {
        content: "";
        clear: both;
        display: table;
      }
    }
  }
  .input {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 60px;
    width: 100%;
    background: #ecf0f1;
    .text {
      background-color: #fff;
      border-radius: 20px;
      height: 40px;
      position: absolute;
      top: 10px;
      left: 10px;
      width: 270px;
      box-shadow: inset 0 0 5px #aaa;
      line-height: 40px;
      padding: 0 20px;
      box-sizing: border-box;
    }
  }
}

$(document).ready ->
  app.init()
  
app =
  api_key: "dc6zaTOxFJmzC" # Public API key from giphy.com
  
  init: ->
    @bind_events()
    
  bind_events: ->
    $(document).on "submit", "#chat", (e) ->
      app.send_message()
      e.preventDefault()
      
  send_message: ->
    msg = $(".text").val().trim()
    if msg
      $(".text").val("")
      $(".messages").append("<div class='message'><div class='you'>"+msg+"</div></div>");
      @check(msg)
    
  check: (msg) ->
    if msg.substring(0, 6) is "gif me"
      keyword = msg.substring(7)
      keyword = keyword.replace(/[ ]/g, "+")
      @get_gif keyword
    else
      @bot_post "Wrong syntax ''gif me keyword''."
      
  bot_post: (msg) ->
    $(".messages").append("<div class='message'><div class='bot'>"+msg+"</div></div>");
    
  get_gif: (keyword) ->
    $.get "http://api.giphy.com/v1/gifs/search?q="+keyword+"&api_key="+@api_key, (data) ->
      if data.data.length is 0
        app.bot_post "Sorry I can't find any gif for that :("
      else
        index = Math.floor(Math.random() * ((data.data.length - 1) - 0 + 1) + 0)
        app.bot_post "<img src='"+data.data[index].images.fixed_height.url+"' alt='' />"