From cf4daf1e66419818359c33ae194c1c175026b07d Mon Sep 17 00:00:00 2001
From: Michael Slone <m.slone@gmail.com>
Date: Wed, 22 Jul 2015 14:53:15 -0400
Subject: [PATCH 1/8] Add visual selector for item relations.

Author: Gero Zahn <gerozahn@campus.uni-paderborn.de>
Author: Michael Slone <m.slone@gmail.com> (cosmetic changes only)
---
 item_relations_form.php                |  99 ++++++-
 item_relations_script.js               | 187 +++++++++++++
 item_relations_styles.css              |  12 +
 languages/template.pot                 |  30 +-
 lity/lity.css                          | 160 +++++++++++
 lity/lity.js                           | 373 +++++++++++++++++++++++++
 lity/lity.min.css                      |   3 +
 lity/lity.min.js                       |   4 +
 models/Table/ItemRelationsProperty.php |   2 +-
 9 files changed, 855 insertions(+), 15 deletions(-)
 create mode 100644 item_relations_script.js
 create mode 100644 item_relations_styles.css
 create mode 100644 lity/lity.css
 create mode 100644 lity/lity.js
 create mode 100644 lity/lity.min.css
 create mode 100644 lity/lity.min.js

diff --git a/item_relations_form.php b/item_relations_form.php
index 5ee0fda..263bcdc 100644
--- a/item_relations_form.php
+++ b/item_relations_form.php
@@ -1,3 +1,12 @@
+<?php
+    // All code related to 'SIMULATION' and 'if (defined("SIMULATION"))'
+    // is meant only to tickle the complexity to check scalability
+    # DEFINE("SIMULATION", true); // uncomment this line to use simulation
+    DEFINE("SIM_CATEGORIES",12);
+    DEFINE("SIM_CATLEN",16);
+    DEFINE("SIM_ITEMS",5000);
+    DEFINE("SIM_ITEMLEN",48);
+?>
 <p>
 <?php
 $link = '<a href="' . url('item-relations/vocabularies/') . '">'
@@ -38,20 +47,84 @@
     <tr class="item-relations-entry">
         <td><?php echo __('This Item'); ?></td>
         <td><?php echo get_view()->formSelect('item_relations_property_id[]', null, array('multiple' => false), $formSelectProperties); ?></td>
-        <td><?php echo __('Item ID'); ?> <?php echo get_view()->formText('item_relations_item_relation_object_item_id[]', null, array('size' => 8)); ?></td>
-        <td><span style="color:#ccc;">n/a</span></td>
+        <td>
+                    <span class="item_relations_idbox">
+                        <?php echo __('Item ID'); ?><br>
+                        <a href="#" class="selectObjectIdHref">[<?php echo __('Select ID'); ?>]</a><br>
+                        <?php echo get_view()->formText('item_relations_item_relation_object_item_id[]', null, array('size' => 8)); ?>
+                    </span>
+                </td>
+        <td><span style="color:#ccc;"><?php echo __("[n/a]") ?></span></td>
     </tr>
     </tbody>
 </table>
 <button type="button" class="item-relations-add-relation"><?php echo __('Add a Relation'); ?></button>
