Ticket #9939: meta-web4.diff

new file js/dialog/dialog.css

@@ +1 @@
+/**
+ * Dialog
+ *
+ * @author      Roland Franssen <franssen.roland@gmail.com>
+ * @license     MIT
+ * @version     2.1
+ **/
+ 
+/* DONT CHANGE */
+* html .fixed { position:absolute }
+.fixed { position:fixed }
+
+/* DIALOG CORE */
+#dialog-overlay { top:0;left:0;width:100%;height:100%;z-index:900 }
+#dialog-container { overflow:hidden;z-index:901;text-align:left }
+
+/* DIALOG TOP */
+#dialog-top{background:#999;border:1px solid #fff;padding:5px;font-weight:bold}
+#dialog-title{color:#333}
+#dialog-close{color:#fff;padding-left:5px}
+#dialog-close:hover{color:#ccc}
+
+/* DIALOG BOTTOM */
+#dialog-bottom{background:#eee;border-top:1px solid #ccc;color:#666;padding:5px;text-align:center;font-size:12px}
+#dialog-bottom .next,
+#dialog-bottom .prev{color:#ccc;font-weight:bold;color:#333}
+#dialog-bottom .next:hover,
+#dialog-bottom .prev:hover{color:#f90}
+#dialog-bottom .next{padding-left:10px}
+#dialog-bottom .prev{padding-right:10px}
+#dialog-bottom .curr{}
+
+/* DIALOG MISC */
+#dialog-loading{color:#ccc;font-weight:bold;text-align:center;padding:20px}
+
+/* DIALOG PREDEFINED */
+#dialog-container .alert,
+#dialog-container .confirm { text-align:center;color:#999 }
+#dialog-container .alert input,
+#dialog-container .confirm input { font-weight:bold;width:75px }
+
+/* DIALOG PERSONAL */
+#dialog-container .myFirstDialog { color:orange;font-size:20px }

new file js/dialog/dialog.js

