<?php
require_once '/var/www/csp/html/inc/session.php';
require_once '/var/www/csp/html/inc/attribute_stack.php';
require_once '/var/www/csp/html/inc/connection.php';

SessionContext::restore_from_cookie();

if (SessionContext::$user_id === null) {
  header("Location: /login.php");
  exit;
}


?><?php
require_once '/var/www/csp/html/inc/message_functions.php';

function gather_questions() {
  $enumerator = new MessageEnumeratorExpertPending();
  $enumerator->initialise();

  AttributeStack::$dictionary['pending_message_enumerator'] = $enumerator;
}


  if (SessionContext::$role == "expert") {
    gather_questions();
  } else if (SessionContext::$role == "admin") {

  } else {
//Create the department->expert map
    attributestack::$dictionary['js_department_expert'] = build_expert_department_option_map();
    attributestack::$dictionary['js_department_list'] = build_department_options();
  }

?>
<?php

//The request section
if (isset($_GET['department'])) {
  AttributeStack::$dictionary['department']= $_GET['department'];
} else {
  AttributeStack::$dictionary['department'] = null;
}


?>
<?php
//The query section
  $conn = get_database_connection();

  $expert_data = array();
  $department_experts = array();
  $expert_list = array();
  $departments_list = array();

  AttributeStack::push_frame(array('user_id', 'user_name', 'biography',
      'image_path'));
  
  
  $sqls = 'SELECT `user_id`,`user_name`,`biography`,`image_path`
FROM application_user
WHERE `application_user`.`role`="board"<?ORDER>';
$order_delimiter = '
ORDER BY ';
$order_string = '';
if (AttributeStack::get('sort_direction') < 0) {
  $order_string .= $order_delimiter . AttributeStack::$dictionary['sort_column'] . ' DESC';
  $order_delimiter = ',';
} else if (AttributeStack::get('sort_direction') > 0) {
  $order_string .= $order_delimiter . AttributeStack::$dictionary['sort_column'] . ' ASC';
  $order_delimiter = ',';
}
$sqls = preg_replace('|<\?ORDER>|', $order_string, $sqls);
$stmt = $conn->stmt_init();
if (!$stmt->prepare($sqls)) {
  throw new Exception('Failed to prepare sql statement sql: ' . $sqls . ' Error: ' . $conn->error);
}

  $stmt->bind_result(AttributeStack::$dictionary['user_id'],AttributeStack::$dictionary['user_name'],AttributeStack::$dictionary['biography'],AttributeStack::$dictionary['image_path']);

  if (!$stmt->execute()) {
  throw new Exception('Could not execute statement: ' . $sqls . ' Error: ' . $stmt->error);
}

  while($stmt->fetch()) {
    //Need a flag to show or hide experts?

    $user_id = AttributeStack::get('user_id', null);
    if (empty($user_id)) {
      continue;
    }
    $user_name = AttributeStack::get('user_name', '');
    $biography = AttributeStack::get('biography', '');
    $image_path = AttributeStack::get('image_path', '');

    $expert_data[$user_id] = array(
      'user_id' => $user_id,
      'user_name' => $user_name,
      'biography' => $biography,
      'image_path' => $image_path);

    $expert_list[] = $user_id;

  }
  AttributeStack::pop_frame();

  $stmt->close();


  class ExpertEnumerator {
    public function __construct($expert_data, $expert_list) {
      usort($expert_list, function($a, $b) use (&$expert_data) {
        return strcasecmp(
          $expert_data[$a]['user_name'],
          $expert_data[$b]['user_name']);});
      
      $this->expert_data = $expert_data;
      $this->expert_list = $expert_list;
    }

    public function begin() {
      $this->index = 0;

      AttributeStack::push_frame(array('USER_NAME', 'BIOGRAPHY', 'IMAGE_PATH', 'DEPARTMENTS'));
    }

    public function next() {
      if ($this->index >= count($this->expert_list)) {
        return false;
      }

      $user_id =  $this->expert_list[$this->index];
      $expert = $this->expert_data[$user_id];

      $user_name = $expert['user_name'];
      $biography = $expert['biography'];
      $image_path = $expert['image_path'];
      if (!empty($image_path)) {
        $image_path = '/img/experts/' . $image_path;
      }
      $department_list = $expert['departments'];
      natcasesort($department_list);

      error_log('User: ' . $user_id . '; departments: ' . json_encode($department_list));

      $departments = implode(', ', $department_list);

      error_log('User: ' . $user_id . '; departments: ' . $departments);

      AttributeStack::$dictionary['EXPERT_ID'] = $user_id;
      AttributeStack::$dictionary['USER_NAME'] = $user_name;
      AttributeStack::$dictionary['BIOGRAPHY'] = $biography;
      AttributeStack::$dictionary['IMAGE_PATH'] = $image_path;

      $this->index += 1;
      return true;
    }

    public function deinitialise() {
      AttributeStack::pop_frame();
    }
  }


  AttributeStack::$dictionary['expert_enumerator'] =
    new ExpertEnumerator($expert_data, $expert_list);