-<script type="text/javascript">
-jQuery(document).ready(function () {
-    jQuery('.item-relations-add-relation').click(function () {
-        var oldRow = jQuery('.item-relations-entry').last();
-        var newRow = oldRow.clone();
-        oldRow.after(newRow);
-        var inputs = newRow.find('input, select');
-        inputs.val('');
-    });
-});
-</script>
+<link href="<?php echo PUBLIC_BASE_URL; ?>/plugins/ItemRelations/lity/lity.min.css" rel="stylesheet">
+<script type="text/javascript" src="<?php echo PUBLIC_BASE_URL; ?>/plugins/ItemRelations/lity/lity.min.js"></script>
+<link href="<?php echo PUBLIC_BASE_URL; ?>/plugins/ItemRelations/item_relations_styles.css" rel="stylesheet">
+<script type="text/javascript" src="<?php echo PUBLIC_BASE_URL; ?>/plugins/ItemRelations/item_relations_script.js"></script>
+<?php
+    $db = get_db();
+    // Put all database items into JavaScript arrays, that will later be used via jQuery.
+    echo "<script type='text/javascript'>\n";
+    // --- 1. Fetch all item typs together with ther IDs and names
+    if (defined("SIMULATION")) {
+        $itemtypes=array();
+        for($i=1; ($i<=SIM_CATEGORIES); $i++) { $itemtypes[]=array("id" => $i, "name" => substr(str_shuffle("0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"), 0, SIM_CATLEN)); }
+    }
+    else {
+        $sql = "SELECT id, name from {$db->Item_Types} ORDER BY id";
+        $itemtypes = $db->fetchAll($sql);
+    }
+    $lines=array();
+    $lines[]="0:'".__("[n/a]")."'";
+    foreach($itemtypes as $itemtyp) {
+        $lines[]=$itemtyp["id"].":'".htmlspecialchars($itemtyp["name"], ENT_QUOTES)."'";
+    }
+    // JavaScript object
+    echo "var itemTypes={\n".
+                implode(",\n",$lines)."\n".
+                "};\n";
+    // --- 2. Fetch all items together with their IDs, titles, and item type IDs and names
+    if (defined("SIMULATION")) {
+        $items=array();
+        for($i=1; ($i<=SIM_ITEMS); $i++) {
+            $items[]=array($i, substr(str_shuffle("0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"), 0, SIM_ITEMLEN), rand(0,SIM_CATEGORIES), time()-rand(0,3600));
+        }
+        usort($items, function($a, $b) { return ( $a[2]!=$b[2] ? $a[2]-$b[2] : ( $a[1]!=$b[1] ? ($a[1]>$b[1] ? 1 : -1 ) : 0  ) ); } );
+    }
+    else {
+        $item_id_suffix=($item->id ? "and items.id<>".$item->id : "" );
+        $sql = "SELECT items.id, text, item_type_id, UNIX_TIMESTAMP(modified)
+                        FROM {$db->Item} items
+                        LEFT JOIN {$db->Element_Texts} elementtexts on (items.id=elementtexts.record_id)
+                        WHERE elementtexts.element_id=50 $item_id_suffix
+                        GROUP BY elementtexts.record_id
+                        ORDER BY items.item_type_id ASC, text ASC";
+        $items = $db->fetchAll($sql);
+    }
+    // For efficiency, we use a regular JavaScript array  notation instead of JSON
+    $lines=array();
+    foreach($items as $item) {
+        foreach (array_keys($item) as $key) {
+            if (!$item[$key]) { $item[$key]=0; } # Transform all empty values to zero
+            if (intval($item[$key])!==$item[$key]) { $item[$key]="'".htmlspecialchars($item[$key], ENT_QUOTES)."'"; } # Non-ints i.e. string into apostrophes
+        }
+        $lines[]="[[".implode("],[", $item)."]]"; # Item as a new array element - with its components in another array
+    }
+    echo "var allItemsArr=[\n".
+                implode(",\n",$lines)."\n".
+                "];\n";
+    // --------
+    echo "var itemTypesTxt='".__("Item Types")."';\n";
+    echo "var allTxt='".__("All")."';\n";
+    echo "var itemTypeTxt='".__("Item Type")."';\n";
+    echo "var sortWithinItemTypeByTxt='".__("Sort within item types by")."';\n";
+    echo "var updDateDescTxt='".__("Last Update (desc)")."';\n";
+    echo "var nameAscTxt='".__("Name (asc)")."';\n";
+    echo "var searchTermTxt='".__("Search Term")."';\n";
+    echo "var resetTxt='".__("Reset")."';\n";
+    echo "</script>\n";
+    # echo "$sql<br>\n";
+?>
+<div id="lightboxJsContent" class="lity-hide"></div>
diff --git a/item_relations_script.js b/item_relations_script.js
new file mode 100644
index 0000000..2f156ac
--- /dev/null
+++ b/item_relations_script.js
@@ -0,0 +1,187 @@
+jQuery(document).ready(function () {
+
+    var $ = jQuery; // use noConflict version of jQuery as the short $ within this block
+    var lightbox = lity(); // Lity lightbox for item selector "popup"
+
+    var my_input = null; // Reference to currently active input
+    var allItemsSortedArr = null; // Room for a pre-sorted array
+    var filterItemTyp = null; // Room for filter by type
+    var curListOrder = null; // Room for sort order
+    var curFilter = null; // Room for filter word
+
+    // --- START: moved from <script> block formerly located at the bottom of item_relations_form.php
+    $('.item-relations-add-relation').click(function () {
+        var oldRow = $('.item-relations-entry').last();
+        var newRow = oldRow.clone();
+        oldRow.after(newRow);
+        var inputs = newRow.find('input, select');
+        inputs.val('');
+        // additions: whenever adding a row, re-initialize click events etc.
+        itemRelationsJsInit();
+    });
+    // --- END: moved from <script> block formerly located at the bottom of item_relations_form.php
+
+    itemRelationsJsInit(); // Init click events with form elements etc.
+
+    // -------------------------------------------------
+
+    // Init click events with form elements etc.
+    function itemRelationsJsInit() {
+        $(".selectObjectIdHref").click(selectObjectIdHrefClick);
+    }
+
+    // Init "popup" i.e. lightbox with values
+    function selectObjectIdHrefClick() {
+        my_input=$(this).closest(".item_relations_idbox").find("input"); // Find and store target ID box
+
+        filterItemTyp = -1; // Default: Don't filter item type for selector
+        curListOrder = "timestamp"; // Default: Sort by timestamp
+        curFilter = ""; // Default: no filter
+
+        itemTypeSelect="<select id='itemTypeIds' size='1'>"+"</select>"; // Fill all item types
+        allItemsSelect="<select id='allItemIds' size='12'>"+"</select>"; // Fill all items selector
+
+        $("#lightboxJsContent").empty().append("<div id='selectObjectId'>"+ // Generate lightbox content
+                                                                                        "<p><strong>"+itemTypesTxt+":</strong> "+itemTypeSelect+"</p>"+
+                                                                                        "<p><strong>"+sortWithinItemTypeByTxt+":</strong><br>"+
+                                                                                        "<fieldset>"+
+                                                                                        "<input type='radio' name='itemsListSort' id='selectObjectSortTimestamp' value='timestamp' checked>"+
+                                                                                                    "<label for='selectObjectSortTimestamp'>"+updDateDescTxt+"</label> "+
+                                                                                        "<input type='radio' name='itemsListSort' id='selectObjectSortName' value='name'>"+
+                                                                                                    "<label for='selectObjectSortName'>"+nameAscTxt+"</label>"+
+                                                                                        "</fieldset>"+
+                                                                                        "</p>"+
+                                                                                        "<p>"+allItemsSelect+"</p>"+
+                                                                                        "<p>"+
+                                                                                                searchTermTxt+
+                                                                                                ": <input type='text' id='searchTerm' size='24' maxlength='24'> "+
+                                                                                                " <button type='button' id='resetBtn'>"+resetTxt+"</button>"+
+                                                                                        "</p>"+
+                                                                                        "</div>")
+
+        $("#itemTypeIds").change(itemTypeIdsChange);
+        $("#allItemIds").change(allItemIdsChange);
+        $("#searchTerm").on("input",searchTermChange);
+        $("#resetBtn").click("input",resetBtnClick);
+
+        $("#itemTypeIds").empty().append(itemTypeOptions());
+        $('input:radio[name=itemsListSort]').change(function() {
+                curListOrder=this.value;
+                updateList();
+            });
+        selectObjectSortTimestamp(); // fill item selector
+
+        lightbox.open("#selectObjectId"); // and off we go
+
+        return false;
+    }
+
+    // -------------------------------------------------
+
+    function updateList() {
+        switch (curListOrder) {
+            case "timestamp" : selectObjectSortTimestamp(); break;
+            case "name" : selectObjectSortName(); break;
+        }
+    }
+
+    // Fill the select box as given in PHP Array
+    function selectObjectSortName() {
+        $("#allItemIds").empty().append(allItemsOptions(allItemsArr));
+        return false;
+    }
+
+    // Fill the select box by descending timestamp within each item type
+    function selectObjectSortTimestamp() {
+        if (allItemsSortedArr==null) { // no pre-sorted array yet
+            allItemsSortedArr=allItemsArr.slice(); // correct operation to copy an array
+            allItemsSortedArr.sort(function(a,b) { // sort it via compare function
+                var catdiff=a[2]-b[2];  // different category? then sort asc for that
+                return ( catdiff==0 ? (b[3]-a[3]) : catdiff ); // otherwise sort desc for timestamp
+            });
+        }
+        $("#allItemIds").empty().append(allItemsOptions(allItemsSortedArr));
+        return false;
+    }
+
+    // -------------------------------------------------
+
+    // generate all <option>...</option> tags matching the current filter / search / sort order
+    function allItemsOptions(ItemsArr) {
+        var opencat=false;
+        var lastcat=-1;
+
+        var result="";
+        $.each(ItemsArr, function (itemIndex, item) { // all items
+
+            var showThisItem=true;
+
+            // item type filter defined? Is current item of this type or not?
+            if ( (filterItemTyp>=0) && (item[2]-filterItemTyp!=0) ) { showThisItem=false; }
+
+            // does the filter edit field contain a search term?
+            if ( (showThisItem) && (curFilter!="") ) {
+                if (String(item[1]).toLowerCase().indexOf(curFilter)==-1) { showThisItem=false; }
+            }
+
+            if (showThisItem) {
+                if ( (opencat) && (lastcat!=item[2]) ) { // open group, but new category title?
+                    result+="</optgroup>";
+                    opencat=false;
+                }
+                if (!opencat) { // no currently open group?
+                    var groupname=itemTypes[item[2]];
+                    result+="<optgroup label='"+itemTypeTxt+" \""+groupname+"\"'>";
+                    opencat=true;
+                }
+                lastcat=Number(item[2]);
+                result+="<option value='"+item[0]+"'>"+item[1]+"</option>";
+            }
+
+        });
+        result+="</optgroup>";
+        return result;
+    }
+
+    // generate <option>...</option> tages corresponding the existing item types
+    function itemTypeOptions() {
+        var result="<option value='-1'>"+allTxt+"</option>";
+        $.each(itemTypes, function (itemIndex, item) { result+="<option value='"+itemIndex+"'>"+item+"</option>"; });
+        return result;
+    }
+
+    // -------------------------------------------------
+
+    // select item type callback
+    function itemTypeIdsChange() {
+        filterItemTyp=this.value;
+        updateList();
+        return false;
+    }
+
+    // select item callback -> transfer selected item back into edit field and close
+    function allItemIdsChange() {
+        // console.log("allItemIdsChange - "+this.value);
+        if (this.value!="") {
+            $(my_input).val(this.value);
+            lightbox.close();
+        }
+        return false;
+    }
+
+    // callback whenver the content of the edit field changes
+    function searchTermChange() {
+        var curtext=String($("#searchTerm").val());
+        // console.log("searchTermChange - "+curtext);
+        curFilter=curtext.trim().toLowerCase();
+        updateList();
+    }
+
+    function resetBtnClick() {
+        // console.log("resetBtnClick");
+        $("#searchTerm").val("");
+        searchTermChange();
+        return false;
+    }
+
+} );
diff --git a/item_relations_styles.css b/item_relations_styles.css
new file mode 100644
index 0000000..03151a9
--- /dev/null
+++ b/item_relations_styles.css
@@ -0,0 +1,12 @@
+#selectObjectId {
+    // display:block !IMPORTANT; 
+    background:#fff;
+    padding:1.5em;
+    width:460px;
+    height:460px;
+    overflow:hidden; // scroll;
+}
+
+#allItemIds { width:28em; }
+
+.inlineselect { display: inline-block; }
diff --git a/languages/template.pot b/languages/template.pot
index 8754c1b..1a6b26e 100644
--- a/languages/template.pot
+++ b/languages/template.pot
@@ -85,10 +85,38 @@ msgstr ""
 msgid "This Item"
 msgstr ""
 
-#: item_relations_form.php:46
+#: item_relations_form.php:44
+msgid "Select ID"
+msgstr ""
+
+#: item_relations_form.php:48
+msgid "[n/a]"
+msgstr ""
+
+#: item_relations_form.php:52
 msgid "Add a Relation"
 msgstr ""
 
+#: models/ItemRelationsProperty.php:96
+msgid "Sort within item types by"
+msgstr ""
+
+#: models/ItemRelationsProperty.php:97
+msgid "Last Update (desc)"
+msgstr ""
+
+#: models/ItemRelationsProperty.php:98
+msgid "Name (asc)"
+msgstr ""
+
+#: models/ItemRelationsProperty.php:99
+msgid "Search Term"
+msgstr ""
+
+#: models/ItemRelationsProperty.php:100
+msgid "Reset"
+msgstr ""
+
 #: models/ItemRelationsProperty.php:62
 msgid "[unknown]"
 msgstr ""