@@ +1 @@
+/**
+ * Dialog
+ *
+ * @author      Roland Franssen <franssen.roland@gmail.com>
+ * @license     MIT
+ * @version     2.1
+ **/
+
+var Dialogs = {
+        Lang:{
+                close:   '&nbsp;&times;&nbsp;',
+                prev:    '&laquo; Previous',
+                next:    'Next &raquo;',
+                loading: 'Loading...',
+                ok:      'OK',
+                yes:     'Yes',
+                no:      'No'
+        },
+        Default:{
+                handle:         null,                    // css rule | element | null
+                autoOpen:       false,                   // true | false
+                background:     ['#000', '#fff'],        // array
+                width:          'auto',                  // auto | max | integer
+                height:         'auto',                  // auto | max | integer
+                minWidth:       null,                    // null | pixel value
+                minHeight:      null,                    // null | pixel value
+                innerScroll:    true,                    // true | false
+                opacity:        .75,                     // float | false
+                margin:         10,                      // integer
+                padding:        10,                      // integer
+                title:          null,                    // string | null
+                className:      null,                    // string | null
+                content:        null,                    // string | element | array | object | function
+                iframe:         null,                    // string | null
+                target:{
+                  id:           null,                    // string | null
+                  auto:         true                     // true | false
+                },
+                ajax:{
+                  url:          null,                    // string | null
+                  jsonTemplate: null,                    // interpolation template string | null
+                  options:      {}                       // default ajax options
+                },
+                close:{
+                  link:         true,                    // true | false
+                  esc:          true,                    // true | false
+                  overlay:      true                     // true | false
+                },
+                afterOpen:      Prototype.emptyFunction, // function
+                afterClose:     Prototype.emptyFunction, // function
+                afterClick:     Prototype.emptyFunction, // function
+                afterIframeLoad:Prototype.emptyFunction  // function
+        },
+        Browser:{
+                IE6:(Prototype.Browser.IE && parseInt(navigator.appVersion) == 4 && navigator.userAgent.toLowerCase().indexOf('msie 6.') != -1)
+        }
+};
+
+Object.extend(Dialogs, {
+        _exec:false,
+        _open:false,
+        _elements:{
+                overlay:['div', 'dialog-overlay', 'fixed'],
+                container:['div', 'dialog-container', 'fixed'],
+                content:['div', 'dialog-content'],
+                loading:['div', 'dialog-loading'],
+                top:['div', 'dialog-top'],
+                bottom:['div', 'dialog-bottom'],
+                title:['span', 'dialog-title'],
+                close:['a', 'dialog-close'],
+                next:['a', null, 'next'],
+                prev:['a', null, 'prev'],
+                curr:['span', null, 'curr']
+        },
+        fix:{
+                scroll:Dialogs.Browser.IE6,
+                select:Dialogs.Browser.IE6
+        },
+        view:function(){
+                var view = document.viewport,
+                    dim  = view.getDimensions(),
+                        data = {width:dim.width, height:dim.height};
+                if(Dialogs.fix.scroll){
+                        var scroll = view.getScrollOffsets();
+                        data.top  = scroll.top;
+                        data.left = scroll.left;
+                }
+                return data;
+        },
+        elm:function(elm){
+                return Dialogs._elements[elm];
+        },
+        load:function(domready){
+                if(!!Dialogs._exec) return;
+                Dialogs._exec = true;
+                var e = Dialogs._elements;
+                for(var x in e){
+                        var d = e[x],
+                            a = {style:'display:none'};
+                        if(d[1]) a['id'] = d[1];
+                        if(d[2]) a['className'] = d[2];
+                        switch(d[0]){
+                                case 'a': a['href'] = 'javascript:;'; break;
+                        }
+                        var el = new Element(d[0], a);
+                        if(Dialogs.Lang[x]) el.update(Dialogs.Lang[x]);
+                        Dialogs._elements[x] = el;
+                }
+                var load = function(){
+                        var e = Dialogs._elements;
+                        $(document.body)
+                        .insert(e['overlay'])
+                        .insert(e['container']
+                                .insert(e['top']
+                                        .insert(e['title'])
+                                        .insert(e['close'])
+                                )
+                                .insert(e['content'])
+                                .insert(e['bottom']
+                                        .insert(e['prev'])
+                                        .insert(e['curr'])
+                                        .insert(e['next'])
+                                )
+                        );
+                        if(Dialogs.Browser.IE6) e['top'].insert(new Element('div', {style:'clear:both'}));
+                };
+                if(!!domready) document.observe('dom:loaded', load);
+                else load.call();
+        },
+        close:function(){
+                [Dialogs.elm('title'), Dialogs.elm('content'), Dialogs.elm('curr')].invoke('update', '');
+                for(var x in Dialogs._elements) Dialogs._elements[x].writeAttribute('style', 'display:none');
+                Dialogs.elm('container').setStyle('left:-99999px;top:-99999px');
+                if(Dialogs.fix.select)
+                        $$('select.dialog-hideselect').invoke('show').invoke('removeClassName', 'dialog-hideselect');
+                Dialogs._open = false;
+        },
+        alert:function(s){
+                var o = new Element('input', {value:Dialogs.Lang.ok, type:'button'}),
+                    a = new Dialog({
+                                className:'alert',
+                                close:{link:false, esc:true},
+                                padding:20,
+                                content:function(){
+                                        o.observe('click', Dialogs.close);
+                                        return [s, '<br /><br />', o];
+                                },
+                                afterOpen:function(){
+                                        o.focus();
+                                }
+                        });
+                a.open();
+        },
+        confirm:function(s, y_call, n_call){
+                var y = new Element('input', {value:Dialogs.Lang.yes, type:'button'}),
+                    n = new Element('input', {value:Dialogs.Lang.no, type:'button'}),
+                    c = new Dialog({
+                                className:'confirm',
+                                close:{link:false},
+                                padding:20,
+                                content:function(){
+                                        y.observe('click', function(){
+                                                if(Object.isFunction(y_call)) y_call();
+                                                else Dialogs.close();
+                                        });
+                                        n.observe('click', function(){
+                                                if(Object.isFunction(n_call)) n_call();
+                                                else Dialogs.close();
+                                        });
+                                        return [s, '<br /><br />', y, n];
+                                },
+                                afterOpen:function(){
+                                        y.focus();
+                                }
+                        });
+                c.open();
+        }
+});
+var Dialog = Class.create();
+Dialog.prototype = {
+        initialize:function(opt){
+                this.opt = Object.extend(Object.clone(Dialogs.Default), opt || {});
+                var c = this.opt.content;
+                if(Object.isFunction(c))
+                        Object.extend(this.opt, {content:c()});
+                c = this.opt.content;
+                if(Object.isString(this.opt.target.id) || Object.isElement(this.opt.target.id)){
+                        var b = $(this.opt.target.id);
+                        Object.extend(this.opt, {content:b.innerHTML});
+                        if(this.opt.target.auto){
+                                var a = /#(.+)$/.exec(window.location);
+                                if(Object.isArray(a) && Object.isString(a[1])){
+                                        a = a[1].split(',').last();
+                                        if(a == b.identify()) this.open.bind(this).delay(1);
+                                }
+                        }
+                }else if(Object.isHash(c))
+                        this.steps = {
+                                i:0,
+                                k:c.keys(),
+                                v:c.values(),
+                                m:c.size()
+                        };
+                this.attachEvents();
+                if(this.opt.autoOpen) this.open();
+        },
+        exec:function(bool){
+                return Dialogs._open == this._open && Dialogs.elm('overlay').visible() && bool;
+        },
+        attachEvents:function(){
+                Event.observe(window, 'resize', this.setDimensions.bindAsEventListener(this));
+                if(Dialogs.fix.scroll)
+                        Event.observe(window, 'scroll', this.setScroll.bindAsEventListener(this));
+                var handles = [];
+                if(Object.isElement(this.opt.handle)) handles.push($(this.opt.handle));
+                else if(Object.isArray(this.opt.handle)) this.opt.handle.each(function(handle){ handles.push($(handle)); });
+                else if(Object.isString(this.opt.handle)) handles = $$(this.opt.handle);
+                handles.invoke('show').invoke('observe', 'click', function(e){
+                        e.stop();
+                        if(Object.isFunction(this.opt.afterClick)) this.opt.afterClick(e);
+                        this.open();
+                }.bindAsEventListener(this));
+                Dialogs.elm('close').observe('click', function(){
+                        if(this.exec(this.opt.close.link)) this.close();
+                }.bindAsEventListener(this));
+                Dialogs.elm('overlay').observe('click', function(){
+                        if(this.exec(this.opt.close.overlay)) this.close();
+                }.bindAsEventListener(this));
+                document.observe('keyup', function(e){
+                        if(this.exec(this.opt.close.esc && (e.which || e.keyCode) == Event.KEY_ESC)) this.close();
+                }.bindAsEventListener(this));
+                if(this.steps){
+                        [Dialogs.elm('prev'), Dialogs.elm('next')].invoke('observe', 'click', this.setSteps.bindAsEventListener(this));
+                        document.observe('keydown', function(e){
+                                var c = e.which || e.keyCode;
+                                if(this.exec((c == Event.KEY_LEFT) || (c == Event.KEY_RIGHT))) this.setSteps(e);
+                        }.bindAsEventListener(this));
+                }
+        },
+        setAuto:function(){
+                this.auto = {max:0};
+                var t = Dialogs.elm('title'), c = Dialogs.elm('close');
+                [t,c].invoke('setStyle', 'float:none');
+                $w('top content bottom').each(function(b){
+                        var e = Dialogs.elm(b);
+                        if(!e.visible()) this.auto[b] = {width:0,height:0};
+                        else{
+                                e.writeAttribute('style', 'display:inline;float:left;overflow:visible;white-space:nowrap');
+                                this.auto[b] = e.getDimensions();
+                                e.writeAttribute('style', 'overflow:hidden');
+                                if(b == 'content') this.auto[b].width += (parseInt(this.opt.padding) || 0) * 2;
+                                if(this.auto[b].width > this.auto.max) this.auto.max = this.auto[b].width;
+                        }
+                }.bind(this));
+                t.setStyle('float:left');
+                c.setStyle('float:right');
+        },
+        setDimensions:function(){
+                if(!this.exec(true)) return;
+                this.setAuto();
+                var a = this.auto,
+                    d = Dialogs.view(),
+                    t = Dialogs.elm('content'),
+                        c = Dialogs.elm('container'),
+                    o = {
+                          m:((parseInt(this.opt.margin) || 0) * 2),
+                          p:((parseInt(this.opt.padding) || 0) * 2),
+                          t:a.top.height,
+                          b:a.bottom.height
+                        },
+                    m = {width:(d.width-o.m), height:(d.height-o.m-o.t-o.b)},
+                    h = this.opt.height,
+                        w = this.opt.width,
+                    x = y = false;
+                if(Object.isNumber(w)) w += o.p;
+                if(w == 'max') w = m.width;
+                if(!Object.isNumber(w)) w = a.max;
+                if(w < (this.opt.minWidth || 0)) w = this.opt.minWidth || 0;
+                if(w > m.width){ w = m.width; x = true }
+                t.setStyle('width:'+(w-o.p)+'px;height:auto');
+                if(Object.isNumber(h)) h += o.p;
+                if(h == 'max') h = m.height;
+                if(!Object.isNumber(h)) h = t.getHeight()+o.p;
+                if(h < (this.opt.minHeight || 0)) w = this.opt.minHeight || 0;
+                if(h > m.height){ h = m.height; y = true; } 
+                t.setStyle('height:'+(h-o.p)+'px;padding:'+(o.p/2)+'px');
+//              dh: commented out to seperate overflow-x and overflow-y
+//              if(this.opt.innerScroll && (x || y)) t.setStyle('overflow:scroll');
+                if(this.opt.innerScroll && x) t.setStyle('overflow-x:scroll');
+                if(this.opt.innerScroll && y) t.setStyle('overflow-y:scroll');
+                var s = {w:w,h:(h+o.t+o.b)};
+                c.setStyle('width:'+s.w+'px;height:'+s.h+'px;top:50%;left:50%;margin:-'+parseInt(s.h/2)+'px 0 0 -'+parseInt(s.w/2)+'px');
+                if(Dialogs.fix.scroll){
+                        Dialogs.elm('overlay').setStyle('width:'+d.width+'px;height:'+d.height+'px');
+                        this.setScroll();
+                }
+        },
+        setScroll:function(){
+                if(!this.exec(true)) return;
+                var v = Dialogs.view(),
+                        c = Dialogs.elm('container'),
+                        d = c.getDimensions(),
+                        t = v.top + parseInt((v.height - d.height) / 2),
+                        l = v.left + parseInt((v.width - d.width) / 2);
+                c.setStyle('margin:0;top:'+t+'px;left:'+l+'px');
+                Dialogs.elm('overlay').setStyle('margin:'+v.top+'px 0 0 '+v.left+'px');
+        },
+        setLoad:function(){
+                var l = Dialogs.elm('loading').show(),
+                    t = Dialogs.elm('content'),
+                    b = t.down('#'+l.identify());
+                if(!Object.isElement(b)) t.insert(l);
+        },
+        setAjax:function(){
+                this.setLoad();
+                var o = this.opt.ajax.options || {},
+                    c = (o.onComplete && Object.isFunction(o.onComplete) ? o.onComplete : null),
+                    a = function(t){
+                                var tpl = this.opt.ajax.jsonTemplate;
+                                if(t.responseJSON && Object.isString(tpl)) Dialogs.elm('content').update(tpl.interpolate(t.responseJSON));
+                                else Dialogs.elm('content').update(t.responseText || '');
+                                this.setImages();
+                                this.setDimensions();
+                                if(Object.isFunction(c)) c(t);
+                        }.bind(this);
+                Object.extend(o, {onComplete:a});
+                new Ajax.Request(this.opt.ajax.url, o);
+        },
+        setIframe:function(){
+                this.setLoad();
+                var f = new Element('iframe', {src:this.opt.iframe, frameborder:0, id:'dialog-iframe'});
+                Dialogs.elm('content').insert(f);
+                f.observe('load', function(){
+                        Dialogs.elm('loading').hide();
+                        f.setStyle('width:100%;height:100%');
+                        this.setDimensions();
+                        if(Object.isFunction(this.opt.afterIframeLoad)) this.opt.afterIframeLoad();
+                }.bindAsEventListener(this));
+        },
+        setSteps:function(ev){
+                if(!this.exec(true)) return;
+                var m = this.steps.m,
+                    s = false,
+                        n = Dialogs.elm('next'),
+                        p = Dialogs.elm('prev');
+                if((ev.which || ev.keyCode) == Event.KEY_RIGHT || ev.element().hasClassName('next')){
+                        if(this.steps.i < (m - 1)) s = true;
+                        if(s) ++this.steps.i;
+                        if(((this.steps.i + 1) >= m) && n.visible()) n.hide();
+                        if(((this.steps.i - 1) >= 0) && !p.visible()) p.show();
+                }else{
+                        if(this.steps.i > 0) s = true;
+                        if(s) --this.steps.i;
+                        if(((this.steps.i - 1) < 0) && p.visible()) p.hide();
+                        if(((this.steps.i + 1) <= m) && !n.visible()) n.show();
+                }
+                if(s) this.setContent();
+        },
+        setContent:function(){
+                var c = this.opt.content,
+                    t = Dialogs.elm('content');
+                t.update('');
+                if(Object.isString(c) || Object.isElement(c)) t.insert(c);
+                else if(Object.isArray(c)) c.each(function(b){ t.insert(b); });
+                else if(Object.isHash(c)){
+                        var b = Dialogs.elm('bottom');
+                        t.update('').insert(this.steps.v[this.steps.i]);
+                        Dialogs.elm('curr').update(this.steps.k[this.steps.i]);
+                        if(!b.visible()) b.show().childElements().invoke('show');
+                        if(this.steps.i <= 0) Dialogs.elm('prev').hide();
+                        if(this.steps.i >= (this.steps.m - 1)) Dialogs.elm('next').hide();
+                }else if(Object.isString(this.opt.ajax.url)) this.setAjax();
+                else if(Object.isString(this.opt.iframe)) this.setIframe();
+                this.setImages();
+                this.setDimensions.bind(this).defer();
+        },
+        setImages:function(){
+                Dialogs.elm('content').select('img').each(function(el){
+                        el.onload = function(){
+                                this.setDimensions();
+                        }.bind(this);
+                }.bind(this));
+        },
+        open:function(){
+                if(Dialogs.fix.select)
+                        $$('select').select(function(el){ return el.visible(); }).invoke('hide').invoke('addClassName', 'dialog-hideselect');
+                if(Object.isString(this.opt.title) || this.opt.close.link){
+                        if(Object.isString(this.opt.title)) Dialogs.elm('title').show().update(this.opt.title);
+                        if(this.opt.close.link) Dialogs.elm('close').show();
+                        else Dialogs.elm('close').hide();
+                        Dialogs.elm('top').show();
+                }else Dialogs.elm('top').hide();
+                var o = Dialogs.elm('overlay'), c = Dialogs.elm('container'), t = Dialogs.elm('content');
+                [o, c, t].invoke('show');
+//              dh: commented out background so it can be set via class
+//              o.setOpacity(this.opt.opacity || 1).setStyle({background:this.opt.background[0] || '#000'});
+                o.setOpacity(this.opt.opacity || 1);
+//              dh: commented out background so it can be set via class
+//              c.writeAttribute('style', 'left:-99999px;top:-99999px;background:'+(this.opt.background[1] || '#fff'));
+                c.writeAttribute('style', 'left:-99999px;top:-99999px;');
+                t.writeAttribute('class', this.opt.className || '');
+                Dialogs._open = new Date().getTime();
+                this._open = Dialogs._open;
+                this.setContent();
+                if(Object.isFunction(this.opt.afterOpen)) this.opt.afterOpen();
+        },
+        close:function(){
+                Dialogs.close();
+                if(Object.isFunction(this.opt.afterClose)) this.opt.afterClose();
+        }
+};

