css fixes (finally looks like it should); OC native l10n started (have to port from svg-edit javascript)

2 files changed, 386 insertions, 385 deletions

diff --git a/files_svgedit/css/ocsvg.css b/files_svgedit/css/ocsvg.css
index 50f5417ae..efe9e56b1 100644
--- a/files_svgedit/css/ocsvg.css
+++ b/files_svgedit/css/ocsvg.css
@@ -1,13 +1,16 @@
 div#editorWrapper {
-	position: relative;
+	position: fixed;
 	height: 0;
 	width: 0;
+    margin: 2px;
 }
 div#editorContent {
-	position: absoloute;
-	display: block;
+	position: relative;
+	/*display: block;*/
 	/*top: 80px;
 	left: 160px;*/
+    top:0px;
+    left:0px;
     width: 100%;
     height: 100%;
 }
diff --git a/files_svgedit/templates/editor.php b/files_svgedit/templates/editor.php
index 6e87c67be..f90e2e5f2 100644
--- a/files_svgedit/templates/editor.php
+++ b/files_svgedit/templates/editor.php
@@ -22,6 +22,8 @@ function setEditorSize(){
     // Sets the size of the text editor window.
     //fillWindow($('#editorContent'));
     fillWindow($('#editorWrapper'));
+    //fillWindow($('#svg_editor'));
+    //fillWindow($('#workarea'));
 }
 
 $(document).ready(function() {
@@ -33,17 +35,309 @@ $(document).ready(function() {
     });
 });
 </script>
-<div id="controls">
-    <input type="button" id="svgeditButtonSave" value="<?php echo $l->t('Save'); ?>" />
-    <input type="button" id="svgeditButtonSaveAs" value="<?php echo $l->t('Save As'); ?>" />
-    <input type="button" id="svgeditButtonExport" value="<?php echo $l->t('Export PNG'); ?>" />
-    <input type="button" id="svgeditButtonProperties" value="<?php echo $l->t('Properties'); ?>" />
-    <input type="button" id="svgeditButtonClose" value="<?php echo $l->t('Close'); ?>" />
-</div>
 <div id="editorWrapper">
 <div id="editorContent">
 <div id="svg_editor">
 