diff --git a/lity/lity.css b/lity/lity.css
new file mode 100644
index 0000000..105b4af
--- /dev/null
+++ b/lity/lity.css
@@ -0,0 +1,160 @@
+/*! Lity - v1.2.0 - 2015-05-15
+* http://sorgalla.com/lity/
+* Copyright (c) 2015 Jan Sorgalla; Licensed MIT */
+.lity {
+  z-index: 9990;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  white-space: nowrap;
+  background: #0b0b0b;
+  background: rgba(0, 0, 0, 0.9);
+  outline: none !important;
+  opacity: 0;
+  -webkit-transition: opacity 0.2s ease;
+       -o-transition: opacity 0.2s ease;
+          transition: opacity 0.2s ease;
+}
+.lity.lity-opened {
+  opacity: 1;
+}
+.lity.lity-closed {
+  opacity: 0;
+}
+.lity * {
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.lity-wrap {
+  z-index: 9990;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  text-align: center;
+  outline: none !important;
+}
+.lity-wrap:before {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+  margin-right: -0.25em;
+}
+.lity-loader {
+  z-index: 9991;
+  color: #fff;
+  position: absolute;
+  top: 50%;
+  margin-top: -0.8em;
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+  font-family: Arial, Helvetica, sans-serif;
+  opacity: 0;
+  -webkit-transition: opacity 0.2s ease;
+       -o-transition: opacity 0.2s ease;
+          transition: opacity 0.2s ease;
+}
+.lity-loading .lity-loader {
+  opacity: 1;
+}
+.lity-container {
+  z-index: 9992;
+  position: relative;
+  text-align: left;
+  vertical-align: middle;
+  display: inline-block;
+  white-space: normal;
+  max-width: 100%;
+  max-height: 100%;
+  outline: none !important;
+  opacity: 1;
+  -webkit-transition: opacity 0.2s ease;
+       -o-transition: opacity 0.2s ease;
+          transition: opacity 0.2s ease;
+}
+.lity-loading .lity-container {
+  opacity: 0;
+}
+.lity-container:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  display: block;
+  right: 0;
+  width: auto;
+  height: auto;
+  z-index: -1;
+  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+          box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+}
+.lity-content {
+  z-index: 9993;
+  width: 100%;
+}
+.lity-close {
+  z-index: 9994;
+  width: 35px;
+  height: 35px;
+  line-height: 35px;
+  position: fixed;
+  right: 0;
+  top: 0;
+  text-decoration: none;
+  text-align: center;
+  padding: 0;
+  color: #fff;
+  font-style: normal;
+  font-size: 35px;
+  font-family: Arial, Baskerville, monospace;
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
+  border: 0;
+  background: transparent;
+  outline: none !important;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  -webkit-appearance: none;
+  cursor: pointer;
+}
+.lity-close:active {
+  top: 1px;
+}
+/* Image */
+.lity-image img {
+  max-width: 100%;
+  display: block;
+  line-height: 0;
+  border: 0;
+}
+/* iFrame */
+.lity-iframe .lity-container {
+  width: 100%;
+  max-width: 964px;
+}
+.lity-iframe-container {
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  padding-top: 56.25%;
+}
+.lity-iframe-container iframe {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+          box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+  background: #000;
+}
+.lity-hide {
+  display: none;
+}
diff --git a/lity/lity.js b/lity/lity.js
new file mode 100644
index 0000000..aea33f7
--- /dev/null
+++ b/lity/lity.js
@@ -0,0 +1,373 @@
+/*! Lity - v1.2.0 - 2015-05-15
+* http://sorgalla.com/lity/
+* Copyright (c) 2015 Jan Sorgalla; Licensed MIT */
+(function(window, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery'], function($) {
+            return factory(window, $);
+        });
+    } else if (typeof module === 'object' && typeof module.exports === 'object') {
+        module.exports = factory(window, require('jquery'));
+    } else {
+        window.lity = factory(window, window.jQuery || window.Zepto);
+    }
+}(window, function(window, $) {
+    'use strict';
+
+    var document = window.document;
+
+    var _win = $(window);
+
+    var _imageRegexp = /\.(png|jpg|jpeg|gif|tiff|bmp)(\?\S*)?$/i;
+    var _youtubeIdRegex = /v=([^&]+)/;
+    var _vimeoIdRegex = /\/([^\?&]+)$/;
+
+    var _defaultHandlers = {
+        image: imageHandler,
+        inline: inlineHandler,
+        iframe: iframeHandler
+    };
+
+    var _defaultOptions = {
+        esc: true
+    };
+
+    var transitionEndEvent = (function() {
+        var el = document.createElement('div');
+
+        var transEndEventNames = {
+            WebkitTransition : 'webkitTransitionEnd',
+            MozTransition : 'transitionend',
+            OTransition : 'oTransitionEnd otransitionend',
+            transition : 'transitionend'
+        };
+
+        for (var name in transEndEventNames) {
+            if (el.style[name] !== undefined) {
+                return transEndEventNames[name];
+            }
+        }
+
+        return false;
+    })();
+
+    function transitionEnd(element) {
+        var deferred = $.Deferred();
+
+        if (!transitionEndEvent) {
+            deferred.resolve();
+        } else {
+            element.one(transitionEndEvent, deferred.resolve);
+            setTimeout(deferred.reject, 500);
+        }
+
+        return deferred.promise();
+    }
+
+    var _html = '\
+<div class="lity lity-loading" tabindex="-1">\
+    <div class="lity-wrap" data-lity-close>\
+        <div class="lity-loader">Loading...</div>\
+        <div class="lity-container">\
+            <div class="lity-content"></div>\
+            <button class="lity-close" type="button" title="Close (Esc)" data-lity-close>×</button>\
+        </div>\
+    </div>\
+</div>';
+
+    function settings(settings, key, value) {
+        if (arguments.length === 1) {
+            return $.extend({}, settings);
+        }
+
+        if (typeof key === 'string') {
+            if (typeof value === 'undefined') {
+                return typeof settings[key] === 'undefined' ?
+                    null :
+                    settings[key];
+            }
+            settings[key] = value;
+        } else {
+            $.extend(settings, key);
+        }
+
+        return this;
+    }
+
+    function protocol() {
+        return 'file:' === window.location.protocol ? 'http:' : '';
+    }
+
+    function error(msg) {
+        return $('<span class="lity-error"/>').append(msg);
+    }
+
+    function imageHandler(target) {
+        if (!_imageRegexp.test(target)) {
+            return false;
+        }
+
+        var img = $('<img src="' + target + '">');
+        var deferred = $.Deferred();
+        var failed = function() {
+            deferred.reject(error('Failed loading image'));
+        };
+
+        img
+            .on('load', function() {
+                if (this.naturalWidth === 0) {
+                    return failed();
+                }
+
+                deferred.resolve(img);
+            })
+            .on('error', failed)
+        ;
+
+        return deferred.promise();
+    }
+
+    function inlineHandler(target) {
+        try {
+            var el = $(target);
+        } catch (e) {
+            return false;
+        }
+
+        var placeholder = $('<span style="display:none !important" class="lity-inline-placeholder"/>');
+
+        return el
+            .after(placeholder)
+            .on('lity:ready', function(e, instance) {
+                instance.one('lity:close', function() {
+                    placeholder
+                        .before(el.addClass('lity-hide'))
+                        .remove()
+                    ;
+                });
+            })
+            ;
+    }
+
+    function iframeHandler(target) {
+        var id;
+
+        if (target.indexOf('youtube.') > -1 && target.indexOf('/embed') < 0) {
+            id = _youtubeIdRegex.exec(target)[1];
+            target = protocol() + '//www.youtube.com/embed/' + id + '?autoplay=1';
+        }
+
+        if (target.indexOf('vimeo.') > -1 && target.indexOf('player.vimeo.') < 0) {
+            id = _vimeoIdRegex.exec(target.split('//')[1])[1];
+            target = protocol() + '//player.vimeo.com/video/' + id + '?autoplay=1';
+        }
+
+        if (target.indexOf('//maps.google.') > -1 && target.indexOf('output=embed') < 0) {
+            target += '&output=embed';
+        }
+
+        return '<div class="lity-iframe-container"><iframe frameborder="0" allowfullscreen src="'+target+'"></iframe></div>';
+    }
+
+    function lity(options) {
+        var _options = $.extend({}, _defaultOptions),
+            _handlers = $.extend({}, _defaultHandlers),
+            _instance,
+            _content,
+            _ready = $.Deferred().resolve();
+
+        function keyup(e) {
+            if (e.keyCode === 27) {
+                close()
+            }
+        }
+
+        function resize() {
+            var height = document.documentElement.clientHeight ? document.documentElement.clientHeight : Math.round(_win.height());
+
+            _content
+                .css('max-height', Math.floor(height) + 'px')
+                .trigger('lity:resize', [_instance, popup])
+            ;
+        }
+
+        function ready(content) {
+            if (!_instance) {
+                return;
+            }
+
+            _content = $(content);
+
+            _win.on('resize', resize);
+            resize();
+
+            _instance
+                .find('.lity-loader')
+                .each(function() {
+                    var el = $(this);
+                    transitionEnd(el).always(function() {
+                        el.remove();
+                    });
+                })
+            ;
+
+            _instance
+                .removeClass('lity-loading')
+                .find('.lity-content')
+                .empty()
+                .append(_content)
+            ;
+
+            _content
+                .removeClass('lity-hide')
+                .trigger('lity:ready', [_instance, popup])
+            ;
+
+            _ready.resolve();
+        }
+
+        function init(handler, content, options) {
+            _instance = $(_html).appendTo('body');
+
+            if (!!options.esc) {
+                _win.one('keyup', keyup);
+            }
+
+            setTimeout(function() {
+                _instance
+                    .addClass('lity-opened lity-' + handler)
+                    .on('click', '[data-lity-close]', function(e) {
+                        $(e.target).is('[data-lity-close]') && close();
+                    })
+                    .trigger('lity:open', [_instance, popup])
+                ;
+
+                $.when(content).always(ready);
+            }, 0);
+        }
+
+        function open(target, options) {
+            var handler, content;
+
+            if (options.handler && _handlers[options.handler]) {
+                content = _handlers[options.handler](target, instance, popup);
+                handler = options.handler;
+            } else {
+                var handlers = $.extend({}, _handlers), lateHandlers = {};
+
+                // Run inline and iframe handlers after all other handlers
+                $.each(['inline', 'iframe'], function(i, name) {
+                    if (handlers[name]) {
+                        lateHandlers[name] = handlers[name];
+                    }
+
+                    delete handlers[name];
+                });
+
+                var call = function(name, callback) {
+                    // Handler might be "removed" by setting callback to null
+                    if (!callback) {
+                        return true;
+                    }
+
+                    content = callback(target, popup);
+
+                    if (!!content) {
+                        handler = name;
+                        return false;
+                    }
+                };
+
+                $.each(handlers, call);
+                !handler && $.each(lateHandlers, call);
+            }
+
+            if (content) {
+                _ready = $.Deferred();
+                $.when(close()).done($.proxy(init, null, handler, content, options));
+            }
+
+            return !!content;
+        }
+
+        function close() {
+            if (!_instance) {
+                return;
+            }
+
+            var deferred = $.Deferred();
+
+            _ready.done(function() {
+                _win
+                    .off('resize', resize)
+                    .off('keyup', keyup)
+                ;
+
+                _content && _content
+                    .trigger('lity:close', [_instance, popup])
+                ;
+
+                _instance
+                    .removeClass('lity-opened')
+                    .addClass('lity-closed')
+                ;
+
+                var instance = _instance;
+                _instance = null;
+                _content = null;
+
+                transitionEnd(instance).always(function() {
+                    instance.remove();
+                    deferred.resolve();
+                });
+            });
+
+            return deferred.promise();
+        }
+
+        function popup(event) {
+            // If not an event, act as alias of popup.open
+            if (!event.preventDefault) {
+                return popup.open(event);
+            }
+
+            var el = $(this);
+            var target = el.data('lity-target') || el.attr('href') || el.attr('src');
+
+            if (!target) {
+                return;
+            }
+
+            var options = $.extend(
+                {},
+                _options,
+                el.data('lity-options') || el.data('lity')
+            );
+
+            open(target, options) && event.preventDefault();
+        }
+
+        popup.handlers = $.proxy(settings, popup, _handlers);
+        popup.options = $.proxy(settings, popup, _options);
+
+        popup.open = function(target) {
+            open(target, _options);
+            return popup;
+        };
+
+        popup.close = function() {
+            close();
+            return popup;
+        };
+
+        return popup.options(options);
+    }
+
+    lity.version = '1.2.0';
+    lity.handlers = $.proxy(settings, lity, _defaultHandlers);
+    lity.options = $.proxy(settings, lity, _defaultOptions);
+
+    $(document).on('click', '[data-lity]', lity());
+
+    return lity;
+}));
diff --git a/lity/lity.min.css b/lity/lity.min.css
new file mode 100644
index 0000000..bd8aeeb
--- /dev/null
+++ b/lity/lity.min.css
@@ -0,0 +1,3 @@
+/*! Lity - v1.2.0 - 2015-05-15
+* http://sorgalla.com/lity/
+* Copyright (c) 2015 Jan Sorgalla; Licensed MIT */.lity{z-index:9990;position:fixed;top:0;right:0;bottom:0;left:0;white-space:nowrap;background:#0b0b0b;background:rgba(0,0,0,0.9);outline:none !important;opacity:0;-webkit-transition:opacity .2s ease;-o-transition:opacity .2s ease;transition:opacity .2s ease}.lity.lity-opened{opacity:1}.lity.lity-closed{opacity:0}.lity *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.lity-wrap{z-index:9990;position:fixed;top:0;right:0;bottom:0;left:0;text-align:center;outline:none !important}.lity-wrap:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-0.25em}.lity-loader{z-index:9991;color:#fff;position:absolute;top:50%;margin-top:-0.8em;width:100%;text-align:center;font-size:14px;font-family:Arial,Helvetica,sans-serif;opacity:0;-webkit-transition:opacity .2s ease;-o-transition:opacity .2s ease;transition:opacity .2s ease}.lity-loading .lity-loader{opacity:1}.lity-container{z-index:9992;position:relative;text-align:left;vertical-align:middle;display:inline-block;white-space:normal;max-width:100%;max-height:100%;outline:none !important;opacity:1;-webkit-transition:opacity .2s ease;-o-transition:opacity .2s ease;transition:opacity .2s ease}.lity-loading .lity-container{opacity:0}.lity-container:after{content:'';position:absolute;left:0;top:0;bottom:0;display:block;right:0;width:auto;height:auto;z-index:-1;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.6);box-shadow:0 0 8px rgba(0,0,0,0.6)}.lity-content{z-index:9993;width:100%}.lity-close{z-index:9994;width:35px;height:35px;line-height:35px;position:fixed;right:0;top:0;text-decoration:none;text-align:center;padding:0;color:#fff;font-style:normal;font-size:35px;font-family:Arial,Baskerville,monospace;text-shadow:0 1px 2px rgba(0,0,0,0.6);border:0;background:transparent;outline:none !important;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;cursor:pointer}.lity-close:active{top:1px}.lity-image img{max-width:100%;display:block;line-height:0;border:0}.lity-iframe .lity-container{width:100%;max-width:964px}.lity-iframe-container{width:100%;height:0;overflow:hidden;padding-top:56.25%}.lity-iframe-container iframe{position:absolute;display:block;top:0;left:0;width:100%;height:100%;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.6);box-shadow:0 0 8px rgba(0,0,0,0.6);background:#000}.lity-hide{display:none}
\ No newline at end of file
diff --git a/lity/lity.min.js b/lity/lity.min.js
new file mode 100644
index 0000000..30eb307
--- /dev/null
+++ b/lity/lity.min.js
@@ -0,0 +1,4 @@
+/*! Lity - v1.2.0 - 2015-05-15
+* http://sorgalla.com/lity/
+* Copyright (c) 2015 Jan Sorgalla; Licensed MIT */
+!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],function(c){return b(a,c)}):"object"==typeof module&&"object"==typeof module.exports?module.exports=b(a,require("jquery")):a.lity=b(a,a.jQuery||a.Zepto)}(window,function(a,b){"use strict";function c(a){var c=b.Deferred();return r?(a.one(r,c.resolve),setTimeout(c.reject,500)):c.resolve(),c.promise()}function d(a,c,d){if(1===arguments.length)return b.extend({},a);if("string"==typeof c){if("undefined"==typeof d)return"undefined"==typeof a[c]?null:a[c];a[c]=d}else b.extend(a,c);return this}function e(){return"file:"===a.location.protocol?"http:":""}function f(a){return b('<span class="lity-error"/>').append(a)}function g(a){if(!m.test(a))return!1;var c=b('<img src="'+a+'">'),d=b.Deferred(),e=function(){d.reject(f("Failed loading image"))};return c.on("load",function(){return 0===this.naturalWidth?e():void d.resolve(c)}).on("error",e),d.promise()}function h(a){try{var c=b(a)}catch(d){return!1}var e=b('<span style="display:none !important" class="lity-inline-placeholder"/>');return c.after(e).on("lity:ready",function(a,b){b.one("lity:close",function(){e.before(c.addClass("lity-hide")).remove()})})}function i(a){var b;return a.indexOf("youtube.")>-1&&a.indexOf("/embed")<0&&(b=n.exec(a)[1],a=e()+"//www.youtube.com/embed/"+b+"?autoplay=1"),a.indexOf("vimeo.")>-1&&a.indexOf("player.vimeo.")<0&&(b=o.exec(a.split("//")[1])[1],a=e()+"//player.vimeo.com/video/"+b+"?autoplay=1"),a.indexOf("//maps.google.")>-1&&a.indexOf("output=embed")<0&&(a+="&output=embed"),'<div class="lity-iframe-container"><iframe frameborder="0" allowfullscreen src="'+a+'"></iframe></div>'}function j(a){function e(a){27===a.keyCode&&j()}function f(){var a=k.documentElement.clientHeight?k.documentElement.clientHeight:Math.round(l.height());o.css("max-height",Math.floor(a)+"px").trigger("lity:resize",[n,m])}function g(a){n&&(o=b(a),l.on("resize",f),f(),n.find(".lity-loader").each(function(){var a=b(this);c(a).always(function(){a.remove()})}),n.removeClass("lity-loading").find(".lity-content").empty().append(o),o.removeClass("lity-hide").trigger("lity:ready",[n,m]),u.resolve())}function h(a,c,d){n=b(s).appendTo("body"),d.esc&&l.one("keyup",e),setTimeout(function(){n.addClass("lity-opened lity-"+a).on("click","[data-lity-close]",function(a){b(a.target).is("[data-lity-close]")&&j()}).trigger("lity:open",[n,m]),b.when(c).always(g)},0)}function i(a,c){var d,e;if(c.handler&&t[c.handler])e=t[c.handler](a,instance,m),d=c.handler;else{var f=b.extend({},t),g={};b.each(["inline","iframe"],function(a,b){f[b]&&(g[b]=f[b]),delete f[b]});var i=function(b,c){return c?(e=c(a,m),e?(d=b,!1):void 0):!0};b.each(f,i),!d&&b.each(g,i)}return e&&(u=b.Deferred(),b.when(j()).done(b.proxy(h,null,d,e,c))),!!e}function j(){if(n){var a=b.Deferred();return u.done(function(){l.off("resize",f).off("keyup",e),o&&o.trigger("lity:close",[n,m]),n.removeClass("lity-opened").addClass("lity-closed");var b=n;n=null,o=null,c(b).always(function(){b.remove(),a.resolve()})}),a.promise()}}function m(a){if(!a.preventDefault)return m.open(a);var c=b(this),d=c.data("lity-target")||c.attr("href")||c.attr("src");if(d){var e=b.extend({},r,c.data("lity-options")||c.data("lity"));i(d,e)&&a.preventDefault()}}var n,o,r=b.extend({},q),t=b.extend({},p),u=b.Deferred().resolve();return m.handlers=b.proxy(d,m,t),m.options=b.proxy(d,m,r),m.open=function(a){return i(a,r),m},m.close=function(){return j(),m},m.options(a)}var k=a.document,l=b(a),m=/\.(png|jpg|jpeg|gif|tiff|bmp)(\?\S*)?$/i,n=/v=([^&]+)/,o=/\/([^\?&]+)$/,p={image:g,inline:h,iframe:i},q={esc:!0},r=function(){var a=k.createElement("div"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var c in b)if(void 0!==a.style[c])return b[c];return!1}(),s='<div class="lity lity-loading" tabindex="-1">    <div class="lity-wrap" data-lity-close>        <div class="lity-loader">Loading...</div>        <div class="lity-container">            <div class="lity-content"></div>            <button class="lity-close" type="button" title="Close (Esc)" data-lity-close>×</button>        </div>    </div></div>';return j.version="1.2.0",j.handlers=b.proxy(d,j,p),j.options=b.proxy(d,j,q),b(k).on("click","[data-lity]",j()),j});
\ No newline at end of file
diff --git a/models/Table/ItemRelationsProperty.php b/models/Table/ItemRelationsProperty.php
index 09f22d9..7c3c9c2 100644
--- a/models/Table/ItemRelationsProperty.php
+++ b/models/Table/ItemRelationsProperty.php
@@ -31,7 +31,7 @@ public function getSelect()
                     'vocabulary_namespace_uri' => 'namespace_uri'
                 )
             )
