Allowed image tags in details, centered details window properly

details.php

@@ -1,17 +1,57 @@
 <?php
+
+function clean_tag_content($text) {
+    return htmlentities($text, ENT_COMPAT | ENT_HTML5 | ENT_SUBSTITUTE, 'ISO-8859-1');
+}
+
+function clean_html($html) {
+    $html = preg_replace('/\s+/', ' ', $html);
+
+    $in_tag = false;
+    $stack = '';
+    $cleaned = '';
+
+    for ($i = 0, $l = strlen($html); $i < $l; $i++) {
+        switch ($html[$i]) {
+        case '<':
+            $in_tag = true;
+            $cleaned .= clean_tag_content($stack) . '<';
+            $stack = '';
+            break;
+        case '>':
+            $in_tag = false;
+            $cleaned .= '>';
+            break;
+        default:
+            if ($in_tag)
+                $cleaned .= $html[$i];
+            else
+                $stack .= $html[$i];
+        }
+    }
+
+    $cleaned .= $stack;
+
+    return $cleaned;
+}
+
+// Fetch details page
 assert(isset($_GET['id']));
 assert(is_numeric($_GET['id']));
 $url = 'http://www.tvgids.nl/programma/' . $_GET['id'];
 $page = file_get_contents($url);
 
+// Parse detailed description, preserving a selected set of HTML tags
 preg_match('/<div\s+id="prog-content">\s*(.*?)\s*<div\s+class="prog-functionbar">/s', $page, $m1);
 assert($m1);
-$description = strip_tags($m1[1], '<p><strong><em><b><i><font><a><span>');
+$description = strip_tags($m1[1], '<p><strong><em><b><i><font><a><span><img>');
 $description = str_replace('showVideoPlaybutton()', '', $description);
-$description = preg_replace('/\s+/', ' ', $description);
-$description = htmlentities($description, ENT_COMPAT | ENT_HTML5 | ENT_SUBSTITUTE, 'ISO-8859-1');
-$description = str_replace(array('&lt;', '&gt;', '&sol;'), array('<', '>', '/'), $description);
+$description = clean_html($description);
+//$description = preg_replace('/\s+/', ' ', $description);
+//$description = htmlentities($description, ENT_COMPAT | ENT_HTML5 | ENT_SUBSTITUTE, 'ISO-8859-1');
+//$description = str_replace(array('&lt;', '&gt;', '&sol;'), array('<', '>', '/'), $description);
 
+// Parse properties list
 preg_match('/<ul\s+id="prog-info-content-colleft">\s*(.*?)\s*<\/ul>/s', $page, $m2);
 assert($m2);
 preg_match_all('/<li><strong>(\w+):<\/strong>(.*?)<\/li>/', $m2[1], $m3);
@@ -21,4 +61,5 @@ foreach ($m3[1] as $i => $name)
     $properties[] = array('name' => $name, 'value' => $m3[2][$i]);
 
 echo json_encode(compact('description', 'properties'), JSON_UNESCAPED_SLASHES);
+
 ?>

guide.coffee

@@ -221,6 +221,10 @@ ProgramDetailsView = Backbone.View.extend(
                     $('#loading-screen').hide()
                     @$el.show()
                     @$('.content').html(@template(_.extend(id: id, data)))
+
+                    # Vertically align in middle
+                    top = @$('.content').outerHeight() / 2
+                    @$('.content').css(marginTop: "-#{top}px")
             )
         else
             @$el.hide()

style.sass

@@ -252,7 +252,8 @@ $loader-size: 66px
     margin: (-$loader-size / 2) 0 0 (-$loader-size / 2)
     background: url("loading.gif") no-repeat left top
 
-$details-width: 480px
+$details-width: 500px
+$details-initial-offset: 150px
 
 .program-details .content
     position: absolute
@@ -260,12 +261,15 @@ $details-width: 480px
     top: 50%
     left: 50%
     width: $details-width
-    margin: -150px 0 0 (-$details-width / 2)
+    margin: -$details-initial-offset 0 0 (-$details-width / 2)
     border-radius: 6px
     padding: 10px 15px
     font: 12px/18px Helvetica
     box-shadow: 0 0 7px 5px #0f0f0f
 
+    *
+        max-width: $details-width
+
     .properties
         padding-left: 15px
         margin-top: 1px