modules/_shared/tmpl/default/header.php

@@ -70 +70 @@
     </script>
 
     <link rel="stylesheet" type="text/css" href="js/prototip/prototip.css">
+    <link rel="stylesheet" type="text/css" href="js/dialog/dialog.css">
     <link rel="stylesheet" type="text/css" href="<?php echo skin_url ?>/style.css">
     <link rel="stylesheet" type="text/css" href="<?php echo skin_url ?>/header.css">
     <link rel="stylesheet" type="text/css" href="<?php echo skin_url ?>/menus.css">
@@ -84 +85 @@
 
     <script type="text/javascript" src="js/prototype.js"></script>
     <script type="text/javascript" src="js/prototip/prototip.js"></script>
+    <script type="text/javascript" src="js/dialog/dialog.js"></script>
 
     <script type="text/javascript" src="js/utils.js"></script>
     <script type="text/javascript" src="js/AC_OETags.js"></script>

new file modules/tv/lookup_metadata.php

@@ +1 @@
+<?php
+/**
+ * Does a query against the backend to look up metadata for a show
+ * returns the result as JSON
+ *
+ * @license     GPL
+ *
+ * @package     MythWeb
+ * @subpackage  TV
+ *
+/**/
+
+    header('Content-Type: application/json');
+
+    $url = "Video/LookupVideo";
+    $args = array( 
+                   'Title'        => $_REQUEST['title'],
+                   'Subtitle'     => $_REQUEST['subtitle'],
+                   'Inetref'      => $_REQUEST['inetref'],
+                   'Season'       => $_REQUEST['season'],
+                   'Episode'      => $_REQUEST['episode'],
+                   'GrabberType'  => $_REQUEST['grabbertype']);
+
+    echo MythBackend::find()->httpRequestAsJson($url, $args);

