Move the dynamic list of roles from the fix height cards into the flexible height popup.

Tweaks to order of stuff and fix issue where images to the right flowed badly on different height images on the left on the person view
Change darker popup title for improve visual contrast
Start of fix scale image

gui/slick/interfaces/default/cast_person.tmpl

@@ -45,6 +45,7 @@
 #person-content .thumb{display:block}
 #person-content > .main-image{margin-bottom:19px}
 #person-content > .cast .cast-bg{height:300px; margin:0 auto; background:url(/images/poster-person.jpg) center center no-repeat}
+#character-content{margin-left:235px}
 </style>
 <%
 def param(visible=True, rid=None, cache_person=None, cache_char=None, person=None, role=None, tvid_prodid=None, thumb=None, oid=None, pid=None):
@@ -64,10 +65,6 @@ def param(visible=True, rid=None, cache_person=None, cache_char=None, person=Non
 %>
 	<div id="person">
 		<div id="person-content">
-			<div class="main-image cast">
-				<a class="thumb" href="$sbRoot/$param(rid=$person.ref_id(), cache_person=True, thumb=0, oid=$person.id)" rel="dialog"><img src="$sbRoot/$param(False, rid=$person.id, cache_person=True)" class="cast-bg"></a>
-			</div>
-
 			<div class="intro">#slurp
 #set $gender = ''
 #if $PersonGenders.female == $person.gender#
@@ -78,6 +75,10 @@ def param(visible=True, rid=None, cache_person=None, cache_char=None, person=Non
 				<h2><span class="name">$person.name</span>#if $age #<span class="age">($age)</span>#end if##if $gender #<span class="gender" title="Biological gender">$gender</span>#end if##if $person.deathday # &dagger;#end if#</h2>
 			</div>
 
+			<div class="main-image cast">
+				<a class="thumb" href="$sbRoot/$param(rid=$person.ref_id(), cache_person=True, thumb=0, oid=$person.id)" rel="dialog"><img src="$sbRoot/$param(False, rid=$person.id, cache_person=True)" class="cast-bg"></a>
+			</div>
+
 <style>
 #character-content .cast-bg{display:block; background-color:#181818; border:1px solid #181818; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px}
 #character-content .cast .cast-bg{height:200px; background:url(/images/poster-person.jpg) center center no-repeat}
@@ -98,7 +99,7 @@ def param(visible=True, rid=None, cache_person=None, cache_char=None, person=Non
         #if not $section_header
             #set $section_header = True
 			<div id="character-content">
-				<div style="margin:40px 0 7px">is known in your show list as,</div>
+				<div style="margin:0 0 7px">is known in your show list as,</div>
 		#end if
 
 				<div class="role-panel">

gui/slick/interfaces/default/home_browseShows.tmpl

@@ -24,7 +24,10 @@
 #set sg_root = $getVar('sbRoot', WEB_ROOT)
 ##
 #import os.path
+#set global $inc_ofi = True
 #include $os.path.join($sg_str('PROG_DIR'), 'gui/slick/interfaces/default/inc_top.tmpl')
+<script type="text/javascript" src="$sbRoot/js/cast.js?v=$sbPID"></script>
+
 <script>
 	var config = {
 		homeSearchFocus: #echo ['!1','!0'][$sg_var('HOME_SEARCH_FOCUS', True)]#,
@@ -63,7 +66,7 @@
 		});
 	});
 
-$(document).ready(function(){
+$(function() {
 	// initialise combos for dirty page refreshes
 	$('#showsort').val('#end raw#$saved_showsort_view#raw#');
 
@@ -288,6 +291,16 @@ $(document).ready(function(){
 				input.focus();
 		}
 	});
+
+	objectFitImages();
+
+	$('#content').find('img.browse-image').each(function(i, oImage){
+		removeImageBackground(oImage);
+	});
+
+	$('#content').find('img.browse-image').each(function (i, oImage){
+		scaleImage(oImage);
+	});
 });
 
 #end raw
@@ -505,7 +518,7 @@ $(document).ready(function(){
 		<div class="show-card-inner">
 			<div class="browse-image">
 				<a class="browse-image" href="<%= anon_url(this_show['url_src_db']) %>" target="_blank"
-					title="<span style='color: rgb(66, 139, 202)'>$re.sub(r'(?m)\s+\((?:19|20)\d\d\)\s*$', '', $title_html)</span>
+					title="<span style='color: #226baa'>$re.sub(r'(?m)\s+\((?:19|20)\d\d\)\s*$', '', $title_html)</span>
 
 					#if $this_show['genres']#<br><div style='font-weight:bold'>(<em>$this_show['genres']</em>)</div>#end if#
 					#if $kwargs and $use_returning#<span style='display:block;clear:both;font-weight:bold;font-size:0.9em;color:#888'><em>Season $this_show['episode_season'] return#echo ('s', 'ed')[$this_show['return_past']]# $this_show['str_returning']</em></span>#end if#
@@ -518,6 +531,13 @@ $(document).ready(function(){
 						<span style='font-size:0.9em;color:#888#if $this_show.get('country')#;padding-left:6px#end if#'><em>Language:#if not $this_show.get('language_img')#&nbsp;$this_show.get('language')#else#<img style='margin:0 0 2px 4px;width:16px;height:11px;vertical-align:middle' title='${this_show['language']}' src='$sbRoot/images/flags/${$this_show['language'].lower()}.png' width='16' height='11'>#end if#</em></span>
             #end if
 					</p>
+        #end if
+        #if $this_show.get('p_chars')
+					<p>
+            #for $char in $this_show['p_chars']
+						<span style='display:block;clear:both;font-weight:bold;font-size:0.9em;color:#393'>as $char[0]#if $RoleTypes.ActorMain != $char[1]# ($char[2]/$char[3] eps)#end if#</span>
+            #end for
+					</p>
         #end if
 					<p style='margin:0 0 2px'>#echo re.sub(r'([,\.!][^,\.!]*?)$', '...', re.sub(r'([!\?\.])(?=\w)', r'\1 ', $overview)).replace('.....', '...')#</p>
 					<p>#if $this_show['str_premiered']#<span style='font-weight:bold;font-size:0.9em;color:#888'><em>#if 'Trakt' == $browse_type and $kwargs and 'returning' == $mode#Air#else#First air#end if##echo ('s', 'ed')[$this_show['started_past']]#: $this_show['str_premiered']</em></span>#end if#
@@ -538,13 +558,6 @@ $(document).ready(function(){
 			<div class="show-title">
 				#echo ((re.sub(r'^((?:A(?!\s+to)n?)|The)\s(\w)', r'<span class="article">\1</span> \2', $this_show['title']), $this_show['title'])[$sg_var('SORT_ARTICLE')], '<span>&nbsp;</span>')['' == $this_show['title']]#
 			</div>
-			#if $this_show.get('p_chars')
-				<div class="show-title">
-					#for $char in $this_show['p_chars']
-						<div>as $char[0]#if $RoleTypes.ActorMain != $char[1]# ($char[2]/$char[3] eps)#end if#</div>
-					#end for
-				</div>
-			#end if
         #if 'Ani' not in $browse_type
 			<a class="show-toggle-hide" href="$sg_root/add-shows/show-toggle-hide?ids=$show_id" title="#echo ('H', 'Unh')[any($hide)]#ide"><i class="sgicon-delete"></i></a>
         #end if