--- loncom/interface/lonsyllabus.pm	2010/02/15 16:05:32	1.106.2.2
+++ loncom/interface/lonsyllabus.pm	2010/02/17 04:48:09	1.106.2.4
@@ -1,7 +1,7 @@
 # The LearningOnline Network
 # Syllabus
 #
-# $Id: lonsyllabus.pm,v 1.106.2.2 2010/02/15 16:05:32 faziophi Exp $
+# $Id: lonsyllabus.pm,v 1.106.2.4 2010/02/17 04:48:09 faziophi Exp $
 #
 # Copyright Michigan State University Board of Trustees
 #
@@ -147,6 +147,133 @@ function getIndexByName(item) {
 
 ENDSCRIPT
         }
+        $js .= <<'ENDSCRIPT';
+
+<style type="text/css">
+	.LC_Sortable ul { list-style-type: none; margin: 0px; padding: 0px}
+	.LC_Sortable li { list-style-type: none; cursor: pointer; margin: 0px 5px 5px 5px; padding: 5px; padding-left: 1.5em; width: 200px; font-size:90% }
+	.LC_Sortable li span.left { float: left; cursor: move; margin-left: -1.5em; }
+	.LC_Sortable li span.right { float: right; cursor: auto; margin-right: 0em }
+	.LC_EllipseOverflow { overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; white-space: nowrap; }
+	.LC_ActivityBarButton-IconLeft { padding-left: 20px }
+	.LC_ActivityBarButton-IconLeft .ui-icon { float:left; margin-left: -18px; }
+	#scrollable-fields-container {float:left; background-color: white; width: 235px; border: 1px solid grey; margin: 0px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
+	#syllabus-fields-actions {text-align: center}
+	#syllabus-content {margin-left: 245px}
+	#activity-bar {-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border: solid 1px grey; background-color: #dddddd; padding: 0px 0px;margin: 5px 0 2px 0;}	
+	#activity-bar button { font-size: 100%; vertical-align: middle }
+</style>
+
+<script type="text/javascript">
+	// public domain code to emulate text-overflow:ellipsis in Firefox using jQuery
+	(function($) {
+		$.fn.ellipsis = function(enableUpdating){
+			var s = document.documentElement.style;
+			if (!('textOverflow' in s || 'OTextOverflow' in s)) {
+				return this.each(function(){
+					var el = $(this);
+					if(el.css("overflow") == "hidden"){
+						var originalText = el.html();
+						var w = el.width();
+						
+						var t = $(this.cloneNode(true)).hide().css({
+							'position': 'absolute',
+							'width': 'auto',
+							'overflow': 'visible',
+							'max-width': 'inherit'
+						});
+						el.after(t);
+						
+						var text = originalText;
+						while(text.length > 0 && t.width() > el.width()){
+							text = text.substr(0, text.length - 1);
+							t.html(text + "...");
+						}
+						el.html(t.html());
+						
+						t.remove();
+						
+						if(enableUpdating == true){
+							var oldW = el.width();
+							setInterval(function(){
+								if(el.width() != oldW){
+									oldW = el.width();
+									el.html(originalText);
+									el.ellipsis();
+								}
+							}, 200);
+						}
+					}
+				});
+			} else return this;
+		};
+	})(jQuery);
+	
+	var changesMade = false;
+	var changesBreakVersion = false;
+	
+	jQuery(document).ready(function() {
+		jQuery('.LC_EllipseOverflow').ellipsis();
+		jQuery('#syllabus-fields li').click(function() {
+			jQuery(this).parent().children('li').removeClass('ui-state-highlight');
+			jQuery(this).addClass('ui-state-highlight');
+			var id = /title-([0-9_]+)/i.exec(jQuery(this).attr('id'));
+			jQuery('#syllabus-form .LC_Box').hide();
+			jQuery('#box-'+id[1]).show();
+		});
+		jQuery('#syllabus-fields').sortable({
+			revert: true,
+			axis: 'y',
+			cursor: 'move',
+			placeholder: 'ui-state-highlight',
+			handle: 'span.ui-icon-arrowthick-2-n-s',
+			forcePlaceholderSize: true,
+			start: function(event, ui) {
+				jQuery(ui.item).css('font-style', 'italic');
+			},
+			stop: function(event, ui) {
+				var order = [];
+				jQuery(ui.item).parent().children('li').each(function() {
+					var id = /title-([0-9_]+)/i.exec(jQuery(this).attr('id'));
+					order.push(id[1]);
+				});
+				if (!changesMade) {
+					changesMade = true;
+					$('#save-button').addClass('ui-state-highlight');
+					$('#save-button').removeClass('ui-state-disabled');
+				}
+			}
+		});
+		jQuery('#syllabus-fields li').disableSelection();
+		jQuery('.RemoveSection').hide();
+		jQuery('#syllabus-fields li').hover(
+			function(){
+				jQuery(this).find('.RemoveSection').toggle();
+			},
+			function(){
+				jQuery(this).find('.RemoveSection').toggle();
+			}
+		);
+		jQuery('#syllabus-fields li span.right').hover(
+			function(){
+				jQuery(this).css('background-image', 'url("/adm/jQuery/css/smoothness/images/ui-icons_2e83ff_256x240.png")');
+			},
+			function(){
+				jQuery(this).css('background-image', 'url("/adm/jQuery/css/smoothness/images/ui-icons_454545_256x240.png")');
+			}
+		);
+		jQuery('#syllabus-form .LC_Box').hide();
+		jQuery('.LC_ActivityBarButton').hover(
+			function(){ 
+				$(this).addClass("ui-state-hover"); 
+			},
+			function(){ 
+				$(this).removeClass("ui-state-hover"); 
+			}
+		);
+	});
+</script>
+ENDSCRIPT
         my $start_page =
          &Apache::loncommon::start_page("Syllabus", $rss_link.$js,
                        {'function'       => undef,
@@ -195,14 +322,14 @@ ENDSCRIPT
     	$r->print("Flushed syllabus DB file.<br />");
     	$r->print("Syllabus conflict: ".$syllabus{'properties.v2_conflict'}."<br />");
    	}
-   	$r->print("Existing fields: ".$syllabus{'data.fields'}."<br />");
-   	$r->print("Old-new map: ".$syllabus{'data.old_new_map'}."<br />");
-   	$r->print("Deleted fields: ".$syllabus{'data.deleted_fields'}."<br />");
+   	#$r->print("Existing fields: ".$syllabus{'data.fields'}."<br />");
+   	#$r->print("Old-new map: ".$syllabus{'data.old_new_map'}."<br />");
+   	#$r->print("Deleted fields: ".$syllabus{'data.deleted_fields'}."<br />");
     if (!exists($syllabus{'data.fields'})) {
     	# convert existing 2.x data to new DB fields
     	# which become new primary data source for document
 		%data = %{convert_from_v2($r, \%syllabus, \%syllabusfields, 0)};
-		$r->print("New fields order: ".$data{'data.fields'}."<br />");
+		#$r->print("New fields order: ".$data{'data.fields'}."<br />");
 		&Apache::lonnet::put('syllabus',\%data,$cdom,$cnum);
     } elsif (  !exists($syllabus{'properties.v2_converted'}) && 
     		   exists($syllabus{'uploaded.lastmodified'}) &&
@@ -244,12 +371,12 @@ ENDSCRIPT
 			#do not delete if file in v2 conversion mode
 			if (exists($data{'data.field.'.$field}) &&
 				!exists($data{'properties.v2_converted'})) {
-				$r->print("Field '$field' can be deleted.<br />");
+				#$r->print("Field '$field' can be deleted.<br />");
 				# linearly parse "data.fields" and remove it
 				for (my $i = 0; $i < length(@fields); $i++) {
 					if ($fields[$i] eq $field) {
 						splice(@fields, $i, 1);
-						$r->print("Removed entry $i from 'data.fields'<br />");
+						#$r->print("Removed entry $i from 'data.fields'<br />");
 					}
 				}
 				# if "data.deleted" does not exist, create it
@@ -286,7 +413,7 @@ ENDSCRIPT
 			if (exists($data{'data.field.'.$field}) &&
 				!exists($data{'properties.v2_converted'})) {
 				#sanitize HTML content
-				$r->print("Rename -- field found.<br />");
+				#$r->print("Rename -- field found.<br />");
 				my %db_entry = %{thaw($data{'data.field.'.$field})};
 				$new_title = &Apache::lonfeedback::clear_out_html($new_title, 1);
 				$db_entry{title} = $new_title;
@@ -301,7 +428,7 @@ ENDSCRIPT
                 my %field_hash;
                 # only update a field if it already exists!
                 if (exists($data{'data.field.'.$syl_field})) {
-                	$r->print("Creating/updated field ".$syl_field."<br />");
+                	#$r->print("Creating/updated field ".$syl_field."<br />");
                 	%field_hash = exists($data{'data.field.'.$syl_field}) ?
                 						%{thaw($data{'data.field.'.$syl_field})} : ();
                 	$type = exists($field_hash{type}) ? $field_hash{type} : TYPE_TEXT_HTML;
@@ -359,9 +486,9 @@ ENDSCRIPT
             #2.x compatibility: write to old fields with new mapped fields
             my %old_new_map = %{thaw($data{'data.old_new_map'})};
             foreach my $old_field (keys(%old_new_map)) {
-            	$r->print("Looking for: ".$old_field." at ".$old_new_map{$old_field}."<br />");
+            	#$r->print("Looking for: ".$old_field." at ".$old_new_map{$old_field}."<br />");
             	if (exists($data{'data.field.'.$old_new_map{$old_field}})) {
-            		$r->print("updating old field ".$old_field."<br />");
+            		#$r->print("updating old field ".$old_field."<br />");
             		my %new_field = %{thaw($data{'data.field.'.$old_new_map{$old_field}})};
             		$data{$old_field} = $new_field{content};
             	}
@@ -514,17 +641,11 @@ ENDSCRIPT
     my $day = &Apache::lonannounce::showday(time,2,
              &Apache::lonannounce::readcalendar($cdom.'_'.$cnum));
     if ($target ne 'tex') {
-        if ($allowed) {
-            &Apache::lontemplate::print_start_template($r,'RSS Feeds and Blogs','LC_Box');
-            $r->print(&Apache::lonrss::advertisefeeds($cnum,$cdom,$forceedit));
-            my $editurl= &Apache::lonnet::absolute_url().'/adm/'.$cdom.'/'.$cnum.'/_rss.html';
-            $r->print( '<a href="'.$editurl.'">'.&mt('New RSS Feed or Blog').'</a>');
-            &Apache::lontemplate::print_end_template($r);
-        } elsif (&Apache::lonrss::advertisefeeds($cnum,$cdom) ne '') {
-            &Apache::lontemplate::print_start_template($r,'RSS Feeds and Blogs','LC_Box');
-            $r->print(&Apache::lonrss::advertisefeeds($cnum,$cdom,$forceedit));
-            &Apache::lontemplate::print_end_template($r);
+    	if (($syllabus{'uploaded.lastmodified'}) || ($allowed)) {
+    		&print_activity_bar($r, \%data, $target, $allowed, Apache::lontemplate->RICH_TEXT_DETECT_HTML);
+    		&print_field_sortable($r, \%data, $target, $allowed, Apache::lontemplate->RICH_TEXT_DETECT_HTML);
         }
+        $r->print("<div id='syllabus-content'>\n");
 
     } else {
         $r->print(&Apache::lonxml::xmlparse($r,'tex',$day));
@@ -533,7 +654,7 @@ ENDSCRIPT
 # ---------------------------------------------------------------- Get syllabus
     if (($syllabus{'uploaded.lastmodified'}) || ($allowed)) {
         if ($allowed) {
-            $r->print('<form method="post" action="">'.
+            $r->print('<form id="syllabus-form" method="post" action="">'.
             '<input type="hidden" name="forceedit" value="edit" />');
         }
         my @htmlids=();
@@ -581,8 +702,20 @@ ENDSCRIPT
  		@htmlids = &print_template_new_fields($r, \%data, 
  			$target, $allowed, Apache::lontemplate->RICH_TEXT_DETECT_HTML, \%custom_hash);
         if ($allowed) {
-            $r->print('</form>'.
-            &Apache::lonhtmlcommon::htmlareaselectactive(@htmlids));
+            $r->print('</form>');
+            #&Apache::lonhtmlcommon::htmlareaselectactive(@htmlids));
+        }
+        if ($target ne 'tex') {$r->print('</div><p style="clear:both">&nbsp;</p>');}
+        if ($allowed) {
+            &Apache::lontemplate::print_start_template($r,'RSS Feeds and Blogs','LC_Box');
+            $r->print(&Apache::lonrss::advertisefeeds($cnum,$cdom,$forceedit));
+            my $editurl= &Apache::lonnet::absolute_url().'/adm/'.$cdom.'/'.$cnum.'/_rss.html';
+            $r->print( '<a href="'.$editurl.'">'.&mt('New RSS Feed or Blog').'</a>');
+            &Apache::lontemplate::print_end_template($r);
+        } elsif (&Apache::lonrss::advertisefeeds($cnum,$cdom) ne '') {
+            &Apache::lontemplate::print_start_template($r,'RSS Feeds and Blogs','LC_Box');
+            $r->print(&Apache::lonrss::advertisefeeds($cnum,$cdom,$forceedit));
+            &Apache::lontemplate::print_end_template($r);
         }
     } else {
         if ($target ne 'tex') {$r->print('<p>');} else {$r->print('\par ');}
@@ -602,6 +735,41 @@ ENDSCRIPT
     return OK;
 }
 
+sub print_activity_bar {
+	my ($r, $data_ref, $target, $allowed, $default_rich_text, $group) = @_;
+	$r->print("<div id='activity-bar'>
+<button id='save-button' type='button' class='LC_ActivityBarButton LC_ActivityBarButton-IconLeft ui-state-default ui-priority-primary ui-corner-all'>
+	<span class='ui-icon ui-icon-disk'></span><a href='#'>Save</a>
+</button>
+
+</div>");
+}
+
+sub print_field_sortable {
+	my ($r, $data_ref, $target, $allowed, $default_rich_text, $group) = @_;
+	my %data = %{$data_ref};
+	my @fields = @{thaw($data{'data.fields'})};
+	$r->print("<div id='scrollable-fields-container'>
+<div id='syllabus-fields-container'>
+<ui id='syllabus-fields' class='LC_Sortable LC_SyllabusFields'>\n");
+	foreach my $key (@fields) {
+		my %field = %{thaw($data{'data.field.'.$key})};
+		$r->print("<li id='title-$key' class='ui-state-default LC_EllipseOverflow' title='$field{title}'><span class='ui-icon ui-icon-arrowthick-2-n-s left'></span><span id='remove-$key' class='RemoveSection right ui-icon ui-icon-closethick' title='Delete'></span>$field{title}</li>\n");
+	}
+	$r->print("
+</ui>
+</div>
+<div id='syllabus-fields-actions'>
+<button id='add-section-button' type='button' class='LC_ActivityBarButton LC_ActivityBarButton-IconLeft ui-state-default ui-priority-secondary ui-corner-all'>
+	<span class='ui-icon ui-icon-circle-plus'></span><a href='#'>Add&nbsp;Section</a>
+</button>
+<button id='revert-order-button' type='button' class='LC_ActivityBarButton LC_ActivityBarButton-IconLeft ui-state-default ui-priority-secondary ui-corner-all'>
+	<span class='ui-icon ui-icon-arrowreturnthick-1-w'></span><a href='#'>Revert&nbsp;Order</a>
+</button>
+</div>
+</div>\n");
+}	
+
 sub print_template_new_fields {
 	my ($r, $data_ref, $target, $allowed, $default_rich_text, $custom_handlers_ref, $group) = @_;
 	my @html_ids = ();
@@ -631,7 +799,7 @@ sub print_template_new_fields {
 				$message=&Apache::lontexconvert::msgtexconverted($message);
 				if ($target ne 'tex') {
 					#output of syllabusfields will be generated here. 
-					&Apache::lontemplate::print_start_template($r,$title,'LC_Box');
+					&Apache::lontemplate::print_start_template($r,$title,'LC_Box', 'box-'.$key);
 					$r->print($message);
 					if ($allowed) {
 						$r->print("<br /><div>");