modules/tv/tmpl/default/_advanced_options.php

@@ -24 +24 @@
                         );
     }
 
+    // Tries to populate the inetref, season and episode fields
+    // by doing a metadata lookup against the backend.  If multiple
+    // results are return displays a dialog to let the user choose
+    // the appropriate show
+    function lookupMetadata(success, failure) {
+        ajax_add_request();
+
+        new Ajax.Request('<?php echo root_url ?>tv/lookup_metadata',
+                         {
+                            parameters: {
+                                              'title'    : "<?php echo $schedule->title ?>",
+                                              'subtitle' : "<?php echo $schedule->subtitle ?>",
+                                              'inetref'  : $("inetref").value,
+                                              'season'   : $("season").value,
+                                              'episode'  : $("episode").value
+                                        },
+                            asynchronous: true,
+                            method: 'get',
+                            onSuccess: success,
+                            onFailure: failure
+                         }
+                        );
+    }
+
+    // callback for when metadata is returned for this show
+    function onMetadata(transport) {
+        ajax_remove_request();
+
+        // make sure we got valid date
+        if (!transport || !transport.responseJSON || !transport.responseJSON.VideoLookupList) {
+           messageDialog("<?php echo t("Metadata Lookup Error")?>", 
+                         "<?php echo t("Server returned invalid data when attempting to retrieve metadata.")?>");
+        }
+
+        var list = transport.responseJSON.VideoLookupList;
+
+        // display an error if there's no data
+        if (list.Count == 0) {
+            messageDialog("<?php echo t("Metadata Lookup")?>", "<?php echo t("No metadata results found.")?>");
+
+        // populate the data immediately if there is one result
+        } else  if (list.Count == 1) {
+          updateMetadata(list.VideoLookups[0]);
+
+        // if we can pick the right item from the list then use it
+        // otherwise display a dialog for the user to choose which result
+        } else {
+           var item = guessItem(list);
+           if (item) {
+                updateMetadata(item);
+           } else {
+                multipleResultDialog(list);
+           }
+        }
+    }
+
+    // tries to find the correct item in list based off of the TMSref
+    // if we can find it, cool, if not return null
+    function guessItem(list) {
+        var tmsRef = "<?php echo $schedule->seriesid ?>";
+        for (var i=0; i < list.VideoLookups.length; i++) {
+            var item = list.VideoLookups[i];
+            if (tmsRef && item.TMSRef == tmsRef) {
+               return item;
+            }
+        }
+        return null;
+    }
+
+    // updates the inetref, season & episode values on the page
+    // optionally creates or updates a "metdata home page" link
+    // in the "More" section of the page
+    function updateMetadata(item) {
+         $("inetref").value = item.InetRef;
+         $("season").value = item.Season;
+         $("episode").value = item.Episode;
+
+         // if the item has a real HomePage then update it
+         if (!!item.HomePage) {
+             updateHomePage(item);
+
+         // otherwise do a lookup again
+         } else {
+             lookupMetadata(onHomePage, onMetadataFailure);
+         }
+
+    }
+
+    function updateHomePage(item) {
+         var homePage = $("home-page");
+
+         // if this item doesn't have a home page link then
+         // remove the existing link or ignore
+         if (!item.HomePage) {
+             homePage && Element.remove(homePage);
+             return;
+         }
+
+         // update the link or create it if this item does have a home page
+         if (homePage) {
+              homePage.href = item.HomePage;
+         } else {
+              $($$(".x-links")[0].children[1]).insert({top: 
+                  new Element("a", {href: item.HomePage, target: "_new", id: "home-page"}).update(item.Title + " " + "<?php echo t("Metadata Home Page") ?>")});
+         }
+
+    }
+
+    function onHomePage(transport) {
+        ajax_remove_request();
+
+        var fakeItem = {HomePage: ""};
+
+        // make sure we got valid data; if not ignore
+        if (!transport || !transport.responseJSON || !transport.responseJSON.VideoLookupList) {
+            updateHomePage(fakeItem);
+            return;
+        }
+
+        var list = transport.responseJSON.VideoLookupList;
+
+        // ignore if there's no data
+        if (list.Count == 0) {
+            updateHomePage(fakeItem);
+            return;
+
+        // populate the data immediately if there is one result
+        } else  if (list.Count == 1) {
+           updateHomePage(list.VideoLookups[0]);
+
+        // if we can pick the right item from the list then use it
+        // otherwise hich result
+        } else {
+           var item = guessItem(list);
+           if (item) {
+                updateMetadata(item);
+           } else {
+                updateHomePage(fakeItem);
+           }
+        }
+
+
+    }
+
+    // displays a dialog with an image and title of each possible show
+    // if the user clicks on one of them then populates the metadata in the page
+    function multipleResultDialog(list) {
+        // parent div for the result
+        var parent = new Element("div", {"class": "multiple-metadata"});
+
+        // add all of the results
+        parent.insert(generateResults(list));
+
+        // add a cancel "button" to exit without choosing an option
+        var a = new Element("a", {}).update("<?php echo t("Cancel") ?>");
+        Event.observe(a, "click", function() { Dialogs.close(); });
+        var d = new Element("div", {"class": "commands"});
+        d.insert(a);
+        parent.insert(d);
+
+        // display the dialog
+        new Dialog({
+                opacity: 0.9,
+                title: "<?php echo t("Select the correct show")?>",
+                content: parent
+                }).open();
+    }
+
+    // returns a div with a list of all of the items neatly formatted
+    function generateResults(list) {
+        var div = new Element("div", {"class": "metadata-list"});
+
+        for (var i=0; i < list.VideoLookups.length; i++) {
+            div.insert(generateResultsItem(list.VideoLookups[i]));
+        }
+
+       return div;
+    }
+
+    // returns a div for a single result
+    // includes hover and click event handlers
+    function generateResultsItem(item) {
+        var div = new Element("div", {"class": "metadata-item"});
+        Event.observe(div, "mouseover", function(e) { this.addClassName("hover");});
+        Event.observe(div, "mouseout", function(e) { this.removeClassName("hover");});
+        Event.observe(div, "click", function(e) { updateMetadata(item); Dialogs.close();});
+        var img = generateItemImg(item);
+        div.insert(img);
+        var title = new Element("div", {"class": "title"});
+        var titleString = item.Title;
+        if (item.Year && item.Year > 0) {
+            var suffix = " (" + item.Year + ")";
+            titleString = titleString.endsWith(suffix) ? titleString : titleString + suffix;
+        }
+ 
+        title.update(titleString);
+        div.insert(title);
+
+        var desc = new Element("div", {"class": "description"});
+        var descString = item.Description.length > 450 ? item.Description.substring(0, 450) + "..." : item.Description;
+        desc.update(descString);
+        div.insert(desc);
+
+        return div;
+    }
+
+    // generates an image or empty div based on if there is 
+    // any thumbnail art work for this item
+    function generateItemImg(item) {
+        if (item.Artwork && item.Artwork.length) {
+             var art = item.Artwork[0];
+             var thumbUrl = art.Thumbnail;
+            
+             // hack to allow proxying of ttvdb.com images since they don't allow hot linking
+             if (<?php echo $_SERVER['HTTPS'] == 'on' ? "false" : "true"?> &&  thumbUrl.startsWith("http://www.thetvdb.com")) {
+                 thumbUrl = "<?php echo root_url ?>tv/ttvdb_proxy?url=" + thumbUrl.substring(22);
+             }
+
+             return new Element("img", {src: thumbUrl, "class": art.Type});
+        }
+        return new Element("div", {"class": "no-art"});
+    }
+
+    // callback for failure contacting the server
+    function onMetadataFailure(response) {
+        ajax_remove_request();
+        messageDialog("<?php echo t("Metadata Lookup Error")?>", "<?php echo t("Error contacting server to retrieve metadata.")?>");
+    }
+
+    // displays a dialog with a message in it and an OK button
+    function messageDialog(title, msg) {
+        $("metadata-message").update(msg);
+        new Dialog({
+                opacity: 0.9,
+                title: title,
+                target:{
+                    id:'message-dialog',
+                    auto:true
+                }
+                }).open();
+
+    }
+
+    // Hook to start up the Dialog JS
+    Dialogs.load();
+
 // -->
 </script>