+<div id="main_button">
+    <div id="main_icon" class="buttonup" title="Main Menu">
+        <span></span>
+        <div id="logo"></div>
+        <div class="dropdown"></div>
+    </div>
+        
+    <div id="main_menu"> 
+    
+        <!-- File-like buttons: New, Save, Source -->
+        <ul>
+            <li id="tool_clear">
+                <div></div>
+                <?php echo $l->t('New Image'); ?> [N]
+            </li>
+            
+            <li id="tool_open" style="display:none;">
+                <div id="fileinputs">
+                    <div></div>
+                </div>
+                <?php echo $l->t('Open Image'); ?> [O]
+            </li>
+            
+            <li id="tool_import" style="display:none;">
+                <div id="fileinputs_import">
+                    <div></div>
+                </div>
+                <?php echo $l->t('Import SVG'); ?>
+            </li>
+            
+            <li id="tool_save">
+                <div></div>
+                <?php echo $l->t('Save Image'); ?> [S]
+            </li>
+            
+            <li id="tool_export">
+                <div></div>
+                <?php echo $l->t('Export as PNG'); ?>
+            </li>
+            
+            <li id="tool_docprops">
+                <div></div>
+                <?php echo $l->t('Document Properties'); ?> [P]
+            </li>
+        </ul>
+        
+        <p>
+            <a href="http://svg-edit.googlecode.com/" target="_blank">
+                <?php echo $l->t('SVG-edit Home Page'); ?>
+            </a>
+        </p>
+
+    </div>
+</div>
+
+
+
+<div id="tools_top" class="tools_panel">
+    
+    <div id="editor_panel">
+        <div class="push_button" id="tool_source" title="<?php echo $l->t('Edit Source'); ?> [U]"></div>
+        <div class="tool_button" id="tool_wireframe" title="<?php echo $l->t('Wireframe Mode'); ?> [F]"></div>
+    </div>
+
+    <!-- History buttons -->
+    <div id="history_panel">
+        <div class="tool_sep"></div>
+        <div class="push_button tool_button_disabled" id="tool_undo" title="<?php echo $l->t('Undo'); ?> [Z]"></div>
+        <div class="push_button tool_button_disabled" id="tool_redo" title="<?php echo $l->t('Redo'); ?> [Y]"></div>
+    </div>
+    
+    <!-- Buttons when a single element is selected -->
+    <div id="selected_panel">
+        <div class="toolset">
+            <div class="tool_sep"></div>
+            <div class="push_button" id="tool_clone" title="<?php echo $l->t('Clone Element'); ?> [C]"></div>
+            <div class="push_button" id="tool_delete" title="<?php echo $l->t('Delete Element'); ?> [Delete/Backspace]"></div>
+            <div class="tool_sep"></div>
+            <div class="push_button" id="tool_move_top" title="<?php echo $l->t('Move to Top'); ?> [Shift+Up]"></div>
+            <div class="push_button" id="tool_move_bottom" title="<?php echo $l->t('Move to Bottom'); ?> [Shift+Down]"></div>
+            <div class="push_button" id="tool_topath" title="<?php echo $l->t('Convert to Path'); ?>"></div>
+            <div class="push_button" id="tool_reorient" title="<?php echo $l->t('Reorient path'); ?>"></div>
+            <div class="tool_sep"></div>
+            <label id="idLabel" title="<?php echo $l->t('Identify the element'); ?>">
+                <span>id:</span>
+                <input id="elem_id" class="attr_changer" data-attr="id" size="10" type="text"/>
+            </label>
+        </div>
+
+        <label id="tool_angle" title="<?php echo $l->t('Change rotation angle'); ?>">
+            <span id="angleLabel" class="icon_label"></span>
+            <input id="angle" size="2" value="0" type="text"/>
+        </label>
+        
+        <div class="toolset" id="tool_blur" title="<?php echo $l->t('Change gaussian blur value'); ?>">
+            <label>
+                <span id="blurLabel" class="icon_label"></span>
+                <input id="blur" size="2" value="0" type="text"/>
+            </label>
+            <div id="blur_dropdown" class="dropdown">
+                <button></button>
+                <ul>
+                    <li class="special"><div id="blur_slider"></div></li>
+                </ul>
+            </div>
+        </div>
+        
+        <div class="dropdown toolset" id="tool_position" title="<?php echo $l->t('Align Element to Page'); ?>">
+                <div id="cur_position" class="icon_label"></div>
+                <button></button>
+        </div>		
+
+        <div id="xy_panel" class="toolset">
+            <label>
+                x: <input id="selected_x" class="attr_changer" title="<?php echo $l->t('Change X coordinate'); ?>" size="3" data-attr="x"/>
+            </label>
+            <label>
+                y: <input id="selected_y" class="attr_changer" title="<?php echo $l->t('Change Y coordinate'); ?>" size="3" data-attr="y"/>
+            </label>
+        </div>
+    </div>
+
+    <!-- Buttons when multiple elements are selected -->
+    <div id="multiselected_panel">
+        <div class="tool_sep"></div>
+        <div class="push_button" id="tool_clone_multi" title="<?php echo $l->t('Clone Elements'); ?> [C]"></div>
+        <div class="push_button" id="tool_delete_multi" title="<?php echo $l->t('Delete Selected Elements'); ?> [Delete/Backspace]"></div>
+        <div class="tool_sep"></div>
+        <div class="push_button" id="tool_group" title="<?php echo $l->t('Group Elements'); ?> [G]"></div>
+        <div class="push_button" id="tool_alignleft" title="<?php echo $l->t('Align Left'); ?>"></div>
+        <div class="push_button" id="tool_aligncenter" title="<?php echo $l->t('Align Center'); ?>"></div>
+        <div class="push_button" id="tool_alignright" title="<?php echo $l->t('Align Right'); ?>"></div>
+        <div class="push_button" id="tool_aligntop" title="<?php echo $l->t('Align Top'); ?>"></div>
+        <div class="push_button" id="tool_alignmiddle" title="<?php echo $l->t('Align Middle'); ?>"></div>
+        <div class="push_button" id="tool_alignbottom" title="<?php echo $l->t('Align Bottom'); ?>"></div>
+        <label id="tool_align_relative"> 
+            <span id="relativeToLabel"><?php echo $l->t('relative to:'); ?></span>
+            <select id="align_relative_to" title="<?php echo $l->t('Align relative to ...'); ?>">
+            <option id="selected_objects" value="selected"><?php echo $l->t('selected objects'); ?></option>
+            <option id="largest_object" value="largest"><?php echo $l->t('largest object'); ?></option>
+            <option id="smallest_object" value="smallest"><?php echo $l->t('smallest object'); ?></option>
+            <option id="page" value="page"><?php echo $l->t('page'); ?></option>
+            </select>
+        </label>
+        <div class="tool_sep"></div>
+
+    </div>
+
+    <div id="g_panel">
+        <div class="tool_sep"></div>
+        <div class="push_button" id="tool_ungroup" title="<?php echo $l->t('Ungroup Elements'); ?> [G]"></div>
+    </div>
+
+    <div id="rect_panel">
+        <div class="toolset">
+            <label id="rect_width_tool" title="<?php echo $l->t('Change rectangle width'); ?>">
+                <span id="rwidthLabel" class="icon_label"></span>
+                <input id="rect_width" class="attr_changer" size="3" data-attr="width"/>
+            </label>
+            <label id="rect_height_tool" title="<?php echo $l->t('Change rectangle height'); ?>">
+                <span id="rheightLabel" class="icon_label"></span>
+                <input id="rect_height" class="attr_changer" size="3" data-attr="height"/>
+            </label>
+        </div>
+        <label id="cornerRadiusLabel" title="<?php echo $l->t('Change Rectangle Corner Radius'); ?>">
+            <span class="icon_label"></span>
+            <input id="rect_rx" size="3" value="0" type="text" data-attr="Corner Radius"/>
+        </label>
+    </div>
+
+    <div id="image_panel">
+    <div class="toolset">
+        <label><span id="iwidthLabel" class="icon_label"></span>
+        <input id="image_width" class="attr_changer" title="<?php echo $l->t('Change image width'); ?>" size="3" data-attr="width"/>
+        </label>
+        <label><span id="iheightLabel" class="icon_label"></span>
+        <input id="image_height" class="attr_changer" title="<?php echo $l->t('Change image height'); ?>" size="3" data-attr="height"/>
+        </label>
+    </div>
+    <div class="toolset">
+        <label id="tool_image_url">url:
+            <input id="image_url" type="text" title="<?php echo $l->t('Change URL'); ?>" size="35"/>
+        </label>
+        <label id="tool_change_image">
+            <button id="change_image_url" style="display:none;"><?php echo $l->t('Change Image'); ?></button>
+            <span id="url_notice" title="<?php echo $l->t('NOTE: This image cannot be embedded. It will depend on this path to be displayed'); ?>"></span>
+        </label>
+    </div>
+  </div>
+
+    <div id="circle_panel">
+        <div class="toolset">
+            <label id="tool_circle_cx">cx:
+            <input id="circle_cx" class="attr_changer" title="<?php echo $l->t("Change circle's cx coordinate"); ?>" size="3" data-attr="cx"/>
+            </label>
+            <label id="tool_circle_cy">cy:
+            <input id="circle_cy" class="attr_changer" title="<?php echo $l->t("Change circle's cy coordinate"); ?>" size="3" data-attr="cy"/>
+            </label>
+        </div>
+        <div class="toolset">
+            <label id="tool_circle_r">r:
+            <input id="circle_r" class="attr_changer" title="<?php echo $l->t("Change circle's radius"); ?>" size="3" data-attr="r"/>
+            </label>
+        </div>
+    </div>
+
+    <div id="ellipse_panel">
+        <div class="toolset">
+            <label id="tool_ellipse_cx">cx:
+            <input id="ellipse_cx" class="attr_changer" title="<?php echo $l->t("Change ellipse's cx coordinate"); ?>" size="3" data-attr="cx"/>
+            </label>
+            <label id="tool_ellipse_cy">cy:
+            <input id="ellipse_cy" class="attr_changer" title="<?php echo $l->t("Change ellipse's cy coordinate"); ?>" size="3" data-attr="cy"/>
+            </label>
+        </div>
+        <div class="toolset">
+            <label id="tool_ellipse_rx">rx:
+            <input id="ellipse_rx" class="attr_changer" title="<?php echo $l->t("Change ellipse's x radius"); ?>" size="3" data-attr="rx"/>
+            </label>
+            <label id="tool_ellipse_ry">ry:
+            <input id="ellipse_ry" class="attr_changer" title="<?php echo $l->t("Change ellipse's y radius"); ?>" size="3" data-attr="ry"/>
+            </label>
+        </div>
+    </div>
+
+    <div id="line_panel">
+        <div class="toolset">
+            <label id="tool_line_x1">x1:
+            <input id="line_x1" class="attr_changer" title="<?php echo $l->t("Change line's starting x coordinate"); ?>" size="3" data-attr="x1"/>
+            </label>
+            <label id="tool_line_y1">y1:
+            <input id="line_y1" class="attr_changer" title="<?php echo $l->t("Change line's starting y coordinate"); ?>" size="3" data-attr="y1"/>
+            </label>
+        </div>
+        <div class="toolset">
+            <label id="tool_line_x2">x2:
+            <input id="line_x2" class="attr_changer" title="<?php echo $l->t("Change line's ending x coordinate"); ?>" size="3" data-attr="x2"/>
+            </label>
+            <label id="tool_line_y2">y2:
+            <input id="line_y2" class="attr_changer" title="<?php echo $l->t("Change line's ending y coordinate"); ?>" size="3" data-attr="y2"/>
+            </label>
+        </div>
+    </div>
+
+    <div id="text_panel">
+        <div class="toolset">
+            <div class="tool_button" id="tool_bold" title="<?php echo $l->t('Bold Text'); ?> [B]"><span></span>B</div>
+            <div class="tool_button" id="tool_italic" title="<?php echo $l->t('Italic Text'); ?> [I]"><span></span>i</div>
+        </div>
+        
+        <div class="toolset" id="tool_font_family">
+            <label>
+                <!-- Font family -->
+                <input id="font_family" type="text" title="<?php echo $l->t('Change Font Family'); ?>" size="12"/>
+            </label>
+            <div id="font_family_dropdown" class="dropdown">
+                <button></button>
+                <ul>
+                    <li style="font-family:serif"><?php echo $l->t('Serif'); ?></li>
+                    <li style="font-family:sans-serif"><?php echo $l->t('Sans-serif'); ?></li>
+                    <li style="font-family:cursive"><?php echo $l->t('Cursive'); ?></li>
+                    <li style="font-family:fantasy"><?php echo $l->t('Fantasy'); ?></li>
+                    <li style="font-family:monospace"><?php echo $l->t('Monospace'); ?></li>
+                </ul>
+            </div>
+        </div>
+
+        <label id="tool_font_size" title="<?php echo $l->t('Change Font Size'); ?>">
+            <span id="font_sizeLabel" class="icon_label"></span>
+            <input id="font_size" size="3" value="0" type="text"/>
+        </label>
+        
+        <!-- Not visible, but still used -->
+        <input id="text" type="text" size="35"/>
+    </div>
+    
+    <div id="path_node_panel">
+        <div class="tool_sep"></div>
+        <div class="tool_button" id="tool_node_link" title="<?php echo $l->t('Link Control Points'); ?>"></div>
+        <div class="tool_sep"></div>
+        <label id="tool_node_x">x:
+            <input id="path_node_x" class="attr_changer" title="<?php echo $l->t("Change node's x coordinate"); ?>" size="3" data-attr="x"/>
+        </label>
+        <label id="tool_node_y">y:
+            <input id="path_node_y" class="attr_changer" title="<?php echo $l->t("Change node's y coordinate"); ?>" size="3" data-attr="y"/>
+        </label>
+        
+        <select id="seg_type" title="<?php echo $l->t('Change Segment type'); ?>">
+            <option id="straight_segments" selected="selected" value="4">Straight</option>
+            <option id="curve_segments" value="6">Curve</option>
+        </select>
+        <div class="tool_button" id="tool_node_clone" title="<?php echo $l->t('Clone Node'); ?>"></div>
+        <div class="tool_button" id="tool_node_delete" title="<?php echo $l->t('Delete Node'); ?>"></div>
+        <div class="tool_button" id="tool_openclose_path" title="<?php echo $l->t('Open/close sub-path'); ?>"></div>
+        <div class="tool_button" id="tool_add_subpath" title="<?php echo $l->t('Add sub-path'); ?>"></div>
+    </div>
+    
+</div> <!-- tools_top -->
+
 <div id="workarea">
 <style id="styleoverrides" type="text/css" media="screen" scoped="scoped"></style>
 <div id="svgcanvas"></div>