?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Advisory Board</title>
<link rel="stylesheet" type="text/css" href="/style.css"><style type="text/css">
/* Pullout Dialog */
.r_pullout {
  box-sizing: border-box;
  position: absolute;
  top: 13px;
  width:406px;
  right:-406px;
  min-height:234px;
  border-radius: 0 22px 22px 22px;
  box-shadow: -10px 10px 10px #0000001A;

  background: #fff;
  color: #014d41;
  transition: all 0.5s ease-out;
}

.r_pullout_inner {
  padding: 15px;
}

.r_pullout_inner h1 {
  font: 24px 'futura', sans-serif;
}


.r_pullout_form {
  background-color: #f3f3f3;
  padding: 19px 28px 33px 28px;
  border: 0;
  border-radius: 0 0 22px 22px;
}

.r_pullout_form ::placeholder {
  color: #999;
}

.r_pullout_dropdown {
  box-sizing: border-box;
  background: none;
  border: 1px solid #8E8B8B;
  border-radius: 16px;
  height: 44px;
  width: 253px;
  display: flex;
  align-items: center;
  padding: 0 18px;
}

.r_pullout_department {
  margin-bottom: 17px;
}

.r_pullout_experts {
  margin-bottom: 15px;
}

.r_pullout_dropdown select {
  background: none;
  font: 20px 'futura-LT', sans-serif;
  color: #999;
  flex-grow: 1;
}

.r_pullout_cc_balt {
  margin-bottom: 19px;
  color: #999;
  font: 15px 'futura-light', sans-serif;
}

.r_pullout_subject {
  padding: 0 16px 2px 16px;
  margin: 0 10px 17px 10px;
  border: 0;
  border-bottom: 1px solid #707070;
}

.r_pullout_subject input[type=text] {
  background: none;
  font: 16px 'futura-light', sans-serif;
  color: #999;
}

.r_pullout_compose {
  background: #fff;
  border: 0;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  height:293px;
  box-sizing: border-box;
}

.r_pullout_compose textarea {
  margin: 16px;
  flex-grow: 1;
  font: 18px 'futura-light', sans-serif;
  color: #999;
}

.r_pullout_attachment {
  display: flex;
}

.r_pullout_attachment a {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 0 8px 8px;
  padding: 0 10px;
  height: 20px;
  background: #f3f3f3;
  border-radius: 10px;
  flex-grow: 1;
  font: 14px/20px 'futura-light';
  color: #999;
}

.r_pullout_attachment a:link, .r_pullout_attachment a:visited, .r_pullout_attachment a:hover, .r_pullout_attachment a:active {
  color: #999;
}


.r_pullout_attachment img {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 8px 8px 8px;
}

.r_pullout_icons {
  margin: 0 8px 8px 8px;
  height: 39px;
  display: flex;
  padding: 0 10px;
  align-items: center;
  background: #f3f3f3;
  border-radius: 16px;
}

.r_pullout_icons > img, .r_pullout_icons > label {
  margin: 0 8px 0 0;
}

.r_pullout_send {
  margin: 0 0 0 auto;
  background: none;
  border: 0;
  cursor: pointer;
}


/* Response Specific */

.r_pullout_response_header {
  padding: 0 28px;
}

.r_pullout_subject_line {
  display: flex;
  justify-content: space-between;
  font: 24px 'futura', sans-serif;
}

.r_pullout_question_number {
  color: #f59e18;
  font: 14px 'futura', sans-serif;
  text-align: center;
}

.r_pullout_question_body {
  background: #fff;
  border: 0;
  border-radius: 22px;
  padding: 16px;
  margin-bottom: 24px;
  color: #999;
  font: 18px 'futura-light', sans-serif;
}

/* Pullout tab */
.r_pullout_tab {
  box-sizing: border-box;
  position: absolute;
  background: #fff;
  right: 100%;
  cursor: pointer;
  width: 56px;
  height: 234px;
  border-radius: 22px 0 0 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0 12px 0;
}