-            ->order('custom DESC');
+            ->order('custom DESC')->order('name ASC')->order('label ASC');
     }
 
     /**

From cf60f1dacdc3d9ecc3f8ed0e8f429692528c2537 Mon Sep 17 00:00:00 2001
From: Michael Slone <m.slone@gmail.com>
Date: Wed, 22 Jul 2015 15:38:52 -0400
Subject: [PATCH 2/8] Display object title immediately upon selection.

---
 item_relations_form.php  | 3 ++-
 item_relations_script.js | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/item_relations_form.php b/item_relations_form.php
index 263bcdc..90b6951 100644
--- a/item_relations_form.php
+++ b/item_relations_form.php
@@ -49,7 +49,8 @@
         <td><?php echo get_view()->formSelect('item_relations_property_id[]', null, array('multiple' => false), $formSelectProperties); ?></td>
         <td>
                     <span class="item_relations_idbox">
-                        <?php echo __('Item ID'); ?><br>
+                        <span class="item_relations_idbox_label"></span>
+                        <span class="item_relations_idbox_prompt"><?php echo __('Item ID'); ?></span><br>
                         <a href="#" class="selectObjectIdHref">[<?php echo __('Select ID'); ?>]</a><br>
                         <?php echo get_view()->formText('item_relations_item_relation_object_item_id[]', null, array('size' => 8)); ?>
                     </span>
diff --git a/item_relations_script.js b/item_relations_script.js
index 2f156ac..1967898 100644
--- a/item_relations_script.js
+++ b/item_relations_script.js
@@ -13,6 +13,7 @@ jQuery(document).ready(function () {
     $('.item-relations-add-relation').click(function () {
         var oldRow = $('.item-relations-entry').last();
         var newRow = oldRow.clone();
+        newRow.find('.item_relations_idbox_label').html('').closest('span').find('.item_relations_idbox_prompt').show();
         oldRow.after(newRow);
         var inputs = newRow.find('input, select');
         inputs.val('');
@@ -163,7 +164,7 @@ jQuery(document).ready(function () {
     function allItemIdsChange() {
         // console.log("allItemIdsChange - "+this.value);
         if (this.value!="") {
-            $(my_input).val(this.value);
+            $(my_input).val(this.value).closest('span').find('.item_relations_idbox_label').html($('option[value="' + this.value + '"]').text()).closest('span').find('.item_relations_idbox_prompt').hide();
             lightbox.close();
         }
         return false;

From 3faa93986077aad71de9ce5a3583bf910a00ca55 Mon Sep 17 00:00:00 2001
From: Michael Slone <m.slone@gmail.com>
Date: Thu, 23 Jul 2015 14:35:43 -0400
Subject: [PATCH 3/8] add lookup controller

---
 controllers/LookupController.php | 97 ++++++++++++++++++++++++++++++++
 views/admin/lookup/index.php     |  3 +
 2 files changed, 100 insertions(+)
 create mode 100644 controllers/LookupController.php
 create mode 100644 views/admin/lookup/index.php

diff --git a/controllers/LookupController.php b/controllers/LookupController.php
new file mode 100644
index 0000000..bedaa05
--- /dev/null
+++ b/controllers/LookupController.php
@@ -0,0 +1,97 @@
+<?php
+/**
+ * Item Relations
+ * @copyright 2015 Michael Slone
+ * @license http://www.gnu.org/licenses/gpl-3.0.txt GNU GPLv3
+ */
+
+/**
+ * Lookup controller.
+ */
+class ItemRelations_LookupController extends Omeka_Controller_AbstractActionController
+{
+    public function indexAction() {
+        if (!$this->_hasParam('partial')) {
+            $this->_setParam('partial', '');
+        }
+        if (!$this->_hasParam('item_type')) {
+            $this->_setParam('item_type', -1);
+        }
+        if (!$this->_hasParam('sort')) {
+            $this->_setParam('sort', 'mod_desc');
+        }
+        if (!$this->_hasParam('page')) {
+            $this->_setParam('page', 0);
+        }
+        if (!$this->_hasParam('per_page')) {
+            $this->_setParam('per_page', 15);
+        }
+
+        $partial = preg_replace('/[^\p{L}\p{N}\p{Mc}]/ui', '', $this->_getParam('partial'));
+        $where_text = '';
+        if (strlen($partial) > 0) {
+            $where_text = "AND text RLIKE '$partial'";
+        }
+
+        $item_type = intval($this->_getParam('item_type'));
+        $where_item_type = '';
+        if ($item_type > 0) {
+            $where_item_type = "AND items.item_type_id = $item_type";
+        }
+
+        $per_page = intval($this->_getParam('per_page'));
+        $page = intval($this->_getParam('page'));
+        $offset = $page * $per_page;
+
+        $order_clause = 'ORDER BY items.item_type_id ASC, text ASC';
+        switch ($this->_getParam('sort')) {
+        case 'mod_desc':
+            $order_clause = 'ORDER BY UNIX_TIMESTAMP(modified) DESC, items.item_type_id ASC, text ASC';
+            break;
+        case 'mod_asc':
+            $order_clause = 'ORDER BY UNIX_TIMESTAMP(modified) ASC, items.item_type_id ASC, text ASC';
+            break;
+        case 'alpha_desc':
+            $order_clause = 'ORDER BY items.item_type_id ASC, text DESC';
+            break;
+        case 'alpha_asc':
+            $order_clause = 'ORDER BY items.item_type_id ASC, text ASC';
+            break;
+        default:
+            /* do nothing */
+            break;
+        }
+
+        $title = 50;
+        $db = get_db();
+#SELECT items.id AS id, text, item_type_id, UNIX_TIMESTAMP(modified)
+        $query = <<<QUERY
+SELECT items.id AS id, text
+FROM {$db->Item} items
+LEFT JOIN {$db->Element_Texts} elementtexts
+ON (items.id = elementtexts.record_id)
+WHERE elementtexts.element_id = $title
+$where_item_type
+$where_text
+GROUP BY elementtexts.record_id
+$order_clause
+LIMIT $per_page
+OFFSET $offset
+QUERY;
+        $items = $db->fetchAll($query);
+        $metadata = array(
+            'response' => array(
+                'numFound' => count($items),
+                'docs' => array(),
+            ),
+        );
+        foreach ($items as $item) {
+            $metadata['response']['docs'][] = array(
+                'id' => $item['id'],
+                'text' => $item['text'],
+            );
+        }
+
+        $this->view->metadata = $metadata;
+    }
+}
diff --git a/views/admin/lookup/index.php b/views/admin/lookup/index.php
new file mode 100644
index 0000000..866ddc2
--- /dev/null
+++ b/views/admin/lookup/index.php
@@ -0,0 +1,3 @@
+<?php
+print json_encode($this->metadata);
+?>

