import 2.0 into trunk

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@10 eee81c28-f429-11dd-99c0-75d572ba1ddd
2009-06-01 15:55:21 +00:00 · 2009-06-01 15:55:21 +00:00 · 6b2ff6f7f7
parent 76c17ae3e8
commit 6b2ff6f7f7
63 changed files with 811 additions and 9867 deletions
--- a/2
+++ b/2
@ -0,0 +1,2 @@
+Narendra Sisodiya <narendra.sisodiya@gmail.com>
+Pavol Rusnak <stick@gk2.sk>
--- a/GPL-LICENSE.txt
+++ b/GPL-LICENSE.txt
@ -1,12 +1,12 @@
-        GNU GENERAL PUBLIC LICENSE
-           Version 2, June 1991
+		    GNU GENERAL PUBLIC LICENSE
+		       Version 2, June 1991

- Copyright (C) 1989, 1991 Free Software Foundation, Inc.
- 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
+ Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
+ 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
 Everyone is permitted to copy and distribute verbatim copies
 of this license document, but changing it is not allowed.

-          Preamble
+			    Preamble

  The licenses for most software are designed to take away your
 freedom to share and change it.  By contrast, the GNU General Public
@ -56,7 +56,7 @@ patent must be licensed for everyone's free use or not licensed at all.
  The precise terms and conditions for copying, distribution and
 modification follow.

-        GNU GENERAL PUBLIC LICENSE
+		    GNU GENERAL PUBLIC LICENSE
   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

  0. This License applies to any program or other work which contains
@ -255,7 +255,7 @@ make exceptions for this.  Our decision will be guided by the two goals
 of preserving the free status of all derivatives of our free software and
 of promoting the sharing and reuse of software generally.

-          NO WARRANTY
+			    NO WARRANTY

  11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
 FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW.  EXCEPT WHEN
@ -276,3 +276,64 @@ TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
 YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
 PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
 POSSIBILITY OF SUCH DAMAGES.