.r_pullout_tab div {
  writing-mode: vertical-lr;
  white-space: nowrap;
  font: 24px 'futura', sans-serif;
  letter-spacing: 0.0px;
}
</style>

<style type="text/css">

.image_upload_popup_hidden {
  display: none;
}

.image_upload_popup {
  position: fixed;
  width: 120vmin;
  max-width: 95%;
  max-height: 95%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 10px;
  padding: 22px;
  box-shadow: 20px 20px 20px #00000033;
}

.image_upload_background {
  box-sizing: border-box;
  padding: 23px;
  background: #f3f3f3;
  border-radius: 22px;
  margin: 41px 44px;
  display: flex;
  flex-basis: 50%;
  align-items: stretch;
  flex-wrap: wrap;
}

.image_upload_column {
  box-sizing: border-box;
  width: 50%;
  position: relative;
}

#image_upload_controls {
  display: flex;
}

#image_upload_controls img {
  display:block;
  margin-right: 4px;
  cursor: pointer;
  height: 34px;
}

#image_save_upload {
  font: 24px/38px 'futura', sans-serif;
  color: #fff;
  letter-spacing: 1.2px;
  padding: 0 33px;
  background: #FACF8C;
  border-radius: 19px;
  height: 38px;
  box-sizing: border-box;
  margin-left: auto;
  cursor: pointer;
}

#image_save_upload.upload_disabled {
  cursor: default;
  background: #FACF8C;
}

#image_save_upload.upload_enabled {
  cursor: pointer;
  background: #FAB051;
}

.image_upload_canvas_outer {
  position: relative;
  width: 100%;
  padding-bottom: 75%;
  background-color: #fff;
  margin-bottom: 16px;
}

#image_upload_canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.image_upload_canvas_zoom {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

.image_upload_canvas_add {
  cursor: crosshair;
}

.image_upload_canvas_delete {
  cursor: pointer;
}

.image_upload_close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

</style>
<style type="text/css">
#background {
  background-color: #f2f2f2;
  position: relative;
}

/* Banner */
#banner {
  overflow: hidden;
  position: relative;
  height: 260px;
  padding: 0 120px 0 120px;
  display: flex;
}

#banner h1 {
  font: 34px 'futura', sans-serif;
  margin: auto 0;
}

#banner .rounded_control {
  box-sizing: border-box;
  border: 1px solid #fff;
  border-radius: 16px;
  height: 44px;
  width: 252px;
  margin: auto 0 18px auto;
  display: flex;
  padding: 0 20px;
}

#banner .rounded_control select {
  background: none;
  border: 0;
  font: 22px 'futura-LT', sans-serif;
  flex-grow: 1;
  color: #fff;
}

#banner .rounded_control option {
  font: 20px 'futura-LT', sans-serif;
  color: #999;
}


/* Content */

#content {
  padding-top: 3px;
}

.expert_entry {
  background: #fff;
  border-radius: 20px;
  padding: 22px;
  margin: 84px 0 0 0;
  display: flex;
  box-shadow: 20px 20px 20px #00000033;
}

.expert_image {
  margin: 0 28px 0 0;
}

.expert_image img {
  border-radius: 8px;
}

.expert_info {
  display: flex;
  flex-direction: column;
}

.expert_info_header {
  display: flex;
  border-left: 2px solid;
  border-color: #67b54b;
  color: #67b54b;
  padding-left: 23px;
  margin-bottom: 24px;
}

.expert_info_name {
  font: 30px 'futura-LT', sans-serif;
}

.expert_info_title {
  font: 24px 'futura-LT', sans-serif;
}

.expert_info_departments {
  font: 16px 'futura-LT', sans-serif;
}

.expert_contact {
  margin: 0 0 0 auto;
}

.expert_biography {
  padding:30px;
  background:#f2f2f2;
  border-radius: 20px;
  font: 14px 'futura LT', sans-serif;
  flex-grow: 1;

}

</style>