@@ -51,357 +345,60 @@ $(document).ready(function() {
 
 <div id="sidepanels">
 	<div id="layerpanel">
-		<h3 id="layersLabel">Layers</h3>
+		<h3 id="layersLabel"><?php echo $l->t('Layers'); ?></h3>
 		<fieldset id="layerbuttons">
-			<div id="layer_new" class="layer_button"  title="New Layer"></div>
-			<div id="layer_delete" class="layer_button"  title="Delete Layer"></div>
-			<div id="layer_rename" class="layer_button"  title="Rename Layer"></div>
-			<div id="layer_up" class="layer_button"  title="Move Layer Up"></div>
-			<div id="layer_down" class="layer_button"  title="Move Layer Down"></div>
+			<div id="layer_new" class="layer_button"  title="<?php echo $l->t('New Layer'); ?>"></div>
+			<div id="layer_delete" class="layer_button"  title="<?php echo $l->t('Delete Layer'); ?>"></div>
+			<div id="layer_rename" class="layer_button"  title="<?php echo $l->t('Rename Layer'); ?>"></div>
+			<div id="layer_up" class="layer_button"  title="<?php echo $l->t('Move Layer Up'); ?>"></div>
+			<div id="layer_down" class="layer_button"  title="<?php echo $l->t('Move Layer Down'); ?>"></div>
 		</fieldset>
 		
 		<table id="layerlist">
 			<tr class="layer">
 				<td class="layervis"></td>
-				<td class="layername">Layer 1</td>
+				<td class="layername"><?php echo $l->t('Layer 1'); ?></td>
 			</tr>
 		</table>
-		<span id="selLayerLabel">Move elements to:</span>
+		<span id="selLayerLabel"><?php echo $l->t('Move elements to:'); ?></span>
 		<select id="selLayerNames" title="Move selected elements to a different layer" disabled="disabled">
-			<option selected="selected" value="layer1">Layer 1</option>
+			<option selected="selected" value="layer1"><?php echo $l->t('Layer 1'); ?></option>
 		</select>
 	</div>
-	<div id="sidepanel_handle" title="Drag left/right to resize side panel [X]">L a y e r s</div>
-</div>
-
-<div id="main_button">
-	<div id="main_icon" class="buttonup" title="Main Menu">
-		<span></span>
-		<div id="logo"></div>
-		<div class="dropdown"></div>
-	</div>
-		
-	<div id="main_menu"> 
-	
-		<!-- File-like buttons: New, Save, Source -->
-		<ul>
-			<li id="tool_clear">
-				<div></div>
-				New Image [N]
-			</li>
-			
-			<li id="tool_open" style="display:none;">
-				<div id="fileinputs">
-					<div></div>
-				</div>
-				Open Image [O]
-			</li>
-			
-			<li id="tool_import" style="display:none;">
-				<div id="fileinputs_import">
-					<div></div>
-				</div>
-				Import SVG
-			</li>
-			
-			<li id="tool_save">
-				<div></div>
-				Save Image [S]
-			</li>
-			
-			<li id="tool_export">
-				<div></div>
-				Export as PNG
-			</li>
-			
-			<li id="tool_docprops">
-				<div></div>
-				Document Properties [P]
-			</li>
-		</ul>
-		
-		<p>
-			<a href="http://svg-edit.googlecode.com/" target="_blank">
-				SVG-edit Home Page
-			</a>
-		</p>
-
-	</div>
+	<div id="sidepanel_handle" title="<?php echo $l->t('Drag left/right to resize side panel'); ?> [X]"><?php echo $l->t('L a y e r s'); ?></div>
 </div>
 
 
 
-<div id="tools_top" class="tools_panel">
-	
-	<div id="editor_panel">
-		<div class="push_button" id="tool_source" title="Edit Source [U]"></div>
-		<div class="tool_button" id="tool_wireframe" title="Wireframe Mode [F]"></div>
-	</div>
-
-    <!-- History buttons -->
-	<div id="history_panel">
-		<div class="tool_sep"></div>
-		<div class="push_button tool_button_disabled" id="tool_undo" title="Undo [Z]"></div>
-		<div class="push_button tool_button_disabled" id="tool_redo" title="Redo [Y]"></div>
-	</div>
-	
-	<!-- Buttons when a single element is selected -->
-	<div id="selected_panel">
-		<div class="toolset">
-			<div class="tool_sep"></div>
-			<div class="push_button" id="tool_clone" title="Clone Element [C]"></div>
-			<div class="push_button" id="tool_delete" title="Delete Element [Delete/Backspace]"></div>
-			<div class="tool_sep"></div>
-			<div class="push_button" id="tool_move_top" title="Move to Top [Shift+Up]"></div>
-			<div class="push_button" id="tool_move_bottom" title="Move to Bottom [Shift+Down]"></div>
-			<div class="push_button" id="tool_topath" title="Convert to Path"></div>
-			<div class="push_button" id="tool_reorient" title="Reorient path"></div>
-			<div class="tool_sep"></div>
-			<label id="idLabel" title="Identify the element">
-				<span>id:</span>
-				<input id="elem_id" class="attr_changer" data-attr="id" size="10" type="text"/>
-			</label>
-		</div>
-
-		<label id="tool_angle" title="Change rotation angle">
-			<span id="angleLabel" class="icon_label"></span>
-			<input id="angle" size="2" value="0" type="text"/>
-		</label>
-		
-		<div class="toolset" id="tool_blur" title="Change gaussian blur value">
-			<label>
-				<span id="blurLabel" class="icon_label"></span>
-				<input id="blur" size="2" value="0" type="text"/>
-			</label>
-			<div id="blur_dropdown" class="dropdown">
-				<button></button>
-				<ul>
-					<li class="special"><div id="blur_slider"></div></li>
-				</ul>
-			</div>
-		</div>
-		
-		<div class="dropdown toolset" id="tool_position" title="Align Element to Page">
-				<div id="cur_position" class="icon_label"></div>
-				<button></button>
-		</div>		
-
-		<div id="xy_panel" class="toolset">
-			<label>
-				x: <input id="selected_x" class="attr_changer" title="Change X coordinate" size="3" data-attr="x"/>
-			</label>
-			<label>
-				y: <input id="selected_y" class="attr_changer" title="Change Y coordinate" size="3" data-attr="y"/>
-			</label>
-		</div>
-	</div>
-
-	<!-- Buttons when multiple elements are selected -->
-	<div id="multiselected_panel">
-		<div class="tool_sep"></div>
-		<div class="push_button" id="tool_clone_multi" title="Clone Elements [C]"></div>
-		<div class="push_button" id="tool_delete_multi" title="Delete Selected Elements [Delete/Backspace]"></div>
-		<div class="tool_sep"></div>
-		<div class="push_button" id="tool_group" title="Group Elements [G]"></div>
-		<div class="push_button" id="tool_alignleft" title="Align Left"></div>
-		<div class="push_button" id="tool_aligncenter" title="Align Center"></div>
-		<div class="push_button" id="tool_alignright" title="Align Right"></div>
-		<div class="push_button" id="tool_aligntop" title="Align Top"></div>
-		<div class="push_button" id="tool_alignmiddle" title="Align Middle"></div>
-		<div class="push_button" id="tool_alignbottom" title="Align Bottom"></div>
-		<label id="tool_align_relative"> 
-			<span id="relativeToLabel">relative to:</span>
-			<select id="align_relative_to" title="Align relative to ...">
-			<option id="selected_objects" value="selected">selected objects</option>
-			<option id="largest_object" value="largest">largest object</option>
-			<option id="smallest_object" value="smallest">smallest object</option>
-			<option id="page" value="page">page</option>
-			</select>
-		</label>
-		<div class="tool_sep"></div>
-
-	</div>
-
-	<div id="g_panel">
-		<div class="tool_sep"></div>
-		<div class="push_button" id="tool_ungroup" title="Ungroup Elements [G]"></div>
-	</div>
-
-	<div id="rect_panel">
-		<div class="toolset">
-			<label id="rect_width_tool" title="Change rectangle width">
-				<span id="rwidthLabel" class="icon_label"></span>
-				<input id="rect_width" class="attr_changer" size="3" data-attr="width"/>
-			</label>
-			<label id="rect_height_tool" title="Change rectangle height">
-				<span id="rheightLabel" class="icon_label"></span>
-				<input id="rect_height" class="attr_changer" size="3" data-attr="height"/>
-			</label>
-		</div>
-		<label id="cornerRadiusLabel" title="Change Rectangle Corner Radius">
-			<span class="icon_label"></span>
-			<input id="rect_rx" size="3" value="0" type="text" data-attr="Corner Radius"/>
-		</label>
-	</div>
-
-	<div id="image_panel">
-	<div class="toolset">
-		<label><span id="iwidthLabel" class="icon_label"></span>
-		<input id="image_width" class="attr_changer" title="Change image width" size="3" data-attr="width"/>
-		</label>
-		<label><span id="iheightLabel" class="icon_label"></span>
-		<input id="image_height" class="attr_changer" title="Change image height" size="3" data-attr="height"/>
-		</label>
-	</div>
-	<div class="toolset">
-		<label id="tool_image_url">url:
-			<input id="image_url" type="text" title="Change URL" size="35"/>
-		</label>
-		<label id="tool_change_image">
-			<button id="change_image_url" style="display:none;">Change Image</button>
-			<span id="url_notice" title="NOTE: This image cannot be embedded. It will depend on this path to be displayed"></span>
-		</label>
-	</div>
-  </div>
-
-	<div id="circle_panel">
-		<div class="toolset">
-			<label id="tool_circle_cx">cx:
-			<input id="circle_cx" class="attr_changer" title="Change circle's cx coordinate" size="3" data-attr="cx"/>
-			</label>
-			<label id="tool_circle_cy">cy:
-			<input id="circle_cy" class="attr_changer" title="Change circle's cy coordinate" size="3" data-attr="cy"/>
-			</label>
-		</div>
-		<div class="toolset">
-			<label id="tool_circle_r">r:
-			<input id="circle_r" class="attr_changer" title="Change circle's radius" size="3" data-attr="r"/>
-			</label>
-		</div>
-	</div>
-
-	<div id="ellipse_panel">
-		<div class="toolset">
-			<label id="tool_ellipse_cx">cx:
-			<input id="ellipse_cx" class="attr_changer" title="Change ellipse's cx coordinate" size="3" data-attr="cx"/>
-			</label>
-			<label id="tool_ellipse_cy">cy:
-			<input id="ellipse_cy" class="attr_changer" title="Change ellipse's cy coordinate" size="3" data-attr="cy"/>
-			</label>
-		</div>
-		<div class="toolset">
-			<label id="tool_ellipse_rx">rx:
-			<input id="ellipse_rx" class="attr_changer" title="Change ellipse's x radius" size="3" data-attr="rx"/>
-			</label>
-			<label id="tool_ellipse_ry">ry:
-			<input id="ellipse_ry" class="attr_changer" title="Change ellipse's y radius" size="3" data-attr="ry"/>
-			</label>
-		</div>
-	</div>
-
-	<div id="line_panel">
-		<div class="toolset">
-			<label id="tool_line_x1">x1:
-			<input id="line_x1" class="attr_changer" title="Change line's starting x coordinate" size="3" data-attr="x1"/>
-			</label>
-			<label id="tool_line_y1">y1:
-			<input id="line_y1" class="attr_changer" title="Change line's starting y coordinate" size="3" data-attr="y1"/>
-			</label>
-		</div>
-		<div class="toolset">
-			<label id="tool_line_x2">x2:
-			<input id="line_x2" class="attr_changer" title="Change line's ending x coordinate" size="3" data-attr="x2"/>
-			</label>
-			<label id="tool_line_y2">y2:
-			<input id="line_y2" class="attr_changer" title="Change line's ending y coordinate" size="3" data-attr="y2"/>
-			</label>
-		</div>
-	</div>
-
-	<div id="text_panel">
-		<div class="toolset">
-			<div class="tool_button" id="tool_bold" title="Bold Text [B]"><span></span>B</div>
-			<div class="tool_button" id="tool_italic" title="Italic Text [I]"><span></span>i</div>
-		</div>
-		
-		<div class="toolset" id="tool_font_family">
-			<label>
-				<!-- Font family -->
-				<input id="font_family" type="text" title="Change Font Family" size="12"/>
-			</label>
-			<div id="font_family_dropdown" class="dropdown">
-				<button></button>
-				<ul>
-					<li style="font-family:serif">Serif</li>
-					<li style="font-family:sans-serif">Sans-serif</li>
-					<li style="font-family:cursive">Cursive</li>
-					<li style="font-family:fantasy">Fantasy</li>
-					<li style="font-family:monospace">Monospace</li>
-				</ul>
-			</div>
-		</div>
-
-		<label id="tool_font_size" title="Change Font Size">
-			<span id="font_sizeLabel" class="icon_label"></span>
-			<input id="font_size" size="3" value="0" type="text"/>
-		</label>
-		
-		<!-- Not visible, but still used -->
-		<input id="text" type="text" size="35"/>
-	</div>
-	
-	<div id="path_node_panel">
-		<div class="tool_sep"></div>
-		<div class="tool_button" id="tool_node_link" title="Link Control Points"></div>
-		<div class="tool_sep"></div>
-		<label id="tool_node_x">x:
-			<input id="path_node_x" class="attr_changer" title="Change node's x coordinate" size="3" data-attr="x"/>
-		</label>
-		<label id="tool_node_y">y:
-			<input id="path_node_y" class="attr_changer" title="Change node's y coordinate" size="3" data-attr="y"/>
-		</label>
-		
-		<select id="seg_type" title="Change Segment type">
-			<option id="straight_segments" selected="selected" value="4">Straight</option>
-			<option id="curve_segments" value="6">Curve</option>
-		</select>
-		<div class="tool_button" id="tool_node_clone" title="Clone Node"></div>
-		<div class="tool_button" id="tool_node_delete" title="Delete Node"></div>
-		<div class="tool_button" id="tool_openclose_path" title="Open/close sub-path"></div>
-		<div class="tool_button" id="tool_add_subpath" title="Add sub-path"></div>
-	</div>
-	
-</div> <!-- tools_top -->
-
 <div id="tools_left" class="tools_panel">
-	<div class="tool_button" id="tool_select" title="Select Tool [1]"></div>
-	<div class="tool_button" id="tool_fhpath" title="Pencil Tool [2]"></div>
-	<div class="tool_button" id="tool_line" title="Line Tool [3]"></div>
-	<div class="tool_button flyout_current" id="tools_rect_show" title="Square/Rect Tool [4/Shift+4]">
+	<div class="tool_button" id="tool_select" title="<?php echo $l->t('Select Tool'); ?> [1]"></div>
+	<div class="tool_button" id="tool_fhpath" title="<?php echo $l->t('Pencil Tool'); ?> [2]"></div>
+	<div class="tool_button" id="tool_line" title="<?php echo $l->t('Line Tool'); ?> [3]"></div>
+	<div class="tool_button flyout_current" id="tools_rect_show" title="<?php echo $l->t('Square/Rect Tool'); ?> [4/Shift+4]">
 		<div class="flyout_arrow_horiz"></div>
 	</div>
-	<div class="tool_button flyout_current" id="tools_ellipse_show" title="Ellipse/Circle Tool [5/Shift+5]">
+	<div class="tool_button flyout_current" id="tools_ellipse_show" title="<?php echo $l->t('Ellipse/Circle Tool'); ?> [5/Shift+5]">
 		<div class="flyout_arrow_horiz"></div>
 	</div>
-	<div class="tool_button" id="tool_path" title="Path Tool [7]"></div>
-	<div class="tool_button" id="tool_text" title="Text Tool [6]"></div>
-	<div class="tool_button" id="tool_image" title="Image Tool [8]"></div>
-	<div class="tool_button" id="tool_zoom" title="Zoom Tool [Ctrl+Up/Down]"></div>
+	<div class="tool_button" id="tool_path" title="<?php echo $l->t('Path Tool'); ?> [7]"></div>
+	<div class="tool_button" id="tool_text" title="<?php echo $l->t('Text Tool'); ?> [6]"></div>
+	<div class="tool_button" id="tool_image" title="<?php echo $l->t('Image Tool'); ?> [8]"></div>
+	<div class="tool_button" id="tool_zoom" title="<?php echo $l->t('Zoom Tool'); ?> [Ctrl+Up/Down]"></div>
 	
 	<div style="display: none">
-		<div id="tool_rect" title="Rectangle"></div>
-		<div id="tool_square" title="Square"></div>
-		<div id="tool_fhrect" title="Free-Hand Rectangle"></div>
-		<div id="tool_ellipse" title="Ellipse"></div>
-		<div id="tool_circle" title="Circle"></div>
-		<div id="tool_fhellipse" title="Free-Hand Ellipse"></div>
+		<div id="tool_rect" title="<?php echo $l->t('Rectangle'); ?>"></div>
+		<div id="tool_square" title="<?php echo $l->t('Square'); ?>"></div>
+		<div id="tool_fhrect" title="<?php echo $l->t('Free-Hand Rectangle'); ?>"></div>
+		<div id="tool_ellipse" title="<?php echo $l->t('Ellipse'); ?>"></div>
+		<div id="tool_circle" title="<?php echo $l->t('Circle'); ?>"></div>
+		<div id="tool_fhellipse" title="<?php echo $l->t('Free-Hand Ellipse'); ?>"></div>
 	</div>
 </div> <!-- tools_left -->
 
 <div id="tools_bottom" class="tools_panel">
 
     <!-- Zoom buttons -->
-	<div id="zoom_panel" class="toolset" title="Change zoom level">
+	<div id="zoom_panel" class="toolset" title="<?php echo $l->t('Change zoom level'); ?>">
 		<label>
 		<span id="zoomLabel" class="zoom_tool icon_label"></span>
 		<input id="zoom" size="3" value="100" type="text" />
@@ -415,10 +412,10 @@ $(document).ready(function() {
 				<li>100%</li>
 				<li>50%</li>
 				<li>25%</li>
-				<li id="fit_to_canvas" data-val="canvas">Fit to canvas</li>
-				<li id="fit_to_sel" data-val="selection">Fit to selection</li>
-				<li id="fit_to_layer_content" data-val="layer">Fit to layer content</li>
-				<li id="fit_to_all" data-val="content">Fit to all content</li>
+				<li id="fit_to_canvas" data-val="canvas"><?php echo $l->t('Fit to canvas'); ?></li>
+				<li id="fit_to_sel" data-val="selection"><?php echo $l->t('Fit to selection'); ?></li>
+				<li id="fit_to_layer_content" data-val="layer"><?php echo $l->t('Fit to layer content'); ?></li>
+				<li id="fit_to_all" data-val="content"><?php echo $l->t('Fit to all content'); ?></li>
 				<li>100%</li>
 			</ul>
 		</div>
@@ -428,7 +425,7 @@ $(document).ready(function() {
 	<div id="tools_bottom_2">
 		<div id="color_tools">
 			<div class="color_tool" id="tool_fill">
-				<label class="icon_label" for="fill_color" title="Change fill color"></label>
+				<label class="icon_label" for="fill_color" title="<?php echo $l->t('Change fill color'); ?>"></label>
 				<div class="color_block">
 					<div id="fill_bg"></div>
 					<div id="fill_color" class="color_block"></div>
@@ -437,19 +434,19 @@ $(document).ready(function() {
 		
 			<div class="color_tool" id="tool_stroke">
 				<div class="color_block">
-					<label class="icon_label" title="Change stroke color"></label>
+					<label class="icon_label" title="<?php echo $l->t('Change stroke color'); ?>"></label>
 				</div>
 				<div class="color_block">
 					<div id="stroke_bg"></div>
-					<div id="stroke_color" class="color_block" title="Change stroke color"></div>
+					<div id="stroke_color" class="color_block" title="<?php echo $l->t('Change stroke color'); ?>"></div>
 				</div>
 				
 				<label>
-					<input id="stroke_width" title="Change stroke width by 1, shift-click to change by 0.1" size="2" value="5" type="text" data-attr="Stroke Width"/>
+					<input id="stroke_width" title="<?php echo $l->t('Change stroke width by 1, shift-click to change by 0.1'); ?>" size="2" value="5" type="text" data-attr="Stroke Width"/>
 				</label>
 				
 				<label class="stroke_tool">
-					<select id="stroke_style" title="Change stroke dash style">
+					<select id="stroke_style" title="<?php echo $l->t('Change stroke dash style'); ?>">
 						<option selected="selected" value="none">&mdash;</option>
 						<option value="2,2">...</option>
 						<option value="5,5">- -</option>
@@ -460,26 +457,26 @@ $(document).ready(function() {
 
  				<div class="stroke_tool dropdown" id="stroke_linejoin">
  					<div>
-						<div id="cur_linejoin" title="Linejoin: Miter"></div>
+						<div id="cur_linejoin" title="<?php echo $l->t('Linejoin: Miter'); ?>"></div>
 						<button></button>
 					</div>
  				</div>
  				
  				<div class="stroke_tool dropdown" id="stroke_linecap">
  					<div>
-						<div id="cur_linecap" title="Linecap: Butt"></div>
+						<div id="cur_linecap" title="<?php echo $l->t('Linecap: Butt'); ?>"></div>
 						<button></button>
 					</div>
  				</div>
 			
-				<div id="toggle_stroke_tools" title="Show/hide more stroke tools">
+				<div id="toggle_stroke_tools" title="<?php echo $l->t('Show/hide more stroke tools'); ?>">
 					&gt;&gt;
 				</div>
 				
 			</div>
 		</div>
 	
-		<div class="toolset" id="tool_opacity" title="Change selected item opacity">
+		<div class="toolset" id="tool_opacity" title="<?php echo $l->t('Change selected item opacity'); ?>">
 			<label>
 				<span id="group_opacityLabel" class="icon_label"></span>
 				<input id="group_opacity" size="3" value="100" type="text"/>
@@ -500,35 +497,34 @@ $(document).ready(function() {
 	</div>
 
 	<div id="tools_bottom_3">
-		<div id="palette_holder"><div id="palette" title="Click to change fill color, shift-click to change stroke color"></div></div>
+		<div id="palette_holder"><div id="palette" title="<?php echo $l->t('Click to change fill color, shift-click to change stroke color'); ?>"></div></div>
 	</div>
-	<div id="copyright"><span id="copyrightLabel">Powered by</span> <a href="http://svg-edit.googlecode.com/" target="_blank">SVG-edit v2.5.1</a></div>
+	<div id="copyright"><span id="copyrightLabel"><?php echo $l->t('Powered by'); ?></span> <a href="http://svg-edit.googlecode.com/" target="_blank">SVG-edit v2.5.1</a></div>
 </div>
 
 <div id="option_lists">
 	<ul id="linejoin_opts">
-		<li class="tool_button current" id="linejoin_miter" title="Linejoin: Miter"></li>
-		<li class="tool_button" id="linejoin_round" title="Linejoin: Round"></li>
-		<li class="tool_button" id="linejoin_bevel" title="Linejoin: Bevel"></li>
+		<li class="tool_button current" id="linejoin_miter" title="<?php echo $l->t('Linejoin: Miter'); ?>"></li>
+		<li class="tool_button" id="linejoin_round" title="<?php echo $l->t('Linejoin: Round'); ?>"></li>
+		<li class="tool_button" id="linejoin_bevel" title="<?php echo $l->t('Linejoin: Bevel'); ?>"></li>
 	</ul>
 	
 	<ul id="linecap_opts">
-		<li class="tool_button current" id="linecap_butt" title="Linecap: Butt"></li>
-		<li class="tool_button" id="linecap_square" title="Linecap: Square"></li>
-		<li class="tool_button" id="linecap_round" title="Linecap: Round"></li>
+		<li class="tool_button current" id="linecap_butt" title="<?php echo $l->t('Linecap: Butt'); ?>"></li>
+		<li class="tool_button" id="linecap_square" title="<?php echo $l->t('Linecap: Square'); ?>"></li>
+		<li class="tool_button" id="linecap_round" title="<?php echo $l->t('Linecap: Round'); ?>"></li>
 	</ul>
 	
 	<ul id="position_opts" class="optcols3">
-		<li class="push_button" id="tool_posleft" title="Align Left"></li>
-		<li class="push_button" id="tool_poscenter" title="Align Center"></li>
-		<li class="push_button" id="tool_posright" title="Align Right"></li>
-		<li class="push_button" id="tool_postop" title="Align Top"></li>
-		<li class="push_button" id="tool_posmiddle" title="Align Middle"></li>
-		<li class="push_button" id="tool_posbottom" title="Align Bottom"></li>
+		<li class="push_button" id="tool_posleft" title="<?php echo $l->t('Align Left'); ?>"></li>
+		<li class="push_button" id="tool_poscenter" title="<?php echo $l->t('Align Center'); ?>"></li>
+		<li class="push_button" id="tool_posright" title="<?php echo $l->t('Align Right'); ?>"></li>
+		<li class="push_button" id="tool_postop" title="<?php echo $l->t('Align Top'); ?>"></li>
+		<li class="push_button" id="tool_posmiddle" title="<?php echo $l->t('Align Middle'); ?>"></li>
+		<li class="push_button" id="tool_posbottom" title="<?php echo $l->t('Align Bottom'); ?>"></li>
 	</ul>
 </div>
 </div> <!-- closing #editorContent -->
-</div> <!-- closing #editorWrapper -->
 
 <!-- hidden divs -->
 <div id="color_picker"></div>
@@ -539,8 +535,8 @@ $(document).ready(function() {
 	<div id="svg_source_overlay"></div>
 	<div id="svg_source_container">
 		<div id="tool_source_back" class="toolbar_button">
-			<button id="tool_source_save">Apply Changes</button>
-			<button id="tool_source_cancel">Cancel</button>
+			<button id="tool_source_save"><?php echo $l->t('Apply Changes'); ?></button>
+			<button id="tool_source_cancel"><?php echo $l->t('Cancel'); ?></button>
 		</div>
 		<form>
 			<textarea id="svg_source_textarea" spellcheck="false"></textarea>
@@ -552,51 +548,51 @@ $(document).ready(function() {
 	<div id="svg_docprops_overlay"></div>
 	<div id="svg_docprops_container">
 		<div id="tool_docprops_back" class="toolbar_button">
-			<button id="tool_docprops_save">OK</button>
-			<button id="tool_docprops_cancel">Cancel</button>
+			<button id="tool_docprops_save"><?php echo $l->t('OK'); ?></button>
+			<button id="tool_docprops_cancel"><?php echo $l->t('Cancel'); ?></button>
 		</div>
 
 
 		<fieldset id="svg_docprops_docprops">
-			<legend id="svginfo_image_props">Image Properties</legend>
+			<legend id="svginfo_image_props"><?php echo $l->t('Image Properties'); ?></legend>
 			<label>
-				<span id="svginfo_title">Title:</span>
+				<span id="svginfo_title"><?php echo $l->t('Title:'); ?></span>
 				<input type="text" id="canvas_title" size="24"/>
 			</label>			
 	
 			<fieldset id="change_resolution">
-				<legend id="svginfo_dim">Canvas Dimensions</legend>
+				<legend id="svginfo_dim"><?php echo $l->t('Canvas Dimensions'); ?></legend>
 
-				<label><span id="svginfo_width">width:</span> <input type="text" id="canvas_width" size="6"/></label>
+				<label><span id="svginfo_width"><?php echo $l->t('width:'); ?></span> <input type="text" id="canvas_width" size="6"/></label>
 					
-				<label><span id="svginfo_height">height:</span> <input type="text" id="canvas_height" size="6"/></label>
+				<label><span id="svginfo_height"><?php echo $l->t('height:'); ?></span> <input type="text" id="canvas_height" size="6"/></label>
 				
 				<label>
 					<select id="resolution">
-						<option id="selectedPredefined" selected="selected">Select predefined:</option>
+						<option id="selectedPredefined" selected="selected"><?php echo $l->t('Select predefined:'); ?></option>
 						<option>640x480</option>
 						<option>800x600</option>
 						<option>1024x768</option>
 						<option>1280x960</option>
 						<option>1600x1200</option>
-						<option id="fitToContent" value="content">Fit to Content</option>
+						<option id="fitToContent" value="content"><?php echo $l->t('Fit to Content'); ?></option>
 					</select>
 				</label>
 			</fieldset>
 
 			<fieldset id="image_save_opts">
-				<legend id="includedImages">Included Images</legend>
-				<label><input type="radio" name="image_opt" value="embed" checked="checked"/> <span id="image_opt_embed">Embed data (local files)</span> </label>
-				<label><input type="radio" name="image_opt" value="ref"/> <span id="image_opt_ref">Use file reference</span> </label>
+				<legend id="includedImages"><?php echo $l->t('Included Images'); ?></legend>
+				<label><input type="radio" name="image_opt" value="embed" checked="checked"/> <span id="image_opt_embed"><?php echo $l->t('Embed data (local files)'); ?></span> </label>
+				<label><input type="radio" name="image_opt" value="ref"/> <span id="image_opt_ref"><?php echo $l->t('Use file reference'); ?></span> </label>
 			</fieldset>			
 
 
 		</fieldset>
 
 		<fieldset id="svg_docprops_prefs">
-			<legend id="svginfo_editor_prefs">Editor Preferences</legend>
+			<legend id="svginfo_editor_prefs"><?php echo $l->t('Editor Preferences'); ?></legend>
 
-			<label><span id="svginfo_lang">Language:</span>
+			<label><span id="svginfo_lang"><?php echo $l->t('Language:'); ?></span>
 				<!-- Source: http://en.wikipedia.org/wiki/Language_names -->
 				<select id="lang_select">
 				  <option id="lang_ar" value="ar">العربية</option>
@@ -618,20 +614,20 @@ $(document).ready(function() {
 				</select>
 			</label>
 
-			<label><span id="svginfo_icons">Icon size:</span>
+			<label><span id="svginfo_icons"><?php echo $l->t('Icon size:'); ?></span>
 				<select id="iconsize">
-					<option id="icon_small" value="s">Small</option>
-					<option id="icon_medium" value="m" selected="selected">Medium</option>
-					<option id="icon_large" value="l">Large</option>
-					<option id="icon_xlarge" value="xl">Extra Large</option>
+					<option id="icon_small" value="s"><?php echo $l->t('Small'); ?></option>
+					<option id="icon_medium" value="m" selected="selected"><?php echo $l->t('Medium'); ?></option>
+					<option id="icon_large" value="l"><?php echo $l->t('Large'); ?></option>
+					<option id="icon_xlarge" value="xl"><?php echo $l->t('Extra Large'); ?></option>
 				</select>
 			</label>
 
 			<fieldset id="change_background">
-				<legend id="svginfo_change_background">Editor Background</legend>
+				<legend id="svginfo_change_background"><?php echo $l->t('Editor Background'); ?></legend>
 				<div id="bg_blocks"></div>
-				<label><span id="svginfo_bg_url">URL:</span> <input type="text" id="canvas_bg_url" size="21"/></label>
-				<p id="svginfo_bg_note">Note: Background will not be saved with image.</p>
+				<label><span id="svginfo_bg_url"><?php echo $l->t('URL:'); ?></span> <input type="text" id="canvas_bg_url" size="21"/></label>
+				<p id="svginfo_bg_note"><?php echo $l->t('Note: Background will not be saved with image.'); ?></p>
 			</fieldset>
 			
 		</fieldset>
@@ -646,3 +642,5 @@ $(document).ready(function() {
 		<div id="dialog_buttons"></div>
 	</div>
 </div>
+
+</div> <!-- closing #editorWrapper -->