+
+		     END OF TERMS AND CONDITIONS
+
+	    How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+convey the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software; you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation; either version 2 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License along
+    with this program; if not, write to the Free Software Foundation, Inc.,
+    51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+
+Also add information on how to contact you by electronic and paper mail.
+
+If the program is interactive, make it output a short notice like this
+when it starts in an interactive mode:
+
+    Gnomovision version 69, Copyright (C) year name of author
+    Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, the commands you use may
+be called something other than `show w' and `show c'; they could even be
+mouse-clicks or menu items--whatever suits your program.
+
+You should also get your employer (if you work as a programmer) or your
+school, if any, to sign a "copyright disclaimer" for the program, if
+necessary.  Here is a sample; alter the names:
+
+  Yoyodyne, Inc., hereby disclaims all copyright interest in the program
+  `Gnomovision' (which makes passes at compilers) written by James Hacker.
+
+  <signature of Ty Coon>, 1 April 1989
+  Ty Coon, President of Vice
+
+This General Public License does not permit incorporating your program into
+proprietary programs.  If your program is a subroutine library, you may
+consider it more useful to permit linking proprietary applications with the
+library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.
--- a/SvgEditor.js
+++ b/SvgEditor.js
@ -1,58 +0,0 @@
-$(document).ready(function(){
-
-
-	ApplyColorPicker("colorSelectorStroke" , "000000" , {
-		callback: function(hex){
-				window.set_stroke_color(hex);
-				$('#div_color1').css("backgroundColor", hex);
-			}
-	});
-	
-	ApplyColorPicker("colorSelectorFill" , "ffffff" , {
-			callback: function(hex){
-				window.set_fill_color(hex);
-				$('#div_color2').css("backgroundColor", hex);
-			}
-	});
-
-
-	$('#color1').colorPicker();
-	$('#color2').colorPicker();
-	
-});//end ready
-
-function ApplyColorPicker(id , ini_col_hex , fun_var){
-
-		$("#" + id ).css({
-			"border": "1px solid black",
-			"height" : "30px",
-			"width" : "30px",
-			"backgroundColor" : "#" + ini_col_hex
-			
-		});
-
-		$("#" + id).ColorPicker({
-			color: "#" + ini_col_hex,
-			onChange: function (hsb, hex, rgb) {
-				$("#" + id).css("backgroundColor", "#" + hex);
-				fun_var.callback('#' + hex);
-			}
-		});
-		
-}//apply
-
-
-function return_str_to_html(str){
-	alert("This is svg image in string format \n This will be posted to server \n " + str)
-	//posting the data to server
-	
-	//document.getElementById("hidden_svg_data").setAttribute("value", escape(str));
-	$.post(
-		"save.php", 
-		{svg_data: escape(str)
-	});
-}
-
-function f1(col){
-	$('#colorSelectorStroke').ColorPickerSetColor(col);
-}
--- a/blank.svg
+++ b/blank.svg
@ -1,7 +1,5 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
-<svg xml:space="preserve"  id="svg_image" onload="Initialize(evt)"  width="100%" height="100%" version="1.1"
-xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xml:space="preserve" id="svg_image" onload="Initialize(evt)" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <script xlink:href="blanksvg.js" type="text/ecmascript"/>
 </svg>
--- a/blanksvg.js
+++ b/blanksvg.js
@ -1,341 +1,465 @@
-	SVGDocument = null;
-	SVGRoot = null;
-	var svgns = "http://www.w3.org/2000/svg";
-	
-	top.clear_svg = SVGclear_svg ;
-	top.set_draw_mode = SVGset_draw_mode ;
-	top.submit_svg = SVGsubmit_svg ;
-	top.set_stroke_color = SVGset_stroke_color;
-	top.set_fill_color = SVGset_fill_color;
-	top.set_stroke_width = SVGset_stroke_width ;
+    SVGDocument = null;
+    SVGRoot = null;
+    var svgns = "http://www.w3.org/2000/svg";

-	
-	var d_attr = "" ;
-	var signature_started = 0 ;
-	var path_elememt = 0 ;
-	var path_num = 1 ;
-	var rect_num = 1 ;
-	var line_num = 1 ;
-	var ellipse_num = 1 ;
-	var rect_x = null ;
-	var rect_y = null ;
-	var current_draw_element = "path" ;
-	var current_draw_element_fill = "none" ;
-	var current_draw_element_stroke_width = "1px" ;
-	var current_draw_element_stroke = "black" ;
-	var freehandcircle_min_x = null ;	
-	var freehandcircle_max_x = null ;
-	var freehandcircle_min_y = null ;
-	var freehandcircle_max_y = null ;
+    top.clear_svg = SVGclear_svg ;
+    top.set_draw_mode = SVGset_draw_mode ;
+    top.submit_svg = SVGsubmit_svg ;
+    top.set_stroke_color = SVGset_stroke_color;
+    top.set_fill_color = SVGset_fill_color;
+    top.set_stroke_width = SVGset_stroke_width ;

+    var d_attr = "" ;
+    var signature_started = 0 ;
+    var path_elememt = 0 ;
+    var path_num = 1 ;
+    var rect_num = 1 ;
+    var line_num = 1 ;
+    var ellipse_num = 1 ;
+    var rect_x = null ;
+    var rect_y = null ;
+    var current_draw_element = "path" ;
+    var current_draw_element_fill = "none" ;
+    var current_draw_element_stroke_width = "1px" ;
+    var current_draw_element_stroke = "black" ;
+    var freehand_min_x = null ;
+    var freehand_max_x = null ;
+    var freehand_min_y = null ;
+    var freehand_max_y = null ;
+    var freehand_min_x = null ;
+    var freehand_max_x = null ;
+    var freehand_min_y = null ;
+    var freehand_max_y = null ;

 function SVGset_draw_mode(ele_name) {
-	current_draw_element = ele_name;
+    current_draw_element = ele_name;
 }

-
-
 function SVGset_stroke_color(col_hex){
-	current_draw_element_stroke = col_hex;
+    current_draw_element_stroke = col_hex;
 }
-		
+
 function SVGset_fill_color(col_hex){
-	current_draw_element_fill = col_hex;
+    current_draw_element_fill = col_hex;
 }

 function SVGset_stroke_width(val){
-	current_draw_element_stroke_width = val;
+    current_draw_element_stroke_width = val;
 }

 function Initialize(LoadEvent)
 {
-	SVGDocument = LoadEvent.target.ownerDocument;
-	SVGRoot = SVGDocument.documentElement ;
-	var Attr={
-		"onmouseup":"fun_mouseUP(evt)",
-		"onmousedown":"fun_mouseDOWN(evt)",
-		"onmousemove":"fun_mouseMOVE(evt)"
-	}
-	assignAttr(SVGRoot,Attr);
+    SVGDocument = LoadEvent.target.ownerDocument;
+    SVGRoot = SVGDocument.documentElement ;
+    var Attr={
+        "onmouseup":"fun_mouseUP(evt)",
+        "onmousedown":"fun_mouseDOWN(evt)",
+        "onmousemove":"fun_mouseMOVE(evt)"
+    }
+    assignAttr(SVGRoot,Attr);
 }

-
-
 function fun_mouseUP(evt)
 {

-	
   if (signature_started == 1 )
   {
-	signature_started = 0 ;
+    signature_started = 0 ;

-	switch (current_draw_element)
-	{
-	case "path":
-		d_attr = 0 ;
-		path_num = path_num + 1 ;
-		break
-	case "rect":
-		rect_num = rect_num + 1 ;
-		break
-	case "line":
-		line_num = line_num + 1 ;
-		break
-	case "ellipse":
-		ellipse_num = ellipse_num + 1 ;
-		break
-	case "freehandcircle":
-		d_attr = 0 ;
-				
-		var element = SVGDocument.getElementById("path_" + path_num);
-		element.parentNode.removeChild(element); 
-		
-		create_svg_element_by_json({
-			"element": "ellipse",
-			"Attr": {
-				"cx": (freehandcircle_min_x + freehandcircle_max_x ) / 2,
-				"cy": (freehandcircle_min_y + freehandcircle_max_y ) / 2,
-				"rx": (freehandcircle_max_x - freehandcircle_min_x ) / 2 + "px",
-				"ry": (freehandcircle_max_y - freehandcircle_min_y ) / 2 + "px",
-				"id": "ellipse_" + ellipse_num,
-				"fill": current_draw_element_fill,
-				"stroke": current_draw_element_stroke,
-				"stroke-width": current_draw_element_stroke_width
-				}
-		});
-		ellipse_num = ellipse_num + 1 ;
-		break;
-	}//switch
+    switch (current_draw_element)
+    {
+    case "select":
+        var element = SVGDocument.getElementById("rect_" + rect_num);
+        element.parentNode.removeChild(element);
+        break;
+    case "path":
+        d_attr = 0 ;
+        var element = SVGDocument.getElementById("path_" + path_num);
+        element.setAttribute("stroke-opacity", 1.0);
+        path_num = path_num + 1 ;
+        break;
+    case "line":
+        var element = SVGDocument.getElementById("line_" + line_num);
+        element.setAttribute("stroke-opacity", 1.0);
+        line_num = line_num + 1 ;
+        break;
+    case "square":
+    case "rect":
+        var element = SVGDocument.getElementById("rect_" + rect_num);
+        element.setAttribute("fill-opacity", 1.0);
+        element.setAttribute("stroke-opacity", 1.0);
+        rect_num = rect_num + 1 ;
+        break;
+    case "circle":
+    case "ellipse":
+        var element = SVGDocument.getElementById("ellipse_" + ellipse_num);
+        element.setAttribute("fill-opacity", 1.0);
+        element.setAttribute("stroke-opacity", 1.0);
+        ellipse_num = ellipse_num + 1 ;
+        break;
+    case "fhellipse":
+        d_attr = 0 ;

-    }//if
+        var element = SVGDocument.getElementById("path_" + path_num);
+        element.parentNode.removeChild(element);

-}//function
+        create_svg_element_by_json({
+            "element": "ellipse",
+            "Attr": {
+                "cx": (freehand_min_x + freehand_max_x ) / 2,
+                "cy": (freehand_min_y + freehand_max_y ) / 2,
+                "rx": (freehand_max_x - freehand_min_x ) / 2 + "px",
+                "ry": (freehand_max_y - freehand_min_y ) / 2 + "px",
+                "id": "ellipse_" + ellipse_num,
+                "fill": current_draw_element_fill,
+                "stroke": current_draw_element_stroke,
+                "stroke-width": current_draw_element_stroke_width
+                }
+        });
+        ellipse_num = ellipse_num + 1 ;
+        break;
+    case "fhrect":
+        d_attr = 0 ;
+
+        var element = SVGDocument.getElementById("path_" + path_num);
+        element.parentNode.removeChild(element);
+
+        create_svg_element_by_json({
+            "element": "rect",
+            "Attr": {
+                "x": freehand_min_x,
+                "y": freehand_min_y,
+                "width": (freehand_max_x - freehand_min_x ) + "px",
+                "height": (freehand_max_y - freehand_min_y ) + "px",
+                "id": "rect_" + rect_num,
+                "fill": current_draw_element_fill,
+                "stroke": current_draw_element_stroke,
+                "stroke-width": current_draw_element_stroke_width
+                }
+        });
+        rect_num = rect_num + 1 ;
+        break;
+    }
+
+    }
+
+}


 function fun_mouseDOWN(evt)
 {
-	
-	var x = evt.pageX;
-	var y = evt.pageY;

-	switch (current_draw_element)
-	{
-	case "freehandcircle":
-		d_attr = "M" + x + " " + y + " ";
-		signature_started = 1 ;
+    var x = evt.pageX;
+    var y = evt.pageY;

-		create_svg_element_by_json({
-			"element": "path",
-			"Attr": {
-				"d": d_attr,
-				"id": "path_" + path_num,
-				"fill": "none",
-				"stroke": current_draw_element_stroke,
-				"stroke-width": current_draw_element_stroke_width
-				}
-		
-		});
-		
-		freehandcircle_min_x = x ;	
-		freehandcircle_max_x = x ;
-		freehandcircle_min_y = y ;
-		freehandcircle_max_y = y ;	
-		
-	break
-	case "path":
-		d_attr = "M" + x + " " + y + " ";
-		signature_started = 1 ;
-		
-		create_svg_element_by_json({
-			"element": "path",
-			"Attr": {
-				"d": d_attr,
-				"id": "path_" + path_num,
-				"fill": "none",
-				"stroke": current_draw_element_stroke,
-				"stroke-width": current_draw_element_stroke_width
-				}
-		
-		});
-		
-	break
-	case "rect":
-		signature_started = 1 ;
-		rect_x = x ;
-		rect_y = y ;
-		create_svg_element_by_json({
-			"element": "rect",
-			"Attr": {
-				"x": x,
-				"y": y,
-				"width": "1px",
-				"height": "1px",
-				"id": "rect_" + rect_num,
-				"fill": current_draw_element_fill,
-				"stroke": current_draw_element_stroke,
-				"stroke-width": current_draw_element_stroke_width
-				}
-		
-		});
-		break
-	case "line":
-		signature_started = 1 ;
+    switch (current_draw_element)
+    {
+    case "select":
+        signature_started = 1 ;
+        rect_x = x ;
+        rect_y = y ;
+        create_svg_element_by_json({
+            "element": "rect",
+            "Attr": {
+                "x": x,
+                "y": y,
+                "width": "1px",
+                "height": "1px",
+                "id": "rect_" + rect_num,
+                "fill": 'none',
+                "stroke": 'black',
+                "stroke-width": '1px',
+                "stroke-dasharray": "2,2"
+                }
+        });
+        break;
+    case "fhellipse":
+        d_attr = "M" + x + " " + y + " ";
+        signature_started = 1 ;
+
+        create_svg_element_by_json({
+            "element": "path",
+            "Attr": {
+                "d": d_attr,
+                "id": "path_" + path_num,
+                "fill": "none",
+                "stroke": current_draw_element_stroke,
+                "stroke-width": current_draw_element_stroke_width,
+                "stroke-opacity": 0.5
+                }
+
+        });
+
+        freehand_min_x = x ;
+        freehand_max_x = x ;
+        freehand_min_y = y ;
+        freehand_max_y = y ;
+
+    break;
+    case "fhrect":
+        d_attr = "M" + x + " " + y + " ";
+        signature_started = 1 ;
+
+        create_svg_element_by_json({
+            "element": "path",
+            "Attr": {
+                "d": d_attr,
+                "id": "path_" + path_num,
+                "fill": "none",
+                "stroke": current_draw_element_stroke,
+                "stroke-width": current_draw_element_stroke_width,
+                "stroke-opacity": 0.5
+                }
+
+        });
+
+        freehand_min_x = x ;
+        freehand_max_x = x ;
+        freehand_min_y = y ;
+        freehand_max_y = y ;
+
+    break;
+    case "path":
+        d_attr = "M" + x + " " + y + " ";
+        signature_started = 1 ;
+
+        create_svg_element_by_json({
+            "element": "path",
+            "Attr": {
+                "d": d_attr,
+                "id": "path_" + path_num,
+                "fill": "none",
+                "stroke": current_draw_element_stroke,
+                "stroke-width": current_draw_element_stroke_width,
+                "stroke-opacity": 0.5
+                }
+
+        });
+
+    break;
+    case "square":
+    case "rect":
+        signature_started = 1 ;
+        rect_x = x ;
+        rect_y = y ;
+        create_svg_element_by_json({
+            "element": "rect",
+            "Attr": {
+                "x": x,
+                "y": y,
+                "width": "1px",
+                "height": "1px",
+                "id": "rect_" + rect_num,
+                "fill": current_draw_element_fill,
+                "stroke": current_draw_element_stroke,
+                "stroke-width": current_draw_element_stroke_width,
+                "fill-opacity": 0.5,
+                "stroke-opacity": 0.5
+                }
+
+        });
+        break;
+    case "line":
+        signature_started = 1 ;
+
+        create_svg_element_by_json({
+            "element": "line",
+            "Attr":    {
+                "x1": x,
+                "y1": y,
+                "x2": x + 1 + "px",
+                "y2": y + 1 + "px",
+                "id": "line_" + line_num,
+                "stroke": current_draw_element_stroke,
+                "stroke-width": current_draw_element_stroke_width,
+                "stroke-opacity": 0.5
+                }
+
+        });
+        break;
+    case "circle":
+    case "ellipse":
+        signature_started = 1 ;
+        create_svg_element_by_json({
+            "element": "ellipse",
+            "Attr": {
+                "cx": x,
+                "cy": y,
+                "rx": 1 + "px",
+                "ry": 1 + "px",
+                "id": "ellipse_" + ellipse_num,
+                "fill": current_draw_element_fill,
+                "stroke": current_draw_element_stroke,
+                "stroke-width": current_draw_element_stroke_width,
+                "fill-opacity": 0.5,
+                "stroke-opacity": 0.5
+                }
+        });
+    break;
+    case "delete":
+        var T=evt.target
+        if(SVGRoot == evt.target ) return ;
+        T.parentNode.removeChild(T);
+    break;
+    }

-		create_svg_element_by_json({
-			"element": "line",
-			"Attr":	{
-				"x1": x,
-				"y1": y,
-				"x2": x + 1 + "px",
-				"y2": y + 1 + "px",
-				"id": "line_" + line_num,
-				"stroke": current_draw_element_stroke,
-				"stroke-width": current_draw_element_stroke_width
-				}
-		
-		});
-		break
-	case "ellipse":
-		signature_started = 1 ;
-		create_svg_element_by_json({
-			"element": "ellipse",
-			"Attr": {
-				"cx": x,
-				"cy": y,
-				"rx": 1 + "px",
-				"ry": 1 + "px",
-				"id": "ellipse_" + ellipse_num,
-				"fill": current_draw_element_fill,
-				"stroke": current_draw_element_stroke,
-				"stroke-width": current_draw_element_stroke_width
-				}
-		});
-	break
-	case "delete":
-		var T=evt.target
-		if(SVGRoot == evt.target ) return ;
-		T.parentNode.removeChild(T);
-	break;
-	}//switch

-	
 }

 function fun_mouseMOVE(evt)
 {
-	if (signature_started == 1 )
-	{
-	var x = evt.pageX;
-	var y = evt.pageY;
+    if (signature_started == 1 )
+    {
+    var x = evt.pageX;
+    var y = evt.pageY;


-	switch (current_draw_element)
-	{
-	case "path":
+    switch (current_draw_element)
+    {
+    case "path":

-		d_attr = d_attr + "L" + x + " " + y + " ";
-		var shape = SVGDocument.getElementById("path_" + path_num);
-		shape.setAttributeNS(null, "d", d_attr);
-		break
+        d_attr = d_attr + "L" + x + " " + y + " ";
+        var shape = SVGDocument.getElementById("path_" + path_num);
+        shape.setAttributeNS(null, "d", d_attr);
+        break;

-	case "rect":
+    case "line":
+        var shape = SVGDocument.getElementById("line_" + line_num);
+        shape.setAttributeNS(null, "x2", x);
+        shape.setAttributeNS(null, "y2", y);
+    break;

-		var shape = SVGDocument.getElementById("rect_" + rect_num);
-		var start_x = shape.getAttributeNS(null, "x");
-		var start_y = shape.getAttributeNS(null, "y");
+    case "square":

-		if(rect_x < x ){
-			shape.setAttributeNS(null, "x", rect_x);
-			shape.setAttributeNS(null, "width", x - rect_x);
-		}else{
-			shape.setAttributeNS(null, "x", x);
-			shape.setAttributeNS(null, "width", rect_x - x);
-		}
-		if(rect_y < y ){
-			shape.setAttributeNS(null, "y", rect_y);
-			shape.setAttributeNS(null, "height", y - rect_y);
-		}else{
-			shape.setAttributeNS(null, "y", y);
-			shape.setAttributeNS(null, "height", rect_y - y);
-		}
-					
-	break
-	case "line":
-		var shape = SVGDocument.getElementById("line_" + line_num);
-		shape.setAttributeNS(null, "x2", x);
-		shape.setAttributeNS(null, "y2", y);
-	break
-	case "ellipse":
-		var shape = SVGDocument.getElementById("ellipse_" + ellipse_num);
-		var cx = shape.getAttributeNS(null, "cx");
-		var cy = shape.getAttributeNS(null, "cy");
-		var rad = Math.sqrt( (x-cx)*(x-cx) + (y-cy)*(y-cy) );
-		
-		shape.setAttributeNS(null, "rx", rad);
-		shape.setAttributeNS(null, "ry", rad);
-	break;
+        var shape = SVGDocument.getElementById("rect_" + rect_num);
+        var size = Math.max( Math.abs(x-rect_x) , Math.abs(y-rect_y) );

-	case "freehandcircle":
-		d_attr = d_attr + "L" + x + " " + y + " ";
-		var shape = SVGDocument.getElementById("path_" + path_num);
-		shape.setAttributeNS(null, "d", d_attr);
+        shape.setAttributeNS(null, "width", size);
+        shape.setAttributeNS(null, "height", size);
+        if(rect_x < x ){
+            shape.setAttributeNS(null, "x", rect_x);
+        }else{
+            shape.setAttributeNS(null, "x", rect_x - size);
+        }
+        if(rect_y < y ){
+            shape.setAttributeNS(null, "y", rect_y);
+        }else{
+            shape.setAttributeNS(null, "y", rect_y - size);
+        }

-		freehandcircle_min_x = min_of(x , freehandcircle_min_x ) ;	
-		freehandcircle_max_x = max_of(x , freehandcircle_max_x ) ;	
-		freehandcircle_min_y = min_of(y , freehandcircle_min_y ) ;	
-		freehandcircle_max_y = max_of(y , freehandcircle_max_y ) ;	
-	break;
-		
-	}//switch
+    break;
+    case "select":
+    case "rect":

-	}//if
-}//function
+        var shape = SVGDocument.getElementById("rect_" + rect_num);
+
+        if(rect_x < x ){
+            shape.setAttributeNS(null, "x", rect_x);
+            shape.setAttributeNS(null, "width", x - rect_x);
+        }else{
+            shape.setAttributeNS(null, "x", x);
+            shape.setAttributeNS(null, "width", rect_x - x);
+        }
+        if(rect_y < y ){
+            shape.setAttributeNS(null, "y", rect_y);
+            shape.setAttributeNS(null, "height", y - rect_y);
+        }else{
+            shape.setAttributeNS(null, "y", y);
+            shape.setAttributeNS(null, "height", rect_y - y);
+        }
+
+    break;
+    case "circle":
+        var shape = SVGDocument.getElementById("ellipse_" + ellipse_num);
+        var cx = shape.getAttributeNS(null, "cx");
+        var cy = shape.getAttributeNS(null, "cy");
+        var rad = Math.sqrt( (x-cx)*(x-cx) + (y-cy)*(y-cy) );
+
+        shape.setAttributeNS(null, "rx", rad);
+        shape.setAttributeNS(null, "ry", rad);
+    break;
+    case "ellipse":
+        var shape = SVGDocument.getElementById("ellipse_" + ellipse_num);
+        var cx = shape.getAttributeNS(null, "cx");
+        var cy = shape.getAttributeNS(null, "cy");
+
+        shape.setAttributeNS(null, "rx", Math.abs(x-cx));
+        shape.setAttributeNS(null, "ry", Math.abs(y-cy));
+    break;
+
+    case "fhellipse":
+        d_attr = d_attr + "L" + x + " " + y + " ";
+        var shape = SVGDocument.getElementById("path_" + path_num);
+        shape.setAttributeNS(null, "d", d_attr);
+
+        freehand_min_x = min_of(x , freehand_min_x ) ;
+        freehand_max_x = max_of(x , freehand_max_x ) ;
+        freehand_min_y = min_of(y , freehand_min_y ) ;
+        freehand_max_y = max_of(y , freehand_max_y ) ;
+    break;
+
+    case "fhrect":
+        d_attr = d_attr + "L" + x + " " + y + " ";
+        var shape = SVGDocument.getElementById("path_" + path_num);
+        shape.setAttributeNS(null, "d", d_attr);
+
+        freehand_min_x = min_of(x , freehand_min_x ) ;
+        freehand_max_x = max_of(x , freehand_max_x ) ;
+        freehand_min_y = min_of(y , freehand_min_y ) ;
+        freehand_max_y = max_of(y , freehand_max_y ) ;
+    break;
+
+    }
+
+    }
+}



 function min_of(a ,b){
-	if (a < b ) { return a ;}
-	else {return b ;}
+    if (a < b ) { return a ;}
+    else {return b ;}
 }
 function max_of(a ,b){
-	if (a > b ) { return a ;}
-	else {return b ;}
+    if (a > b ) { return a ;}
+    else {return b ;}
 }


 function create_svg_element_by_json(data)
 {
-	var shape = SVGDocument.createElementNS(svgns, data.element);
-	assignAttr(shape, data.Attr);
-	SVGDocument.documentElement.appendChild(shape);
-	
-}//function
+    var shape = SVGDocument.createElementNS(svgns, data.element);
+    assignAttr(shape, data.Attr);
+    SVGDocument.documentElement.appendChild(shape);
+
+}
+
 function assignAttr(Node,Attr){
-	for (i in Attr) {
-		Node.setAttributeNS(null, i, Attr[i]);
-	}
-}//function
-	   
+    for (i in Attr) {
+        Node.setAttributeNS(null, i, Attr[i]);
+    }
+}
+

 function SVGclear_svg()
 {
-	var Nodes = SVGRoot.childNodes ;
-	var Length = SVGRoot.childNodes.length ;
-	var i = 0 ;
-	for(var Rep=0; Rep< Length; Rep++){
-		if(Nodes[i].nodeType == 1){
-			Nodes[i].parentNode.removeChild(Nodes[i]); 
-		}
-		else{
-			i++;	
-		}
-	}//for
+    var Nodes = SVGRoot.childNodes ;
+    var Length = SVGRoot.childNodes.length ;
+    var i = 0 ;
+    for(var Rep=0; Rep< Length; Rep++){
+        if(Nodes[i].nodeType == 1){
+            Nodes[i].parentNode.removeChild(Nodes[i]);
+        }
+        else{
+            i++;
+        }
+    }
 }


 function SvgToString(elem , indent)
 {
-	var out = "" ;
+    var out = "" ;
   if (elem)
   {
      var attrs = elem.attributes;
@ -343,27 +467,31 @@ function SvgToString(elem , indent)
      var i;
      var childs = elem.childNodes;

+      // don't include scripts in output svg
+      if (elem.nodeName == "script") return "";
+
      for (i=0; i<indent; i++) out += "  ";
      out += "<" + elem.nodeName;
-
-
      for (i=attrs.length-1; i>=0; i--)
      {
         attr = attrs.item(i);
+         // don't include events in output svg
+         if (attr.nodeName == "onload" ||
+             attr.nodeName == "onmousedown" ||
+             attr.nodeName == "onmousemove" ||
+             attr.nodeName == "onmouseup") continue;
         out += " " + attr.nodeName + "=\"" + attr.nodeValue+ "\"";
      }

-
-
      if (elem.hasChildNodes())
      {
         out += ">\n";
         indent++;
         for (i=0; i<childs.length; i++)
         {
-            if (childs.item(i).nodeType == 1) // element node ..
+            if (childs.item(i).nodeType == 1) // element node
               out = out + SvgToString(childs.item(i) ,indent);
-            else if (childs.item(i).nodeType == 3) // text node ..
+            else if (childs.item(i).nodeType == 3) // text node
            {
               for (j=0; j<indent; j++) out += "  ";
               out += childs.item(i).nodeValue + "\n";
@ -381,12 +509,9 @@ function SvgToString(elem , indent)
   }
   return out;
 }
-  
-function SVGsubmit_svg(){
-	var str = "<?xml version=\"1.0\" standalone=\"no\"?> \
-	<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \
-	\"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"> \n"
-        str = str + SvgToString(SVGRoot , 0);
-	top.return_str_to_html(str);
-}

+function SVGsubmit_svg(){
+    var str = "<?xml version=\"1.0\" standalone=\"no\"?>\n<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n";
+    str = str + SvgToString(SVGRoot , 0);
+    top.serializeHandler(str);
+}
--- a/circle.png
+++ b/circle.png
--- a/clear.png
+++ b/clear.png
--- a/colorpicker/css/colorpicker.css
+++ b/colorpicker/css/colorpicker.css
@ -1,161 +0,0 @@
-.colorpicker {
-	width: 356px;
-	height: 176px;
-	overflow: hidden;
-	position: absolute;
-	background: url(../images/colorpicker_background.png);
-	font-family: Arial, Helvetica, sans-serif;
-	display: none;
-}
-.colorpicker_color {
-	width: 150px;
-	height: 150px;
-	left: 14px;
-	top: 13px;
-	position: absolute;
-	background: #f00;
-	overflow: hidden;
-	cursor: crosshair;
-}
-.colorpicker_color div {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 150px;
-	height: 150px;
-	background: url(../images/colorpicker_overlay.png);
-}
-.colorpicker_color div div {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 11px;
-	height: 11px;
-	overflow: hidden;
-	background: url(../images/colorpicker_select.gif);
-	margin: -5px 0 0 -5px;
-}
-.colorpicker_hue {
-	position: absolute;
-	top: 13px;
-	left: 171px;
-	width: 35px;
-	height: 150px;
-	cursor: n-resize;
-}
-.colorpicker_hue div {
-	position: absolute;
-	width: 35px;
-	height: 9px;
-	overflow: hidden;
-	background: url(../images/colorpicker_indic.gif) left top;
-	margin: -4px 0 0 0;
-	left: 0px;
-}
-.colorpicker_new_color {
-	position: absolute;
-	width: 60px;
-	height: 30px;
-	left: 213px;
-	top: 13px;
-	background: #f00;
-}
-.colorpicker_current_color {
-	position: absolute;
-	width: 60px;
-	height: 30px;
-	left: 283px;
-	top: 13px;
-	background: #f00;
-}
-.colorpicker input {
-	background-color: transparent;
-	border: 1px solid transparent;
-	position: absolute;
-	font-size: 10px;
-	font-family: Arial, Helvetica, sans-serif;
-	color: #898989;
-	top: 4px;
-	right: 11px;
-	text-align: right;
-	margin: 0;
-	padding: 0;
-	height: 11px;
-}
-.colorpicker_hex {
-	position: absolute;
-	width: 72px;
-	height: 22px;
-	background: url(../images/colorpicker_hex.png) top;
-	left: 212px;
-	top: 142px;
-}
-.colorpicker_hex input {
-	right: 6px;
-}
-.colorpicker_field {
-	height: 22px;
-	width: 62px;
-	background-position: top;
-	position: absolute;
-}
-.colorpicker_field span {
-	position: absolute;
-	width: 12px;
-	height: 22px;
-	overflow: hidden;
-	top: 0;
-	right: 0;
-	cursor: n-resize;
-}
-.colorpicker_rgb_r {
-	background-image: url(../images/colorpicker_rgb_r.png);
-	top: 52px;
-	left: 212px;
-}
-.colorpicker_rgb_g {
-	background-image: url(../images/colorpicker_rgb_g.png);
-	top: 82px;
-	left: 212px;
-}
-.colorpicker_rgb_b {
-	background-image: url(../images/colorpicker_rgb_b.png);
-	top: 112px;
-	left: 212px;
-}
-.colorpicker_hsb_h {
-	background-image: url(../images/colorpicker_hsb_h.png);
-	top: 52px;
-	left: 282px;
-}
-.colorpicker_hsb_s {
-	background-image: url(../images/colorpicker_hsb_s.png);
-	top: 82px;
-	left: 282px;
-}
-.colorpicker_hsb_b {
-	background-image: url(../images/colorpicker_hsb_b.png);
-	top: 112px;
-	left: 282px;
-}
-.colorpicker_submit {
-	position: absolute;
-	width: 22px;
-	height: 22px;
-	background: url(../images/colorpicker_submit.png) top;
-	left: 322px;
-	top: 142px;
-	overflow: hidden;
-}
-.colorpicker_focus {
-	background-position: center;
-}
-.colorpicker_hex.colorpicker_focus {
-	background-position: bottom;
-}
-.colorpicker_submit.colorpicker_focus {
-	background-position: bottom;
-}
-.colorpicker_slider {
-	background-position: bottom;
-}
--- a/colorpicker/css/layout.css
+++ b/colorpicker/css/layout.css
@ -1,218 +0,0 @@
-body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
-	margin:0;
-	padding:0;
-}
-table {
-	border-collapse:collapse;
-	border-spacing:0;
-}
-fieldset,img { 
-	border:0;
-}
-address,caption,cite,code,dfn,em,strong,th,var {
-	font-style:normal;
-	font-weight:normal;
-}
-ol,ul {
-	list-style:none;
-}
-caption,th {
-	text-align:left;
-}
-h1,h2,h3,h4,h5,h6 {
-	font-size:100%;
-	font-weight:normal;
-}
-q:before,q:after {
-	content:'';
-}
-abbr,acronym { border:0;
-}
-html, body {
-	background-color: #fff;
-	font-family: Arial, Helvetica, sans-serif;
-	font-size: 12px;
-	line-height: 18px;
-	color: #52697E;
-}
-body {
-	text-align: center;
-	overflow: auto;
-}
-.wrapper {
-	width: 700px;
-	margin: 0 auto;
-	text-align: left;
-}
-h1 {
-	font-size: 21px;
-	height: 47px;
-	line-height: 47px;
-	text-transform: uppercase;
-}
-.navigationTabs {
-	height: 23px;
-	line-height: 23px;
-	border-bottom: 1px solid #ccc;
-}
-.navigationTabs li {
-	float: left;
-	height: 23px;
-	line-height: 23px;
-	padding-right: 3px;
-}
-.navigationTabs li a{
-	float: left;
-	dispaly: block;
-	height: 23px;
-	line-height: 23px;
-	padding: 0 10px;
-	overflow: hidden;
-	color: #52697E;
-	background-color: #eee;
-	position: relative;
-	text-decoration: none;
-}
-.navigationTabs li a:hover {
-	background-color: #f0f0f0;
-}
-.navigationTabs li a.active {
-	background-color: #fff;
-	border: 1px solid #ccc;
-	border-bottom: 0px solid;
-}
-.tabsContent {
-	border: 1px solid #ccc;
-	border-top: 0px solid;
-	width: 698px;
-	overflow: hidden;
-}
-.tab {
-	padding: 16px;
-	display: none;
-}
-.tab h2 {
-	font-weight: bold;
-	font-size: 16px;
-}
-.tab h3 {
-	font-weight: bold;
-	font-size: 14px;
-	margin-top: 20px;
-}
-.tab p {
-	margin-top: 16px;
-	clear: both;
-}
-.tab ul {
-	margin-top: 16px;
-	list-style: disc;
-}
-.tab li {
-	margin: 10px 0 0 35px;
-}
-.tab a {
-	color: #8FB0CF;
-}
-.tab strong {
-	font-weight: bold;
-}
-.tab pre {
-	font-size: 11px;
-	margin-top: 20px;
-	width: 668px;
-	overflow: auto;
-	clear: both;
-}
-.tab table {
-	width: 100%;
-}
-.tab table td {
-	padding: 6px 10px 6px 0;
-	vertical-align: top;
-}
-.tab dt {
-	margin-top: 16px;
-}
-
-#colorSelector {
-	position: relative;
-	width: 36px;
-	height: 36px;
-	background: url(../images/select.png);
-}
-#colorSelector div {
-	position: absolute;
-	top: 3px;
-	left: 3px;
-	width: 30px;
-	height: 30px;
-	background: url(../images/select.png) center;
-}
-#colorSelector2 {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 36px;
-	height: 36px;
-	background: url(../images/select2.png);
-}
-#colorSelector2 div {
-	position: absolute;
-	top: 4px;
-	left: 4px;
-	width: 28px;
-	height: 28px;
-	background: url(../images/select2.png) center;
-}
-#colorpickerHolder2 {
-	top: 32px;
-	left: 0;
-	width: 356px;
-	height: 0;
-	overflow: hidden;
-	position: absolute;
-}
-#colorpickerHolder2 .colorpicker {
-	background-image: url(../images/custom_background.png);
-	position: absolute;
-	bottom: 0;
-	left: 0;
-}
-#colorpickerHolder2 .colorpicker_hue div {
-	background-image: url(../images/custom_indic.gif);
-}
-#colorpickerHolder2 .colorpicker_hex {
-	background-image: url(../images/custom_hex.png);
-}
-#colorpickerHolder2 .colorpicker_rgb_r {
-	background-image: url(../images/custom_rgb_r.png);
-}
-#colorpickerHolder2 .colorpicker_rgb_g {
-	background-image: url(../images/custom_rgb_g.png);
-}
-#colorpickerHolder2 .colorpicker_rgb_b {
-	background-image: url(../images/custom_rgb_b.png);
-}
-#colorpickerHolder2 .colorpicker_hsb_s {
-	background-image: url(../images/custom_hsb_s.png);
-	display: none;
-}
-#colorpickerHolder2 .colorpicker_hsb_h {
-	background-image: url(../images/custom_hsb_h.png);
-	display: none;
-}
-#colorpickerHolder2 .colorpicker_hsb_b {
-	background-image: url(../images/custom_hsb_b.png);
-	display: none;
-}
-#colorpickerHolder2 .colorpicker_submit {
-	background-image: url(../images/custom_submit.png);
-}
-#colorpickerHolder2 .colorpicker input {
-	color: #778398;
-}
-#customWidget {
-	position: relative;
-	height: 36px;
-}
--- a/colorpicker/images/Thumbs.db
+++ b/colorpicker/images/Thumbs.db
--- a/colorpicker/images/blank.gif
+++ b/colorpicker/images/blank.gif
--- a/colorpicker/images/colorpicker_background.png
+++ b/colorpicker/images/colorpicker_background.png
--- a/colorpicker/images/colorpicker_hex.png
+++ b/colorpicker/images/colorpicker_hex.png
--- a/colorpicker/images/colorpicker_hsb_b.png
+++ b/colorpicker/images/colorpicker_hsb_b.png
--- a/colorpicker/images/colorpicker_hsb_h.png
+++ b/colorpicker/images/colorpicker_hsb_h.png
--- a/colorpicker/images/colorpicker_hsb_s.png
+++ b/colorpicker/images/colorpicker_hsb_s.png
--- a/colorpicker/images/colorpicker_indic.gif
+++ b/colorpicker/images/colorpicker_indic.gif
--- a/colorpicker/images/colorpicker_overlay.png
+++ b/colorpicker/images/colorpicker_overlay.png
--- a/colorpicker/images/colorpicker_rgb_b.png
+++ b/colorpicker/images/colorpicker_rgb_b.png
--- a/colorpicker/images/colorpicker_rgb_g.png
+++ b/colorpicker/images/colorpicker_rgb_g.png
--- a/colorpicker/images/colorpicker_rgb_r.png
+++ b/colorpicker/images/colorpicker_rgb_r.png
--- a/colorpicker/images/colorpicker_select.gif
+++ b/colorpicker/images/colorpicker_select.gif
--- a/colorpicker/images/colorpicker_submit.png
+++ b/colorpicker/images/colorpicker_submit.png
--- a/colorpicker/images/custom_background.png
+++ b/colorpicker/images/custom_background.png
--- a/colorpicker/images/custom_hex.png
+++ b/colorpicker/images/custom_hex.png
--- a/colorpicker/images/custom_hsb_b.png
+++ b/colorpicker/images/custom_hsb_b.png
--- a/colorpicker/images/custom_hsb_h.png
+++ b/colorpicker/images/custom_hsb_h.png
--- a/colorpicker/images/custom_hsb_s.png
+++ b/colorpicker/images/custom_hsb_s.png
--- a/colorpicker/images/custom_indic.gif
+++ b/colorpicker/images/custom_indic.gif
--- a/colorpicker/images/custom_rgb_b.png
+++ b/colorpicker/images/custom_rgb_b.png
--- a/colorpicker/images/custom_rgb_g.png
+++ b/colorpicker/images/custom_rgb_g.png
--- a/colorpicker/images/custom_rgb_r.png
+++ b/colorpicker/images/custom_rgb_r.png
--- a/colorpicker/images/custom_submit.png
+++ b/colorpicker/images/custom_submit.png
--- a/colorpicker/images/select.png
+++ b/colorpicker/images/select.png
--- a/colorpicker/images/select2.png
+++ b/colorpicker/images/select2.png
--- a/colorpicker/images/slider.png
+++ b/colorpicker/images/slider.png
--- a/colorpicker/index.html
+++ b/colorpicker/index.html
@ -1,171 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
-    <link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />
-    <title>ColorPicker - jQuery plugin</title>
-	<script type="text/javascript" src="../../jquery-1.3.js"></script>
-	<script type="text/javascript" src="js/colorpicker.js"></script>
-    <script type="text/javascript" src="js/eye.js"></script>
-    <script type="text/javascript" src="js/utils.js"></script>
-    <script type="text/javascript" src="js/layout.js?ver=1.0.2"></script>
-</head>
-<body>
-    <div class="wrapper">
-        <h1>Color Picker - jQuery plugin</h1>
-        <ul class="navigationTabs">
-            <li><a href="#about" rel="about">About</a></li>
-            <li><a href="#download" rel="download">Download</a></li>
-            <li><a href="#implement" rel="implement">Implement</a></li>
-        </ul>
-        <div class="tabsContent">
-            <div class="tab">
-                <h2>About</h2>
-                <p>A simple component to select color in the same way you select color in Adobe Photoshop</p>
-                <h3>Features</h3>
-                <ul>
-                    <li>Flat mode - as element in page</li>
-                    <li>Powerful controls for color selection</li>
-					<li>Easy to customize the look by changing some images</li>
-					<li>Fits into the viewport</li>
-                </ul>
-                <h3>Examples</h3>
-                <p>Flat mode.</p>
-                <p id="colorpickerHolder">
-                </p>
-                <pre>
-$('#colorpickerHolder').ColorPicker({flat: true});
-                </pre>
-                <p>Custom skin and using flat mode to display the color picker in a custom widget.</p>
-				<div id="customWidget">
-					<div id="colorSelector2"><div style="background-color: #00ff00"></div></div>
-	                <div id="colorpickerHolder2">
-	                </div>
-				</div>
-
-				<p>Attached to an text field and using callback functions to update the color with field's value and set the value back in the field by submiting the color.</p>
-				<p><input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" /></p>
-				<pre>
-$('#colorpickerField1').ColorPicker({
-	onSubmit: function(hsb, hex, rgb) {
-		$('#colorpickerField1').val(hex);
-	},
-	onBeforeShow: function () {
-		$(this).ColorPickerSetColor(this.value);
-	}
-})
-.bind('keyup', function(){
-	$(this).ColorPickerSetColor(this.value);
-});
-</pre>
-				<p>Attached to DOMElement and using callbacks to live preview the color and adding animation.</p>
-				<p>
-					<div id="colorSelector"><div style="background-color: #0000ff"></div></div>
-				</p>
-				<pre>
-$('#colorSelector').ColorPicker({
-	color: '#0000ff',
-	onShow: function (colpkr) {
-		$(colpkr).fadeIn(500);
-		return false;
-	},
-	onHide: function (colpkr) {
-		$(colpkr).fadeOut(500);
-		return false;
-	},
-	onChange: function (hsb, hex, rgb) {
-		$('#colorSelector div').css('backgroundColor', '#' + hex);
-	}
-});
-</pre>
-            </div>
-            <div class="tab">
-                <h2>Download</h2>
-                <p><a href="colorpicker.zip">colorpicker.zip (73 kb)</a>: jQuery, Javscript files, CSS files, images, examples and instructions.</p>
-                <h3>Changelog</h3>
-                <dl>
-					<dt>22.08.2008</dt>
-					<dd>Fixed bug: where some events were not canceled right on Safari</dd>
-					<dd>Fixed bug: where teh view port was not detected right on Safari</dd>
-					<dt>16-07-2008</dt>
-					<dd>Fixed bug where the letter 'F' could not be typed in the Hex field</dd>
-					<dd>Fixed bug where the changes on Hex field where not parsed</dd>
-					<dd>Added new option 'livePreview'</dd>
-					<dt>08-07-2008</dt>
-					<dd>Fixed typo in the code, both JavaScript and CSS</dd>
-					<dd>Changed the cursor for some elements</dd>
-					<dd>Added new demo explaining how to implement custom skin</dd>
-					<dt>07.07.2008</dt>
-					<dd>The first release.</dd>
-                </dl>
-            </div>
-            <div class="tab">
-                <h2>Implement</h2>
-                <p>Attach the Javascript and CSS files to your document. Edit CSS file and fix the paths to  images and change colors to fit your site theme.</p>
-                <pre>
-&lt;link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" /&gt;
-&lt;script type="text/javascript" src="js/colorpicker.js"&gt;&lt;/script&gt;
-                </pre>
-                <h3>Invocation code</h3>
-                <p>All you have to do is to select the elements in a jQuery way and call the plugin.</p>
-                <pre>
- $('input').ColorPickerSetColor(options);
-                </pre>
-                <h3>Options</h3>
-                <p>A hash of parameters. All parameters are optional.</p>
-                <table>
-                	<tr>
-                		<td><strong>eventName</strong></td>
-                		<td>string</td>
-                		<td>The desired event to trigger the colorpicker. Default: 'click'</td>
-                	</tr>
-                	<tr>
-                		<td><strong>color</strong></td>
-                		<td>string or hash</td>
-                		<td>The default color. String for hex color or hash for RGB and HSB ({r:255, r:0, b:0}) . Default: 'ff0000'</td>
-                	</tr>
-                	<tr>
-                		<td><strong>flat</strong></td>
-                		<td>boolean</td>
-                		<td>Whatever if the color picker is appended to the element or triggered by an event. Default false</td>
-                	</tr>
-                	<tr>
-                		<td><strong>livePreview</strong></td>
-                		<td>boolean</td>
-                		<td>Whatever if the color values are filled in the fields while changing values on selector or a field. If false it may improve speed. Default true</td>
-                	</tr>
-                	<tr>
-                		<td><strong>onShow</strong></td>
-                		<td>function</td>
-                		<td>Callback function triggered when the color picker is shown</td>
-                	</tr>
-                	<tr>
-                		<td><strong>onBeforeShow</strong></td>
-                		<td>function</td>
-                		<td>Callback function triggered before the color picker is shown</td>
-                	</tr>
-                	<tr>
-                		<td><strong>onHide</strong></td>
-                		<td>function</td>
-                		<td>Callback function triggered when the color picker is hidden</td>
-                	</tr>
-                	<tr>
-                		<td><strong>onChange</strong></td>
-                		<td>function</td>
-                		<td>Callback function triggered when the color is changed</td>
-                	</tr>
-                	<tr>
-                		<td><strong>onSubmit</strong></td>
-                		<td>function</td>
-                		<td>Callback function triggered when the color it is chosen</td>
-                	</tr>
-                </table>
-                <h3>Set color</h3>
-                <p>If you want to set a new color.</p>
-                <pre>$('input').ColorPickerSetColor(color);</pre>
-				<p>The 'color' argument is the same format as the option color, string for hex color or hash for RGB and HSB ({r:255, r:0, b:0}).</p>
-            </div>
-        </div>
-    </div>
-</body>
-</html>
--- a/colorpicker/js/colorpicker.js
+++ b/colorpicker/js/colorpicker.js
@ -1,450 +0,0 @@
-/**
- *
- * Color picker
- * Author: Stefan Petre www.eyecon.ro
- * 
- */
-(function ($) {
-	var ColorPicker = function () {
-		var
-			ids = {},
-			inAction,
-			charMin = 65,
-			visible,
-			tpl = '<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>',
-			defaults = {
-				eventName: 'click',
-				onShow: function () {},
-				onBeforeShow: function(){},
-				onHide: function () {},
-				onChange: function () {},
-				onSubmit: function () {},
-				color: 'ff0000',
-				livePreview: true,
-				flat: false
-			},
-			fillRGBFields = function  (hsb, cal) {
-				var rgb = HSBToRGB(hsb);
-				$(cal).data('colorpicker').fields
-					.eq(1).val(rgb.r).end()
-					.eq(2).val(rgb.g).end()
-					.eq(3).val(rgb.b).end();
-			},
-			fillHSBFields = function  (hsb, cal) {
-				$(cal).data('colorpicker').fields
-					.eq(4).val(hsb.h).end()
-					.eq(5).val(hsb.s).end()
-					.eq(6).val(hsb.b).end();
-			},
-			fillHexFields = function (hsb, cal) {
-				$(cal).data('colorpicker').fields
-					.eq(0).val(HSBToHex(hsb)).end();
-			},
-			setSelector = function (hsb, cal) {
-				$(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({h: hsb.h, s: 100, b: 100}));
-				$(cal).data('colorpicker').selectorIndic.css({
-					left: parseInt(150 * hsb.s/100, 10),
-					top: parseInt(150 * (100-hsb.b)/100, 10)
-				});
-			},
-			setHue = function (hsb, cal) {
-				$(cal).data('colorpicker').hue.css('top', parseInt(150 - 150 * hsb.h/360, 10));
-			},
-			setCurrentColor = function (hsb, cal) {
-				$(cal).data('colorpicker').currentColor.css('backgroundColor', '#' + HSBToHex(hsb));
-			},
-			setNewColor = function (hsb, cal) {
-				$(cal).data('colorpicker').newColor.css('backgroundColor', '#' + HSBToHex(hsb));
-			},
-			keyDown = function (ev) {
-				var pressedKey = ev.charCode || ev.keyCode || -1;
-				if ((pressedKey > charMin && pressedKey <= 90) || pressedKey == 32) {
-					return false;
-				}
-				var cal = $(this).parent().parent();
-				if (cal.data('colorpicker').livePreview === true) {
-					change.apply(this);
-				}
-			},
-			change = function (ev) {
-				var cal = $(this).parent().parent(), col;
-				if (this.parentNode.className.indexOf('_hex') > 0) {
-					cal.data('colorpicker').color = col = HexToHSB(fixHex(this.value));
-				} else if (this.parentNode.className.indexOf('_hsb') > 0) {
-					cal.data('colorpicker').color = col = fixHSB({
-						h: parseInt(cal.data('colorpicker').fields.eq(4).val(), 10),
-						s: parseInt(cal.data('colorpicker').fields.eq(5).val(), 10),
-						b: parseInt(cal.data('colorpicker').fields.eq(6).val(), 10)
-					});
-				} else {
-					cal.data('colorpicker').color = col = RGBToHSB(fixRGB({
-						r: parseInt(cal.data('colorpicker').fields.eq(1).val(), 10),
-						g: parseInt(cal.data('colorpicker').fields.eq(2).val(), 10),
-						b: parseInt(cal.data('colorpicker').fields.eq(3).val(), 10)
-					}));
-				}
-				if (ev) {
-					fillRGBFields(col, cal.get(0));
-					fillHexFields(col, cal.get(0));
-					fillHSBFields(col, cal.get(0));
-				}
-				setSelector(col, cal.get(0));
-				setHue(col, cal.get(0));
-				setNewColor(col, cal.get(0));
-				cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);
-			},
-			blur = function (ev) {
-				var cal = $(this).parent().parent();
-				cal.data('colorpicker').fields.parent().removeClass('colorpicker_focus')
-			},
-			focus = function () {
-				charMin = this.parentNode.className.indexOf('_hex') > 0 ? 70 : 65;
-				$(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker_focus');
-				$(this).parent().addClass('colorpicker_focus');
-			},
-			downIncrement = function (ev) {
-				var field = $(this).parent().find('input').focus();
-				var current = {
-					el: $(this).parent().addClass('colorpicker_slider'),
-					max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),
-					y: ev.pageY,
-					field: field,
-					val: parseInt(field.val(), 10),
-					preview: $(this).parent().parent().data('colorpicker').livePreview					
-				};
-				$(document).bind('mouseup', current, upIncrement);
-				$(document).bind('mousemove', current, moveIncrement);
-			},
-			moveIncrement = function (ev) {
-				ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val + ev.pageY - ev.data.y, 10))));
-				if (ev.data.preview) {
-					change.apply(ev.data.field.get(0), [true]);
-				}
-				return false;
-			},
-			upIncrement = function (ev) {
-				change.apply(ev.data.field.get(0), [true]);
-				ev.data.el.removeClass('colorpicker_slider').find('input').focus();
-				$(document).unbind('mouseup', upIncrement);
-				$(document).unbind('mousemove', moveIncrement);
-				return false;
-			},
-			downHue = function (ev) {
-				var current = {
-					cal: $(this).parent(),
-					y: $(this).offset().top
-				};
-				current.preview = current.cal.data('colorpicker').livePreview;
-				$(document).bind('mouseup', current, upHue);
-				$(document).bind('mousemove', current, moveHue);
-			},
-			moveHue = function (ev) {
-				change.apply(
-					ev.data.cal.data('colorpicker')
-						.fields
-						.eq(4)
-						.val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.y))))/150, 10))
-						.get(0),
-					[ev.data.preview]
-				);
-				return false;
-			},
-			upHue = function (ev) {
-				fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
-				fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
-				$(document).unbind('mouseup', upHue);
-				$(document).unbind('mousemove', moveHue);
-				return false;
-			},
-			downSelector = function (ev) {
-				var current = {
-					cal: $(this).parent(),
-					pos: $(this).offset()
-				};
-				current.preview = current.cal.data('colorpicker').livePreview;
-				$(document).bind('mouseup', current, upSelector);
-				$(document).bind('mousemove', current, moveSelector);
-			},
-			moveSelector = function (ev) {
-				change.apply(
-					ev.data.cal.data('colorpicker')
-						.fields
-						.eq(6)
-						.val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10))
-						.end()
-						.eq(5)
-						.val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10))
-						.get(0),
-					[ev.data.preview]
-				);
-				return false;
-			},
-			upSelector = function (ev) {
-				fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
-				fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
-				$(document).unbind('mouseup', upSelector);
-				$(document).unbind('mousemove', moveSelector);
-				return false;
-			},
-			enterSubmit = function (ev) {
-				$(this).addClass('colorpicker_focus');
-			},
-			leaveSubmit = function (ev) {
-				$(this).removeClass('colorpicker_focus');
-			},
-			clickSubmit = function (ev) {
-				var cal = $(this).parent();
-				var col = cal.data('colorpicker').color;
-				cal.data('colorpicker').origColor = col;
-				setCurrentColor(col, cal.get(0));
-				cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col));
-			},
-			show = function (ev) {
-				var cal = $('#' + $(this).data('colorpickerId'));
-				cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);
-				var pos = $(this).offset();
-				var viewPort = getViewport();
-				var top = pos.top + this.offsetHeight;
-				var left = pos.left;
-				if (top + 176 > viewPort.t + viewPort.h) {
-					top -= this.offsetHeight + 176;
-				}
-				if (left + 356 > viewPort.l + viewPort.w) {
-					left -= 356;
-				}
-				cal.css({left: left + 'px', top: top + 'px'});
-				if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
-					cal.show();
-				}
-				$(document).bind('mousedown', {cal: cal}, hide);
-				return false;
-			},
-			hide = function (ev) {
-				if (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) {
-					if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
-						ev.data.cal.hide();
-					}
-					$(document).unbind('mousedown', hide);
-				}
-			},
-			isChildOf = function(parentEl, el, container) {
-				if (parentEl == el) {
-					return true;
-				}
-				if (parentEl.contains) {
-					return parentEl.contains(el);
-				}
-				if ( parentEl.compareDocumentPosition ) {
-					return !!(parentEl.compareDocumentPosition(el) & 16);
-				}
-				var prEl = el.parentNode;
-				while(prEl && prEl != container) {
-					if (prEl == parentEl)
-						return true;
-					prEl = prEl.parentNode;
-				}
-				return false;
-			},
-			getViewport = function () {
-				var m = document.compatMode == 'CSS1Compat';
-				return {
-					l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
-					t : window.pageYOffset || (m ? document.documentElement.scrollTop : document.body.scrollTop),
-					w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth),
-					h : window.innerHeight || (m ? document.documentElement.clientHeight : document.body.clientHeight)
-				};
-			},
-			fixHSB = function (hsb) {
-				return {
-					h: Math.min(360, Math.max(0, hsb.h)),
-					s: Math.min(100, Math.max(0, hsb.s)),
-					b: Math.min(100, Math.max(0, hsb.b))
-				};
-			}, 
-			fixRGB = function (rgb) {
-				return {
-					r: Math.min(255, Math.max(0, rgb.r)),
-					g: Math.min(255, Math.max(0, rgb.g)),
-					b: Math.min(255, Math.max(0, rgb.b))
-				};
-			},
-			fixHex = function (hex) {
-				var len = 6 - hex.length;
-				if (len > 0) {
-					var o = [];
-					for (var i=0; i<len; i++) {
-						o.push('0');
-					}
-					o.push(hex);
-					hex = o.join('');
-				}
-				return hex;
-			}, 
-			HexToRGB = function (hex) {
-				var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
-				return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
-			},
-			HexToHSB = function (hex) {
-				return RGBToHSB(HexToRGB(hex));
-			},
-			RGBToHSB = function (rgb) {
-				var hsb = {};
-				hsb.b = Math.max(Math.max(rgb.r,rgb.g),rgb.b);
-				hsb.s = (hsb.b <= 0) ? 0 : Math.round(100*(hsb.b - Math.min(Math.min(rgb.r,rgb.g),rgb.b))/hsb.b);
-				hsb.b = Math.round((hsb.b /255)*100);
-				if((rgb.r==rgb.g) && (rgb.g==rgb.b)) hsb.h = 0;
-				else if(rgb.r>=rgb.g && rgb.g>=rgb.b) hsb.h = 60*(rgb.g-rgb.b)/(rgb.r-rgb.b);
-				else if(rgb.g>=rgb.r && rgb.r>=rgb.b) hsb.h = 60  + 60*(rgb.g-rgb.r)/(rgb.g-rgb.b);
-				else if(rgb.g>=rgb.b && rgb.b>=rgb.r) hsb.h = 120 + 60*(rgb.b-rgb.r)/(rgb.g-rgb.r);
-				else if(rgb.b>=rgb.g && rgb.g>=rgb.r) hsb.h = 180 + 60*(rgb.b-rgb.g)/(rgb.b-rgb.r);
-				else if(rgb.b>=rgb.r && rgb.r>=rgb.g) hsb.h = 240 + 60*(rgb.r-rgb.g)/(rgb.b-rgb.g);
-				else if(rgb.r>=rgb.b && rgb.b>=rgb.g) hsb.h = 300 + 60*(rgb.r-rgb.b)/(rgb.r-rgb.g);
-				else hsb.h = 0;
-				hsb.h = Math.round(hsb.h);
-				return hsb;
-			},
-			HSBToRGB = function (hsb) {
-				var rgb = {};
-				var h = Math.round(hsb.h);
-				var s = Math.round(hsb.s*255/100);
-				var v = Math.round(hsb.b*255/100);
-				if(s == 0) {
-					rgb.r = rgb.g = rgb.b = v;
-				} else {
-					var t1 = v;
-					var t2 = (255-s)*v/255;
-					var t3 = (t1-t2)*(h%60)/60;
-					if(h==360) h = 0;
-					if(h<60) {rgb.r=t1;	rgb.b=t2; rgb.g=t2+t3}
-					else if(h<120) {rgb.g=t1; rgb.b=t2;	rgb.r=t1-t3}
-					else if(h<180) {rgb.g=t1; rgb.r=t2;	rgb.b=t2+t3}
-					else if(h<240) {rgb.b=t1; rgb.r=t2;	rgb.g=t1-t3}
-					else if(h<300) {rgb.b=t1; rgb.g=t2;	rgb.r=t2+t3}
-					else if(h<360) {rgb.r=t1; rgb.g=t2;	rgb.b=t1-t3}
-					else {rgb.r=0; rgb.g=0;	rgb.b=0}
-				}
-				return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
-			},
-			RGBToHex = function (rgb) {
-				var hex = [
-					rgb.r.toString(16),
-					rgb.g.toString(16),
-					rgb.b.toString(16)
-				];
-				$.each(hex, function (nr, val) {
-					if (val.length == 1) {
-						hex[nr] = '0' + val;
-					}
-				});
-				return hex.join('');
-			},
-			HSBToHex = function (hsb) {
-				return RGBToHex(HSBToRGB(hsb));
-			};
-		return {
-			init: function (options) {
-				options = $.extend({}, defaults, options||{});
-				if (typeof options.color == 'string') {
-					options.color = HexToHSB(options.color);
-				} else if (options.color.r != undefined && options.color.g != undefined && options.color.b != undefined) {
-					options.color = RGBToHSB(options.color);
-				} else if (options.color.h != undefined && options.color.s != undefined && options.color.b != undefined) {
-					options.color = fixHSB(options.color);
-				} else {
-					return this;
-				}
-				options.origColor = options.color;
-				return this.each(function () {
-					if (!$(this).data('colorpickerId')) {
-						var id = 'collorpicker_' + parseInt(Math.random() * 1000);
-						$(this).data('colorpickerId', id);
-						var cal = $(tpl).attr('id', id);
-						if (options.flat) {
-							cal.appendTo(this).show();
-						} else {
-							cal.appendTo(document.body);
-						}
-						options.fields = cal
-											.find('input')
-												.bind('keydown', keyDown)
-												.bind('change', change)
-												.bind('blur', blur)
-												.bind('focus', focus);
-						cal.find('span').bind('mousedown', downIncrement);
-						options.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector);
-						options.selectorIndic = options.selector.find('div div');
-						options.hue = cal.find('div.colorpicker_hue div');
-						cal.find('div.colorpicker_hue').bind('mousedown', downHue);
-						options.newColor = cal.find('div.colorpicker_new_color');
-						options.currentColor = cal.find('div.colorpicker_current_color');
-						cal.data('colorpicker', options);
-						cal.find('div.colorpicker_submit')
-							.bind('mouseenter', enterSubmit)
-							.bind('mouseleave', leaveSubmit)
-							.bind('click', clickSubmit);
-						fillRGBFields(options.color, cal.get(0));
-						fillHSBFields(options.color, cal.get(0));
-						fillHexFields(options.color, cal.get(0));
-						setHue(options.color, cal.get(0));
-						setSelector(options.color, cal.get(0));
-						setCurrentColor(options.color, cal.get(0));
-						setNewColor(options.color, cal.get(0));
-						if (options.flat) {
-							cal.css({
-								position: 'relative',
-								display: 'block'
-							});
-						} else {
-							$(this).bind(options.eventName, show);
-						}
-					}
-				});
-			},
-			showPicker: function() {
-				return this.each( function () {
-					if ($(this).data('colorpickerId')) {
-						show.apply(this);
-					}
-				});
-			},
-			hidePicker: function() {
-				return this.each( function () {
-					if ($(this).data('colorpickerId')) {
-						$('#' + $(this).data('colorpickerId')).hide();
-					}
-				});
-			},
-			setColor: function(col) {
-				if (typeof col == 'string') {
-					col = HexToHSB(col);
-				} else if (col.r != undefined && col.g != undefined && col.b != undefined) {
-					col = RGBToHSB(col);
-				} else if (col.h != undefined && col.s != undefined && col.b != undefined) {
-					col = fixHSB(col);
-				} else {
-					return this;
-				}
-				return this.each(function(){
-					if ($(this).data('colorpickerId')) {
-						var cal = $('#' + $(this).data('colorpickerId'));
-						cal.data('colorpicker').color = col;
-						cal.data('colorpicker').origColor = col;
-						fillRGBFields(col, cal.get(0));
-						fillHSBFields(col, cal.get(0));
-						fillHexFields(col, cal.get(0));
-						setHue(col, cal.get(0));
-						setSelector(col, cal.get(0));
-						setCurrentColor(col, cal.get(0));
-						setNewColor(col, cal.get(0));
-					}
-				});
-			}
-		};
-	}();
-	$.fn.extend({
-		ColorPicker: ColorPicker.init,
-		ColorPickerHide: ColorPicker.hide,
-		ColorPickerShow: ColorPicker.show,
-		ColorPickerSetColor: ColorPicker.setColor
-	});
-})(jQuery)
--- a/colorpicker/js/eye.js
+++ b/colorpicker/js/eye.js
@ -1,34 +0,0 @@
-/**
- *
- * Zoomimage
- * Author: Stefan Petre www.eyecon.ro
- * 
- */
-(function($){
-	var EYE = window.EYE = function() {
-		var _registered = {
-			init: []
-		};
-		return {
-			init: function() {
-				$.each(_registered.init, function(nr, fn){
-					fn.call();
-				});
-			},
-			extend: function(prop) {
-				for (var i in prop) {
-					if (prop[i] != undefined) {
-						this[i] = prop[i];
-					}
-				}
-			},
-			register: function(fn, type) {
-				if (!_registered[type]) {
-					_registered[type] = [];
-				}
-				_registered[type].push(fn);
-			}
-		};
-	}();
-	$(EYE.init);
-})(jQuery);
--- a/colorpicker/js/layout.js
+++ b/colorpicker/js/layout.js
@ -1,66 +0,0 @@
-(function($){
-	var initLayout = function() {
-		var hash = window.location.hash.replace('#', '');
-		var currentTab = $('ul.navigationTabs a')
-							.bind('click', showTab)
-							.filter('a[rel=' + hash + ']');
-		if (currentTab.size() == 0) {
-			currentTab = $('ul.navigationTabs a:first');
-		}
-		showTab.apply(currentTab.get(0));
-		$('#colorpickerHolder').ColorPicker({flat: true});
-		$('#colorpickerHolder2').ColorPicker({
-			flat: true,
-			color: '#00ff00',
-			onSubmit: function(hsb, hex, rgb) {
-				$('#colorSelector2 div').css('backgroundColor', '#' + hex);
-			}
-		});
-		$('#colorpickerHolder2>div').css('position', 'absolute');
-		var widt = false;
-		$('#colorSelector2').bind('click', function() {
-			$('#colorpickerHolder2').stop().animate({height: widt ? 0 : 173}, 500);
-			widt = !widt;
-		});
-		$('#colorpickerField1').ColorPicker({
-			onSubmit: function(hsb, hex, rgb) {
-				$('#colorpickerField1').val(hex);
-			},
-			onBeforeShow: function () {
-				$(this).ColorPickerSetColor(this.value);
-			}
-		})
-		.bind('keyup', function(){
-			$(this).ColorPickerSetColor(this.value);
-		});
-		$('#colorSelector').ColorPicker({
-			color: '#0000ff',
-			onShow: function (colpkr) {
-				$(colpkr).fadeIn(500);
-				return false;
-			},
-			onHide: function (colpkr) {
-				$(colpkr).fadeOut(500);
-				return false;
-			},
-			onChange: function (hsb, hex, rgb) {
-				$('#colorSelector div').css('backgroundColor', '#' + hex);
-			}
-		});
-	};
-	
-	var showTab = function(e) {
-		var tabIndex = $('ul.navigationTabs a')
-							.removeClass('active')
-							.index(this);
-		$(this)
-			.addClass('active')
-			.blur();
-		$('div.tab')
-			.hide()
-				.eq(tabIndex)
-				.show();
-	};
-	
-	EYE.register(initLayout, 'init');
-})(jQuery)
--- a/colorpicker/js/sdjquery.js
+++ b/colorpicker/js/sdjquery.js
--- a/colorpicker/js/utils.js
+++ b/colorpicker/js/utils.js
@ -1,252 +0,0 @@
-/**
- *
- * Utilities
- * Author: Stefan Petre www.eyecon.ro
- * 
- */
-(function($) {
-EYE.extend({
-	getPosition : function(e, forceIt)
-	{
-		var x = 0;
-		var y = 0;
-		var es = e.style;
-		var restoreStyles = false;
-		if (forceIt && jQuery.curCSS(e,'display') == 'none') {
-			var oldVisibility = es.visibility;
-			var oldPosition = es.position;
-			restoreStyles = true;
-			es.visibility = 'hidden';
-			es.display = 'block';
-			es.position = 'absolute';
-		}
-		var el = e;
-		if (el.getBoundingClientRect) { // IE
-			var box = el.getBoundingClientRect();
-			x = box.left + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) - 2;
-			y = box.top + Math.max(document.documentElement.scrollTop, document.body.scrollTop) - 2;
-		} else {
-			x = el.offsetLeft;
-			y = el.offsetTop;
-			el = el.offsetParent;
-			if (e != el) {
-				while (el) {
-					x += el.offsetLeft;
-					y += el.offsetTop;
-					el = el.offsetParent;
-				}
-			}
-			if (jQuery.browser.safari && jQuery.curCSS(e, 'position') == 'absolute' ) {
-				x -= document.body.offsetLeft;
-				y -= document.body.offsetTop;
-			}
-			el = e.parentNode;
-			while (el && el.tagName.toUpperCase() != 'BODY' && el.tagName.toUpperCase() != 'HTML') 
-			{
-				if (jQuery.curCSS(el, 'display') != 'inline') {
-					x -= el.scrollLeft;
-					y -= el.scrollTop;
-				}
-				el = el.parentNode;
-			}
-		}
-		if (restoreStyles == true) {
-			es.display = 'none';
-			es.position = oldPosition;
-			es.visibility = oldVisibility;
-		}
-		return {x:x, y:y};
-	},
-	getSize : function(e)
-	{
-		var w = parseInt(jQuery.curCSS(e,'width'), 10);
-		var h = parseInt(jQuery.curCSS(e,'height'), 10);
-		var wb = 0;
-		var hb = 0;
-		if (jQuery.curCSS(e, 'display') != 'none') {
-			wb = e.offsetWidth;
-			hb = e.offsetHeight;
-		} else {
-			var es = e.style;
-			var oldVisibility = es.visibility;
-			var oldPosition = es.position;
-			es.visibility = 'hidden';
-			es.display = 'block';
-			es.position = 'absolute';
-			wb = e.offsetWidth;
-			hb = e.offsetHeight;
-			es.display = 'none';
-			es.position = oldPosition;
-			es.visibility = oldVisibility;
-		}
-		return {w:w, h:h, wb:wb, hb:hb};
-	},
-	getClient : function(e)
-	{
-		var h, w;
-		if (e) {
-			w = e.clientWidth;
-			h = e.clientHeight;
-		} else {
-			var de = document.documentElement;
-			w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
-			h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
-		}
-		return {w:w,h:h};
-	},
-	getScroll : function (e)
-	{
-		var t=0, l=0, w=0, h=0, iw=0, ih=0;
-		if (e && e.nodeName.toLowerCase() != 'body') {
-			t = e.scrollTop;
-			l = e.scrollLeft;
-			w = e.scrollWidth;
-			h = e.scrollHeight;
-		} else  {
-			if (document.documentElement) {
-				t = document.documentElement.scrollTop;
-				l = document.documentElement.scrollLeft;
-				w = document.documentElement.scrollWidth;
-				h = document.documentElement.scrollHeight;
-			} else if (document.body) {
-				t = document.body.scrollTop;
-				l = document.body.scrollLeft;
-				w = document.body.scrollWidth;
-				h = document.body.scrollHeight;
-			}
-			if (typeof pageYOffset != 'undefined') {
-				t = pageYOffset;
-				l = pageXOffset;
-			}
-			iw = self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0;
-			ih = self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0;
-		}
-		return { t: t, l: l, w: w, h: h, iw: iw, ih: ih };
-	},
-	getMargins : function(e, toInteger)
-	{
-		var t = jQuery.curCSS(e,'marginTop') || '';
-		var r = jQuery.curCSS(e,'marginRight') || '';
-		var b = jQuery.curCSS(e,'marginBottom') || '';
-		var l = jQuery.curCSS(e,'marginLeft') || '';
-		if (toInteger)
-			return {
-				t: parseInt(t, 10)||0,
-				r: parseInt(r, 10)||0,
-				b: parseInt(b, 10)||0,
-				l: parseInt(l, 10)
-			};
-		else
-			return {t: t, r: r,	b: b, l: l};
-	},
-	getPadding : function(e, toInteger)
-	{
-		var t = jQuery.curCSS(e,'paddingTop') || '';
-		var r = jQuery.curCSS(e,'paddingRight') || '';
-		var b = jQuery.curCSS(e,'paddingBottom') || '';
-		var l = jQuery.curCSS(e,'paddingLeft') || '';
-		if (toInteger)
-			return {
-				t: parseInt(t, 10)||0,
-				r: parseInt(r, 10)||0,
-				b: parseInt(b, 10)||0,
-				l: parseInt(l, 10)
-			};
-		else
-			return {t: t, r: r,	b: b, l: l};
-	},
-	getBorder : function(e, toInteger)
-	{
-		var t = jQuery.curCSS(e,'borderTopWidth') || '';
-		var r = jQuery.curCSS(e,'borderRightWidth') || '';
-		var b = jQuery.curCSS(e,'borderBottomWidth') || '';
-		var l = jQuery.curCSS(e,'borderLeftWidth') || '';
-		if (toInteger)
-			return {
-				t: parseInt(t, 10)||0,
-				r: parseInt(r, 10)||0,
-				b: parseInt(b, 10)||0,
-				l: parseInt(l, 10)||0
-			};
-		else
-			return {t: t, r: r,	b: b, l: l};
-	},
-	traverseDOM : function(nodeEl, func)
-	{
-		func(nodeEl);
-		nodeEl = nodeEl.firstChild;
-		while(nodeEl){
-			EYE.traverseDOM(nodeEl, func);
-			nodeEl = nodeEl.nextSibling;
-		}
-	},
-	getInnerWidth :  function(el, scroll) {
-		var offsetW = el.offsetWidth;
-		return scroll ? Math.max(el.scrollWidth,offsetW) - offsetW + el.clientWidth:el.clientWidth;
-	},
-	getInnerHeight : function(el, scroll) {
-		var offsetH = el.offsetHeight;
-		return scroll ? Math.max(el.scrollHeight,offsetH) - offsetH + el.clientHeight:el.clientHeight;
-	},
-	getExtraWidth : function(el) {
-		if($.boxModel)
-			return (parseInt($.curCSS(el, 'paddingLeft'))||0)
-				+ (parseInt($.curCSS(el, 'paddingRight'))||0)
-				+ (parseInt($.curCSS(el, 'borderLeftWidth'))||0)
-				+ (parseInt($.curCSS(el, 'borderRightWidth'))||0);
-		return 0;
-	},
-	getExtraHeight : function(el) {
-		if($.boxModel)
-			return (parseInt($.curCSS(el, 'paddingTop'))||0)
-				+ (parseInt($.curCSS(el, 'paddingBottom'))||0)
-				+ (parseInt($.curCSS(el, 'borderTopWidth'))||0)
-				+ (parseInt($.curCSS(el, 'borderBottomWidth'))||0);
-		return 0;
-	},
-	isChildOf: function(parentEl, el, container) {
-		if (parentEl == el) {
-			return true;
-		}
-		if (!el || !el.nodeType || el.nodeType != 1) {
-			return false;
-		}
-		if (parentEl.contains && !$.browser.safari) {
-			return parentEl.contains(el);
-		}
-		if ( parentEl.compareDocumentPosition ) {
-			return !!(parentEl.compareDocumentPosition(el) & 16);
-		}
-		var prEl = el.parentNode;
-		while(prEl && prEl != container) {
-			if (prEl == parentEl)
-				return true;
-			prEl = prEl.parentNode;
-		}
-		return false;
-	},
-	centerEl : function(el, axis)
-	{
-		var clientScroll = EYE.getScroll();
-		var size = EYE.getSize(el);
-		if (!axis || axis == 'vertically')
-			$(el).css(
-				{
-					top: clientScroll.t + ((Math.min(clientScroll.h,clientScroll.ih) - size.hb)/2) + 'px'
-				}
-			);
-		if (!axis || axis == 'horizontally')
-			$(el).css(
-				{
-					left: clientScroll.l + ((Math.min(clientScroll.w,clientScroll.iw) - size.wb)/2) + 'px'
-				}
-			);
-	}
-});
-if (!$.easing.easeout) {
-	$.easing.easeout = function(p, n, firstNum, delta, duration) {
-		return -delta * ((n=n/duration-1)*n*n*n - 1) + firstNum;
-	};
-}
-	
-})(jQuery);
--- a/delete.png
+++ b/delete.png
--- a/jquery-1.3.js
+++ b/jquery-1.3.js
--- a/jquery.js
+++ b/jquery.js
--- a/jquery.rightClick.js
+++ b/jquery.rightClick.js
@ -0,0 +1,116 @@
+// jQuery Right-Click Plugin
+//
+// Version 1.01
+//
+// Cory S.N. LaViska
+// A Beautiful Site (http://abeautifulsite.net/)
+// 20 December 2008
+//
+// Visit http://abeautifulsite.net/notebook/68 for more information
+//
+// Usage:
+//
+//		// Capture right click
+//		$("#selector").rightClick( function(e) {
+//			// Do something
+//		});
+//		
+//		// Capture right mouse down
+//		$("#selector").rightMouseDown( function(e) {
+//			// Do something
+//		});
+//		
+//		// Capture right mouseup
+//		$("#selector").rightMouseUp( function(e) {
+//			// Do something
+//		});
+//		
+//		// Disable context menu on an element
+//		$("#selector").noContext();
+// 
+// History:
+//
+//		1.01 - Updated (20 December 2008)
+//		     - References to 'this' now work the same way as other jQuery plugins, thus
+//		       the el parameter has been deprecated.  Use this or $(this) instead
+//		     - The mouse event is now passed to the callback function
+//		     - Changed license to GNU GPL
+//
+//		1.00 - Released (13 May 2008)
+//
+// License:
+// 
+// This plugin is dual-licensed under the GNU General Public License and the MIT License
+// and is copyright 2008 A Beautiful Site, LLC. 
+//
+if(jQuery) (function(){
+	
+	$.extend($.fn, {
+		
+		rightClick: function(handler) {
+			$(this).each( function() {
+				$(this).mousedown( function(e) {
+					var evt = e;
+					$(this).mouseup( function() {
+						$(this).unbind('mouseup');
+						if( evt.button == 2 ) {
+							handler.call( $(this), evt );
+							return false;
+						} else {
+							return true;
+						}
+					});
+				});
+				$(this)[0].oncontextmenu = function() {
+					return false;
+				}
+			});
+			return $(this);
+		},		
+		
+		rightMouseDown: function(handler) {
+			$(this).each( function() {
+				$(this).mousedown( function(e) {
+					if( e.button == 2 ) {
+						handler.call( $(this), e );
+						return false;
+					} else {
+						return true;
+					}
+				});
+				$(this)[0].oncontextmenu = function() {
+					return false;
+				}
+			});
+			return $(this);
+		},
+		
+		rightMouseUp: function(handler) {
+			$(this).each( function() {
+				$(this).mouseup( function(e) {
+					if( e.button == 2 ) {
+						handler.call( $(this), e );
+						return false;
+					} else {
+						return true;
+					}
+				});
+				$(this)[0].oncontextmenu = function() {
+					return false;
+				}
+			});
+			return $(this);
+		},
+		
+		noContext: function() {
+			$(this).each( function() {
+				$(this)[0].oncontextmenu = function() {
+					return false;
+				}
+			});
+			return $(this);
+		}
+		
+	});
+	
+})(jQuery);
--- a/line.png
+++ b/line.png
--- a/none.png
+++ b/none.png
--- a/path.png
+++ b/path.png
--- a/rect.png
+++ b/rect.png
--- a/save.php
+++ b/save.php
@ -1,16 +0,0 @@
-<?php
-$svg= $_REQUEST["svg_data"];
-/*
-echo $svg;
-echo "</br>"
-echo urldecode($svg);
-$svg_data_to_display_for_html= htmlspecialchars(urldecode($svg));
-echo $svg_data_to_display_for_html ;
-*/
- 
-$svg_data= urldecode($svg);
-$file = "sig.svg";
-$fh = fopen($file, "w") or die("Can't open file");
-fwrite($fh, $svg_data);
-fclose($fh);
-?>
--- a/select.png
+++ b/select.png
--- a/simple-colorpicker/README
+++ b/simple-colorpicker/README
@ -1,40 +0,0 @@
-Really Simple Color Picker
-------------------------------
-
-Written by Lakshan Perera 
-For more info please visit: http://www.web2media.net/laktek/?p=96
-Source code is hosted at: http://github.com/laktek/really-simple-color-picker
-
-Color Picker requires jQuery 1.2.6 or higher. So make sure to load it before Color Picker (there's no other dependencies!). 
-For default styles of the color picker load the CSS file that comes with the plugin.
-
- <script language="javascript" type="text/javascript" src=jquery.min.js"></script>
- <script language="javascript" type="text/javascript" src="jquery.colorPicker.js"/></script>
-
- <link rel="stylesheet" href="colorPicker.css" type="text/css" />
-
-Add a text field to take the color input.
-  <div><label for="color1">Color 1</label> <input id="color1" type="text" name="color1" value="#333399" /></div>
-
-Then call 'colorPicker' method on the text field when document loads.
-<script language="javascript">
-  jQuery(document).ready(function($) {
-    $('#color1').colorPicker();
-  }
-</script>
-
-Your favorite colors are missing? 
-Just add them to the palette
-<script language="javascript">
-  //use this method to add new colors to palette
-  $.fn.colorPicker.addColors(['000', '000', 'fff', 'fff']);
-</script>
-
-Or completely change the color palette as you need...
-<script language="javascript">
-  $.fn.colorPicker.defaultColors = ['000', '000', 'fff', 'fff'];
-</script>
-
-That’s all you have to do!
-
-
--- a/simple-colorpicker/arrow.gif
+++ b/simple-colorpicker/arrow.gif
--- a/simple-colorpicker/arrow.png
+++ b/simple-colorpicker/arrow.png
--- a/simple-colorpicker/colorPicker.css
+++ b/simple-colorpicker/colorPicker.css
@ -1,30 +0,0 @@
-div.color_picker {
-  height: 16px;
-  width: 16px;
-  padding: 0 !important;
-  border: 1px solid #ccc;
-  background: url(arrow.gif) no-repeat top right;
-  cursor: pointer;
-  line-height: 16px;
-}
-
-div#color_selector {
-  width: 110px;
-  position: absolute;
-  border: 1px solid #598FEF;
-  background-color: #EFEFEF;
-  padding: 2px;
-}
-  div#color_custom {width: 100%; float:left }
-  div#color_custom label {font-size: 95%; color: #2F2F2F; margin: 5px 2px; width: 25%}
-  div#color_custom input {margin: 5px 2px; padding: 0; font-size: 95%; border: 1px solid #000; width: 65%; }
-
-div.color_swatch {
-  height: 12px;
-  width: 12px;
-  border: 1px solid #000;
-  margin: 2px;
-  float: left;
-  cursor: pointer;
-  line-height: 12px;
-}
--- a/simple-colorpicker/demo.html
+++ b/simple-colorpicker/demo.html
@ -1,75 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-
-<head>
-<title>Really Simple Color Picker</title>
-
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
-<script language="javascript" type="text/javascript" src="jquery.colorPicker.js"/></script>
-
-<script type="text/javascript">
-  //Run the code when document ready
-  $(function() {    
-   //use this method to add new colors to pallete
-   //$.fn.colorPicker.addColors(['000', '000', 'fff', 'fff']);
-   
-   $('#color1').colorPicker();
-   $('#color2').colorPicker();
-   $('#color3').colorPicker(); 
-   
-   //fires an event when the color is changed
-   //$('#color1').change(function(){
-    //alert("color changed");
-   //});
-  });
-</script>
-
-<style type="text/css">
-/* styles adopted from Nidahas - Forms markup and CSS (http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/) */
-/* General styles */
-body { margin: 0; padding: 0; font: 80%/1.5 Arial,Helvetica,sans-serif; color: #111; background-color: #FFF; }
-h2 { margin: 0px; padding: 10px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 200%; font-weight: normal; color: #FFF; background-color: #CCC; border-bottom: #BBB 2px solid; }
-p#copyright { margin: 20px 10px; font-size: 90%; color: #999; }
-
-/* Form styles */
-div.form-container { margin: 10px; padding: 5px; background-color: #FFF; }
-
-p.legend { margin-bottom: 1em; }
-p.legend em { color: #C00; font-style: normal; }
-
-div.form-container div.controlset {display: block; float:left; width: 100%; padding: 0.25em 0;}
-
-div.form-container div.controlset label, 
-div.form-container div.controlset input,
-div.form-container div.controlset div { display: inline; float: left; }
-
-div.form-container div.controlset label { width: 100px;}
-</style>
-<link rel="stylesheet" href="colorPicker.css" type="text/css" />
-</head>
-
-<body>
-
-<div id="wrapper">
-
-	<h2>Really Simple Color Picker (jQuery)</h2>
-
-
-
-	<p>More information about this can be found in <a href="http://www.web2media.net/laktek/2008/10/27/really-simple-color-picker-in-jquery/" title="Really Simple Color Picker in jQuery">this blog article</a>.</p>
-	<div class="form-container">
-	<form action="#" method="post">
-		<fieldset>
-			<div class="controlset"><label for="color1">Color 1</label> <input id="color1" type="text" name="color1" value="#333399" /></div>
-			<div class="controlset"><label for="color2">Color 2</label> <input id="color2" type="text" name="color2" value="#FF0000" /></div>
-			<div class="controlset"><label for="color3">Color 3</label> <input id="color3" type="text" name="color3" value="#99cc00" /></div>
-		</fieldset>
-	</form>
-</div>
-
-</body>
-
-</html>
-
--- a/simple-colorpicker/jquery.colorPicker.js
+++ b/simple-colorpicker/jquery.colorPicker.js
@ -1,158 +0,0 @@
-/**
- * Really Simple Color Picker in jQuery
- * 
- * Copyright (c) 2008 Lakshan Perera (www.laktek.com)
- * Licensed under the MIT (MIT-LICENSE.txt)  licenses.
- * 
- */
-
-(function($){
-  $.fn.colorPicker = function(){    
-    if(this.length > 0) buildSelector();
-    return this.each(function(i) { buildPicker(this)}); 
-  };
-  
-  var selectorOwner;
-  var selectorShowing = false;
-  
-  buildPicker = function(element){
-    //build color picker
-    control = $("<div class='color_picker'>&nbsp;</div>")
-    control.css('background-color', $(element).val());
-    control.attr('id' , 'div_' + $(element).attr("id"));
-    
-    //bind click event to color picker
-    control.bind("click", toggleSelector);
-    
-    //add the color picker section
-    $(element).after(control);
-    
-    //hide the input box
-    $(element).hide();
-  };
-  
-  buildSelector = function(){
-    selector = $("<div id='color_selector'></div>");
-
-     //add color pallete
-     $.each($.fn.colorPicker.defaultColors, function(i){
-      swatch = $("<div class='color_swatch'>&nbsp;</div>")
-      swatch.css("background-color", "#" + this);
-      swatch.bind("click", function(e){ changeColor($(this).css("background-color")) });
-      swatch.bind("mouseover", function(e){ 
-        $(this).css("border-color", "#598FEF"); 
-        $("input#color_value").val(toHex($(this).css("background-color")));    
-        }); 
-      swatch.bind("mouseout", function(e){ 
-        $(this).css("border-color", "#000");
-        $("input#color_value").val(toHex($(selectorOwner).css("background-color")));
-        });
-      
-     swatch.appendTo(selector);
-     });
-  
-     //add HEX value field
-     hex_field = $("<label for='color_value'>Hex</label><input type='text' size='8' id='color_value'/>");
-     hex_field.bind("keydown", function(event){
-      if(event.keyCode == 13) {changeColor($(this).val());}
-      if(event.keyCode == 27) {toggleSelector()}
-     });
-     
-     $("<div id='color_custom'></div>").append(hex_field).appendTo(selector);
-
-     $("body").append(selector); 
-     selector.hide();
-
-  };
-  
-  checkMouse = function(event){
-    //check the click was on selector itself or on selectorOwner
-    var selector = "div#color_selector";
-    var selectorParent = $(event.target).parents(selector).length;
-    if(event.target == $(selector)[0] || event.target == selectorOwner || selectorParent > 0) return
-    
-    hideSelector();   
-  }
-  
-  hideSelector = function(){
-    var selector = $("div#color_selector");
-    
-    $(document).unbind("mousedown", checkMouse);
-    selector.hide();
-    selectorShowing = false
-  }
-  
-  showSelector = function(){
-    var selector = $("div#color_selector");
-    
-    //alert($(selectorOwner).offset().top);
-    
-    selector.css({
-      top: $(selectorOwner).offset().top + ($(selectorOwner).outerHeight()),
-      left: $(selectorOwner).offset().left
-    }); 
-    hexColor = $(selectorOwner).prev("input").val();
-    $("input#color_value").val(hexColor);
-    selector.show();
-    
-    //bind close event handler
-    $(document).bind("mousedown", checkMouse);
-    selectorShowing = true 
-   }
-  
-  toggleSelector = function(event){
-    selectorOwner = this; 
-    selectorShowing ? hideSelector() : showSelector();
-  }
-  
-  changeColor = function(value){
-    if(selectedValue = toHex(value)){
-      $(selectorOwner).css("background-color", selectedValue);
-      $(selectorOwner).prev("input").val(selectedValue).change();
-    
-      //close the selector
-      hideSelector();    
-    }
-  };
-  
-  //converts RGB string to HEX - inspired by http://code.google.com/p/jquery-color-utils
-  toHex = function(color){
-    //valid HEX code is entered
-    if(color.match(/[0-9a-fA-F]{3}$/) || color.match(/[0-9a-fA-F]{6}$/)){
-      color = (color.charAt(0) == "#") ? color : ("#" + color);
-    }
-    //rgb color value is entered (by selecting a swatch)
-    else if(color.match(/^rgb\(([0-9]|[1-9][0-9]|[1][0-9]{2}|[2][0-4][0-9]|[2][5][0-5]),[ ]{0,1}([0-9]|[1-9][0-9]|[1][0-9]{2}|[2][0-4][0-9]|[2][5][0-5]),[ ]{0,1}([0-9]|[1-9][0-9]|[1][0-9]{2}|[2][0-4][0-9]|[2][5][0-5])\)$/)){
-      var c = ([parseInt(RegExp.$1),parseInt(RegExp.$2),parseInt(RegExp.$3)]);
-      
-      var pad = function(str){
-            if(str.length < 2){
-              for(var i = 0,len = 2 - str.length ; i<len ; i++){
-                str = '0'+str;
-              }
-            }
-            return str;
-      }
-
-      if(c.length == 3){
-        var r = pad(c[0].toString(16)),g = pad(c[1].toString(16)),b= pad(c[2].toString(16));
-        color = '#' + r + g + b;
-      }
-    }
-    else color = false;
-    
-    return color
-  }
-
-  
-  //public methods
-  $.fn.colorPicker.addColors = function(colorArray){
-    $.fn.colorPicker.defaultColors = $.fn.colorPicker.defaultColors.concat(colorArray);
-  };
-  
-  $.fn.colorPicker.defaultColors = 
-	[ '000000', '993300','333300', '000080', '333399', '333333', '800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99' , 'CCFFFF', '99CCFF', 'FFFFFF'];
-  
-})(jQuery);
-
-
--- a/simple-colorpicker/screenshot.png
+++ b/simple-colorpicker/screenshot.png
--- a/submit.png
+++ b/submit.png
--- a/svg-editor.css
+++ b/svg-editor.css
@ -0,0 +1,55 @@
+#svg_editor .canvas {
+	width: 640px;
+	height: 480px;
+	border: 1px solid #808080;
+}
+
+#svg_editor div#palette_holder {
+	border: 1px solid #808080;
+	border-top: none;
+	float: left;
+	width: 640px;
+	overflow-x: scroll;
+	overflow-y: hidden;
+	height: 31px;
+}
+
+#fill_color, #stroke_color {
+	height: 16px;
+	width: 16px;
+	border: 1px solid #808080;
+}
+
+#fill_color {
+	background: url('none.png');
+}
+
+#stroke_color {
+	background: #000000;
+}
+
+#svg_editor div#palette {
+	float: left;
+	width: 6848px;
+	height: 16px;
+}
+
+#svg_editor div#tools {
+	float: left;
+}
+
+#svg_editor div#workarea {
+	float: left;
+}
+
+#svg_editor div.palette_item {
+	height: 16px;
+	width: 16px;
+	float: left;
+}
+
+.tool_button {
+	height: 16px;
+	width: 16px;
+	border: 4px solid #E8E8E4;
+}
--- a/svg-editor.html
+++ b/svg-editor.html
@ -1,70 +1,69 @@
 <html>
 <head>
-
-<script src="jquery-1.3.js" type="text/javascript"></script>
-<link rel="stylesheet" media="screen" type="text/css" href="colorpicker/css/colorpicker.css" />
-<script type="text/javascript" src="colorpicker/js/colorpicker.js"></script>
-<script language="JavaScript" type="text/javascript" src="SvgEditor.js"></script>
-
-<script language="javascript" type="text/javascript" src="simple-colorpicker/jquery.colorPicker.js"/></script><link rel="stylesheet" href="simple-colorpicker/colorPicker.css" type="text/css" />
-
-
+<link rel="stylesheet" href="svg-editor.css" type="text/css"/>
+<script type="text/javascript" src="jquery.js"></script>
+<script type="text/javascript" src="jquery.rightClick.js"></script>
+<script type="text/javascript" src="svg-editor.js"></script>
 </head>
 <body>

+<div id="svg_editor">

-<table border="1">
-<tr><td> Draw Your SVG image here </td><td> Control </td></tr>
-
-<tr><td>
+<div id="tools">

 <div>
-<object data="blank.svg" type="image/svg+xml" width="350px" height="360px">
-<embed src="blank.svg" type="image/svg+xml" width="350px" height="360px">
+<img class="tool_button" id="tool_select" src="select.png" />
+<img class="tool_button" id="tool_path" src="path.png" />
+<img class="tool_button" id="tool_line" src="line.png" />
+<br/>
+<img class="tool_button" id="tool_square" src="rect.png" />
+<img class="tool_button" id="tool_rect" src="rect.png" />
+<img class="tool_button" id="tool_fhrect" src="rect.png" />
+<br/>
+<img class="tool_button" id="tool_circle" src="circle.png" />
+<img class="tool_button" id="tool_ellipse" src="circle.png" />
+<img class="tool_button" id="tool_fhellipse" src="circle.png" />
+<br/>
+<img class="tool_button" id="tool_delete" src="delete.png" />
+<img class="tool_button" id="tool_clear" src="clear.png" />
+<img class="tool_button" id="tool_submit" src="submit.png" />
+</div>
+
+<div>Fill
+<div id="fill_color"></div>
+</div>
+
+<div>Stroke
+
+<select id="stroke_width">
+<option selected="selected" value="1px">1px</option>
+<option value="2px">2px</option>
+<option value="3px">3px</option>
+<option value="5px">5px</option>
+<option value="7px">7px</option>
+</select>
+<div id="stroke_color"></div>
+
+</div>
+
+</div>
+
+<div id="workarea">
+
+<div id="canvas">
+<object class="canvas" data="blank.svg" type="image/svg+xml">
+<embed class="canvas" src="blank.svg" type="image/svg+xml" />
 </object>
 </div>

-</td><td>
-
-
-
-<div id="control_box">
-<input type="button" value="clear" onclick="window.clear_svg()">
-<input type="button" value="path" onclick="window.set_draw_mode('path')">
-<input type="button" value="rect" onclick="window.set_draw_mode('rect')">
-<input type="button" value="line" onclick="window.set_draw_mode('line')">
-</br>
-<input type="button" value="circle" onclick="window.set_draw_mode('ellipse')">
-<input type="button" value="freehandcircle" onclick="window.set_draw_mode('freehandcircle')">
-<input type="button" value="save" onclick="window.submit_svg()">
-<input type="button" value="delete" onclick="window.set_draw_mode('delete')">
-</br>
-
-Select Stroke Color 
-<input type="button" title="select stroke color" id="colorSelectorStroke">
-<input id="color1" type="text" name="color1" value="#333399" onchange="window.set_stroke_color(this.value); var col = this.value ; f1(col);"/></div>
-</br>
-Stroke Width <select onchange="window.set_stroke_width(this.options[this.selectedIndex].value )" id="linewidth">
-      <option value="1px">1px</option>
-      <option value="2px">2px</option>
-      <option value="3px">3px</option>
-      <option value="5px">5px</option>
-      <option value="7px">7px</option>
-</select>
-    
-</br>
-Select Fill Color
-<div title="select fill color" id="colorSelectorFill"></div>
-<input id="color2" type="text" name="color2" value="#333399" onchange="window.set_fill_color(this.value); var col = this.value ; $('#colorSelectorFill').ColorPickerSetColor(col);" /></div>
-
-<input type="button" value="empty fill" onclick="window.set_fill_color('none'); $('#colorSelectorFill').css('backgroundColor', '#ffffff');">
+<div id="palette_holder">
+<div id="palette">
+</div>
 </div>

-</br>
+</div>

+</div>

-
-
-</td></tr></table>
 </body>
 </html>
--- a/svg-editor.js
+++ b/svg-editor.js
@ -0,0 +1,88 @@
+var palette = ["#000000","#202020","#404040","#606060","#808080","#A0A0A0","#C0C0C0","#E0E0E0","#FFFFFF","#800000","#FF0000","#808000","#FFFF00","#008000","#00FF00","#008080","#00FFFF","#000080","#0000FF","#800080","#FF00FF","#2B0000","#550000","#800000","#AA0000","#D40000","#FF0000","#FF2A2A","#FF5555","#FF8080","#FFAAAA","#FFD5D5","#280B0B","#501616","#782121","#A02C2C","#C83737","#D35F5F","#DE8787","#E9AFAF","#F4D7D7","#241C1C","#483737","#6C5353","#916F6F","#AC9393","#C8B7B7","#E3DBDB","#2B1100","#552200","#803300","#AA4400","#D45500","#FF6600","#FF7F2A","#FF9955","#FFB380","#FFCCAA","#FFE6D5","#28170B","#502D16","#784421","#A05A2C","#C87137","#D38D5F","#DEAA87","#E9C6AF","#F4E3D7","#241F1C","#483E37","#6C5D53","#917C6F","#AC9D93","#C8BEB7","#E3DEDB","#2B2200","#554400","#806600","#AA8800","#D4AA00","#FFCC00","#FFD42A","#FFDD55","#FFE680","#FFEEAA","#FFF6D5","#28220B","#504416","#786721","#A0892C","#C8AB37","#D3BC5F","#DECD87","#E9DDAF","#F4EED7","#24221C","#484537","#6C6753","#918A6F","#ACA793","#C8C4B7","#E3E2DB","#222B00","#445500","#668000","#88AA00","#AAD400","#CCFF00","#D4FF2A","#DDFF55","#E5FF80","#EEFFAA","#F6FFD5","#22280B","#445016","#677821","#89A02C","#ABC837","#BCD35F","#CDDE87","#DDE9AF","#EEF4D7","#22241C","#454837","#676C53","#8A916F","#A7AC93","#C4C8B7","#E2E3DB","#112B00","#225500","#338000","#44AA00","#55D400","#66FF00","#7FFF2A","#99FF55","#B3FF80","#CCFFAA","#E5FFD5","#17280B","#2D5016","#447821","#5AA02C","#71C837","#8DD35F","#AADE87","#C6E9AF","#E3F4D7","#1F241C","#3E4837","#5D6C53","#7C916F","#9DAC93","#BEC8B7","#DEE3DB","#002B00","#005500","#008000","#00AA00","#00D400","#00FF00","#2AFF2A","#55FF55","#80FF80","#AAFFAA","#D5FFD5","#0B280B","#165016","#217821","#2CA02C","#37C837","#5FD35F","#87DE87","#AFE9AF","#D7F4D7","#1C241C","#374837","#536C53","#6F916F","#93AC93","#B7C8B7","#DBE3DB","#002B11","#005522","#008033","#00AA44","#00D455","#00FF66","#2AFF80","#55FF99","#80FFB3","#AAFFCC","#D5FFE6","#0B2817","#16502D","#217844","#2CA05A","#37C871","#5FD38D","#87DEAA","#AFE9C6","#D7F4E3","#1C241F","#37483E","#536C5D","#6F917C","#93AC9D","#B7C8BE","#DBE3DE","#002B22","#005544","#008066","#00AA88","#00D4AA","#00FFCC","#2AFFD5","#55FFDD","#80FFE6","#AAFFEE","#D5FFF6","#0B2822","#165044","#217867","#2CA089","#37C8AB","#5FD3BC","#87DECD","#AFE9DD","#D7F4EE","#1C2422","#374845","#536C67","#6F918A","#93ACA7","#B7C8C4","#DBE3E2","#00222B","#004455","#006680","#0088AA","#00AAD4","#00CCFF","#2AD4FF","#55DDFF","#80E5FF","#AAEEFF","#D5F6FF","#0B2228","#164450","#216778","#2C89A0","#37ABC8","#5FBCD3","#87CDDE","#AFDDE9","#D7EEF4","#1C2224","#374548","#53676C","#6F8A91","#93A7AC","#B7C4C8","#DBE2E3","#00112B","#002255","#003380","#0044AA","#0055D4","#0066FF","#2A7FFF","#5599FF","#80B3FF","#AACCFF","#D5E5FF","#0B1728","#162D50","#214478","#2C5AA0","#3771C8","#5F8DD3","#87AADE","#AFC6E9","#D7E3F4","#1C1F24","#373E48","#535D6C","#6F7C91","#939DAC","#B7BEC8","#DBDEE3","#00002B","#000055","#000080","#0000AA","#0000D4","#0000FF","#2A2AFF","#5555FF","#8080FF","#AAAAFF","#D5D5FF","#0B0B28","#161650","#212178","#2C2CA0","#3737C8","#5F5FD3","#8787DE","#AFAFE9","#D7D7F4","#1C1C24","#373748","#53536C","#6F6F91","#9393AC","#B7B7C8","#DBDBE3","#11002B","#220055","#330080","#4400AA","#5500D4","#6600FF","#7F2AFF","#9955FF","#B380FF","#CCAAFF","#E5D5FF","#170B28","#2D1650","#442178","#5A2CA0","#7137C8","#8D5FD3","#AA87DE","#C6AFE9","#E3D7F4","#1F1C24","#3E3748","#5D536C","#7C6F91","#9D93AC","#BEB7C8","#DEDBE3","#22002B","#440055","#660080","#8800AA","#AA00D4","#CC00FF","#D42AFF","#DD55FF","#E580FF","#EEAAFF","#F6D5FF","#220B28","#441650","#672178","#892CA0","#AB37C8","#BC5FD3","#CD87DE","#DDAFE9","#EED7F4","#221C24","#453748","#67536C","#8A6F91","#A793AC","#C4B7C8","#E2DBE3","#2B0022","#550044","#800066","#AA0088","#D400AA","#FF00CC","#FF2AD4","#FF55DD","#FF80E5","#FFAAEE","#FFD5F6","#280B22","#501644","#782167","#A02C89","#C837AB","#D35FBC","#DE87CD","#E9AFDD","#F4D7EE","#241C22","#483745","#6C5367","#916F8A","#AC93A7","#C8B7C4","#E3DBE2","#2B0011","#550022","#800033","#AA0044","#D40055","#FF0066","#FF2A7F","#FF5599","#FF80B2","#FFAACC","#FFD5E5","#280B17","#50162D","#782144","#A02C5A","#C83771","#D35F8D","#DE87AA","#E9AFC6","#F4D7E3","#241C1F","#48373E","#6C535D","#916F7C","#AC939D","#C8B7BE","#E3DBDE"]
+
+$(document).ready(function(){
+	var str = '<div class="palette_item" style="background: url(\'none.png\');"></div>'
+	$.each(palette, function(i,item){
+		str += '<div class="palette_item" style="background: ' + item + ';"></div>';
+	});
+	$('#palette').append(str);
+
+	$('#stroke_width').change(function(){
+		window.set_stroke_width(this.options[this.selectedIndex].value);
+	});
+
+	$('.palette_item').click(function(){
+		color = $(this).css('background-color');
+		if (color == 'transparent') {
+			color = 'none';
+			$('#fill_color').css('background', 'url(\'none.png\')');
+		} else {
+			$('#fill_color').css('background', color);
+		}
+		window.set_fill_color(color);
+	});
+
+	$('.palette_item').rightClick(function(){
+		color = $(this).css('background-color');
+		if (color == 'transparent') {
+			color = 'none';
+			$('#stroke_color').css('background', 'url(\'none.png\')');
+		} else {
+			$('#stroke_color').css('background', color);
+		}
+		window.set_stroke_color(color);
+	});
+
+	$('#tool_select').click(function(){
+		window.set_draw_mode('select');
+	});
+
+	$('#tool_path').click(function(){
+		window.set_draw_mode('path');
+	});
+
+	$('#tool_line').click(function(){
+		window.set_draw_mode('line');
+	});
+
+	$('#tool_square').click(function(){
+		window.set_draw_mode('square');
+	});
+
+	$('#tool_rect').click(function(){
+		window.set_draw_mode('rect');
+	});
+
+	$('#tool_fhrect').click(function(){
+		window.set_draw_mode('fhrect');
+	});
+
+	$('#tool_circle').click(function(){
+		window.set_draw_mode('circle');
+	});
+
+	$('#tool_ellipse').click(function(){
+		window.set_draw_mode('ellipse');
+	});
+
+	$('#tool_fhellipse').click(function(){
+		window.set_draw_mode('fhellipse');
+	});
+
+	$('#tool_delete').click(function(){
+		window.set_draw_mode('delete');
+	});
+
+	$('#tool_clear').click(function(){
+		window.clear_svg();
+	});
+
+	$('#tool_submit').click(function(){
+		window.submit_svg();
+	});
+
+})
+
+function serializeHandler(str){
+	alert(str);
+}