<?php
  if (SessionContext::$role == "expert") {
?><script type="text/javascript">
//Compose pullout
(function(global) {
  var pullout_element = null;

  var compose_icons_element = null;
  var compose_message_send_element = null;
  var compose_message_body_element = null;

  var pending_message_left_element = null;
  var pending_message_right_element = null;
  var pending_message_subject_element = null;
  var pending_message_number_element = null;
  var pending_message_body_element = null;

  var parent_message_id = -1;

  var attachment_list = [];
  var next_attachment_id = 0;


  var pending_messages = [<?php
$enumerator_pending_message_enumerator= AttributeStack::$dictionary['pending_message_enumerator'];
$enumerator_pending_message_enumerator->begin();
$delimiter_pending_message_enumerator='';
while($enumerator_pending_message_enumerator->next()) {
  echo $delimiter_pending_message_enumerator; ?>
{ 'parent_message_id':'<?php echo AttributeStack::get('PARENT_MESSAGE_ID',''); ?>',
  'message_id':'<?php echo AttributeStack::get('MESSAGE_ID',''); ?>',
  'user_id':'<?php echo AttributeStack::get('USER_ID',''); ?>',
  'subject':'<?php echo AttributeStack::get('SUBJECT',''); ?>',
  'body':'<?php echo AttributeStack::get('BODY',''); ?>',
  'creation_date':'<?php echo AttributeStack::get('CREATION_DATE',''); ?>',
  'attachments':[<?php
$enumerator_ATTACHMENTS= AttributeStack::$dictionary['ATTACHMENTS'];
$enumerator_ATTACHMENTS->begin();
$delimiter_ATTACHMENTS='';
while($enumerator_ATTACHMENTS->next()) {
  echo $delimiter_ATTACHMENTS; ?>
{'filename':'<?php echo AttributeStack::get('FILENAME',''); ?>','path':'<?php echo AttributeStack::get('PATH',''); ?>'}
<?php
  $delimiter_ATTACHMENTS=',';
}
$enumerator_ATTACHMENTS->deinitialise();
?>
]
}
<?php
  $delimiter_pending_message_enumerator=',';
}
$enumerator_pending_message_enumerator->deinitialise();
?>
];
  var pending_index = 0;


  var show_pending_message = function(index) {
    pending_index = index;
    parent_message_id = pending_messages[pending_index]['parent_message_id'];

//Configure left and right controls
    if (pending_index == 0) {
      pending_message_left_element.src = '/img/previous arrows inactive.svg';
      pending_message_left_element.onclick = null;
    } else {
      pending_message_left_element.src = '/img/previous arrows active.svg';
      pending_message_left_element.onclick = function() {
        show_pending_message(pending_index - 1);
      }
    }

    if (pending_index == pending_messages.length - 1) {
      pending_message_right_element.src = '/img/next arrows inactive.svg';
      pending_message_right_element.onclick = null;
    } else {
      pending_message_right_element.src = '/img/next arrows active.svg';
      pending_message_right_element.onclick = function() {
        show_pending_message(pending_index + 1);
      }
    }
//Configure number
    pending_message_number_element.innerHTML = (pending_index+1).toString() + ' of ' + pending_messages.length.toString();

//Configure subject
    pending_message_subject_element.innerHTML = pending_messages[pending_index]['subject'];

//Configure body
    pending_message_body_element.innerHTML = pending_messages[pending_index]['body'];

//Clear compose
    while(attachment_list.length > 0) {
      var attachment_id = attachment_list[0].attachment_id;
      delete_attachment(attachment_id);
    }
    compose_body_element.value = '';
  }

  var delete_attachment = function(target_attachment_id) {
    for(var i in attachment_list) {
      if (attachment_list[i].attachment_id == target_attachment_id) {
        attachment_list[i].element.parentNode.removeChild(attachment_list[i].element);
        attachment_list.splice(i);
      }
    }
  }

  var temp_image_uploaded = function(filename, temp_filename) {
    var attachment_div = global.document.createElement('div');
    attachment_div.className='r_pullout_attachment';

    next_attachment_id += 1;

    var attachment_html = '';
    attachment_html+='<a target="_blank" href="/image_temp.php?image_name=' + temp_filename + '">';
    attachment_html+=filename;
    attachment_html+='</a>';

    attachment_html+='<img src="/img/times_icon_grey.svg" onclick="delete_attachment(' + next_attachment_id + ');" style="cursor:pointer">';

    attachment_div.innerHTML = attachment_html;

    compose_icons_element.insertAdjacentElement('beforebegin', attachment_div);

    attachment_list.push({'filename' : filename, 'temp_filename' : temp_filename, 'element' : attachment_div, 'attachment_id' : next_attachment_id });
  }

  function append_form_input(dest, name, value) {
    var field = document.createElement("input");
    field.type="hidden";
    field.name=name;
    field.value=value;
    dest.appendChild(field);
  }

  var reply_message = function() {
    var form = global.document.createElement('form');
    form.method='POST';
    form.action='/compose.php';
    append_form_input(form, 'action', 'reply');
    append_form_input(form, 'parent_message_id', parent_message_id);
    append_form_input(form, 'body', compose_body_element.value);

    if (attachment_list.length > 0) {
      append_form_input(form, 'attachment_list', JSON.stringify(attachment_list));
    }

    global.document.body.appendChild(form);
    form.submit();
  }


  var setup_pullout = function(pullout_element) {
    parent_element = pullout_element.parentNode;
    is_open = false;

    var img_elements = pullout_element.getElementsByTagName("IMG");


    pullout_element.onclick = function() {
      if (is_open) {
        parent_element.style.right = "-406px";
        img_elements[0].src = '/img/arrow left.svg';
      } else {
        parent_element.style.right = "0";
        img_elements[0].src = '/img/arrow right.svg';
      }

      is_open = !is_open;
    }
  }

  var prev_onload = null;
  if (global.onload) {
    prev_onload = global.onload;
  }

  global.onload = function() {
    if (prev_onload) {
      prev_onload();
    }
//Gather elements
    pullout_element = global.document.getElementById('r_pullout');
    var pullout_elements = global.document.getElementsByClassName('r_pullout_tab');

    pending_message_left_element = global.document.getElementById('r_pullout_pending_left');
    pending_message_right_element = global.document.getElementById('r_pullout_pending_right');
    pending_message_subject_element = global.document.getElementById('r_pullout_pending_subject');
    pending_message_number_element = global.document.getElementById('r_pullout_pending_number');
    pending_message_body_element = global.document.getElementById('r_pullout_pending_body');

    compose_icons_element = global.document.getElementById('r_pullout_icons');
    compose_message_send_element = global.document.getElementById('r_pullout_send');
    compose_body_element = global.document.getElementById('r_compose_body');

//setup pullout elements
    for(var i=0; i<pullout_elements.length; ++i) {

      setup_pullout(pullout_elements[i]);

      break;
    }

//Setup compose elements
    if (!('application_hooks' in global)) {
      global.application_hooks = {};
    }

    global.application_hooks.temp_image_uploaded = temp_image_uploaded;

    global.delete_attachment = delete_attachment;

    if (compose_message_send_element) {
      compose_message_send_element.onclick = function(e) {
        e.preventDefault();
        reply_message();
      }
    }

//Setup pending
    if (pending_messages.length == 0) {
        pullout_element.style.display = "none";
        return;
    }
    
    pending_index = 0; 
    show_pending_message(0);
  }
})(window);
</script>
<?php
  } else if (SessionContext::$role == "admin") {
?><?php
  } else {
?><script type="text/javascript">
//Compose pullout
(function(global) {
  var department_expert={<?php echo AttributeStack::get('js_department_expert',''); ?>};

  var pullout_element = null;

  var compose_icons_element = null;
  var compose_message_send_element = null;
  var compose_message_send_img_element = null;
  var compose_department_element = null;
  var compose_experts_element = null;
  var compose_cc_element = null;
  var compose_subject_element = null;
  var compose_body_element = null;

  var valid_message = false;

  var attachment_list = [];
  var next_attachment_id = 0;

  var setup_pullout = function(pullout_element) {
    parent_element = pullout_element.parentNode;


    is_open = false;

    var img_elements = pullout_element.getElementsByTagName("IMG");

    pullout_element.onclick = function() {
      if (is_open) {
        parent_element.style.right = "-406px";
        img_elements[0].src = '/img/arrow left.svg';
      } else {
        parent_element.style.right = "0";
        img_elements[0].src = '/img/arrow right.svg';
      }

      is_open = !is_open;
    }
  }


  var delete_attachment = function(target_attachment_id) {
    for(var i in attachment_list) {
      if (attachment_list[i].attachment_id == target_attachment_id) {
        attachment_list[i].element.parentNode.removeChild(attachment_list[i].element);
        attachment_list.splice(i);
      }
    }
  }

  var temp_image_uploaded = function(filename, temp_filename) {
    var attachment_div = global.document.createElement('div');
    attachment_div.className='r_pullout_attachment';

    next_attachment_id += 1;

    var attachment_html = '';
    attachment_html+='<a target="_blank" href="/image_temp.php?image_name=' + temp_filename + '">';
    attachment_html+=filename;
    attachment_html+='</a>';

    attachment_html+='<img src="/img/times_icon_grey.svg" onclick="delete_attachment(' + next_attachment_id + ');" style="cursor:pointer">';

    attachment_div.innerHTML = attachment_html;

    compose_icons_element.insertAdjacentElement('beforebegin', attachment_div);

    attachment_list.push({'filename' : filename, 'temp_filename' : temp_filename, 'element' : attachment_div, 'attachment_id' : next_attachment_id });
  }

  function append_form_input(dest, name, value) {
    var field = document.createElement("input");
    field.type="hidden";
    field.name=name;
    field.value=value;
    dest.appendChild(field);
  }

  var send_message = function() {
    if (!valid_message) {
      return;
    }

    var form = global.document.createElement('form');
    form.method='POST';
    form.action='/compose.php';
    append_form_input(form, 'action', 'send');
    append_form_input(form, 'department', compose_department_element.value);
    append_form_input(form, 'experts', compose_experts_element.value);
    append_form_input(form, 'cc_balt', compose_cc_element.value);
    append_form_input(form, 'subject', compose_subject_element.value);
    append_form_input(form, 'body', compose_body_element.value);

    if (attachment_list.length > 0) {
      append_form_input(form, 'attachment_list', JSON.stringify(attachment_list));
    }


    global.document.body.appendChild(form);
    form.submit();
  }

  var department_changed = function() {
    var department = compose_department_element.value;
    compose_experts_element.innerHTML = department_expert[department];

    configure_elements();
  }

  var subject_changed = function() {
    configure_elements();
  }

  var configure_elements = function() {
    var department = compose_department_element.value;
    var subject = compose_subject_element.value;

    if (department && subject) {
      if (valid_message == false) {
        compose_message_send_img_element.src = "/img/Icon feather-send-1.svg";
        compose_message_send_element.style.cursor = "pointer";

        valid_message = true;
      }

    } else {
      if (valid_message == true) {
        compose_message_send_img_element.src = "/img/Icon feather-send-inactive.svg";
        compose_message_send_element.style.cursor = "default";

        valid_message = false;
      }
    }

  }

  var prev_onload = null;
  if (global.onload) {
    prev_onload = global.onload;
  }

//Onload initialisation
  global.onload = function() {
    if (prev_onload) {
      prev_onload();
    }

//Gather elements
    pullout_element = global.document.getElementById('r_pullout');
    var pullout_elements = global.document.getElementsByClassName('r_pullout_tab');
  
    compose_icons_element = global.document.getElementById('r_pullout_icons');
    compose_department_element = global.document.getElementById('r_compose_department');
    compose_experts_element = global.document.getElementById('r_compose_experts');
    compose_cc_element = global.document.getElementById('cc_balt_team');
    compose_subject_element = global.document.getElementById('r_compose_subject');
    compose_body_element = global.document.getElementById('r_compose_body');
    compose_message_send_element = global.document.getElementById('r_pullout_send');

    var send_imgs = compose_message_send_element.getElementsByTagName('IMG');
    if (send_imgs) {
      compose_message_send_img_element = send_imgs[0];
    }

//setup pullout elements
    for(var i=0; i<pullout_elements.length; ++i) {

      setup_pullout(pullout_elements[i]);

      break;
    }

//Setup compose elements
    if (!('application_hooks' in global)) {
      global.application_hooks = {};
    }


    global.application_hooks.temp_image_uploaded = temp_image_uploaded;

    global.delete_attachment = delete_attachment;


    configure_elements();

    if (compose_message_send_element) {
      compose_message_send_element.onclick = function(e) {
        e.preventDefault();
        send_message();
      }
    }

    if (compose_department_element) {
      compose_department_element.onchange = function(e) {
        e.preventDefault();
        department_changed();
      }
    }

    if (compose_subject_element) {
      compose_subject_element.oninput = function(e) {
        e.preventDefault();
        subject_changed();
      }
    }

  }

})(window);
</script>
<?php
  }
