From: Pete Harris <dave@36083f99-b078-4883-b0ff-0f9b5a30f544>
Date: Tue, 30 Mar 2010 14:23:05 +0000 (+0000)
Subject: Further updates to VideoList UI. Search results styled to match new elgg list style... 
X-Git-Url: https://gitweb.fluxo.info/?a=commitdiff_plain;h=05129a184b2c88cf082ebf230a3dce7b6510ec8f;p=lorea%2Felgg.git

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..
---

diff --git a/actions/tubesearch.php b/actions/tubesearch.php
index e8836ed04..82f946ab6 100644
--- a/actions/tubesearch.php
+++ b/actions/tubesearch.php
@@ -48,7 +48,7 @@ if (!isset($queryFeed) || empty($queryFeed)) {
 		$startOffset = $counts->startIndex;
 		$endOffset = ($startOffset-1) + $counts->itemsPerPage;
 
-		$body = '<div id="pagination">';
+		$body = '<div class="pagination">';
 		$rem = floor($total/10);
 		$rem*=10;
 		if($rem<$total)
@@ -74,7 +74,7 @@ if (!isset($queryFeed) || empty($queryFeed)) {
 		$body .=  '<a href="javascript:void(0);">last</a>';
 		}
 		$body .=  '</div>';
-		$body .= '<div id="videosearch-tablecontainer">';
+		$body .= '<div id="videosearch_results">';
 		$k = 0;$counter = 0;
 		foreach ($sxml->entry as $entry) {
 			$k++;
@@ -103,22 +103,20 @@ if (!isset($queryFeed) || empty($queryFeed)) {
 			$tags[] = $media->group->keywords;
 
 			$showEncodedVideo = preg_replace('/(http:)(\/\/)(www.)([^ \/"]*)([^ >"]*)watch\?(v=)([^ >"]*)/i', '$1$2$3$4$5v/$7', $watch);
-			$body .=  '<div class="parentTabClass"><table id="parentTab" cellpadding="4" cellspacing="4" border="1">';
+			$body .=  '<div class="video_entity clearfloat"><table id="parentTab" cellpadding="0" cellspacing="0" border="0">';
 			$body .=  '<tr class="searchvideorow">';
 
 			$body .=  '<td class="tabcellText" width="15%">';
-			$body .=  "<span class=\"HoverLink\"><a href=\"javascript:void(0);\" onclick=\"showV_idFeed('".$showEncodedVideo."', ".$k.")\"><img src=\"".$thumbnail."\" width=\"90%\" height=\"90%\" class=\"tubesearch\"/></a></span>";
-			$body .=  '<div id="vidContainer'.$k.'" class="videoDisp"></div></td>';
+			$body .=  "<span><a href=\"javascript:void(0);\" onclick=\"showV_idFeed('".$showEncodedVideo."', ".$k.")\"><img src=\"".$thumbnail."\" width=\"90%\" height=\"90%\"/></a></span>";
+			$body .=  '<div id="vidContainer'.$k.'" class="video_popup"></div></td>';
 
 			$body .=  '<td class="tabcellDesc" width="60%">';
-			$body .=  "<a href=\"javascript:void(0);\" onclick=\"showV_idFeed('".$showEncodedVideo."', ".$k.")\">".$media->group->title."</a><br>";
-			$body .=  "<b>Duration : </b>" . sprintf("%0.2f", $length/60) . " min.<br /><b>user rating : </b>".$rating."<br/>";
-			$body .=  "<b>Description : </b>".substr($media->group->description, 0, 140)." ...";
+			$body .=  "<p class='entity_title'><a href=\"javascript:void(0);\" onclick=\"showV_idFeed('".$showEncodedVideo."', ".$k.")\">".$media->group->title."</a></p>";
+			$body .=  "<p class='entity_subtext'><b>Duration : </b>" . sprintf("%0.2f", $length/60) . " min.<br /><b>user rating : </b>".$rating."<br/>";
+			$body .=  "<b>Description : </b>".substr($media->group->description, 0, 140)." ...</p>";
 			$body .=  '</td>';
 
-			//$body .=  "<td class=\"tabcellText\" width=\"12%\"><a href=\"javascript:void(0);\" onclick=\"javascript:showV_idFeed('".$showEncodedVideo."', ".$k.")\">play</a> | <a href=\"javascript:void(0);\" onclick=\"javascript:InsertVideoUrl('".$showEncodedVideo."','".$tags[$counter]."');\">add</a></td>";
-
-			$body .=  "<td class=\"tabcellText\" width=\"15%\"><input type=\"button\" name=\"play\" value=\"Play\" onclick=\"javascript:showV_idFeed('".$showEncodedVideo."', ".$k.")\" class=\"submit_button\"> <a href=\"".$CONFIG->wwwroot."pg/videolist/new/".$container."/title_videourl/".$vid_array[1]."/page/".$queryCatgory."\");\"><input type=\"button\" name=\"add\" value=\"Add\" class=\"submit_button\"></a></td>";
+			$body .=  "<td class='video_actions'><a class='action_button small' onclick=\"javascript:showV_idFeed('".$showEncodedVideo."', ".$k.")\">".elgg_echo('videolist:play:video')."</a> <a class='action_button small' href=\"".$CONFIG->wwwroot."pg/videolist/new/".$container."/title_videourl/".$vid_array[1]."/page/".$queryCatgory."\">".elgg_echo('videolist:add:video')."</a></td>";
 
 			$body .=  '</tr>';
 			$body .=  '</table></div>';
@@ -134,7 +132,7 @@ if (!isset($queryFeed) || empty($queryFeed)) {
 		$startOffset = $start_index;
 		$endOffset = ($startOffset-1) + $results_perpage;
 
-		$body = '<div id="paginateSearch">';
+		$body = '<div class="pagination">';
 		$rem = floor($total/10);
 		$rem*=10;
 		if($rem<$total) {
@@ -162,7 +160,7 @@ if (!isset($queryFeed) || empty($queryFeed)) {
 
 		$body .=  '</div>';
 		$k = 0;
-		$body .= '<div id="videosearch-tablecontainer">';
+		$body .= '<div id="videosearch_results">';
 		$myitem = $sxml->getElementsByTagName('item');
 		foreach($myitem as $searchNode) {
 			$k++;
@@ -197,23 +195,20 @@ if (!isset($queryFeed) || empty($queryFeed)) {
 			$start = intval(strpos($string, $ot) + strlen($ot));
 			$desc_src = substr($string,$start,intval(strpos($string,$ct) - $start));
 
-			$body .=  '<div class="parentTabClass">';
-			$body .= '<table id="parentTab" cellpadding="4" cellspacing="4" border="1">';
+			$body .=  '<div class="video_entity clearfloat">';
+			$body .= '<table id="parentTab" cellpadding="0" cellspacing="0" border="0">';
 			$body .=  '<tr class="searchvideorow">';
 
 			$body .=  '<td class="tabcellText" width="15%">';
-			$body .=  "<span class=\"HoverLink\"><a href=\"javascript:void(0);\" onclick=\"showV_idFeedMetacafe('".$showEncodedVideo."', ".$k.")\"><img src=\"".$thumbnail."\" width=\"90%\" height=\"90%\" class=\"tubesearch\"/></a></span>";
-			$body .=  '<div id="vidContainer'.$k.'" class="videoDisp"></div></td>';
+			$body .=  "<span><a href=\"javascript:void(0);\" onclick=\"showV_idFeedMetacafe('".$showEncodedVideo."', ".$k.")\"><img src=\"".$thumbnail."\" width=\"90%\" height=\"90%\"/></a></span>";
+			$body .=  '<div id="vidContainer'.$k.'" class="video_popup"></div></td>';
 
 			$body .=  '<td class="tabcellDesc" width="60%">';
-			$body .=  "<a href=\"javascript:void(0);\" onclick=\"showV_idFeedMetacafe('".$showEncodedVideo."', ".$k.")\">".$valueTitle."</a><br>";
-			//$body .=  "<b>Duration : </b>" . sprintf("%0.2f", $length/60) . " min.<br /><b>user rating : </b>".$rating."<br/>";
-			$body .=  "<b>Description : </b>".$desc_src;
+			$body .=  "<p class='entity_title'><a href=\"javascript:void(0);\" onclick=\"showV_idFeedMetacafe('".$showEncodedVideo."', ".$k.")\">".$valueTitle."</a></p>";
+			$body .=  "<p class='entity_subtext'><b>Description : </b>".$desc_src."</p>";
 			$body .=  '</td>';
 
-			//$body .=  "<td class=\"tabcellText\" width=\"12%\"><a href=\"javascript:void(0);\" onclick=\"javascript:showV_idFeed('".$showEncodedVideo."', ".$k.")\">play</a> | <a href=\"javascript:void(0);\" onclick=\"javascript:InsertVideoUrl('".$showEncodedVideo."','".$tags[$counter]."');\">add</a></td>";
-
-			$body .=  "<td class=\"tabcellText\" width=\"15%\"><input type=\"button\" name=\"play\" value=\"Play\" onclick=\"javascript:showV_idFeedMetacafe('".$showEncodedVideo."', ".$k.")\" class=\"submit_button\"> <a href=\"".$CONFIG->wwwroot."pg/videolist/new/".$container."/title_videourl/".$metacafevideoIdArray[0]."/page/".$queryCatgory."\");\"><input type=\"button\" name=\"add\" value=\"Add\" class=\"submit_button\"></a></td>";
+			$body .=  "<td class='video_actions'><a class='action_button small' onclick=\"javascript:showV_idFeedMetacafe('".$showEncodedVideo."', ".$k.")\">".elgg_echo('videolist:play:video')."</a> <a class='action_button small' href=\"".$CONFIG->wwwroot."pg/videolist/new/".$container."/title_videourl/".$metacafevideoIdArray[0]."/page/".$queryCatgory."\">".elgg_echo('videolist:add:video')."</a></td>";
 
 			$body .=  '</tr>';
 			$body .=  '</table>';
@@ -236,7 +231,7 @@ if (!isset($queryFeed) || empty($queryFeed)) {
 		$startOffset = $start_index;
 
 		$endOffset = ($startOffset-1) + $results_perpage;
-		$body = '<div id="paginateSearch">';
+		$body = '<div class="pagination">';
 		$rem = floor($total/10);
 		$rem*=10;
 		if($rem<$total) {
@@ -262,7 +257,7 @@ if (!isset($queryFeed) || empty($queryFeed)) {
 			$body .=  '<a href="javascript:void(0);">last</a>';
 		}
 		$body .=  '</div>';
-		$body .= '<div id="videosearch-tablecontainer">';
+		$body .= '<div id="videosearch_results">';
 		$counter = 0;$k = 0;
 		foreach($aoVideos as $oVideo) {
 			$k++;
@@ -290,23 +285,23 @@ if (!isset($queryFeed) || empty($queryFeed)) {
 				}
 				$play_idArray = explode("http://vimeo.com/", $url);
 				$embedidArray = explode("/", $play_idArray[1]);
-				$body .=  '<div class="parentTabClass">';
-				$body .= '<table id="parentTab" cellpadding="4" cellspacing="4" border="1">';
+				$body .=  '<div class="video_entity clearfloat">';
+				$body .= '<table id="parentTab" cellpadding="0" cellspacing="0" border="0">';
 				$body .=  '<tr class="searchvideorow">';
 
 				$body .=  '<td class="tabcellText" width="15%">';
-				$body .=  "<span class=\"HoverLink\"><a href=\"javascript:showV_idFeedVimeo('".$embedidArray[0]."', ".$k.")\"><img src=\"".$thumbnail."\" width=\"90%\" height=\"90%\" class=\"tubesearch\"/></a></span>";
-				$body .=  '<div id="vidContainer'.$k.'" class="videoDisp"></div></td>';
+				$body .=  "<span><a href=\"javascript:showV_idFeedVimeo('".$embedidArray[0]."', ".$k.")\"><img src=\"".$thumbnail."\" width=\"90%\" height=\"90%\"/></a></span>";
+				$body .=  '<div id="vidContainer'.$k.'" class="video_popup"></div></td>';
 
 				$body .=  '<td class="tabcellDesc" width="60%">';
-				$body .=  "<a href=\"javascript:void(0);\" onclick=\"javascript:showV_idFeedVimeo('".$embedidArray[0]."', ".$k.")\">".$title."</a><br>";
-				$body .=  "<b>User Likes : </b>".$rating."<br/>";
+				$body .=  "<p class='entity_title'><a href=\"javascript:void(0);\" onclick=\"javascript:showV_idFeedVimeo('".$embedidArray[0]."', ".$k.")\">".$title."</a></p>";
+				$body .=  "<p class='entity_subtext'><b>User Likes : </b>".$rating."<br/>";
 				$body .=  "<b>Played : </b>".$playedTimes." times<br/>";
 				$body .=  "<b>Description : </b>".$description." ...<br/>";
-				$body .=  "<b>Tags : </b>".implode(', ', $aTags);
+				$body .=  "<b>Tags : </b>".implode(', ', $aTags)."</p>";
 				$body .=  '</td>';
 
-				$body .=  "<td class=\"tabcellText\" width=\"15%\"><input type=\"button\" name=\"play\" value=\"Play\" onclick=\"javascript:showV_idFeedVimeo('".$embedidArray[0]."', ".$k.")\" class=\"submit_button\"> <a href=\"".$CONFIG->wwwroot."pg/videolist/new/".$container."/title_videourl/".$embedidArray[0]."/page/".$queryCatgory."\");\"><input type=\"button\" name=\"add\" value=\"Add\" class=\"submit_button\"></a></td>";
+				$body .=  "<td class='video_actions'><a class='action_button small' onclick=\"javascript:showV_idFeedVimeo('".$embedidArray[0]."', ".$k.")\">".elgg_echo('videolist:play:video')."</a> <a class='action_button small' href=\"".$CONFIG->wwwroot."pg/videolist/new/".$container."/title_videourl/".$embedidArray[0]."/page/".$queryCatgory."\">".elgg_echo('videolist:add:video')."</a></td>";
 
 				$body .=  '</tr>';
 				$body .=  '</table>';
diff --git a/all.php b/all.php
index c1be98767..26aefb594 100644
--- a/all.php
+++ b/all.php
@@ -30,6 +30,10 @@ $area2 .= elgg_list_entities(array('types' => 'object', 'subtypes' => 'videolist
 // include a view for plugins to extend
 $area3 .= elgg_view("videolist/sidebar", array("object_type" => 'videolist'));
 
+// get the latest comments on all videos
+$comments = get_annotations(0, "object", "videolist", "generic_comment", "", 0, 4, 0, "desc");
+$area3 .= elgg_view('annotation/latest_comments', array('comments' => $comments));
+
 set_context('videolist');
 $body = elgg_view_layout('one_column_with_sidebar', $area1.$area2, $area3);
 
diff --git a/browse.php b/browse.php
index 1ad5b3221..c8314b9c6 100644
--- a/browse.php
+++ b/browse.php
@@ -1,14 +1,16 @@
 <?php
-
 /**
- * Elgg Video Plugin
- * This plugin allows users to create a library of youtube/vimeo/metacafe 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 Video Plugin
+* This plugin allows users to create a library of youtube/vimeo/metacafe 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
+*/
+ 
+global $CONFIG;
+
 require_once(dirname(dirname(dirname(__FILE__))) . "/engine/start.php");
 
 //get videolist GUID
@@ -31,11 +33,19 @@ if(isset($container_guid) && !empty($container_guid)) {
 	}
 }
 
-$title = sprintf(elgg_echo("videolist:browse"), $page_owner->name);
+elgg_push_breadcrumb(elgg_echo('videolist:find'), $CONFIG->wwwroot."mod/videolist/all.php");
+elgg_push_breadcrumb(elgg_echo("videolist:browsemenu"));
 
-$area2 = elgg_view_title($title);
+$title = elgg_echo("videolist:browsemenu");
+
+$area1 = elgg_view('navigation/breadcrumbs');
+$area1 .= elgg_view_title($title);
 $area2 .= elgg_view("forms/browsetube");
 
-$body = elgg_view_layout('one_column_with_sidebar', $area1 . $area2);
+// get the latest comments on all videos
+$comments = get_annotations(0, "object", "videolist", "generic_comment", "", 0, 4, 0, "desc");
+$area3 = elgg_view('annotation/latest_comments', array('comments' => $comments));
+
+$body = elgg_view_layout('one_column_with_sidebar', $area1.$area2, $area3);
 
 page_draw($title, $body);
\ No newline at end of file
diff --git a/friends.php b/friends.php
index 2a8d32569..4a0178359 100644
--- a/friends.php
+++ b/friends.php
@@ -22,6 +22,10 @@ set_context('videolist');
 		
 // include a view for plugins to extend
 $area3 = elgg_view("videolist/sidebar", array("object_type" => 'videolist'));
+
+// fetch & display latest comments on friends videos
+$comments = get_annotations(0, "object", "videolist", "generic_comment", "", 0, 4, 0, "desc");
+$area3 .= elgg_view('annotation/latest_comments', array('comments' => $comments));
 				
 // Format page
 $body = elgg_view_layout('one_column_with_sidebar', $area1.$area2, $area3);
diff --git a/index.php b/index.php
index 04805cc18..1b94775d6 100644
--- a/index.php
+++ b/index.php
@@ -42,6 +42,14 @@ if(page_owner() == get_loggedin_userid()) {
 	$area1 .= elgg_view('page_elements/content_header_member', array('type' => 'videolist'));
 }
 
+// include a view for plugins to extend
+$area3 = elgg_view("videolist/sidebar", array("object_type" => 'videolist'));
+
+// get the latest comments on all videos
+$comments = get_annotations(0, "object", "videolist", "generic_comment", "", 0, 4, 0, "desc");
+$area3 .= elgg_view('annotation/latest_comments', array('comments' => $comments));
+
+
 // Get objects
 $area2 = elgg_list_entities(array('types' => 'object', 'subtypes' => 'videolist', 'container_guids' => page_owner(), 'limit' => 10));
 
diff --git a/languages/en.php b/languages/en.php
index 18b731ada..886b13859 100644
--- a/languages/en.php
+++ b/languages/en.php
@@ -18,6 +18,8 @@ $english = array(
 	"videolist:find" => 'All Site videos',
 	"videolist:all" => 'All Site videos',
 	"videolist:add" => 'Add a Video',
+	"videolist:play:video" => 'Play',
+	"videolist:add:video" => 'Add',
 	"videolist:search" => "All Site videos",
 	'videolist:friends' => "Friends' videos",
 	'videolist:edit' => "Edit video",
diff --git a/start.php b/start.php
index 0ea73c92c..0fb7bb0bb 100644
--- a/start.php
+++ b/start.php
@@ -201,5 +201,4 @@ global $CONFIG;
 
 register_action("videolist/add", false, $CONFIG->pluginspath . "videolist/actions/add.php");
 register_action("videolist/tubesearch", false, $CONFIG->pluginspath . "videolist/actions/tubesearch.php");
-//register_action("videolist/addcomment", false, $CONFIG->pluginspath . "videolist/actions/comments/add.php");
 register_action("videolist/remove", false, $CONFIG->pluginspath . "videolist/actions/delete.php");
\ No newline at end of file
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;
 }
diff --git a/watch.php b/watch.php
index 6694fca88..c46a20948 100644
--- a/watch.php
+++ b/watch.php
@@ -1,5 +1,4 @@
 <?php
-
 /**
  * Elgg Video Plugin
  * This plugin allows users to create a library of youtube/vimeo/metacafe videos
@@ -9,11 +8,24 @@
  * @author Prateek Choudhary <synapticfield@gmail.com>
  * @copyright Prateek Choudhary
  */
+global $CONFIG;
 
 require_once(dirname(dirname(dirname(__FILE__))) . "/engine/start.php");
 
 // Get objects
 $video_id = (int) get_input('video_id');
+$video = get_entity($video_id);
+
+// set up breadcrumbs
+$page_owner = page_owner_entity();
+if ($page_owner === false || is_null($page_owner)) {
+	$page_owner = $_SESSION['user'];
+	set_page_owner($page_owner->getGUID());
+}
+elgg_push_breadcrumb(elgg_echo('videolist:all'), $CONFIG->wwwroot."mod/videolist/all.php");
+elgg_push_breadcrumb(sprintf(elgg_echo("videolist:user"),$page_owner->name), $CONFIG->wwwroot."pg/videolist/".$page_owner->username);
+elgg_push_breadcrumb(sprintf($video->title));
+$area1 = elgg_view('navigation/breadcrumbs');
 
 // If we can get out the video corresponding to video_id object ...
 if ($videos = get_entity($video_id)) {
@@ -24,19 +36,34 @@ if ($videos = get_entity($video_id)) {
 		set_context("groupsvideos");
 	}
 	$page_owner = page_owner_entity();
-	$title = sprintf(elgg_echo("videolist:home"),page_owner_entity()->name);
+	$pagetitle = sprintf(elgg_echo("videolist:home"),page_owner_entity()->name);
+	$title = $videos->title;
+	
+	$area1 .= "<div id='content_header' class='clearfloat'><div class='content_header_title'><h2>".$title."</h2></div>";
+	if ($videos->canEdit()) {
+		$area1 .= "<div class='content_header_options'>
+					<a class='action_button' href=\"{$CONFIG->wwwroot}mod/videolist/edit.php?file_guid={$videos->getGUID()}\">".elgg_echo('edit')."</a>";
+
+		$area1 .= elgg_view('output/confirmlink',array(	
+							'href' => $CONFIG->wwwroot . "action/videolist/delete?file=" . $videos->getGUID(),
+							'text' => elgg_echo('delete'),
+							'confirm' => elgg_echo('document:delete:confirm'),
+							'class' => 'action_button disabled'))."</div>";  
+	}
+	$area1 .= "</div>";
+	
 	// Display it
-	$area2 = elgg_view("object/watch",array(
-									'entity' => $video_id,
-									'entity_owner' => $page_owner,
-									'full' => true
-									));
+	$area2 .= elgg_view("object/watch",array(
+						'entity' => $video_id,
+						'entity_owner' => $page_owner,
+						'full' => true
+						));
 	$body = elgg_view_layout("one_column_with_sidebar", $area1.$area2, $area3);
 } else {
 		// video not found
 		$body = "<p class='margin_top'>".elgg_echo('videolist:none:found')."</p>";
-		$title = elgg_echo("video:none");
+		$pagetitle = elgg_echo("video:none");
 }
 
 // Finally draw the page
-page_draw($title, $body);
+page_draw($pagetitle, $body);