Further updates to VideoList UI. Search results styled to match new elgg list style. Videos from search now play in popup modal with screen greyed out. Individual video page now has edit and delete, breadcrumbs, latest comments etc..

8 files changed, 171 insertions, 222 deletions

diff --git a/views/default/forms/browsetube.php b/views/default/forms/browsetube.php
index 52c8145a0..7d91d8f02 100644
--- a/views/default/forms/browsetube.php
+++ b/views/default/forms/browsetube.php
@@ -38,35 +38,24 @@ if(isset($confirm_action) && ($confirm_action == 'search_video')) {
 	}
 }
 
-//$body = '<div class="videolist-content">';
 //Load youtube menu
-$body .= "<br /><div class=\"elgg_horizontal_tabbed_nav\">";
-$body .= 		"<ul id=\"videonav\">";
-$body .= 			"<li class=\"active\" id=\"YT\">";
+$body .= "<div class='elgg_horizontal_tabbed_nav margin_top'>";
+$body .= 		"<ul id='videonav'>";
+$body .= 			"<li class='selected' id='YT'>";
 $body .= 				"<a href=\"".$vars['url']."pg/videolist/browse/".$getcontainer_guid."?q=youtube\">YouTube</a>";
 $body .= 			"</li>";
-$body .= 			"<li id=\"MC\">";
+$body .= 			"<li id='MC'>";
 $body .= 				"<a href=\"".$vars['url']."pg/videolist/browse/".$getcontainer_guid."?q=metacafe\">Metacafe</a>";
 $body .= 			"</li>";
-$body .= 			"<li id=\"VM\">";
+$body .= 			"<li id='VM'>";
 $body .= 				"<a href=\"".$vars['url']."pg/videolist/browse/".$getcontainer_guid."?q=vimeo\">Vimeo</a>";
 $body .= 			"</li>";
-/*
-$body .= 			"<li id=\"GV\">";
-$body .= 				"<a href=\"".$vars['url']."pg/videolist/browse?q=googlevideos\">Google Videos</a>";
-$body .= 			"</li>";
-*/
 $body .= 		"</ul>";
 $body .= "</div>";
 
-$body .= "<div class=\"clearfloat\"></div>";
-
-//$body .= "<div id=\"videosearch-interface\">";
 $body .= '<form action="javascript:sendSearchRequest(1);" method="get">';
-//$body .= "<form action=\"".$vars['url']."action/videolist/tubesearch\" method=\"get\">";
 $body .= elgg_view('input/hidden',array('internalname'=>'video_action', 'value'=>'search_video'));
 $body .= elgg_view('input/hidden',array('internalname'=>'guid', 'value'=>$vars['guid']));
-//$body .= elgg_view('input/hidden',array('internalname'=>'start_index', 'value'=>1));
 
 switch($browseCat) {
 	case "youtube" :
@@ -87,71 +76,38 @@ switch($browseCat) {
 }
 $body .= elgg_view('input/hidden',array('internalname'=>'page', 'value'=>$browseCat));
 $body .= '</form>';
-//$body .= '</div>';
-//$body .= '</div>';
 
-$body .= '<div id="SearchContainer">';
-$body .= 	'<div id="loadingSearch">';
-$body .= 	'</div>';
-$body .= 	'<div id="responseSearch" align="center">';
-$body .= 	'</div>';
-$body .= '</div>';
+$body .= 	'<div id="loading_search_results"></div>';
+$body .= 	'<div id="responseSearch" align="center"></div>';
 
-print $body."<br /><br />";
+print $body;
 
 
 ?>
-<style type="text/css">
-#videosearch-menu{
-position:relative;
-width:675px;
-height:31px;
-border:0px solid #CCC;
-border-width:0px 0px 1px 0px;
-margin:0px 0px 15px 0px;
-}
-#videosearch-menu ul{
-position:relative;
-text-align:left;
-width:600px;
-}
-#videosearch-menu ul li{
-position:relative;
-float:left;
-list-style-type:none;
-min-width:20%;
-cursor:pointer;
-margin:0px 22px 0px -20px;
-padding:8px 5px 5px 3px;
-border:0px solid #CCC;
-border-width:0px 0px 0px 0px;
-text-align:center;
-}
 
