From bd0911ac978df8ef2b303a2aa5356668af8723a0 Mon Sep 17 00:00:00 2001
From: Doug Bell <doug@plainblack.com>
Date: Thu, 2 Sep 2010 09:21:53 -0500
Subject: [PATCH] fix carousel editor panel

---
 lib/WebGUI/Asset/RichEdit.pm              | 260 +++++++++++++---------
 lib/WebGUI/Asset/Wobject/Carousel.pm      | 100 +++------
 lib/WebGUI/i18n/English/Asset_Carousel.pm |   6 +
 www/extras/wobject/Carousel/carousel.js   | 176 +++++++++------
 4 files changed, 293 insertions(+), 249 deletions(-)

diff --git a/lib/WebGUI/Asset/RichEdit.pm b/lib/WebGUI/Asset/RichEdit.pm
index f9ae3a7ec..145876b8f 100644
--- a/lib/WebGUI/Asset/RichEdit.pm
+++ b/lib/WebGUI/Asset/RichEdit.pm
@@ -405,7 +405,124 @@ sub getEditForm {
 	return $tabform;
 }
 
+# Get a list of all the buttons in this MCE
+sub getAllButtons {
+    my ( $self ) = @_;
+    my @toolbarRows = map{[split "\n", $self->getValue("toolbarRow$_")]} (1..3);
+    my @toolbarButtons = map{ @{$_} } @toolbarRows;
+    return @toolbarButtons;
+}
 