-
             <h3><?php echo t('Advanced Options') ?>:</h3>
             (<?php
-                echo '<a href="#" onclick="toggle_advanced(false); return false;" id="hide_advanced"';
+                echo '<a onclick="toggle_advanced(false); return false;" id="hide_advanced"';
                 if (!$_SESSION['tv']['show_advanced_schedule'])
                     echo ' style="display: none"';
                 echo '>', t('Hide'), '</a>',
@@ -133 +378 @@
                 <dt><?php echo t('Preferred Input') ?>:</dt>
                 <dd><?php input_select($schedule->prefinput, 'prefinput') ?></dd>
                 <dt><?php echo t('Internet Reference #') ?>:</dt>
-                <dd><input type="text" name="inetref" value="<?php echo html_entities($schedule->inetref) ?>"></dd>
+                <dd class="commands"><input id="inetref" class="inetref" type="text" name="inetref" value="<?php echo html_entities($schedule->inetref) ?>"><a onclick="lookupMetadata(onMetadata, onMetadataFailure); return false;"><?php echo t("Look up Metadata")?></a></dd>
                 <dt><?php echo t('Season') ?>:</dt>
-                <dd><input type="text" class="quantity" name="season" value="<?php echo html_entities($schedule->season) ?>"></dd>
+                <dd><input type="text" id="season" class="quantity" name="season" value="<?php echo html_entities($schedule->season) ?>"></dd>
                 <dt><?php echo t('Episode') ?>:</dt>
-                <dd><input type="text" class="quantity" name="episode" value="<?php echo html_entities($schedule->episode) ?>"></dd>
+                <dd><input type="text" id="episode" class="quantity" name="episode" value="<?php echo html_entities($schedule->episode) ?>"></dd>
                 <dt><label for="autometadata"><?php echo t('Look up Metadata') ?>:</label></dt>
                 <dd><input type="checkbox" class="radio" id="autometadata" name="autometadata"<?php if ($schedule->autometadata) echo ' CHECKED' ?> value="1"></dd>
                 <dt><label for="autocommflag"><?php echo t('Auto-flag commercials') ?>:</label></dt>
@@ -167 +412 @@
                 <dd><input type="text" class="quantity" name="endoffset" value="<?php echo html_entities($schedule->endoffset) ?>">
                     <?php echo t('minutes') ?></dd>
             </dl>
+
+<div style="display: none;" id="message-dialog">
+   <div id="metadata-message"></div>
+   <div class="commands">
+     <a onclick="Dialogs.close(); return false;"><?php echo t('OK') ?></a>
+   </div>
+</div>

modules/tv/tmpl/default/detail.php

@@ -94 +94 @@
                          parameters: {exit: 1,
                                       host: host,
                                       chanid: chanid,
-                                      starttime: starttime,
+                                      starttime: starttime
                                       }
                         }
                         );
     }
 