-</style>
 <script type="text/javascript">
 var page = "<?php echo $browseCat;?>";
 var container = "<?php echo $container;?>";
 $('#videonav li').removeClass();
-switch(page)
-{
-case "youtube" : $('#YT').removeClass().addClass('active');
+switch(page) {
+case "youtube" : $('#YT').removeClass().addClass('selected');
 									break;
-case "metacafe" : $('#MC').removeClass().addClass('active');
+case "metacafe" : $('#MC').removeClass().addClass('selected');
 									break;
-case "vimeo" : $('#VM').removeClass().addClass('active');
+case "vimeo" : $('#VM').removeClass().addClass('selected');
 									break;
+/*
 case "googlevideos" : $('#GV').removeClass().addClass('active');
 									break;
-default : 	$('#YT').removeClass().addClass('active');
+*/
+default : 	$('#YT').removeClass().addClass('selected');
 									break;
 }
 
 function sendSearchRequest(p){
 var queryFeed = $("#title_search").val();
-if(trim(queryFeed) != '')
-{
-	$("#loadingSearch").html("<div align=\"center\" class=\"ajax_loader\"></div>");
+if(trim(queryFeed) != '') {
+	$("#loading_search_results").html("<div class='ajax_loader'></div>");
 	var elggTS = "<?php echo time(); ?>";
 	var elggToken = "<?php echo generate_action_token(time()); ?>";
 	$.ajax({
@@ -159,7 +115,7 @@ if(trim(queryFeed) != '')
 		url: "<?php echo $vars['url']; ?>"+"action/videolist/tubesearch",
 		data: "bustcache="+new Date().getTime()+"&__elgg_ts="+elggTS+"&__elgg_token="+elggToken+"&page="+page+"&q="+queryFeed+"&start_index="+p+"&container="+container,
 		success: function(html){
-			$("#loadingSearch").html("");
+			$("#loading_search_results").html("");
 			$("#responseSearch").html('');
 			$("#responseSearch").html(html);
 		}
@@ -170,14 +126,14 @@ else{}
 
 function showV_idFeed(param, param2){
 var arg = param;
-var embed_video = "<div style='text-align:right;'><a href='javascript:void(0);' onclick='javascript:closeit("+param2+");'>close</a></div><object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0' width='475' height='350'>"+
+var embed_video = "<div class='close_video'><a href='javascript:void(0);' onclick='javascript:closeit("+param2+");'>close</a></div><object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0' width='475' height='350'>"+
 							"<param name='movie' value='"+arg+"&amp;autoplay=1'>"+
 							"<param name='quality' value='high'>"+
-							"<param name='bgcolor' value='#CEEFFF'>"+
+							"<param name='bgcolor' value='#000000'>"+
 							"<!--[if !IE]> <-->"+
 							"<object data='"+arg+"&amp;autoplay=1' width='475' height='350' autoplay=1 type='application/x-shockwave-flash'>"+
 							"<param name='quality' value='high'>"+
-							"<param name='bgcolor' value='#CEEFFF'>"+
+							"<param name='bgcolor' value='#000000'>"+
 							"<param name='pluginurl' value='http://www.adobe.com/go/getflashplayer'>"+
 							"FAIL (the browser should render some flash content, not this)."+
 							"</object>"+
@@ -187,53 +143,92 @@ disableScreen(embed_video, param2);
 }
 
 function showV_idFeedMetacafe(param, param2){
-var argArray = param.split("/");
-var arg = argArray[0]+"/"+argArray[1]+".swf";
-var embed_video = "<div style='text-align:right;'><a href='javascript:void(0);' onclick='javascript:closeit("+param2+");'>close</a></div><object width=\"475\" height=\"350\"><param name=\"allowfullscreen\" value=\"true\" /><param name=\"allowscriptaccess\" value=\"always\" /><param name=\"Metacafe_"+argArray[0]+"\" value=\"http://www.metacafe.com/fplayer/"+arg+"&amp;autoplay=1\" /><embed src=\"http://www.metacafe.com/fplayer/"+arg+"&amp;autoplay=1\" type=\"application/x-shockwave-flash\" name=\"Metacafe_"+argArray[0]+"\" allowfullscreen=\"true\" allowscriptaccess=\"always\" width=\"475\" height=\"350\"></embed></object>";
-
-disableScreen(embed_video, param2);
+	var argArray = param.split("/");
+	var arg = argArray[0]+"/"+argArray[1]+".swf";
+	var embed_video = "<div class='close_video'><a href='javascript:void(0);' onclick='javascript:closeit("+param2+");'>close</a></div><object width=\"475\" height=\"350\"><param name=\"allowfullscreen\" value=\"true\" /><param name=\"allowscriptaccess\" value=\"always\" /><param name=\"Metacafe_"+argArray[0]+"\" value=\"http://www.metacafe.com/fplayer/"+arg+"&amp;autoplay=1\" /><embed src=\"http://www.metacafe.com/fplayer/"+arg+"&amp;autoplay=1\" type=\"application/x-shockwave-flash\" name=\"Metacafe_"+argArray[0]+"\" allowfullscreen=\"true\" allowscriptaccess=\"always\" width=\"475\" height=\"350\"></embed></object>";
+	
+	disableScreen(embed_video, param2);
 }
 
 function showV_idFeedVimeo(param, param2){
-var arg = param;
-var embed_video = "<div style='text-align:right;'><a href='javascript:void(0);' onclick='javascript:closeit("+param2+");'>close</a></div><object width=\"475\" height=\"350\"><param name=\"allowfullscreen\" value=\"true\" /><param name=\"allowscriptaccess\" value=\"always\" /><param name=\"movie\" value=\"http://vimeo.com/moogaloop.swf?clip_id="+arg+"&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1\" /><embed src=\"http://vimeo.com/moogaloop.swf?clip_id="+arg+"&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1\" type=\"application/x-shockwave-flash\" allowfullscreen=\"true\" allowscriptaccess=\"always\" width=\"475\" height=\"350\"></embed></object>";
-disableScreen(embed_video, param2);
+	var arg = param;
+	var embed_video = "<div class='close_video'><a href='javascript:void(0);' onclick='javascript:closeit("+param2+");'>close</a></div><object width=\"475\" height=\"350\"><param name=\"allowfullscreen\" value=\"true\" /><param name=\"allowscriptaccess\" value=\"always\" /><param name=\"movie\" value=\"http://vimeo.com/moogaloop.swf?clip_id="+arg+"&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1\" /><embed src=\"http://vimeo.com/moogaloop.swf?clip_id="+arg+"&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1\" type=\"application/x-shockwave-flash\" allowfullscreen=\"true\" allowscriptaccess=\"always\" width=\"475\" height=\"350\"></embed></object>";
+	disableScreen(embed_video, param2);
+}
+
+
+function getPageScroll() {
+	var xScroll, yScroll;
+	if (self.pageYOffset) {
+	  yScroll = self.pageYOffset;
+	  xScroll = self.pageXOffset;
+	} else if (document.documentElement && document.documentElement.scrollTop) {	 // Explorer 6 Strict
+	  yScroll = document.documentElement.scrollTop;
+	  xScroll = document.documentElement.scrollLeft;
+	} else if (document.body) {// all other Explorers
+	  yScroll = document.body.scrollTop;
+	  xScroll = document.body.scrollLeft;	
+	}
+	return new Array(xScroll,yScroll) 
+}
+
+function getPageHeight() {
+	var windowHeight
+	if (self.innerHeight) {	// all except Explorer
+	  windowHeight = self.innerHeight;
+	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
+	  windowHeight = document.documentElement.clientHeight;
+	} else if (document.body) { // other Explorers
+	  windowHeight = document.body.clientHeight;
+	}	
+	return windowHeight
+}
+
+function getPageWidth() {
+	var windowWidth;
+	if( typeof( window.innerWidth ) == 'number' ) {
+	windowWidth = window.innerWidth; //Non-IE
+	} else if( document.documentElement && ( document.documentElement.clientWidth ) ) {
+	windowWidth = document.documentElement.clientWidth; //IE 6+ in 'standards compliant mode'
+	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
+	windowWidth = document.body.clientWidth; //IE 4 compatible
+	}
+	return windowWidth
 }
 
-function disableScreen(embed_video, param2)
-{
-var getContainer = "#vidContainer"+param2;
-$('#page_container').append("<div id='page_overlay' style='position:absolute;'/>");
-$('#page_overlay').css({
-			backgroundColor: "#000",
-			opacity: "0.8",
-			width: $(window).width(),
-			height: $('#page_container').height(),
-			top: "0px",
-			left: -(($(window).width() - $('body').width()) / 2)
-		}).fadeIn();
-$(getContainer).css("width", "0%");
-$(getContainer).animate( { width:"45%"}, 300 );
-document.getElementById("vidContainer"+param2).innerHTML = embed_video;
+function disableScreen(embed_video, param2) {
+	var getContainer = "#vidContainer"+param2;
+	$('body').append("<div id='page_overlay'/>");
+	$('#page_overlay').css({
+				backgroundColor: "#000000",
+				opacity: "0.7"
+			}).fadeIn();
+			
+	$(getContainer).css({
+					top: getPageScroll()[1] + (getPageHeight() / 10),
+					left: ((getPageWidth() / 2) - (300)),
+					height: "0px"
+      }).animate( {height:"390px"}, 600 );			
+	
+	document.getElementById("vidContainer"+param2).innerHTML = embed_video;
 }
 
-function trim(stringToTrim)
-{
-return ltrim(rtrim(stringToTrim));
+function trim(stringToTrim){
+	return ltrim(rtrim(stringToTrim));
 }
 
 function ltrim(stringToTrim) {
-return stringToTrim.replace(/^\s+/,"");
+	return stringToTrim.replace(/^\s+/,"");
 }
 
 function rtrim(stringToTrim) {
-return stringToTrim.replace(/\s+$/,"");
+	return stringToTrim.replace(/\s+$/,"");
 }
 
 function closeit(param){
-document.getElementById("vidContainer"+param).innerHTML = "";
-document.getElementById("vidContainer"+param).style.display = "none";
-$('#page_overlay').remove();
+	document.getElementById("vidContainer"+param).innerHTML = "";
+	document.getElementById("vidContainer"+param).style.display = "none";
+	$('#page_overlay').remove();
 }
 
 function InsertVideoUrl(param, param2){
@@ -246,7 +241,7 @@ function InsertVideoUrl(param, param2){
 		url: "<?php echo $vars['url']; ?>"+"action/videolist/add",
 		data: "bustcache="+new Date().getTime()+"&__elgg_ts="+elggTS+"&__elgg_token="+elggToken+"&video_action="+actionAction+"&title_videourl="+param+"&videolisttags="+param2+"&access_id="+access_id,
 		success: function(html){
-			$("#loadingSearch").html("");
+			$("#loading_search_results").html("");
 			$("#responseSearch").html('');
 			$("#responseSearch").html(html);
 		}
diff --git a/views/default/forms/labels/googlevideos.php b/views/default/forms/labels/googlevideos.php
index 1d4223232..43255430a 100644
--- a/views/default/forms/labels/googlevideos.php
+++ b/views/default/forms/labels/googlevideos.php
@@ -10,9 +10,8 @@
  * @copyright Prateek Choudhary
  */
 
-$body = '<p><label>'.elgg_echo("videolist:title_search_tube").'<br />';
-//$body .= elgg_view("input/text",array('internalname' => 'title_search','value' => '', 'id' => 'title_search'));
-$body .= "<div style='width:100%;'>";
+$body = '<p class="margin_none"><label>'.elgg_echo("videolist:title_search_tube").'</label></p>';
+$body .= "<div class='search_videos clearfloat'>";
 $body .= "<div style='float:left;width:19%;'>";
 $body .= "<a href=\"http://video.google.com\"><img src='".$vars['url']."mod/videolist/graphics/logo_videos.png' width='120'/></a>";
 $body .= "</div>";
@@ -22,11 +21,7 @@ if($error['no-search'] == 0) {
 	$body .= '<div class="videolist_error">'.$error_msg['no-search'].'</div>';
 }
 $body .= "</div>";
-//$body .= "<div>";
-//$body .= '<input type="submit" value="Submit" class="submit_button" name="submit" onclick="sendSearchRequest(1);"/>';
 $body .= elgg_view('input/submit', array('internalname' => 'submit', 'value' => elgg_echo('videolist:searchTubeVideos:vimeo')));
-//$body .= "</div>";
 $body .= "</div>";
-$body .= '</label></p>';
 $body .=  '<div id="searchcontrol">Loading...</div>';
 print $body;
\ No newline at end of file
diff --git a/views/default/forms/labels/metacafe.php b/views/default/forms/labels/metacafe.php
index 76dabeb25..63e80e892 100644
--- a/views/default/forms/labels/metacafe.php
+++ b/views/default/forms/labels/metacafe.php
@@ -10,9 +10,8 @@
  * @copyright Prateek Choudhary
  */
 
-$body = '<p><label>'.elgg_echo("videolist:title_search_tube").'<br />';
-//$body .= elgg_view("input/text",array('internalname' => 'title_search','value' => '', 'id' => 'title_search'));
-$body .= "<div style='width:100%;'>";
+$body = '<p class="margin_none"><label>'.elgg_echo("videolist:title_search_tube").'</label></p>';
+$body .= "<div  class='search_videos clearfloat'>";
 $body .= "<div style='float:left;width:19%;'>";
 $body .= "<a href=\"http://www.metacafe.com\"><img src='".$vars['url']."mod/videolist/graphics/metacafe.jpg' width='120'/></a>";
 $body .= "</div>";
@@ -22,11 +21,7 @@ if($error['no-search'] == 0) {
 	$body .= '<div class="videolist_error">'.$error_msg['no-search'].'</div>';
 }
 $body .= "</div>";
-//$body .= "<div>";
-//$body .= '<input type="submit" value="Submit" class="submit_button" name="submit" onclick="sendSearchRequest(1);"/>';
 $body .= elgg_view('input/submit', array('internalname' => 'submit', 'value' => elgg_echo('videolist:searchTubeVideos:metacafe')));
-//$body .= "</div>";
 $body .= "</div>";
-$body .= '</label></p>';
 
 print $body;
\ No newline at end of file
diff --git a/views/default/forms/labels/vimeo.php b/views/default/forms/labels/vimeo.php
index b890febb7..b3b4a3422 100644
--- a/views/default/forms/labels/vimeo.php
+++ b/views/default/forms/labels/vimeo.php
@@ -10,9 +10,8 @@
  * @copyright Prateek Choudhary
  */
 
-$body = '<p><label>'.elgg_echo("videolist:title_search_tube").'<br />';
-//$body .= elgg_view("input/text",array('internalname' => 'title_search','value' => '', 'id' => 'title_search'));
-$body .= "<div style='width:100%;'>";
+$body = '<p class="margin_none"><label>'.elgg_echo("videolist:title_search_tube").'</label></p>';
+$body .= "<div  class='search_videos clearfloat'>";
 $body .= "<div style='float:left;width:19%;'>";
 $body .= "<a href=\"http://www.vimeo.com\"><img src='".$vars['url']."mod/videolist/graphics/vimeo_logo.gif' width='120'/></a>";
 $body .= "</div>";
@@ -22,11 +21,7 @@ if ($error['no-search'] == 0) {
 	$body .= '<div class="videolist_error">'.$error_msg['no-search'].'</div>';
 }
 $body .= "</div>";
-//$body .= "<div>";
-//$body .= '<input type="submit" value="Submit" class="submit_button" name="submit" onclick="sendSearchRequest(1);"/>';
 $body .= elgg_view('input/submit', array('internalname' => 'submit', 'value' => elgg_echo('videolist:searchTubeVideos:vimeo')));
-//$body .= "</div>";
 $body .= "</div>";
-$body .= '</label></p>';
 
 print $body;
\ No newline at end of file
diff --git a/views/default/forms/labels/youtube.php b/views/default/forms/labels/youtube.php
index 1b557522b..699bc1122 100644
--- a/views/default/forms/labels/youtube.php
+++ b/views/default/forms/labels/youtube.php
@@ -10,9 +10,8 @@
  * @copyright Prateek Choudhary
  */
 
-$body = '<p><label>'.elgg_echo("videolist:title_search_tube").'<br />';
-//$body .= elgg_view("input/text",array('internalname' => 'title_search','value' => '', 'id' => 'title_search'));
-$body .= "<div style='width:100%;'>";
+$body = '<p class="margin_none"><label>'.elgg_echo("videolist:title_search_tube").'</label></p>';
+$body .= "<div class='search_videos clearfloat'>";
 $body .= "<div style='float:left;width:10%;'>";
 $body .= "<a href=\"http://www.youtube.com\"><img src='".$vars['url']."mod/videolist/graphics/badge3.gif' height='30'/></a>";
 $body .= "</div>";
@@ -22,11 +21,7 @@ if($error['no-search'] == 0) {
 	$body .= '<div class="videolist_error">'.$error_msg['no-search'].'</div>';
 }
 $body .= "</div>";
-//$body .= "<div>";
-//$body .= '<input type="submit" value="Submit" class="submit_button" name="submit" onclick="sendSearchRequest(1);"/>';
 $body .= elgg_view('input/submit', array('internalname' => 'submit', 'value' => elgg_echo('videolist:searchTubeVideos')));
-//$body .= "</div>";
 $body .= "</div>";
-$body .= '</label></p>';
 
 print $body;
\ No newline at end of file
diff --git a/views/default/object/videolist.php b/views/default/object/videolist.php
index 4563f04b4..19015384a 100644
--- a/views/default/object/videolist.php
+++ b/views/default/object/videolist.php
@@ -40,13 +40,13 @@ if(!empty($video_file)) {
 	
 	if(get_input('show_viewtype') == "all") {
 		$info .= '<p class="entity_title"><a href="' .$watch_URL. '">'.$title.'</a></p>';
-		$info .= "<p class='entity_subtext'><a href=\"{$vars['url']}pg/profile/{$owner->username}\">{$owner->name}</a> {$friendlytime}";
+		$info .= "<p class='entity_subtext'><a href=\"{$vars['url']}pg/videolist/owned/{$owner->username}\">{$owner->name}</a> {$friendlytime}";
 		$info .= "</p>";
 		$icon = "<a class='video_icon' href=\"{$watch_URL}\">" . elgg_view("videolist/icon", array("mimetype" => $mime, 'thumbnail' => $thumbnail, 'video_guid' => $video_guid, 'size' => 'small')) . "</a>";
 		echo "<div class='video_entity'>".elgg_view_listing($icon, $info)."</div>";
 	} else {
 		$info .= '<p class="entity_title"><a href="' .$watch_URL. '">'.$title.'</a></p>';
-		$info .= "<p class='entity_subtext'><a href=\"{$vars['url']}pg/profile/{$owner->username}\">{$owner->name}</a> {$friendlytime}";
+		$info .= "<p class='entity_subtext'><a href=\"{$vars['url']}pg/videolist/owned/{$owner->username}\">{$owner->name}</a> {$friendlytime}";
 		$info .= "</p>";
 		$icon = "<a class='video_icon' href=\"{$watch_URL}\">" . elgg_view("videolist/icon", array("mimetype" => $mime, 'thumbnail' => $thumbnail, 'video_guid' => $video_guid, 'size' => 'small')) . "</a>";
 		echo "<div class='video_entity'>".elgg_view_listing($icon, $info)."</div>";
diff --git a/views/default/object/watch.php b/views/default/object/watch.php
index 66fde240f..f8dd1ceac 100644
--- a/views/default/object/watch.php
+++ b/views/default/object/watch.php
@@ -1,13 +1,14 @@
 <?php
 /**
-	 * Elgg Videolist Plugin -
-	 * This plugin allows users to watch videos
-	 *
-	 * @package Elgg
-	 * @license http://www.gnu.org/licenses/old-licenses/gpl-2.0.html GNU Public License version 2
-	 * @author Prateek Choudhary <synapticfield@gmail.com>
-	 * @copyright Prateek Choudhary
-	 */
+* Elgg Videolist Plugin -
+* This plugin allows users to watch videos
+*
+* @package Elgg
+* @license http://www.gnu.org/licenses/old-licenses/gpl-2.0.html GNU Public License version 2
+* @author Prateek Choudhary <synapticfield@gmail.com>
+* @copyright Prateek Choudhary
+*/
+	 
 $videodiv = '';
 $width = "600";
 $height = "400";
@@ -17,24 +18,27 @@ if(isset($vars['entity'])) {
 	$title = $videos->title;
 	$url = $videos->url;
 	$videoid = $videos->video_id;
-	$videodiv = "<h2>".$title."</h2>";
+	
+	$videodiv .= "<div class='video_view'>";
+	
+	// view for plugins to extend	
+	$videodiv .= elgg_view('videolist/options', array('entity' => $videos));
+	
 	if ($videos->videotype == "youtube") {
-		$videodiv .= "<div align=\"center\" style=\"margin-top:20px;\"><object width=\"$width\" height=\"$height\"><param name=\"movie\" value=\"http://{$url}&hl=en&fs=1&showinfo=0&auoplay=1\"></param><param name=\"allowFullScreen\" value=\"true\"></param><embed src=\"http://{$url}&hl=en&fs=1&showinfo=0&autoplay=1\" type=\"application/x-shockwave-flash\" allowfullscreen=\"true\" width=\"$width\" height=\"$height\"></embed></object>";
+		$videodiv .= "<object width=\"$width\" height=\"$height\"><param name=\"movie\" value=\"http://{$url}&hl=en&fs=1&showinfo=0&auoplay=1\"></param><param name=\"allowFullScreen\" value=\"true\"></param><embed src=\"http://{$url}&hl=en&fs=1&showinfo=0&autoplay=1\" type=\"application/x-shockwave-flash\" allowfullscreen=\"true\" width=\"$width\" height=\"$height\"></embed></object>";
 	} else if($videos->videotype == "metacafe"){
 		$videoid_id = $videoid;
 		$path = explode("/", $videos->thumbnail);
 		$path = array_reverse($path);
 		$thumbnailArray = explode(".", $path[0]);
 		$videoid = $videoid_id."/".$thumbnailArray[0].".swf";
-		$videodiv .= "<div align=\"center\" style=\"margin-top:20px;\"><embed src=\"http://www.metacafe.com/fplayer/".$videoid."\" type=\"application/x-shockwave-flash\" allowfullscreen=\"true\" allowscriptaccess=\"always\" width=\"$width\" height=\"$height\" name=\"Metacafe_".$videoid_id."\"></embed>";
+		$videodiv .= "<embed src=\"http://www.metacafe.com/fplayer/".$videoid."\" type=\"application/x-shockwave-flash\" allowfullscreen=\"true\" allowscriptaccess=\"always\" width=\"$width\" height=\"$height\" name=\"Metacafe_".$videoid_id."\"></embed>";
 	} else if($videos->videotype == "vimeo") {
-		$videodiv .= "<div align=\"center\" style=\"margin-top:20px;\"><object width=\"$width\" height=\"$height\"><param name=\"allowfullscreen\" value=\"true\" /><param name=\"allowscriptaccess\" value=\"always\" /><param name=\"movie\" value=\"http://vimeo.com/moogaloop.swf?clip_id=".$videoid."&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1\" /><embed src=\"http://vimeo.com/moogaloop.swf?clip_id=".$videoid."&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1\" type=\"application/x-shockwave-flash\" allowfullscreen=\"true\" allowscriptaccess=\"always\" width=\"$width\" height=\"$height\"></embed></object>";
+		$videodiv .= "<object width=\"$width\" height=\"$height\"><param name=\"allowfullscreen\" value=\"true\" /><param name=\"allowscriptaccess\" value=\"always\" /><param name=\"movie\" value=\"http://vimeo.com/moogaloop.swf?clip_id=".$videoid."&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1\" /><embed src=\"http://vimeo.com/moogaloop.swf?clip_id=".$videoid."&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1\" type=\"application/x-shockwave-flash\" allowfullscreen=\"true\" allowscriptaccess=\"always\" width=\"$width\" height=\"$height\"></embed></object>";
 	}
 
+	$videodiv .= "<br />".elgg_view_likes($videos);
 	$videodiv .= "</div>";
-	$videodiv .= elgg_view_likes($videos);
 	$videodiv .= elgg_view_comments($videos);
 	print $videodiv;
-
-	//echo elgg_view_comments($videos);
 }
\ No newline at end of file
diff --git a/views/default/videolist/css.php b/views/default/videolist/css.php
index 0b181458e..407841440 100644
--- a/views/default/videolist/css.php
+++ b/views/default/videolist/css.php
@@ -34,96 +34,66 @@
 	margin-left:15px;
 }
 
+/* single video view page */
+.video_view {
+	text-align: center;
+	margin-top:5px;
+	padding-bottom:20px;
+	border-bottom:1px solid #CCCCCC;
+}
+.video_view embed {
+	margin-top:20px;
+}
 
-
-
-/* /////////////////////////////////////////// @todo clean up / update rules below */
-#video-list-main{
-	padding:10px;
+/* search for videos */
+#loading_search_results .ajax_loader {
+	margin:10px 0;
 }
-#videocontainer{
+.search_videos {
 	width:100%;
-	margin-bottom:10px;
 }
-#videobox{
-	width:98%;
-	text-align:center;
-	margin-top:10px;
+.search_videos .submit_button {
+	margin:0;
+}
+
+/* find videos search results list */
+#videosearch_results .video_entity {
+	padding:10px 0;
+	border-top:1px dotted #CCCCCC;
 }
-#videoDescbox{
-	width:95%;
-	margin:0px 5px 0px 8px;
+#videosearch_results .video_entity table {
+	width:100%;
 }
-#videoActionbox{
-	width:90%;
-	margin:0px 5px 0px 8px;
-	float:left;
+#videosearch_results .video_actions {
+	text-align: right;
+	width:15%;
 }
-th{
-	text-align:center;
-	font-weight:bold;
-	font-size:13px;
-}
-#parentTab{
-	-moz-border-radius-bottomleft:8px;
-	-moz-border-radius-bottomright:8px;
-	-moz-border-radius-topleft:8px;
-	-moz-border-radius-topright:8px;
-	border-top:1px solid #CCC;
-	border-bottom:6px solid #CCC;
-	border-left:1px solid #CCC;
-	border-right:5px solid #CCC;
-	background:#FFFFFF;
-	margin-top:7px;
-}
-.tabcellDesc{
-	padding:5px 5px 5px 10px;
-	text-align: left;
-}
-.tabcellText{
-	padding:5px;
-	text-align: center;
+#videosearch_results .video_entity .entity_title {
+	margin:0;
 }
-.videoDisp{
+
+/* pop-up video player */
+#page_overlay {
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	height:100%;
+	width:100%;
+	z-index:299999;
+}
+.video_popup{
 	position:absolute;
-	-moz-border-radius-topleft:5px;
-	-moz-border-radius-topright:5px;
-	-moz-border-radius-bottomleft:5px;
-	-moz-border-radius-bottomright:5px;
-	border:1px solid #000000;
 	display:none;
-	padding:10px;
-	margin-left:120px;
-	margin-top:-100px;
-	background:#FFFFFF;
+	padding:5px 10px 10px 10px;
+	background:black;
 	z-index:300000;
+	-webkit-border-radius: 6px;
+	-moz-border-radius: 6px;
+}
+.close_video {
+	margin-bottom:5px;
+	text-align: right;
 }
-.tubesearch{
-	-moz-border-radius-topleft:5px;
-	-moz-border-radius-topright:5px;
-	-moz-border-radius-bottomleft:5px;
-	-moz-border-radius-bottomright:5px;
-	border:1px solid #666666;
-}
-.searchvideorow{
-	padding:10px;
-	-moz-border-radius-topleft:5px;
-	-moz-border-radius-topright:5px;
-	-moz-border-radius-bottomleft:5px;
-	-moz-border-radius-bottomright:5px;
-	border:1px solid #CCCCCC;
-}
-#videosearch-tablecontainer{
-	-moz-border-radius-bottomleft:5px;
-	-moz-border-radius-bottomright:5px;
-	border:1px solid #CCCCCC;
-	background:#FFF;
-	padding:10px;
-}
-#videosearch-interface{
-	border-color:#CCCCCC;
-	border-style:solid;
-	border-width:0 1px 1px;
-	margin-top:-15px;
-	padding:15px 0 15px 20px;
+.close_video a {
+	color:white;
 }