?>

<script src="/image_upload.js"></script>
<script type="text/javascript">
(function(global) {
  var department_element = null;
  var prev_onload = null;
  if (global.onload) {
    prev_onload = global.onload;
  }

  function append_form_input(dest, name, value) {
    var field = document.createElement("input");
    field.type="hidden";
    field.name=name;
    field.value=value;
    dest.appendChild(field);
  }

  function submit_department(department) {
    if (department == 'ALL') {
      global.location.replace('/experts.php');
    } else {
      var form = global.document.createElement('form');
      form.method='GET';
      form.action='/experts.php';
      append_form_input(form, 'department', department);

      global.document.body.appendChild(form);
      form.submit();
    }
  }

  global.onload = function() {
    if (prev_onload) {
      prev_onload();
    }
    
    department_element = global.document.getElementById('department_dropdown');

    department_element.onchange = function() {
      var department = department_element.value;

      submit_department(department);
    }
  }

})(window);
</script>

</head>
<body>
<div id="page"><div>
<div id="header">
<div id="header_logo">
<a href="/dashboard.php"><img src="/img/header logo@2x.png" alt="BALT PRIME"></a>
</div>
<ul class="header_menu">
  <li><img src="/img/email icon-green.svg" style="width:30px;height:24px;">
    <ul>
      <li><a href="/messages.php"><img src="/img/Icon feather-inbox.svg" style="width:18px;height:15px">My Inbox</a></li>
      <li><a href="/compose.php"><img src="/img/Icon feather-send-1.svg" style="width:17px;height:17px">Send a question</a></li>
      <li><a href="/messages.php?recycling"><img src="/img/Icon feather-trash-1.svg" style="width:15px;height:21px">My Recycling Bin</a></li>
    </ul>
  </li>
  <li><img src="/img/Icon awesome-user-green.svg" style="width:30px;height:30px">
      <img src="/img/Icon awesome-cog-green.svg" style="width:18px;height:18px;position:absolute;right:2px;bottom:-6px">
    <ul>
      <li><a href="/profile.php"><img src="/img/Icon awesome-user-alt.svg" style="width:19px;height:19px">Personal Info</a></li>
      <li><a href="/preferences.php"><img src="/img/Icon awesome-cog.svg" style="width:21px;height:21px">Preferences</a></li>
      <li><a href="/favourites.php"><img src="/img/Icon awesome-heart.svg" style="width:20px;height:17px">My Favourites</a></li>
      <li><a href="/logout.php"><img src="/img/Icon open-account-logout-1.svg"" style="width:21px;height:18px">Log Out</a></li>
    </ul>
  </li>
  <li><img src="/img/Burger Menu.svg" style="width:27px;height:18px">
    <ul class="header_menu_square">
      <li><a href="/dashboard.php">My Dashboard</a></li>
      <li><a href="/faq.php">FAQs</a></li>
      <li><a href="/terms-conditions.php">T&Cs</a></li>
      <li><a href="/advisory-board.php">Advisory Board</a></li>
      <li><a href="/experts.php">Meet the Experts</a></li>
    </ul>
  </li>