+    // Tries to find metadata for the current item
+    // If found adds a "Home Page" link to the page
+    function detailLookupMetadata() {
+        new Ajax.Request('<?php echo root_url ?>tv/lookup_metadata',
+                         {
+                            parameters: {
+                                              'title'    : "<?php echo $program->title ?>",
+                                              'subtitle' : "<?php echo $program->subtitle ?>",
+                                              'inetref'  : "<?php echo $program->inetref ?>",
+                                              'season'   : "<?php echo $program->season ?>",
+                                              'episode'  : "<?php echo $program->episode ?>"
+                                        },
+                            asynchronous: true,
+                            method: 'get',
+                            onSuccess: detailOnMetadata,
+                            onFailure: detailOnMetadataFailure
+                         }
+                        );
+
+    }
+
+    // if metadata is found inserts a home page link behind the inetref value
+    function detailOnMetadata(transport) {
+        var list = transport.responseJSON.VideoLookupList;
+
+        // if there are 0 or > 1 entry then we just ignore it
+        if (list.Count == 1 && !!list.VideoLookups[0].HomePage) {
+            $("metadata-home-page").insert(
+               new Element("a", {href: list.VideoLookups[0].HomePage, target: "_new"}).update("<?php echo t("Metadata Home Page")?>"));
+        }
+
+    }
+
+    // silently fail (no need to disrupt the page)
+    function detailOnMetadataFailure(transport) {
+    } 
+
+    // hook to look up data once the page has started
+    detailLookupMetadata();
 // -->
 </script>
 
