<!doctype HTML>
<html>
<head>
<title>Universal messenger</title>
<style>
#banselectlist,#chanselectlist,#message,.useracts,.chanacts,#button_join,#button_create,#button_privmsg,#button_register,#button_newpass,#button_submit,#button_cancel,#dialog_input,.chanown
{
  background-color:black;
  color:lightgrey;
}
#messageinput_div
{
  position:absolute;
  bottom:2em;
  height:2em;
  left:140px;
  right:140px;
}
.messageinput
{
  position:relative;
  width:100%;
  font-family:monospace;
}
.rightscroll
{
  position:absolute;
  overflow-y:scroll;
}
.buttons
{
  position:absolute;
  bottom:0px;
  height:2em;
}
#chanselection,#namelist
{
  position:absolute;
  top:0px;
  width:100%;
  bottom:0px;
}
.topic
{
  position:absolute;
  font-weight:bold;
  background-color:lightgrey;
  color:black;
}
option
{
  font-family:monospace;
}
#banselectlist
{
  width:100%;
  height:50%;
}
#chanselectlist
{
  width:100%;
  height:80%;
}
.channel_select_unselected,.user_select_unselected
{
  padding-left:1vw;
  color:black;
  background_color:darkgrey;
}
.user_select_selected,.channel_select_selected,.channel_select_unselected:hover,.user_select_unselected:hover
{
  padding-left:1vw;
  background-color:lightgrey;
  cursor:pointer;
  color:black;
}
.channel_select_group
{
  font-weight:bold;
}
body
{
  background-color:black;
  color:white;
}
a
{
  color:white;
}
a:hover
{
  color:blue;
}
#received_msgs
{
  color:lightgrey;
}
#button_voicecall
{
  position:absolute;
  bottom:2em;
}
</style>
  <script src = "ws.js"></script>
</head>
<body onload = "initialize()">
  <font face = "monospace">

  <div class = "rightscroll" style = "top:0px;left:0px;width:140px;bottom:4em;background-color:darkgrey;" id="chanlist">
    <div class = "channel_select_unselected" onclick = "selectchannel(this);" id = "chanselect_server">Server</div>
    <div class = "channel_select_unselected" onclick = "selectchannel(this);" id = "chanselect_chanlist">Channel list</div>
    <div class = "channel_select_group">
Channels
    </div>
  </div>

  <div class = "topic" style = "top:0px;left:160px;right:160px;white_space:pre;" id = "topic">
  </div>

  <div class = "rightscroll" style="top:2vw;left:160px;right:160px;bottom:6em;white-space:pre-wrap;" id="received_msgs">
  </div>

  <div class = "rightscroll" style="top:0px;right:0px;width:140px;bottom:4em;white-space:nowrap;background-color:darkgrey;" id="userlist">
  </div>

<!--  <input type = "button" value = "Voice call" id = "button_voicecall" onclick = "voice_call();" class = "chanacts">  -->
  <input type = "button" value = "Voice call" id = "button_voicecall" onclick = "alert('Not implemented, because Firefox doesn`t support AudioEncoder and AudioRecorder yet... :(');" class = "chanacts">
  <div id = "messageinput_div">
  <input type="text" placeholder="Write something..." class="messageinput" id="message" maxlength="350">
  </div>

  <div class = "buttons">
  <input type = "button" value = "Leave channel" id = "button_part" onclick = "leave_channel();" class = "chanacts">
  <input type = "button" value = "Change topic" id = "button_topic" onclick = "set_topic();" class = "chanacts">
  <input type = "button" value = "Channel modes" id = "button_chanmodes" onclick = "show_chanmodes();" class = "chanacts">
  <input type = "file" id = "file_input" class = "chanacts">
  <input type = "button" value = "<-- Upload a file" id = "button_upload" onclick = "upload_file();" class = "chanacts">

  <input type = "button" value = "Private message..." id = "button_privmsg" onclick = "new_privmsg();">

  <input type = "button" value = "Kick from channel" id = "button_kick" onclick = "kick_user();" class = "useracts">
  <input type = "button" value = "Ban from channel" id = "button_ban" onclick = "ban_user();" class = "useracts">
  <input type = "button" value = "Op/deop" id = "button_op" onclick = "op_user();" class = "useracts">
  <input type = "button" value = "Voice" id = "button_voice" onclick = "voice_user();" class = "useracts">
  </div>
</body>
</html>