</ul>

</div>
<div id="background">
<div id="banner">
<h1>Advisory Board</h1>
</div>
<div id="content">
<?php
$enumerator_expert_enumerator= AttributeStack::$dictionary['expert_enumerator'];
$enumerator_expert_enumerator->begin();
$delimiter_expert_enumerator='';
while($enumerator_expert_enumerator->next()) {
  echo $delimiter_expert_enumerator; ?>
<div class="expert_entry">
  <div class="expert_image"><img src='<?php echo AttributeStack::get('IMAGE_PATH',''); ?>'></div>
  <div class="expert_info">
    <div class="expert_info_header">
      <div>
      <div class="expert_info_name"><?php echo AttributeStack::get('USER_NAME',''); ?></div>
      <div class="expert_info_title">Title and Hospital</div>
      </div>
      <?php if (SessionContext::$role == "admin") {?>
<div class="expert_edit_profile">
  <a href='/edit_expert_profile.php?expert_id=<?php echo AttributeStack::get('EXPERT_ID',''); ?>'><img src='/img/expert cog icon.svg' style='margin-left:10px'></a>
</div><?php }?>
    </div>
    <div class="expert_biography"><?php echo AttributeStack::get('BIOGRAPHY',''); ?></div>
  </div>
</div>
<?php
  $delimiter_expert_enumerator='';
}
$enumerator_expert_enumerator->deinitialise();
?>