@@ -214 +250 @@
             if (strlen($program->inetref) > 0) {
         ?><tr class="x-extras">
             <th><?php echo t('Internet Reference #') ?>:</th>
-            <td><?php echo $program->inetref ?></td>
+            <td><?php echo $program->inetref ?> <span class="commands" id="metadata-home-page"></span></td>
         </tr><?php
             }
             if ($program->season > 0) {

modules/tv/tmpl/default/recorded.php

@@ -76 +76 @@
 </tr>
 </table>
 </form>
-
 <table id="recorded_list" border="0" cellpadding="0" cellspacing="0" class="list small">
 <tr class="menu">
     <td class="list"<?php if ($group_field) echo ' colspan="2"' ?>>&nbsp;</td>

new file modules/tv/ttvdb_proxy.php

@@ +1 @@
+<?php
+/**
+ * Proxies requests to ttvdb.com so that we can grab images from their site
+ * Tries to avoid being a total open proxy by only proxying to thetvdb.com
+ *
+ * @license     GPL
+ *
+ * @package     MythWeb
+ * @subpackage  TV
+ *
+/**/
+
+    header('Content-Type: image/jpg');
+
+    echo @file_get_contents("http://www.thetvdb.com" . $_REQUEST['url']);

skins/default/style.css

@@ -235 +235 @@
 #feed_buttons a {
     padding-right:      1em;
 }