From 70e3110410f60574fa3aa95def8cf355d6c8b21f Mon Sep 17 00:00:00 2001
From: Michael Slone <m.slone@gmail.com>
Date: Tue, 4 Aug 2015 15:02:45 -0400
Subject: [PATCH 4/8] Modify selector to paginate results.

Use LookupController as the backend for paginated
item searching.  Rewrite the JavaScript client to
avoid the need for a variable that holds all item
titles.
---
 controllers/LookupController.php |  41 +++--
 item_relations_form.php          | 141 +++++++---------
 item_relations_script.js         | 269 ++++++++++++-------------------
 item_relations_styles.css        |   8 +
 4 files changed, 203 insertions(+), 256 deletions(-)

diff --git a/controllers/LookupController.php b/controllers/LookupController.php
index bedaa05..a4eca05 100644
--- a/controllers/LookupController.php
+++ b/controllers/LookupController.php
@@ -1,6 +1,7 @@
 <?php
 /**
  * Item Relations
+ * LookupController
  * @copyright 2015 Michael Slone
  * @license http://www.gnu.org/licenses/gpl-3.0.txt GNU GPLv3
  */
@@ -27,7 +28,7 @@ public function indexAction() {
             $this->_setParam('per_page', 15);
         }
 
-        $partial = preg_replace('/[^\p{L}\p{N}\p{Mc}]/ui', '', $this->_getParam('partial'));
+        $partial = preg_replace('/[^ \.,\!\?\p{L}\p{N}\p{Mc}]/ui', '', $this->_getParam('partial'));
         $where_text = '';
         if (strlen($partial) > 0) {
             $where_text = "AND text RLIKE '$partial'";
@@ -64,7 +65,24 @@ public function indexAction() {
 
         $title = 50;
         $db = get_db();
-#SELECT items.id AS id, text, item_type_id, UNIX_TIMESTAMP(modified)
+        $query = <<<QCOUNT
+SELECT count(*) AS count
+FROM {$db->Item} items
+LEFT JOIN {$db->Element_Texts} elementtexts
+ON (items.id = elementtexts.record_id)
+WHERE elementtexts.element_id = $title
+$where_item_type
+$where_text
+GROUP BY elementtexts.record_id
+QCOUNT;
+        $m_count = count($db->fetchAll($query));
+
+        $max_page = floor($m_count / $per_page);
+        if ($page > $max_page) {
+            $page = $max_page;
+            $offset = $page * $per_page;
+        }
+
         $query = <<<QUERY
 SELECT items.id AS id, text
 FROM {$db->Item} items
@@ -79,19 +97,18 @@ public function indexAction() {
 OFFSET $offset
 QUERY;
         $items = $db->fetchAll($query);
-        $metadata = array(
-            'response' => array(
-                'numFound' => count($items),
-                'docs' => array(),
-            ),
-        );
+        $m_items = array();
+
         foreach ($items as $item) {
-            $metadata['response']['docs'][] = array(
-                'id' => $item['id'],
-                'text' => $item['text'],
+            $m_items[] = array(
+                'value' => $item['id'],
+                'label' => $item['text'],
             );
         }
 
-        $this->view->metadata = $metadata;
+        $this->view->metadata = array(
+            'count' => $m_count,
+            'items' => $m_items,
+        );
     }
 }
diff --git a/item_relations_form.php b/item_relations_form.php
index 90b6951..c2a72b3 100644
--- a/item_relations_form.php
+++ b/item_relations_form.php
@@ -29,7 +29,7 @@
     </thead>
     <tbody>
     <?php foreach ($subjectRelations as $subjectRelation): ?>
-    <tr>
+    <tr class="item-relations-entry">
         <td><?php echo __('This Item'); ?></td>
         <td><?php echo $subjectRelation['relation_text']; ?></td>
         <td><a href="<?php echo url('items/show/' . $subjectRelation['object_item_id']); ?>" target="_blank"><?php echo $subjectRelation['object_item_title']; ?></a></td>
@@ -37,95 +37,78 @@
     </tr>
     <?php endforeach; ?>
     <?php foreach ($objectRelations as $objectRelation): ?>
-    <tr>
+    <tr class="item-relations-entry">
         <td><a href="<?php echo url('items/show/' . $objectRelation['subject_item_id']); ?>" target="_blank"><?php echo $objectRelation['subject_item_title']; ?></a></td>
         <td><?php echo $objectRelation['relation_text']; ?></td>
         <td><?php echo __('This Item'); ?></td>
         <td><input type="checkbox" name="item_relations_item_relation_delete[]" value="<?php echo $objectRelation['item_relation_id']; ?>" /></td>
     </tr>
     <?php endforeach; ?>
-    <tr class="item-relations-entry">
-        <td><?php echo __('This Item'); ?></td>
-        <td><?php echo get_view()->formSelect('item_relations_property_id[]', null, array('multiple' => false), $formSelectProperties); ?></td>
-        <td>
-                    <span class="item_relations_idbox">
-                        <span class="item_relations_idbox_label"></span>
-                        <span class="item_relations_idbox_prompt"><?php echo __('Item ID'); ?></span><br>
-                        <a href="#" class="selectObjectIdHref">[<?php echo __('Select ID'); ?>]</a><br>
-                        <?php echo get_view()->formText('item_relations_item_relation_object_item_id[]', null, array('size' => 8)); ?>
-                    </span>
-                </td>
+    <tr class="hidden item-relations-entry">
+        <td><?php echo __('This Item'); ?><span class="item-relations-hidden"></span></td>
+        <td class="item-relations-property"></td>
+        <td class="item-relations-object"><a href="<?php echo url('items/show/'); ?>" target="_blank">.</a></td>
         <td><span style="color:#ccc;"><?php echo __("[n/a]") ?></span></td>
     </tr>
     </tbody>
 </table>
-<button type="button" class="item-relations-add-relation"><?php echo __('Add a Relation'); ?></button>
+
+<a href="#item-relation-selector" class="green button" data-lity><?php echo __('Add a Relation'); ?></a>
+
+<?php
+$db = get_db();
+$sql = "SELECT id, name from {$db->Item_Types} ORDER BY id";
+$itemtypes = $db->fetchAll($sql);
+$m = array(
+    '-1' => 'All',
+);
+foreach ($itemtypes as $type) {
+    $m[$type['id']] = $type['name'];
+}
+?>
+<div id="item-relation-selector" style="overflow: auto; padding: 20px; border-radius: 6px; background: #fff" class="lity-hide">
+    <h2><?php echo metadata('item', array('Dublin Core', 'Title')); ?></h2>
+
+    <label for="new_relation_property_id"><?php echo __('This Item'); ?>: </label>
+    <?php echo get_view()->formSelect('new_relation_property_id', null, array('multiple' => false), $formSelectProperties); ?><br>
+
+    <p><label for="new_relation_object_item_type_id"><?php echo __('Item Types'); ?>: </label>
+    <?php echo get_view()->formSelect('new_relation_object_item_type_id', null, array('multiple' => false), $m); ?></p>
+
+    <p>
+    <?php echo __('Item Sort'); ?>:
+    <fieldset>
+        <input type="radio" name="itemsListSort" id="new_selectObjectSortTimestamp" value="timestamp" checked>
+        <label for="selectObjectSortTimeStamp">Most recently updated</label>
+
+        <input type="radio" name="itemsListSort" id="new_selectObjectSortName" value="name">
+        <label for="selectObjectSortName">Alphabetically</label>
+    </fieldset>
+    </p>
+
+    <p><?php echo __('Object Title'); ?>: <span id="object_title"></span></p>
+    <input id="new_relation_object_item_id" type="hidden">
+
+    <label for="partial_object_title"><?php echo __('Partial Object Title'); ?>: </label>
+    <input id="partial_object_title">
+
+<br>
+    <ul class="pagination">
+      <li id="selector-previous-page" class="pg_disabled pagination_previous"><a href="#">&lt;</a></li>
+      <li id="selector-next-page" class="pg_disabled pagination_next"><a href="#">&gt;</a></li>
+    </ul>
+<br>
+
+    <ul id="lookup-results">
+    </ul>
+
+    <a href="#" id="add-relation" class="green button" data-lity-close><?php echo __('Add Relation'); ?></a>
+</div>
+
 <link href="<?php echo PUBLIC_BASE_URL; ?>/plugins/ItemRelations/lity/lity.min.css" rel="stylesheet">
 <script type="text/javascript" src="<?php echo PUBLIC_BASE_URL; ?>/plugins/ItemRelations/lity/lity.min.js"></script>
 <link href="<?php echo PUBLIC_BASE_URL; ?>/plugins/ItemRelations/item_relations_styles.css" rel="stylesheet">
+<script type="text/javascript">
+var url = '<?php echo url('item-relations/lookup/'); ?>';
+</script>
 <script type="text/javascript" src="<?php echo PUBLIC_BASE_URL; ?>/plugins/ItemRelations/item_relations_script.js"></script>
-<?php
-    $db = get_db();
-    // Put all database items into JavaScript arrays, that will later be used via jQuery.
-    echo "<script type='text/javascript'>\n";
-    // --- 1. Fetch all item typs together with ther IDs and names
-    if (defined("SIMULATION")) {
-        $itemtypes=array();
-        for($i=1; ($i<=SIM_CATEGORIES); $i++) { $itemtypes[]=array("id" => $i, "name" => substr(str_shuffle("0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"), 0, SIM_CATLEN)); }
-    }
-    else {
-        $sql = "SELECT id, name from {$db->Item_Types} ORDER BY id";
-        $itemtypes = $db->fetchAll($sql);
-    }
-    $lines=array();
-    $lines[]="0:'".__("[n/a]")."'";
-    foreach($itemtypes as $itemtyp) {
-        $lines[]=$itemtyp["id"].":'".htmlspecialchars($itemtyp["name"], ENT_QUOTES)."'";
-    }
-    // JavaScript object
-    echo "var itemTypes={\n".
-                implode(",\n",$lines)."\n".
-                "};\n";
-    // --- 2. Fetch all items together with their IDs, titles, and item type IDs and names
-    if (defined("SIMULATION")) {
-        $items=array();
-        for($i=1; ($i<=SIM_ITEMS); $i++) {
-            $items[]=array($i, substr(str_shuffle("0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"), 0, SIM_ITEMLEN), rand(0,SIM_CATEGORIES), time()-rand(0,3600));
-        }
-        usort($items, function($a, $b) { return ( $a[2]!=$b[2] ? $a[2]-$b[2] : ( $a[1]!=$b[1] ? ($a[1]>$b[1] ? 1 : -1 ) : 0  ) ); } );
-    }
-    else {
-        $item_id_suffix=($item->id ? "and items.id<>".$item->id : "" );
-        $sql = "SELECT items.id, text, item_type_id, UNIX_TIMESTAMP(modified)
-                        FROM {$db->Item} items
-                        LEFT JOIN {$db->Element_Texts} elementtexts on (items.id=elementtexts.record_id)
-                        WHERE elementtexts.element_id=50 $item_id_suffix
-                        GROUP BY elementtexts.record_id
-                        ORDER BY items.item_type_id ASC, text ASC";
-        $items = $db->fetchAll($sql);
-    }
-    // For efficiency, we use a regular JavaScript array  notation instead of JSON
-    $lines=array();
-    foreach($items as $item) {
-        foreach (array_keys($item) as $key) {
-            if (!$item[$key]) { $item[$key]=0; } # Transform all empty values to zero
-            if (intval($item[$key])!==$item[$key]) { $item[$key]="'".htmlspecialchars($item[$key], ENT_QUOTES)."'"; } # Non-ints i.e. string into apostrophes
-        }
-        $lines[]="[[".implode("],[", $item)."]]"; # Item as a new array element - with its components in another array
-    }
-    echo "var allItemsArr=[\n".
-                implode(",\n",$lines)."\n".
-                "];\n";
-    // --------
-    echo "var itemTypesTxt='".__("Item Types")."';\n";
-    echo "var allTxt='".__("All")."';\n";
-    echo "var itemTypeTxt='".__("Item Type")."';\n";
-    echo "var sortWithinItemTypeByTxt='".__("Sort within item types by")."';\n";
-    echo "var updDateDescTxt='".__("Last Update (desc)")."';\n";
-    echo "var nameAscTxt='".__("Name (asc)")."';\n";
-    echo "var searchTermTxt='".__("Search Term")."';\n";
-    echo "var resetTxt='".__("Reset")."';\n";
-    echo "</script>\n";
-    # echo "$sql<br>\n";
-?>
-<div id="lightboxJsContent" class="lity-hide"></div>
diff --git a/item_relations_script.js b/item_relations_script.js
index 1967898..b8522f8 100644
--- a/item_relations_script.js
+++ b/item_relations_script.js
@@ -1,188 +1,127 @@
 jQuery(document).ready(function () {
-
-    var $ = jQuery; // use noConflict version of jQuery as the short $ within this block
-    var lightbox = lity(); // Lity lightbox for item selector "popup"
-
-    var my_input = null; // Reference to currently active input
-    var allItemsSortedArr = null; // Room for a pre-sorted array
-    var filterItemTyp = null; // Room for filter by type
-    var curListOrder = null; // Room for sort order
-    var curFilter = null; // Room for filter word
-
-    // --- START: moved from <script> block formerly located at the bottom of item_relations_form.php
-    $('.item-relations-add-relation').click(function () {
-        var oldRow = $('.item-relations-entry').last();
-        var newRow = oldRow.clone();
-        newRow.find('.item_relations_idbox_label').html('').closest('span').find('.item_relations_idbox_prompt').show();
-        oldRow.after(newRow);
-        var inputs = newRow.find('input, select');
-        inputs.val('');
-        // additions: whenever adding a row, re-initialize click events etc.
-        itemRelationsJsInit();
-    });
-    // --- END: moved from <script> block formerly located at the bottom of item_relations_form.php
-
-    itemRelationsJsInit(); // Init click events with form elements etc.
-
-    // -------------------------------------------------
-
-    // Init click events with form elements etc.
-    function itemRelationsJsInit() {
-        $(".selectObjectIdHref").click(selectObjectIdHrefClick);
-    }
-
-    // Init "popup" i.e. lightbox with values
-    function selectObjectIdHrefClick() {
-        my_input=$(this).closest(".item_relations_idbox").find("input"); // Find and store target ID box
-
-        filterItemTyp = -1; // Default: Don't filter item type for selector
-        curListOrder = "timestamp"; // Default: Sort by timestamp
-        curFilter = ""; // Default: no filter
-
-        itemTypeSelect="<select id='itemTypeIds' size='1'>"+"</select>"; // Fill all item types
-        allItemsSelect="<select id='allItemIds' size='12'>"+"</select>"; // Fill all items selector
-
-        $("#lightboxJsContent").empty().append("<div id='selectObjectId'>"+ // Generate lightbox content
-                                                                                        "<p><strong>"+itemTypesTxt+":</strong> "+itemTypeSelect+"</p>"+
-                                                                                        "<p><strong>"+sortWithinItemTypeByTxt+":</strong><br>"+
-                                                                                        "<fieldset>"+
-                                                                                        "<input type='radio' name='itemsListSort' id='selectObjectSortTimestamp' value='timestamp' checked>"+
-                                                                                                    "<label for='selectObjectSortTimestamp'>"+updDateDescTxt+"</label> "+
-                                                                                        "<input type='radio' name='itemsListSort' id='selectObjectSortName' value='name'>"+
-                                                                                                    "<label for='selectObjectSortName'>"+nameAscTxt+"</label>"+
-                                                                                        "</fieldset>"+
-                                                                                        "</p>"+
-                                                                                        "<p>"+allItemsSelect+"</p>"+
-                                                                                        "<p>"+
-                                                                                                searchTermTxt+
-                                                                                                ": <input type='text' id='searchTerm' size='24' maxlength='24'> "+
-                                                                                                " <button type='button' id='resetBtn'>"+resetTxt+"</button>"+
-                                                                                        "</p>"+
-                                                                                        "</div>")
-
-        $("#itemTypeIds").change(itemTypeIdsChange);
-        $("#allItemIds").change(allItemIdsChange);
-        $("#searchTerm").on("input",searchTermChange);
-        $("#resetBtn").click("input",resetBtnClick);
-
-        $("#itemTypeIds").empty().append(itemTypeOptions());
-        $('input:radio[name=itemsListSort]').change(function() {
-                curListOrder=this.value;
-                updateList();
-            });
-        selectObjectSortTimestamp(); // fill item selector
-
-        lightbox.open("#selectObjectId"); // and off we go
-
-        return false;
+    var $ = jQuery;
+    var options = {};
+
+    function resetOptions() {
+        options['partial'] = '';
+        options['item_type'] = -1;
+        options['sort'] = 'mod_desc';
+        options['page'] = 0;
+        options['per_page'] = 15;
+        options = {
+            partial: '',
+            item_type: -1,
+            sort: 'mod_desc',
+            page: 0,
+            per_page: 15,
+            max_page: 0
+        };
     }
 
-    // -------------------------------------------------
+    resetOptions();
+    updateChoices();
 
-    function updateList() {
-        switch (curListOrder) {
-            case "timestamp" : selectObjectSortTimestamp(); break;
-            case "name" : selectObjectSortName(); break;
+    function updateChoices() {
+        options['partial'] = $('#partial_object_title').val();
+        options['item_type'] = $('#new_relation_object_item_type_id').val();
+        if ($('input[name=itemsListSort]:checked').val() === 'timestamp') {
+            options['sort'] = 'mod_desc';
         }
-    }
-
-    // Fill the select box as given in PHP Array
-    function selectObjectSortName() {
-        $("#allItemIds").empty().append(allItemsOptions(allItemsArr));
-        return false;
-    }
-
-    // Fill the select box by descending timestamp within each item type
-    function selectObjectSortTimestamp() {
-        if (allItemsSortedArr==null) { // no pre-sorted array yet
-            allItemsSortedArr=allItemsArr.slice(); // correct operation to copy an array
-            allItemsSortedArr.sort(function(a,b) { // sort it via compare function
-                var catdiff=a[2]-b[2];  // different category? then sort asc for that
-                return ( catdiff==0 ? (b[3]-a[3]) : catdiff ); // otherwise sort desc for timestamp
-            });
+        else {
+            options['sort'] = 'alpha_asc';
         }
-        $("#allItemIds").empty().append(allItemsOptions(allItemsSortedArr));
-        return false;
-    }
-
-    // -------------------------------------------------
-
-    // generate all <option>...</option> tags matching the current filter / search / sort order
-    function allItemsOptions(ItemsArr) {
-        var opencat=false;
-        var lastcat=-1;
-
-        var result="";
-        $.each(ItemsArr, function (itemIndex, item) { // all items
-
-            var showThisItem=true;
+        if (options['page'] < 0) {
+            options['page'] = 0;
+        }
+        if (options['page'] > options['max_page']) {
+            options['page'] = options['max_page'];
+        }
+        $.ajax({
+            url: url,
+            dataType: 'json',
+            data: options,
+            success: function (data) {
+                var i;
+                var items = [];
+
+                /* options */
+                $('#lookup-results').find('li').remove();
+                for (i = 0; i < data['items'].length; ++i) {
+                    items.push('<li data-value="' + data['items'][i]['value'] + '">' + data['items'][i]['label'] + '</li>');
+                }
+                $('#lookup-results').append(items.join(''));
 
-            // item type filter defined? Is current item of this type or not?
-            if ( (filterItemTyp>=0) && (item[2]-filterItemTyp!=0) ) { showThisItem=false; }
+                /* pagination */
+                options['max_page'] = Math.floor(data['count'] / options['per_page']);
 
-            // does the filter edit field contain a search term?
-            if ( (showThisItem) && (curFilter!="") ) {
-                if (String(item[1]).toLowerCase().indexOf(curFilter)==-1) { showThisItem=false; }
-            }
+                if (0 < options['page']) {
+                    $('#selector-previous-page').removeClass('pg_disabled');
+                }
+                else {
+                    $('#selector-previous-page').addClass('pg_disabled');
+                }
 
-            if (showThisItem) {
-                if ( (opencat) && (lastcat!=item[2]) ) { // open group, but new category title?
-                    result+="</optgroup>";
-                    opencat=false;
+                if (options['page'] < options['max_page']) {
+                    $('#selector-next-page').removeClass('pg_disabled');
                 }
-                if (!opencat) { // no currently open group?
-                    var groupname=itemTypes[item[2]];
-                    result+="<optgroup label='"+itemTypeTxt+" \""+groupname+"\"'>";
-                    opencat=true;
+                else {
+                    $('#selector-next-page').addClass('pg_disabled');
                 }
-                lastcat=Number(item[2]);
-                result+="<option value='"+item[0]+"'>"+item[1]+"</option>";
             }
-
         });
-        result+="</optgroup>";
-        return result;
     }
 
-    // generate <option>...</option> tages corresponding the existing item types
-    function itemTypeOptions() {
-        var result="<option value='-1'>"+allTxt+"</option>";
-        $.each(itemTypes, function (itemIndex, item) { result+="<option value='"+itemIndex+"'>"+item+"</option>"; });
-        return result;
-    }
+    $('#add-relation').click(function () {
+        var oldRow = $('.item-relations-entry').last();
+        var newRow = oldRow.clone();
+        newRow.toggleClass('hidden');
+        newRow.find('.item-relations-property').html($('#new_relation_property_id').find(':selected').html());
+        var new_url = newRow.find('.item-relations-object a').attr('href');
+        newRow.find('.item-relations-object a').attr('href', new_url + $('#new_relation_object_item_id').val());
+        newRow.find('.item-relations-object a').text($('#object_title').text());
+        var hidden = [];
+        hidden.push('<input type="hidden" name="item_relations_property_id[]" value="');
+        hidden.push($('#new_relation_property_id').val());
+        hidden.push('">');
+        hidden.push('<input type="hidden" name="item_relations_item_relation_object_item_id[]" value="');
+        hidden.push($('#new_relation_object_item_id').val());
+        hidden.push('">');
+        newRow.find('.item-relations-hidden').html(hidden.join(''));
+        oldRow.before(newRow);
+    });
 
-    // -------------------------------------------------
+    $('#lookup-results').on('click', 'li', function () {
+        $('#new_relation_object_item_id').val($(this).attr('data-value'));
+        $('#object_title').html($(this).html());
+    });
 
-    // select item type callback
-    function itemTypeIdsChange() {
-        filterItemTyp=this.value;
-        updateList();
-        return false;
-    }
+    $('#selector-previous-page').click(function () {
+        if (0 < options['page']) {
+            options['page']--;
+            updateChoices();
+        }
+    });
 
-    // select item callback -> transfer selected item back into edit field and close
-    function allItemIdsChange() {
-        // console.log("allItemIdsChange - "+this.value);
-        if (this.value!="") {
-            $(my_input).val(this.value).closest('span').find('.item_relations_idbox_label').html($('option[value="' + this.value + '"]').text()).closest('span').find('.item_relations_idbox_prompt').hide();
-            lightbox.close();
+    $('#selector-next-page').click(function () {
+        if (options['page'] < options['max_page']) {
+            options['page']++;
+            updateChoices();
         }
-        return false;
-    }
+    });
 
-    // callback whenver the content of the edit field changes
-    function searchTermChange() {
-        var curtext=String($("#searchTerm").val());
-        // console.log("searchTermChange - "+curtext);
-        curFilter=curtext.trim().toLowerCase();
-        updateList();
-    }
+    $('#new_relation_object_item_type_id').change(function () {
+        updateChoices();
+    });
 
-    function resetBtnClick() {
-        // console.log("resetBtnClick");
-        $("#searchTerm").val("");
-        searchTermChange();
-        return false;
-    }
+    $('#new_selectObjectSortTimestamp').click(function () {
+        updateChoices();
+    });
 
+    $('#new_selectObjectSortName').click(function () {
+        updateChoices();
+    });
+
+    $('#partial_object_title').on('input', function () {
+        updateChoices();
+    });
 } );
diff --git a/item_relations_styles.css b/item_relations_styles.css
index 03151a9..7918980 100644
--- a/item_relations_styles.css
+++ b/item_relations_styles.css
@@ -10,3 +10,11 @@
 #allItemIds { width:28em; }
 
 .inlineselect { display: inline-block; }
+
+.pg_disabled {
+    visibility: hidden;
+}
+
+.hidden {
+    display: none;
+}

From 292c0f35bfaea28c9b3c2e2c2981cdd02a8d4572 Mon Sep 17 00:00:00 2001
From: Michael Slone <m.slone@gmail.com>
Date: Tue, 4 Aug 2015 15:08:58 -0400
Subject: [PATCH 5/8] Remove remaining SIMULATION defines.

---
 item_relations_form.php | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/item_relations_form.php b/item_relations_form.php
index c2a72b3..f411fbf 100644
--- a/item_relations_form.php
+++ b/item_relations_form.php
@@ -1,12 +1,3 @@
-<?php
-    // All code related to 'SIMULATION' and 'if (defined("SIMULATION"))'
-    // is meant only to tickle the complexity to check scalability
-    # DEFINE("SIMULATION", true); // uncomment this line to use simulation
-    DEFINE("SIM_CATEGORIES",12);
-    DEFINE("SIM_CATLEN",16);
-    DEFINE("SIM_ITEMS",5000);
-    DEFINE("SIM_ITEMLEN",48);
-?>
 <p>
 <?php
 $link = '<a href="' . url('item-relations/vocabularies/') . '">'

From a5f8146f676c8ecafd4b96302bece43d424a03cc Mon Sep 17 00:00:00 2001
From: Michael Slone <m.slone@gmail.com>
Date: Tue, 4 Aug 2015 15:11:53 -0400
Subject: [PATCH 6/8] Revert changes to languages/template.pot .

---
 languages/template.pot | 30 +-----------------------------
 1 file changed, 1 insertion(+), 29 deletions(-)

diff --git a/languages/template.pot b/languages/template.pot
index 1a6b26e..8754c1b 100644
--- a/languages/template.pot
+++ b/languages/template.pot
@@ -85,38 +85,10 @@ msgstr ""
 msgid "This Item"
 msgstr ""
 
-#: item_relations_form.php:44
-msgid "Select ID"
-msgstr ""
-
-#: item_relations_form.php:48
-msgid "[n/a]"
-msgstr ""
-
-#: item_relations_form.php:52
+#: item_relations_form.php:46
 msgid "Add a Relation"
 msgstr ""
 
-#: models/ItemRelationsProperty.php:96
-msgid "Sort within item types by"
-msgstr ""
-
-#: models/ItemRelationsProperty.php:97
-msgid "Last Update (desc)"
-msgstr ""
-
-#: models/ItemRelationsProperty.php:98
-msgid "Name (asc)"
-msgstr ""
-
-#: models/ItemRelationsProperty.php:99
-msgid "Search Term"
-msgstr ""
-
-#: models/ItemRelationsProperty.php:100
-msgid "Reset"
-msgstr ""
-
 #: models/ItemRelationsProperty.php:62
 msgid "[unknown]"
 msgstr ""

From 6dff90338db719ade5f5d8ae9b8f548990366fa6 Mon Sep 17 00:00:00 2001
From: Michael Slone <m.slone@gmail.com>
Date: Tue, 4 Aug 2015 15:14:03 -0400
Subject: [PATCH 7/8] Trim CSS changes.

---
 item_relations_styles.css | 27 +++++++--------------------
 1 file changed, 7 insertions(+), 20 deletions(-)

diff --git a/item_relations_styles.css b/item_relations_styles.css
index 7918980..61b48e4 100644
--- a/item_relations_styles.css
+++ b/item_relations_styles.css
@@ -1,20 +1,7 @@
-#selectObjectId {
-    // display:block !IMPORTANT; 
-    background:#fff;
-    padding:1.5em;
-    width:460px;
-    height:460px;
-    overflow:hidden; // scroll;
-}
-
-#allItemIds { width:28em; }
-
-.inlineselect { display: inline-block; }
-
-.pg_disabled {
-    visibility: hidden;
-}
-
-.hidden {
-    display: none;
-}
+.pg_disabled {
+    visibility: hidden;
+}
+
+.hidden {
+    display: none;
+}

From 087824a1e0fb9ff9ffa3844dbedde0fc4c96f340 Mon Sep 17 00:00:00 2001
From: Michael Slone <m.slone@gmail.com>
Date: Mon, 17 Aug 2015 15:13:11 -0400
Subject: [PATCH 8/8] Enclose bare strings in __() method.

---
 item_relations_form.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/item_relations_form.php b/item_relations_form.php
index f411fbf..ba7d8fa 100644
--- a/item_relations_form.php
+++ b/item_relations_form.php
@@ -51,7 +51,7 @@
 $sql = "SELECT id, name from {$db->Item_Types} ORDER BY id";
 $itemtypes = $db->fetchAll($sql);
 $m = array(
-    '-1' => 'All',
+    '-1' => __('All'),
 );
 foreach ($itemtypes as $type) {
     $m[$type['id']] = $type['name'];
@@ -70,10 +70,10 @@
     <?php echo __('Item Sort'); ?>:
     <fieldset>
         <input type="radio" name="itemsListSort" id="new_selectObjectSortTimestamp" value="timestamp" checked>
-        <label for="selectObjectSortTimeStamp">Most recently updated</label>
+        <label for="selectObjectSortTimeStamp"><?php echo __('Most recently updated'); ?></label>
 
         <input type="radio" name="itemsListSort" id="new_selectObjectSortName" value="name">
-        <label for="selectObjectSortName">Alphabetically</label>
+        <label for="selectObjectSortName"><?php echo __('Alphabetically'); ?></label>
     </fieldset>
     </p>