</div>
<div id="footer">
<div class="footer_div">
<a href="/contact.php">Contact Us</a><br>
<a href="/faq.php">FAQs</a><br>
<a href="/terms-conditions.php">Terms & Conditions</a><br>
&copy; Copyright 2021 Balt Corporation
</div>

</div>
<?php
  if (SessionContext::$role == "expert") {
?>
<div id="r_pullout" class="r_pullout">
  <div id="r_pullout_tab" class="r_pullout_tab">
  <div>Quick Response</div>
  <img src="/img/arrow left.svg" style="width:28px;height:28px">
  </div>
  <div class="r_pullout_inner">
  <div class="r_pullout_response_header">
  <div class="r_pullout_subject_line">
    <img id="r_pullout_pending_left" src="/img/previous arrows active.svg">
    <span id="r_pullout_pending_subject">Question subject line</span>
    <img id="r_pullout_pending_right" src="/img/next arrows active.svg">
  </div>
  <div id="r_pullout_pending_number" class="r_pullout_question_number">1 of 6</div>
  </div>
  <div class="r_pullout_form">
  <form action="/compose.php">
    <div id="r_pullout_pending_body" class="r_pullout_question_body">
Question 1 of 6 for this expert or category written here, Question 1 of 6 for this expert or category written here, Question 1 of 6 for this expert or category written here.
    </div>
    <div class="r_pullout_compose">
      <textarea id="r_compose_body" name="body" placeholder=""></textarea>
      <div id="r_pullout_icons" class="r_pullout_icons">
        <input type="file" id="attached_file_input" style="display:none">
        <label id="attached_file_label" for="attached_file_input">
          <img src="/img/Icon material-attach-file-1.svg" style="width:11px;height:23px">
        </label>
        <img src="/img/Icon material-format-list-numbered-1.svg" style="width:21px;height:17px">
        <img src="/img/Icon feather-link.svg" style="width:18px;height:18px">
        <button id="r_pullout_send" class="r_pullout_send" type="submit"><img src="/img/Icon feather-send-1.svg" style="width:26px;height:26px"></button>
      </div>
    </div>
  </form>
  </div>
  </div>
</div>

<?php
  } else if (SessionContext::$role == "admin") {
?><?php
  } else {
?>
<div class="r_pullout">
  <div class="r_pullout_tab">
  <div>Ask the Experts</div>
  <img src="/img/arrow left.svg" style="width:28px;height:28px">
  </div>
  <div class="r_pullout_inner">
  <h1>How can we help?</h1>
  <div class="r_pullout_form">
  <form action="/compose.php">
    <div class="r_pullout_dropdown r_pullout_department">
      <select id="r_compose_department">
        <?php echo AttributeStack::get('js_department_list',''); ?>
      </select>
    </div>
    <div class="r_pullout_dropdown r_pullout_experts">
      <select id="r_compose_experts">
        <option value="" disabled selected>Select Your Experts</option>
      </select>
    </div>
    <div class="r_pullout_cc_balt">
      <input id="cc_balt_team" type="checkbox" name="cc_balt_team" value="true">
      <label for="cc_balt_team">CC the balt team on this message</label>
    </div>
    <div class="r_pullout_subject">
      <input id="r_compose_subject" type="text" name="subject" placeholder="Subject Line">
    </div>
    <div class="r_pullout_compose">
      <textarea id="r_compose_body" name="body" placeholder="Send your message to one of out expert specialists."></textarea>
      <div id="r_pullout_icons" class="r_pullout_icons">
        <input type="file" id="attached_file_input" style="display:none">
        <label id="attached_file_label" for="attached_file_input">
          <img src="/img/Icon material-attach-file-1.svg" style="width:11px;height:23px">
        </label>
        <img src="/img/Icon material-format-list-numbered-1.svg" style="width:21px;height:17px">
        <img src="/img/Icon feather-link.svg" style="width:18px;height:18px">
        <button id="r_pullout_send" class="r_pullout_send" type="submit" style="cursor:default"><img src="/img/Icon feather-send-inactive.svg" style="width:26px;height:26px"></button>
      </div>
    </div>
  </form>
  </div>
  </div>
</div>
<?php
  }