+
+#dialog-overlay {
+    background-color:   #506090;
+}
+
+#dialog-top {
+    background-color:   #203670;
+    border:             1px solid #203670;
+}
+
+#dialog-title {
+    color:              white;
+
+}
+
+#dialog-content {
+    background-color:   #265990;
+    text-align:         center;
+}

skins/default/tv_detail.css

@@ -270 +270 @@
     color:              #F0F000;
     text-decoration:    underline;
 }
+
+#metadata-home-page {
+    margin-left:        20px;
+}

skins/default/tv_schedule.css

@@ -56 +56 @@
     width:     18em;
 }
 
+#schedule input.inetref {
+    width:         5em !important;
+    margin-right:  20px;    
+}
+
 /* A special subclass for options with extra-long input fields */
 #schedule .x-options dl.x-long input, .x-options dl.x-long textarea {
     width:     32em;
@@ -73 +78 @@
     padding:        .5em 0 1em 0;
 }
 
+/* Metadata specific classes */
+
+#metadata-message {
+    margin-bottom:      10px;
+}
+
+.multiple-metadata {
+}
+
+.metadata-item {
+    width:              500px;
+    min-height:         150px;
+    margin:             0px 15px 10px 0px;
+    border:             1px solid white;
+}
+
+.metadata-item.hover {
+   background-color:    white;
+   cursor:              pointer;
+   color:               #265990;
+}
+
+.metadata-item img {
+   float:               left;
+}
+
+.metadata-item img.coverart {
+   height:              150px;
+   width:               100px;
+   margin-right:        10px;
+}
+
+.metadata-item img.fanart {
+   height:              150px;
+   width:               100px;
+   margin-right:        10px;
+}
+
+.metadata-item img.banner {
+   height:              55px;
+   width:               300px;
+   margin:              5px auto -10px;
+   float:               none;
+}
+
+.metadata-item .no-art {
+   height:              2em;
+}
+
+
+.metadata-item .title {
+   font-size:           2em;
+   font-weight:         bold;
+   padding-top:         .5em;
+}
+
+.metadata-item .description {
+   padding:            0px 10px 10px;
+   text-align:         left;
+}