<%
# WontoMedia - a wontology web application
# Copyright (C) 2011 - Glen E. Ivey
#    www.wontology.com
#
# This program is free software: you can redistribute it and/or modify
# it under the terms of the GNU Affero General Public License version
# 3 as published by the Free Software Foundation.
#
# This program is distributed in the hope that it will be useful, but
# WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
# Affero General Public License for more details.
#
# You should have received a copy of the GNU Affero General Public License
# along with this program in the file COPYING and/or LICENSE.  If not,
# see "http://www.gnu.org/licenses/".
%>


<% content_for :head do %>
  <style>
    div {
      overflow: auto;
    }
    div.desc {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
    div p {
      margin-top: 0.5ex;
    }
  </style>
  <script type="text/javascript">
    // <![CDATA[
    function setDescDivsHeights(names){
      for (var c=0; c < names.length; c++){
        var descDiv = document.getElementById(names[c] + "_desc");
        var h = document.viewport.getHeight() / 8;
        descDiv.style.height = h + "px";
      }
    }
    // ]]>
  </script>
<% end %>


<p class="directions">
  You must select an item for each of the
  <span id="subject_required">subject</span>,
  <span id="predicate_required">relationship</span>, and
  <span id="obj_required">object</span>.
</p>

<table>
  <tr><td style="text-align: right; font-weight: bold;">
    <%= f.label :subject_id %>
  </td><td>
    <%= select_tag "connection[subject_id]",
          options_for_select(
            [[ "- this object -", "" ],
             [ "- create a new item for this object -", "-1" ],
            ] +
              items.map do |n|
                [ h("#{n.name} : #{n.title}"), n.id ]
              end,
            connection.subject.nil? ? "" : connection.subject.id
          ),
          :tabindex=>'10', :style=>'width: 90%;'
     %>
    <script type="text/javascript">
      $('connection_subject_id').focus();
    </script>
    <%= popup_help_icon "Help for connection's subject selection",
                        "Help:Popup/ConnectionSubject" %>
    <%= image_tag "blank_error_icon.png", :id=>"subject_error_icon", :alt=>"",
                  :size=>"16x16" %>

    <!-- start 'div' differently depending on 'if' -->
      <% if connection.subject.nil? %>
        <div id="subject_desc" class="desc">
          <%= image_tag "blank_status_icon.png", :id=>"subject_status_icon",
                        :alt=>"", :size=>"32x16" %>
      <% else %>
        <div id="subject_desc" class="">
          <p><%= h connection.subject.description %></p>
      <% end %>
    </div>
    <script type="text/javascript">setDescDivsHeights(['subject']);</script>
  </td></tr>
  <tr><td style="text-align: right; font-weight: bold;">
    <%= f.label :predicate_id,"Relates to" %>
  </td><td>
    <%= select_tag "connection[predicate_id]",
          options_for_select(
            [[ "- has this relationship -", "" ],
             [ "- create a new property for this relationship -", "-1" ],
            ] +
              verbs.map do |n|
                [ h("#{n.name} : #{n.title}"), n.id ]
              end,
            connection.predicate.nil? ? "" : connection.predicate.id
          ),
          :tabindex=>'20', :style=>'width: 90%;'
     %>
    <%= popup_help_icon "Help for connection's predicate selection",
                        "Help:Popup/ConnectionPredicate" %>
    <%= image_tag "blank_error_icon.png", :id=>"predicate_error_icon", :alt=>"",
                  :size=>"16x16" %>

    <!-- start 'div' differently depending on 'if' -->
      <% if connection.predicate.nil? %>
        <div id="predicate_desc" class="desc">
          <%= image_tag "blank_status_icon.png", :id=>"predicate_status_icon",
                        :alt=>"", :size=>"32x16" %>
      <% else %>
        <div id="predicate_desc" class="">
          <p><%= h connection.predicate.description %></p>
      <% end %>
    </div>
    <script type="text/javascript">setDescDivsHeights(['predicate']);</script>
  </td></tr>
  <tr><td style="text-align: right;">
    <%= popup_help_icon "Help for connection's subject selection",
                        "Help:Popup/ConnectionObjectSelection" %>
    <span style="font-weight: bold;"><%= f.label :obj_id, "Object" %></span>
    <div style="text-aight: right; overflow: visible;">
      <%= image_tag "blank_error_icon.png", :id=>"kind_of_obj_error_icon",
            :alt=>"", :size=>"16x16",
            :style=>"position: relative; left: 0.75em;" %>
    </div>

  </td><td>
    <!-- first radio button and text field for object-is-scalar -->
    <%=
        radio_button "connection", "kind_of_obj", 'scalar', :tabindex => '30'
    -%><span style="font-size: 75%;"><%=
        f.label :kind_of_obj, "Value", :value => 'scalar'
    -%></span>
    <%= text_field :connection, :scalar_obj, :size => 30, :tabindex => '34' %>
    <%= popup_help_icon "Help for connection's object selection",
                        "Help:Popup/ConnectionObjectScalar" %>
    <span style="padding-left: 4em; font-weight: bold; font-style: italic;"
      >or</span>

    <br />

    <!-- then radio button and select control for object-is-item -->
    <%=
        radio_button "connection", "kind_of_obj", 'item', :tabindex => '30'
    -%><span style="font-size: 75%;"><%=
        f.label :kind_of_obj, "Item", :value => 'item'
    -%></span>
    <br />
    <%= select_tag "connection[obj_id]",
          options_for_select(
            [[ "- to this object -", "" ],
             [ "- create a new item for this object -", "-1" ],
            ] +
              items.map do |n|
                [ h("#{n.name} : #{n.title}"), n.id ]
              end,
            connection.obj.nil? ? "" : connection.obj.id
          ),
          :tabindex=>'35', :style=>'width: 90%;'
     %>
    <%= popup_help_icon "Help for connection's object selection",
                        "Help:Popup/ConnectionObjectItem" %>
    <%= image_tag "blank_error_icon.png", :id=>"obj_error_icon", :alt=>"",
          :size=>"16x16", :style=>"position: relative; bottom: 3.2ex;" %>

    <!-- start 'div' differently depending on 'if' -->
      <% if connection.obj.nil? %>
        <div id="obj_desc" class="desc">
          <%= image_tag "blank_status_icon.png", :id=>"obj_status_icon",
                        :alt=>"", :size=>"32x16" %>
      <% else %>
        <div id="obj_desc" class="">
          <p><%= h connection.obj.description %></p>
      <% end %>
    </div>
    <script type="text/javascript">setDescDivsHeights(['obj']);</script>
  </td></tr>
</table>