+# Get a hashref of configuration to create this MCE. You must run the code
+# from getLoadPlugins before you can successfully initialize an MCE. You 
+# must also specify the "elements" key so TinyMCE knows what textarea to 
+# replace.
+sub getConfig {
+    my ($self) = @_;
+    my $i18n = WebGUI::International->new($self->session, 'Asset_RichEdit');
+    my @plugins;
+    push @plugins, "safari";
+    push @plugins, "contextmenu"
+        if $self->getValue("enableContextMenu");
+    push @plugins, "inlinepopups"
+        if $self->getValue("inlinePopups");
+    push @plugins, "media"
+        if $self->getValue( 'allowMedia' );
+
+    my @toolbarRows = map{[split "\n", $self->getValue("toolbarRow$_")]} (1..3);
+    my @toolbarButtons = map{ @{$_} } @toolbarRows;
+    my %config = (
+        mode                    => 'exact',
+        theme                   => "advanced",
+        relative_urls           => JSON::false(),
+        remove_script_host      => JSON::true(),
+        auto_reset_designmode   => JSON::true(),
+        cleanup_callback        => "tinyMCE_WebGUI_Cleanup",
+        urlconverter_callback   => "tinyMCE_WebGUI_URLConvertor",
+        theme_advanced_resizing => JSON::true(),
+        ( map { "theme_advanced_buttons" . ( $_ + 1 ) => ( join ',', @{ $toolbarRows[$_] } ) } ( 0 .. $#toolbarRows ) ),
+
+        ask               => JSON::false(),
+        preformatted      => $self->getValue("preformatted") ? JSON::true() : JSON::false(),
+        force_br_newlines => $self->getValue("useBr") ? JSON::true() : JSON::false(),
+        force_p_newlines  => $self->getValue("useBr") ? JSON::false() : JSON::true(),
+        $self->getValue("useBr") ? ( forced_root_block => JSON::false() ) : (),
+        remove_linebreaks => $self->getValue("removeLineBreaks") ? JSON::true() : JSON::false(),
+        nowrap            => $self->getValue("nowrap")           ? JSON::true() : JSON::false(),
+        directionality    => $self->getValue("directionality"),
+        theme_advanced_toolbar_location   => $self->getValue("toolbarLocation"),
+        theme_advanced_statusbar_location => "bottom",
+        valid_elements                    => $self->getValue("validElements"),
+        wg_userIsVisitor                  => $self->session->user->isVisitor ? JSON::true() : JSON::false(),
+    );
+    foreach my $button (@toolbarButtons) {
+        if ( $button eq "spellchecker" && $self->session->config->get('availableDictionaries') ) {
+            push( @plugins, "-wgspellchecker" );
+            $config{spellchecker_rpc_url} = $self->session->url->gateway( '', "op=spellCheck" );
+            $config{spellchecker_languages} = join( ',',
+                map { ( $_->{default} ? '+' : '' ) . $_->{name} . '=' . $_->{id} }
+                    @{ $self->session->config->get('availableDictionaries') } );
+        }
+        push( @plugins, "table" )      if ( $button eq "tablecontrols" );
+        push( @plugins, "save" )       if ( $button eq "save" );
+        push( @plugins, "advhr" )      if ( $button eq "advhr" );
+        push( @plugins, "fullscreen" ) if ( $button eq "fullscreen" );
+        if ( $button eq "advimage" ) {
+            push( @plugins, "advimage" );
+            $config{external_link_list_url} = "";
+        }
+        if ( $button eq "advlink" ) {
+            $config{external_image_list_url} = "";
+            $config{file_browser_callback}   = "mcFileManager.filebrowserCallBack";
+            push( @plugins, "advlink" );
+        }
+        push( @plugins, "emotions" ) if ( $button eq "emotions" );
+        push( @plugins, "iespell" )  if ( $button eq "iespell" );
+        $config{gecko_spellcheck} = 'true' if ( $button eq "iespell" );
+        if ( $button eq "paste" || $button eq "pastetext" || $button eq "pasteword" ) {
+            push( @plugins, "paste" );
+        }
+        if ( $button eq "insertdate" || $button eq "inserttime" || $button eq "insertdatetime" ) {
+            $config{plugin_insertdate_dateFormat} = "%Y-%m-%d";
+            $config{plugin_insertdate_timeFormat} = "%H:%M:%S";
+            push( @plugins, "insertdatetime" );
+        }
+        push( @plugins, "preview" ) if ( $button eq "preview" );
+        if ( $button eq "media" ) {
+            push( @plugins, "media" );
+        }
+        push( @plugins, "searchreplace" )
+            if ( $button eq "search" || $button eq "replace" || $button eq "searchreplace" );
+        push( @plugins, "print" ) if ( $button eq "print" );
+        if ( $button eq "wginsertimage" ) {
+            push @plugins, "-wginsertimage";
+        }
+        if ( $button eq "wgpagetree" ) {
+            push @plugins, "-wgpagetree";
+        }
+        if ( $button eq "wgmacro" ) {
+            push @plugins, "-wgmacro";
+        }
+        if ( $button eq "code" ) {
+            $config{theme_advanced_source_editor_width} = $self->getValue("sourceEditorWidth")
+                if ( $self->getValue("sourceEditorWidth") > 0 );
+            $config{theme_advanced_source_editor_height} = $self->getValue("sourceEditorHeight")
+                if ( $self->getValue("sourceEditorHeight") > 0 );
+        }
+    } ## end foreach my $button (@toolbarButtons)
+    my $language = $i18n->getLanguage( '', "languageAbbreviation" );
+    unless ($language) {
+        $language = $i18n->getLanguage( "English", "languageAbbreviation" );
+    }
+    $config{language}    = $language;
+    $config{content_css} = $self->getValue("cssFile")
+        || $self->session->url->extras('tinymce-webgui/defaultcontent.css');
+    $config{width}  = $self->getValue("editorWidth")  if ( $self->getValue("editorWidth") > 0 );
+    $config{height} = $self->getValue("editorHeight") if ( $self->getValue("editorHeight") > 0 );
+    $config{plugins} = join( ",", @plugins );
+
+    return \%config;
+} ## end sub getConfig
 
 #-------------------------------------------------------------------
 
@@ -431,6 +548,33 @@ my $sql = "select asset.assetId, assetData.revisionDate from RichEdit left join
 	return \%richEditors;
 }
 
+# Get the JS code to load the plugins for this MCE. Needs to be called once
+# on the page this MCE will be on
+sub getLoadPlugins {
+    my ( $self ) = @_;
+    my %loadPlugins;
+    for my $button ( $self->getAllButtons ) {
+        if ( $button eq 'spellchecker' ) {
+            $loadPlugins{wgspellchecker} = $self->session->url->extras("tinymce-webgui/plugins/wgspellchecker/editor_plugin.js");
+        }
+        if ( $button eq 'wginsertimage' ) {
+            $loadPlugins{wginsertimage} = $self->session->url->extras("tinymce-webgui/plugins/wginsertimage/editor_plugin.js");
+        }
+        if ( $button eq 'wgpagetree' ) {
+            $loadPlugins{wgpagetree} = $self->session->url->extras("tinymce-webgui/plugins/wgpagetree/editor_plugin.js");
+        }
+        if ( $button eq 'wgmacro' ) {
+            $loadPlugins{wgmacro} = $self->session->url->extras("tinymce-webgui/plugins/wgmacro/editor_plugin.js");
+        }
+    }
+
+    my $out = '';
+    while (my ($plugin, $path) = each %loadPlugins) {
+        $out .= "tinymce.PluginManager.load('$plugin', '$path');\n";
+    }
+    return $out;
+}
+
 #-------------------------------------------------------------------
 
 =head2 getToolbar ( )
@@ -464,114 +608,11 @@ sub getRichEditor {
 	my $self = shift;
 	return '' if ($self->getValue('disableRichEditor'));
 	my $nameId = shift;
-    my @plugins;
-    my %loadPlugins;
-    push @plugins, "safari";
-    push @plugins, "contextmenu"
-        if $self->getValue("enableContextMenu");
-    push @plugins, "inlinepopups"
-        if $self->getValue("inlinePopups");
-    push @plugins, "media"
-        if $self->getValue( 'allowMedia' );
-
-    my @toolbarRows = map{[split "\n", $self->getValue("toolbarRow$_")]} (1..3);
-    my @toolbarButtons = map{ @{$_} } @toolbarRows;
 	my $i18n = WebGUI::International->new($self->session, 'Asset_RichEdit');
     my $ask = $self->getValue("askAboutRichEdit");
-	my %config = (
-		mode     => $ask ? "none" : "exact",
-		elements => $nameId,
-		theme    => "advanced",
-		relative_urls => JSON::false(),
-		remove_script_host => JSON::true(),
-		auto_reset_designmode => JSON::true(),
-		cleanup_callback => "tinyMCE_WebGUI_Cleanup",
-		urlconverter_callback => "tinyMCE_WebGUI_URLConvertor",
-		theme_advanced_resizing => JSON::true(),
-		      (map { "theme_advanced_buttons".($_+1) => (join ',', @{$toolbarRows[$_]}) }
-		       (0..$#toolbarRows)),
-		#ask => $self->getValue("askAboutRichEdit") ? JSON::true() : JSON::false(),
-		ask => JSON::false(),
-		preformatted => $self->getValue("preformatted") ? JSON::true() : JSON::false(),
-		force_br_newlines => $self->getValue("useBr") ? JSON::true() : JSON::false(),
-		force_p_newlines => $self->getValue("useBr") ? JSON::false() : JSON::true(),
-        $self->getValue("useBr") ? ( forced_root_block => JSON::false() ) : (),
-		remove_linebreaks => $self->getValue("removeLineBreaks") ? JSON::true() : JSON::false(),
-		nowrap => $self->getValue("nowrap") ? JSON::true() : JSON::false(),
-		directionality => $self->getValue("directionality"),
-		theme_advanced_toolbar_location => $self->getValue("toolbarLocation"),
-		theme_advanced_statusbar_location => "bottom",
-		valid_elements => $self->getValue("validElements"),
-		wg_userIsVisitor => $self->session->user->isVisitor ? JSON::true() : JSON::false(),
-		);
 #    if ($ask) {
 #        $config{oninit} = 'turnOffTinyMCE_'.$nameId;
 #    }
-	foreach my $button (@toolbarButtons) {
-		if ($button eq "spellchecker" && $self->session->config->get('availableDictionaries')) {
-            push(@plugins,"-wgspellchecker");
-            $loadPlugins{wgspellchecker} = $self->session->url->extras("tinymce-webgui/plugins/wgspellchecker/editor_plugin.js");
-			$config{spellchecker_rpc_url} = $self->session->url->gateway('', "op=spellCheck");
-			$config{spellchecker_languages} = 
-			join(',', map { ($_->{default} ? '+' : '').$_->{name}.'='.$_->{id} } @{$self->session->config->get('availableDictionaries')});
-		}
-		push(@plugins,"table") if ($button eq "tablecontrols");
-		push(@plugins,"save") if ($button eq "save");
-		push(@plugins,"advhr") if ($button eq "advhr");
-		push(@plugins,"fullscreen") if ($button eq "fullscreen");
-		if ($button eq "advimage") {
-			push(@plugins,"advimage");
-			$config{external_link_list_url} = "";
-		}
-		if ($button eq "advlink") {
-			$config{external_image_list_url} = "";
-			$config{file_browser_callback} = "mcFileManager.filebrowserCallBack";
-			push(@plugins,"advlink");
-		}
-		push(@plugins,"emotions") if ($button eq "emotions");
-		push(@plugins,"iespell") if ($button eq "iespell");
-		$config{gecko_spellcheck} = 'true' if ($button eq "iespell");
-		if ($button eq "paste" || $button eq "pastetext" || $button eq "pasteword") {
-			push(@plugins,"paste");
-		}
-		if ($button eq "insertdate" || $button eq "inserttime" || $button eq "insertdatetime") {
-			$config{plugin_insertdate_dateFormat} = "%Y-%m-%d";
-			$config{plugin_insertdate_timeFormat} = "%H:%M:%S";
-			push(@plugins,"insertdatetime");
-		}
-		push(@plugins,"preview") if ($button eq "preview");
-		if ($button eq "media") {
-			push(@plugins,"media");
-		}
-		push(@plugins,"searchreplace") if ($button eq "search" || $button eq "replace" || $button eq "searchreplace");
-		push(@plugins,"print") if ($button eq "print");
-        if ($button eq "wginsertimage") {
-            push @plugins, "-wginsertimage";
-            $loadPlugins{wginsertimage} = $self->session->url->extras("tinymce-webgui/plugins/wginsertimage/editor_plugin.js");
-        }
-        if ($button eq "wgpagetree") {
-            push @plugins, "-wgpagetree";
-            $loadPlugins{wgpagetree} = $self->session->url->extras("tinymce-webgui/plugins/wgpagetree/editor_plugin.js");
-        }
-        if ($button eq "wgmacro") {
-            push @plugins, "-wgmacro";
-            $loadPlugins{wgmacro} = $self->session->url->extras("tinymce-webgui/plugins/wgmacro/editor_plugin.js");
-        }
-		if ($button eq "code") {
-			$config{theme_advanced_source_editor_width} = $self->getValue("sourceEditorWidth") if ($self->getValue("sourceEditorWidth") > 0);
-			$config{theme_advanced_source_editor_height} = $self->getValue("sourceEditorHeight") if ($self->getValue("sourceEditorHeight") > 0);
-		}
-	}
-	my $language  = $i18n->getLanguage('' ,"languageAbbreviation");
-	unless ($language) {
-		$language = $i18n->getLanguage("English","languageAbbreviation");
-	}
-	$config{language} = $language;
-	$config{content_css} = $self->getValue("cssFile") || $self->session->url->extras('tinymce-webgui/defaultcontent.css');
-	$config{width} = $self->getValue("editorWidth") if ($self->getValue("editorWidth") > 0);
-	$config{height} = $self->getValue("editorHeight") if ($self->getValue("editorHeight") > 0);
-	$config{plugins} = join(",",@plugins);
-
     $self->session->style->setScript($self->session->url->extras('yui/build/yahoo/yahoo-min.js'),{type=>"text/javascript"});
     $self->session->style->setScript($self->session->url->extras('yui/build/event/event-min.js'),{type=>"text/javascript"});
     $self->session->style->setScript($self->session->url->extras('tinymce/jscripts/tiny_mce/tiny_mce_src.js'),{type=>"text/javascript"});
@@ -596,11 +637,16 @@ EOHTML1
 #    }
 #}
 #YAHOO.util.Event.onDOMReady(turnOffTinyMCE_$nameId);
+    } 
+
+    my $config  = $self->getConfig;
+    $config->{ elements } = $nameId;
+    if ( $ask ) {
+        $config->{mode} = "none";
     }
-    while (my ($plugin, $path) = each %loadPlugins) {
-        $out .= "tinymce.PluginManager.load('$plugin', '$path');\n";
-    }
-    $out    .= "\ttinyMCE.init(" . JSON->new->pretty->encode(\%config) . " );\n";
+
+    $out    .= $self->getLoadPlugins;
+    $out    .= "\ttinyMCE.init(" . JSON->new->pretty->encode( $config ) . " );\n";
     $out    .= "</script>";
 }
 
diff --git a/lib/WebGUI/Asset/Wobject/Carousel.pm b/lib/WebGUI/Asset/Wobject/Carousel.pm
index 74e96defb..298511a60 100644
--- a/lib/WebGUI/Asset/Wobject/Carousel.pm
+++ b/lib/WebGUI/Asset/Wobject/Carousel.pm
@@ -108,10 +108,20 @@ sub getEditForm {
 	my $tabform = $self->SUPER::getEditForm();
     my $i18n    = WebGUI::International->new($self->session, "Asset_Carousel");
 
+    $self->session->style->setScript($self->session->url->extras('yui/build/yahoo-dom-event/yahoo-dom-event.js'), {type =>
+    'text/javascript'});
+    $self->session->style->setScript($self->session->url->extras('yui/build/element/element-min.js'), {type =>
+    'text/javascript'});
+    $self->session->style->setScript($self->session->url->extras('yui/build/tabview/tabview-min.js'), {type =>
+    'text/javascript'});
     $self->session->style->setScript($self->session->url->extras('yui/build/editor/editor-min.js'), {type =>
     'text/javascript'});
+    $self->session->style->setScript($self->session->url->extras('yui/build/json/json-min.js'), {type =>
+    'text/javascript'});
     $self->session->style->setLink($self->session->url->extras('yui/build/editor/assets/skins/sam/editor.css'), {type
     =>'text/css', rel=>'stylesheet'});
+    $self->session->style->setLink($self->session->url->extras('yui/build/tabview/assets/skins/sam/tabview.css'), {type
+    =>'text/css', rel=>'stylesheet'});
     $self->session->style->setScript($self->session->url->extras('wobject/Carousel/carousel.js'), {type =>
     'text/javascript'});
 
@@ -120,56 +130,30 @@ sub getEditForm {
         .'    <td class="formDescription"  valign="top" style="width: 180px;"><label for="item1">'
               .$i18n->get("items label").'</label><div class="wg-hoverhelp">'.$i18n->get("items description").'</div></td>'
         .'    <td id="items_td" valign="top" class="tableData">'
-        .'    <input type="button" value="Add item" onClick="javascript:addItem()"></input><br />'
+        .'    <input type="hidden" id="items_formId" name="items" />'
+        .'    <input type="button" value="Add item" onclick="window.carouselEditor.addTab()"></input><br />'
         ."    <br />\n";
 
     $tabform->getTab("properties")->raw($tableRowStart);
+    
 
-    if($self->getValue('items')){
-        my @items = @{JSON->new->decode($self->getValue('items'))->{items}};
+    my $richedit        = WebGUI::Asset->newByDynamicClass( $self->session, $self->session->setting->get('richEditor') );
+    my $config          = JSON->new->encode( $richedit->getConfig );
+    my $loadMcePlugins  = $richedit->getLoadPlugins;
+    my $items           = $self->get('items') ? JSON->new->decode($self->get('items'))->{items} : [];
+    $items              = JSON->new->encode( $items );
+    my $i18n            = JSON->new->encode( { "delete" => $i18n->get("delete") } );
+
+    $tabform->getTab('properties')->raw(<<"ENDHTML");
+    <div id="carouselEditor"></div>
+    <script type="text/javascript">
+    $loadMcePlugins
+    YAHOO.util.Event.onDOMReady( function() {
+        window.carouselEditor = new WebGUI.Carousel.Editor( "carouselEditor", $config, $items, $i18n );
+    } );
+    </script>
+ENDHTML
 
-        foreach my $item (@items){
-            my $itemNr = $item->{sequenceNumber};
-            my $itemHTML = "<div id='item_div".$itemNr."' name='item_div_".$itemNr."'>\n"
-                ."<span>\n"
-                .$i18n->get("id label").'<div class="wg-hoverhelp">'.$i18n->get("id description").'</div>: '
-                .'<input type="text" id="itemId'.$itemNr.'" '
-                .'name="itemId_'.$itemNr.'" value="'.$item->{itemId}.'">'
-                ."</span>\n"
-                ."<input type='button' id='deleteItem".$itemNr."' value='Delete this item'
-onClick='javascript:deleteItem(this.id)'></input>\n"
-                .'<textarea id="item'.$itemNr.'" name="item_'.$itemNr.'" '
-                .'class="carouselItemText" rows="#" cols="#" '
-                .'style="width: 500px; height: 80px;">'.$item->{text}."</textarea><br />\n";
-            
-            $itemHTML .= 
-                " <script type='text/javascript'>\n"
-                .'var myEditor'.$itemNr.' '
-                .'= new YAHOO.widget.SimpleEditor("item'.$itemNr.'", '
-                ."{height: '80px', width: '500px', handleSubmit: true});\n"
-                .'myEditor'.$itemNr.".render()\n"
-                ."</script>\n"
-                ."</div>\n";
-            $tabform->getTab("properties")->raw($itemHTML);
-        }
-    }
-    else{
-        my $itemHTML = "<div id='item_div1' name='item_div_1'>\n"
-                ."<span>\n"
-                .$i18n->get("id label").'<div class="wg-hoverhelp">'.$i18n->get("id description").'</div>: '
-                .' <input type="text" id="itemId1" name="itemId_1" value="carousel_item_1">'
-                ."</span>\n"
-                ."<input type='button' id='deleteItem1' value='Delete this item' onClick='javascript:deleteItem(this.id)'></input>\n"
-                .'<textarea id="item1" name="item_1" class="carouselItemText" rows="#" cols="#" '
-                ."style='width: 500px; height: 80px;'></textarea><br />\n";
-            
-        $itemHTML .= 
-                 "<script type='text/javascript'>\n"
-                ."var myEditor1 = new YAHOO.widget.SimpleEditor('item1', {height: '80px', width: '500px', handleSubmit: true});\n"
-                ."myEditor1.render()\n"
-                ."</script>\n";
-        $tabform->getTab("properties")->raw($itemHTML);
-    }
     my $tableRowEnd = qq|
             </td>
         </tr>
@@ -213,32 +197,10 @@ Used to process properties from the form posted.
 sub processPropertiesFromFormPost {
     my $self    = shift;
     my $form    = $self->session->form;
-    my (@items,$items);
     $self->SUPER::processPropertiesFromFormPost(@_);
 
-    foreach my $param ($form->param) {
-        if ($param =~ m/^item_/){
-            my $sequenceNumber = $param;
-            $sequenceNumber =~ s/^item_//;
-            if($form->process('itemId_'.$sequenceNumber)){
-            push(@items,{
-                sequenceNumber  => $sequenceNumber,
-                text            => $form->process($param),
-                itemId              => $form->process('itemId_'.$sequenceNumber),
-            });
-            }
-        }
-    }
-    
-    my  @sortedItems = sort { $a->{sequenceNumber} cmp $b->{sequenceNumber} } @items;
-    @items = ();
-    for (my $i=0; $i<scalar @sortedItems; $i++) {
-        $sortedItems[$i]->{sequenceNumber} = $i + 1;
-        push(@items,$sortedItems[$i]);
-    }        
-   
-    $items = JSON->new->encode({items => \@items});
-    $self->update({items => $items});
+    my $items   = JSON->new->decode( $form->get("items") ); 
+    $self->update({ items => JSON->new->encode({ items => $items }) });
     return undef;
 }
 
diff --git a/lib/WebGUI/i18n/English/Asset_Carousel.pm b/lib/WebGUI/i18n/English/Asset_Carousel.pm
index 89d9bf16e..890de2666 100644
--- a/lib/WebGUI/i18n/English/Asset_Carousel.pm
+++ b/lib/WebGUI/i18n/English/Asset_Carousel.pm
@@ -50,6 +50,12 @@ our $I18N = {
         lastUpdated => 0,
         context => q|Description of the carousel template field, used as hover help.|
     },
+    
+    'delete' => {
+        message     => q{Delete},
+        lastUpdated => 0,
+        context     => q{Label for button to delete an item from the carousel},
+    },
 
     'slideHeight' => {
         message => q|The height set for each slide in the Carousel|,
diff --git a/www/extras/wobject/Carousel/carousel.js b/www/extras/wobject/Carousel/carousel.js
index 168e4b412..2878e8c26 100644
--- a/www/extras/wobject/Carousel/carousel.js
+++ b/www/extras/wobject/Carousel/carousel.js
@@ -1,77 +1,107 @@
-function addItem () {
-    var items_td = document.getElementById('items_td');
-    var textAreas = items_td.getElementsByClassName('carouselItemText');
-    var textAreaCount = textAreas.length;
-    var newItemNumber = textAreaCount + 1;
 
-    var Dom = YAHOO.util.Dom;
-    var myConfig = {
-        height: '80px',
-        width: '500px',
-	handleSubmit: true
-    };
-
-    var newItem_div = document.createElement('div');
-    newItem_div.id = 'item_div'+newItemNumber;
-    newItem_div.name = 'item_div_'+newItemNumber;
-    items_td.appendChild(newItem_div);
-
-    var newItem_textarea = document.createElement('textarea');
-    newItem_textarea.id = 'item'+newItemNumber;
-    newItem_textarea.name = 'item_'+newItemNumber;
-    newItem_textarea.className = 'carouselItemText';
-
-    var newItem_id_span = document.createElement('span');
-    newItem_id_span.innerHTML = 'ID: <input type="text" id="newItem_id" name="itemId" value="">';
-    newItem_div.appendChild(newItem_id_span);
-
-    var newItem_id = document.getElementById('newItem_id');
-    newItem_id.type = 'text';
-    newItem_id.id = 'itemId'+newItemNumber;
-    newItem_id.name = 'itemId_'+newItemNumber;
-    newItem_id.value = 'carousel_item_'+newItemNumber;
-
-    var newItem_deleteButton = document.createElement('input');
-    newItem_deleteButton.type = 'button';	
-    newItem_deleteButton.id = 'deleteItem'+newItemNumber;
-    newItem_deleteButton.value = 'Delete this item';
-    newItem_deleteButton.onclick = function(){deleteItem(this.id)};
-    newItem_div.appendChild(newItem_deleteButton);
-
-    newItem_div.appendChild(newItem_textarea);
-
-    var newItem_break = document.createElement('br');
-    newItem_div.appendChild(newItem_break);
-
-    var myEditor = new YAHOO.widget.SimpleEditor('item'+newItemNumber, myConfig);
-    myEditor.render();
+if ( typeof WebGUI == 'undefined' ) {
+    WebGUI = {};
 }
-function resetItemIds() {
-    var items_td = document.getElementById('items_td');
-    var textAreas = items_td.getElementsByClassName('carouselItemText');
-    for (i=0;i<textAreas.length;i=i+1) {
-	var oldId = textAreas[i].id.substring(4);
-	var newId = i + 1;
-	if(newId != oldId){
-		var newTextareaId = 'item' + newId;
-		var newTextareaName = 'item_' + newId;
-		document.getElementById('item'+oldId).name = newTextareaName;
-		document.getElementById('item'+oldId).id = newTextareaId;
-
-		var newIdInputId = 'itemId' + newId;
-		var newIdInputName = 'itemId_' + newId;
-		document.getElementById('itemId'+oldId).name = newIdInputName;
-		document.getElementById('itemId'+oldId).id = newIdInputId;
-
-		var newDivId = 'item_div' + newId;
-		document.getElementById('item_div'+oldId).id = newDivId;
-		textAreas[i].id = newId;
-	}
-    }	
-}
-function deleteItem(deleteId){
-    var itemDiv = document.getElementById(deleteId).parentNode;
-    itemDiv.parentNode.removeChild(itemDiv);
-    resetItemIds();	
+if ( typeof WebGUI.Carousel == 'undefined' ) {
+    WebGUI.Carousel = {};
 }
 
+WebGUI.Carousel.Editor
+= function ( id, mceConfig, items, i18n ) {
+    this.id         = id;
+    this.mceConfig  = mceConfig;
+    this.items      = items;
+    this.i18n       = i18n;
+
+    // Initialize a tabview
+    this.tabView    = new YAHOO.widget.TabView( this.id, {
+        orientation     : "left"
+    } );
+
+    // Add a tab for each item
+    for ( var i = 0; i < this.items.length; i++ ) {
+        this.addTab( this.items[i] );
+    }
+
+    // We're new!
+    if ( this.items.length == 0 ) {
+        this.addTab( );
+    }
+
+    // Find the form and eventize it!
+    var form    = document.getElementById( this.id );
+    while ( form.tagName != "FORM" ) {
+        form = form.parentNode;
+    }
+    YAHOO.util.Event.on( form, 'submit', this.handleSubmit, this, true );
+};
+
+WebGUI.Carousel.Editor.prototype.addTab
+= function ( data ) {
+    var num = this.tabView.get('tabs').length + 1;
+    if ( !data ) {
+        data    = { text : "", itemId : 'carousel_item_' + num };
+    }
+
+    var tab = new YAHOO.widget.Tab( {
+        label       : num,
+        content     : ''
+    } );
+    this.tabView.addTab( tab );
+    this.tabView.selectTab( num - 1 );
+
+    var el = tab.get('contentEl');
+
+    var delBtn  = document.createElement( 'input' );
+    delBtn.type = "button";
+    delBtn.style.cssFloat = "right";
+    delBtn.value = this.i18n['delete'];
+    YAHOO.util.Event.on( delBtn, "click", function(){ 
+        this.tabView.removeTab( tab );
+    }, this, true );
+    el.appendChild( delBtn );
+
+    var input   = document.createElement( 'input' );
+    input.type = "text";
+    input.value = data.itemId;
+    el.appendChild( document.createTextNode( "ID: " ) );
+    el.appendChild( input );
+
+    var ta  = document.createElement( 'textarea' );
+    ta.className    = "carouselInput";
+    ta.name         = "carouselInput" + num;
+    ta.id           = ta.name;
+    ta.style.height = "300px";
+    ta.appendChild( document.createTextNode( data.text ) );
+    el.appendChild( ta );
+
+    var conf    = this.mceConfig;
+    conf.mode = "exact";
+    conf.elements = ta.name;
+
+    tinyMCE.init( conf );
+};
+
+WebGUI.Carousel.Editor.prototype.handleSubmit
+= function ( ) {
+    var tabs = this.tabView.get('tabs');
+    var items = [];
+    for ( var i = 0; i < tabs.length; i++ ) {
+        var item    = { };
+        var tab     = tabs[i];
+        var elem    = tab.get('contentEl');
+
+        var id      = elem.getElementsByTagName( 'input' )[1];
+        item.itemId = id.value;
+
+        var text    = elem.getElementsByTagName( 'textarea' )[0];
+        item.text   = text.value;
+
+        item.sequenceNumber = i;
+
+        items.push( item );
+    }
+    var json = YAHOO.lang.JSON.stringify( items );
+    document.getElementById( 'items_formId' ).value = json;
+};
+