?>

<div id="image_upload_popup" class="image_upload_popup_hidden">
  <div class="image_upload_background">
    <div class="image_upload_column">
      <div>
        <h2>Does this image contain any patient data?</h2>
        <p>
          If so, you must anonimise the image by drawing black boxes over any
          confidential patient data. Simply click the '+' icon and drag a box
          around the area to hide. Once you are confident the image is safe to
          upload, check the box below and click the save and upload button.
        </p>
      </div>
    </div>
    <div class="image_upload_column">
      <div class="image_upload_canvas_outer">
        <canvas id="image_upload_canvas">

        </canvas>
      </div>
    </div>
    <div class="image_upload_column">
      <input id="agree_terms_conditions" type="checkbox" name="agree_terms_conditions" value="true">
      <label for="agree_terms_conditions">I agree that the image I am uploading does not show any patient data and agree to the</label> <a href="/terms-conditions.php">terms and conditions</a>
    </div>
    <div id="image_upload_controls" class="image_upload_column">
      <img id="image_add" src="/img/ANON-add.svg">
      <img id="image_zoom" src="/img/ANON-zoom.svg">
      <img id="image_undo" src="/img/ANON-undo.svg">
      <img id="image_delete" src="/img/ANON-delete.svg">
      <div id="image_save_upload" class="upload_disabled">Save & Upload</div>
    </div>
  </div>
  <div class="image_upload_close" id="image_upload_close"><img src="/img/times_icon_grey.svg"></div>
</div>

</div>
</div>
</div>
</body>
</html>