svn/view/SvgEditor.js

/*
  SvgEditor.js

  iSlideMaker
    http://sourceforge.jp/projects/islidemaker/simple/

  Copyright(c) 2010, Isao Hara, isao-hara@users.sourceforge.jp

  All rights reserved. This program is made available under the terms of the
  Eclipse Public License v1.0 which accompanies this distribution, and is
  available at http://www.eclipse.org/legal/epl-v10.html

  Contributors:  Isao Hara.
 */
var systemDB;
var currentMode;
var editarea_w=80;
var editarea_h=10;
var MainTitle="Simple SVG Editor";

var preview=null;
var targetItem=null;
var selectedItems=new Array();
var sx=0;
var sy=0;
var ex=0;
var ey=0;
var modeSVG=null;
var iSlideMgr='iSlideManager.php';
var MgrPath="";
var nextId=1;

var lineEdit=null;

////// SVG
var svg_ns = 'http://www.w3.org/2000/svg';
var svg_x=10;
var svg_y=10;
var svg_width = 100;
var svg_height = 50;
var svg_rx = 50;
var svg_ry = 30;
var svg_lw = 1;
var svg_wo = null;
var svg_ho = null;
var svg_ro = null;
var svg_rxo = null;
var svg_ryo = null;
var svg_fsize = null;
var svg_scale_dir = null;

var svg_top = null;
var svg_select = null;
var svg_defs = null;

var svg_font_size = 24;
var svg_font_family = 'Helvetica';
var svg_color = '#000000';
var svg_fill_color = '#ffffff';
var svg_line_width = 1;

var editingTextObj = null;

///// Color
var colors=new Array('none', '#ffffff',
  '#000000', '#3f3f3f', '#7f7f7f', '#bfbfbf',
  '#ff0000', '#ff7f00', '#ffff00', '#7fff00',
  '#00ff00', '#00ff7f', '#00ffff', '#007fff',
  '#0000ff', '#7f00ff', '#ff00ff', '#ff007f',
  '#7f0000', '#7f3f00', '#7f7f00', '#3f7f00',
  '#007f00', '#007f3f', '#007f7f', '#003f7f',
  '#00007f', '#3f007f', '#7f007f', '#7f003f',
  '#7f0000', '#7f3f00', '#7f7f00', '#3f7f00',
  '#ffaaaa', '#ffd4aa', '#ffffaa', '#d4ffaa',
  '#aaffaa', '#aaffd4', '#aaffff', '#aad4ff',
  '#aaaaff', '#d4aaff', '#ffaaff', '#ffaad4'
);

//// Initialize
function initEditor(name, dispname, size){
  systemDB = initDB(name, dispname, size);
  fileSelector();
  preview=document.getElementById('preview');
  if(preview){
    preview.addEventListener("touchstart", onTouchStart,false);
    preview.addEventListener("touchmove", onTouchMove, false);
    preview.addEventListener("touchend", onTouchEnd, false);
    preview.addEventListener("gesturestart", onGestureStart,false);
    preview.addEventListener("gesturechange", onGestureChange, false);
    preview.addEventListener("gestureend", onGestureEnd, false);
  }
  restoreValues();
}

function restoreValues(){
  if(typeof(localStorage) == 'undefined'){
    alert('local storage not suported');
  }
  MgrPath = localStorage.getItem('MgrPath') ? localStorage.getItem('MgrPath')  : "";
  window.onbeforeuload=function(){ return saveChanges(); } 
}

function clearAll(){
  localsStorage.clear();
  restoreValudes();
}

function saveChanges(){
  localStorage.setItem('MgrPath', MgrPath);
}

// initialize a database
function initDB(name, dispname, size) {
  try {
    if (!window.openDatabase) {
        alert('not supported');
    } else {
        var version = '1.0';
        var myDB = openDatabase(name, version, dispname, size);
    }
  } catch(e) {
    if (e == INVALID_STATE_ERR) {
      alert("Invalid database version.");
    } else {
      alert("Unknown error "+e+".");
    }
    return null;
  }

  createTables(myDB);
  return myDB;
}

function createTables(db) {
  if (0)  dropTables(db);

  db.transaction(
    function (transaction) {
        transaction.executeSql('CREATE TABLE IF NOT EXISTS files(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, filedata_id INTEGER NOT NULL, deleted INTEGER NOT NULL DEFAULT 0);', [], nullDataHandler, killTransaction);
        transaction.executeSql('CREATE TABLE IF NOT EXISTS filedata(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, datablob BLOB NOT NULL DEFAULT "");', [], nullDataHandler, errorHandler);
    }
  );
}

function dropTables(db) {
   db.transaction(
     function (transaction) {
        transaction.executeSql('DROP TABLE files;');
        transaction.executeSql('DROP TABLE filedata;');
     }
   );
}

/// Create New File
function reallyCreateNewFileAction(name, db){
  var myDB = db;
  if(!db) myDB = systemDB;

  myDB.transaction(
    function (transaction) {
      var myfunc = new Function("transaction", "results", "transaction.executeSql('INSERT INTO files (name, filedata_id) VALUES (?, ?);', [ '"+name+"', results.insertId], nullDataHandler, killTransaction);");

       transaction.executeSql('INSERT INTO filedata (datablob) VALUES ("");', [], myfunc, errorHandler);
    }
  );

  fileSelector();
}

function createNewFileAction(db){
  var myDB = db;
  if(!db) myDB = systemDB;

  var name = document.getElementById('createFilename').value
  if(name == "") {
    if (confirm('Filename is required, try agein?')) { createNewFile(); }else{ fileSelector(); }
    return;
  }

  myDB.transaction(
    new Function("transaction", "transaction.executeSql('SELECT id,name from files where name=?;',['"+name+"'],"+
        "function (transaction, results) {"+
           "if(results.rows.length == 0){"+
               "reallyCreateNewFileAction('"+name+"');"+
           "}else{"+
             "if (confirm(results.rows.item(0)['name']+' already exist, try agein?')) {"+
               "createNewFile();"+
             "}else{"+
               "fileSelector();"+
             "}"+
           "}"+
        "}, errorHandler);")
  );

}

//// Delete File
function deleteUpdateResults(transaction, results)
{
    if (results.rowsAffected) {
        fileSelector();
    }
}

function reallyDelete(id, db){
  var myDB = db;
  if(!db) myDB = systemDB;

  myDB.transaction(
    new Function("transaction",
      "transaction.executeSql('DELETE FROM  files where id=?;', [ "+id+" ], null, errorHandler);"
      +"transaction.executeSql('DELETE FROM filedata where id=?;', [ "+id+" ], deleteUpdateResults, errorHandler);")
  );
}

function deleteFile(name, db){
  var myDB = db;
  if(!db) myDB = systemDB;

  myDB.transaction(
    new Function("transaction", "transaction.executeSql('SELECT id,name from files where name=?;',['"+name+"'],"+
        "function (transaction, results) {"+
           "if (confirm('Really delete '+results.rows.item(0)['name']+'?')) {"+
               "reallyDelete(results.rows.item(0)['id']);"+
           "}"+
        "}, errorHandler);")
  );
}

function reallyDeleteAll(db){
  var myDB = db;
  if(!db) myDB = systemDB;

  myDB.transaction(
    new Function("transaction",
      "transaction.executeSql('DELETE FROM  files;',[],null, errorHandler);"
      +"transaction.executeSql('DELETE FROM filedata;',[],deleteUpdateResults, errorHandler);")
  );
}

function deleteAllFile(db){
  if (confirm('Really delete all file?')) {
     reallyDeleteAll(db);
  }
}

///// Rename
function reallyRenameFileAction(id, newname, db){
  var myDB = db;
  if(!db) myDB = systemDB;

  myDB.transaction(
    function (transaction) {
      transaction.executeSql('UPDATE files set name=? where id=?;', [newname,id ], null, errorHandler);
    }
  );
  fileSelector();
}

function renameFileAction(db){
  var myDB = db;
  if(!db) myDB = systemDB;

  var new_name = document.getElementById('newFilename').value
  var id = document.getElementById('fileId').value

  if(new_name == "") {
    alert('Filename is required.');
    fileSelector();
    return;
  }

  myDB.transaction(
    new Function("transaction", "transaction.executeSql('SELECT id,name from files where name=?;',['"+new_name+"'],"+
        "function (transaction, results) {"+
           "if(results.rows.length == 0){"+
               "reallyRenameFileAction('"+id+"','"+new_name+"');"+
           "}else{"+
             "alert(results.rows.item(0)['name']+' already exist');"+
             "fileSelector();"+
           "}"+
        "}, errorHandler);")
  );

}


/// Save File
function saveFile(db){
  var myDB = db;
  if(!db) myDB = systemDB;

  var editarea = document.getElementById('editarea');
  var contents = "";
  contents = editarea.value;

  myDB.transaction(
    function (transaction) {
      var datadiv = document.getElementById('tempdata');
      var filedata_id = datadiv.getAttribute('lfdataid');

      transaction.executeSql("UPDATE filedata set datablob=? where id=?;",
        [ contents, filedata_id ], nullDataHandler, errorHandler);

      alert('Saved.');
    }
  );
}

function saveData(db){
  var myDB = db;
  if(!db) myDB = systemDB;

  var contents = "";
  contents = getSVGContent();

  myDB.transaction(
    function (transaction) {
      var datadiv = document.getElementById('tempdata');
      var filedata_id = datadiv.getAttribute('lfdataid');

      transaction.executeSql("UPDATE filedata set datablob=? where id=?;",
        [ contents, filedata_id ], nullDataHandler, errorHandler);

      alert('Saved.');
    }
  );
}

function saveContent(contents, db){
  var myDB = db;
  if(!db) myDB = systemDB;

  if(!contents) {
    alert("Invalid content");
    return;
  }

  myDB.transaction(
    function (transaction) {
      var datadiv = document.getElementById('tempdata');
      var filedata_id = datadiv.getAttribute('lfdataid');

      transaction.executeSql("UPDATE filedata set datablob=? where id=?;",
        [ contents, filedata_id ], nullDataHandler, errorHandler);

      alert('Saved.');
    }
  );
}

function reallySaveNewFileAction(fname, db){
  var myDB = db;
  if(!db) myDB = systemDB;

  var datadiv = document.getElementById('tempdata');
  content = datadiv.textContent;

  myDB.transaction(
    function (transaction) {
      var myfunc = new Function("transaction", "results", "transaction.executeSql('INSERT INTO files (name, filedata_id) VALUES (?, ?);', [ '"+fname+"', results.insertId], nullDataHandler, killTransaction);");

       transaction.executeSql('INSERT INTO filedata (datablob) VALUES (?);', [content], myfunc, errorHandler);
    }
  );

  datadiv.textContent="";
  alert("download to "+fname);
}

function saveContentFilename(id, db){

  var datadiv = document.getElementById('tempdata');
  datadiv.setAttribute('lfdataid', id);
  saveContent(datadiv.innerHTML, db);
  datadiv.textContent="";
}

function saveContentWithFilename(fname, contents, db){
  var myDB = db;
  if(!db) myDB = systemDB;

  if(!contents) {
    alert("Invalid content");
    return;
  }

  var datadiv = document.getElementById('tempdata');
  datadiv.setAttribute('lfname', fname);
  datadiv.textContent = contents;

  myDB.transaction(
    new Function("transaction", "transaction.executeSql('SELECT id,name from files where name=?;',['"+fname+"'],"+
        "function (transaction, results) {"+
           "if(results.rows.length == 0){"+
               "reallySaveNewFileAction('"+fname+"');"+
           "}else{"+
             "if (confirm(results.rows.item(0)['name']+' already exist, Overwrite?')) {"+
               "saveContentFilename(results.rows.item(0)['id']);"+
             "}else{"+
               "fileSelector();"+
             "}"+
           "}"+
        "}, errorHandler);")
  );

}

function showFileData(transaction, results){
  var data = results.rows.item(0);
  var filename = data['name'];
  var filedata = data['datablob'];

  var datadiv = document.getElementById('tempdata');
  datadiv.setAttribute('lfdataid', parseInt(data['filedata_id']));
 
  document.title=filename;

  previewFile(filedata);

  updateShowMenu();
  setMode('Preview');
}

function showFile(name){
   getFile(name, 'showFileData');
}

function getFile(name, func, db){
  var myDB = db;
  if(!db) myDB = systemDB;

  var datadiv = document.getElementById('tempdata');
  if(datadiv) datadiv.setAttribute('lfname', name);
 
  myDB.transaction(
    function (transaction) {
      transaction.executeSql('SELECT * from files, filedata where files.name=? and files.filedata_id = filedata.id;', [name], eval(func), errorHandler);
    }
  );
}
 
//  Error Handlers 
function killTransaction(transaction, error){
    return true; 
}
 
function errorHandler(transaction, error){
  alert('Oops.  Error was '+error.message+' (Code '+error.code+')');
 
  var we_think_this_error_is_fatal = true;
  if (we_think_this_error_is_fatal) return true;
  return false;
}
 
function nullDataHandler(transaction, results){
}
 
///////////////////////////

function fileSelector(db) {
  var myDB = db;
  if(!db) myDB = systemDB;
 
  myDB.transaction(
    function (transaction) {
      transaction.executeSql("SELECT * from files where deleted=0;", [ ], 
         function (transaction, results) {
            var filelist = '';
            var menuDiv = document.getElementById('menuDiv');
            if(menuDiv){
              for(var i=0; i<results.rows.length; i++) {
                var row = results.rows.item(i);
                filelist = filelist + fileEntry(row);
              }
              if (filelist == "") {
                filelist = "No files.<br />\n";
              } else {
                filelist = "<center><table class='filetable'>"+filelist+"</table></center>";
              }
              menuDiv.innerHTML="<H1 class='title'>"+MainTitle+"</H1>"+createMenuBar()+filelist;
            }
          }, errorHandler);
    }
  );
  setMode('List');
}

function fileSelectorOnServer(val) {
  var filelist = '';
  var menuDiv = document.getElementById('menuDiv');
  var results = val.split(',');
  
  if(menuDiv){
    for(var i=0; i<results.length; i++) {
      var row = results[i];
      filelist = filelist + fileEntryOnServer(row);
    }
    if (filelist == "") {
     filelist = "No files.<br />\n";
    } else {
     filelist = "<center><table class='filetable'>"+filelist+"</table></center>";
    }
    var Menu = "<button onClick=\"fileSelector();\">Local Storage</button>";
    Menu += "<button onClick=\"getRemoteFileList();\">List on Server</button>";
     menuDiv.innerHTML="<H1 class='title'>"+MainTitle+"</H1>"+Menu+filelist;
   }
  setMode('List');
}

function fileEntryOnServer(name){
  name = name.split('.')[0];
  var res =  "<tr class='filerow'>";
  res += "<td class='filenamecell'  onClick=\"getRemoteFile('"+name+"');\">"+name+"</td>";
  res += "<td class='filelinkcell'>";
  res += "<button class='green' onClick=\"showRemoteFile('"+name+"');\">View</button>";
  res += "<button onClick=\"downloadFile('"+name+"');\">Download to local storage</button>";
  res += "<button onClick=\"downloadToFile('"+name+"');\">Download as SVG File</button>";
  res += "</td></tr>\n";

  return res;
}

function fileEntry(row){
  var name = row['name'];
  var files_id = row['id'];

  var res =  "<tr class='filerow'>";
  res += "<td class='filenamecell'  onClick=\"showFile('"+name+"');\">"+name+"</td>";
  res += "<td class='filelinkcell'>";
  res += "<button class='blue' onClick=\"editFile('"+name+"');\">&nbsp;Edit&nbsp;</button> &nbsp;";
  res += "<button class='green' onClick=\"renameFile('"+name+"',"+files_id+");\">&nbsp;Rename&nbsp;</button> &nbsp;";
  res += "<button  onClick=\"uploadFile('"+name+"');\">Upload</button>";
  res += "<button class='red' onClick=\"deleteFile('"+name+"');\">Delete</button>";
  res += "</td></tr>\n";

  return res;
}

function createMenuBar(){
  var menu = "<ul id='menubar'>";
  menu += "<li><button onClick='createNewFile()'>Create New File</button></li>";
  menu += "<li><button onClick='deleteAllFile()'>Delete All</button></li>";
  menu += "<li><button onClick='getRemoteFileList()'>File List on a Server</button></li>";
  menu += "<li><button onClick='configServer()'>Server Configuration</button></li>";
  menu += "</ul><p class='cls'>";
  return menu;
}

//// Config
function setConfig(){
  var ele = document.getElementById('ServerURL');
  MgrPath=ele.value;
  saveChanges();
  alert("Done");
}

function configServer(){
  var popupDiv = document.getElementById('popup');
  var string = "";

  string += "<H1 class='title'>Server Configration</H1>\n";
  string += "<div class=\"input_form\">\n";
  string += "Filename:<input id='ServerURL' name='url' value=\""+MgrPath+"\" size=\"80\"/><br>\n";
  string += "<button onClick=\"setConfig();hideItemById('popup'); \">Done</button>\n";
  string += "<button onClick=\"hideItemById('popup'); \">Cancel</button>\n";
  string += "</div>\n";
 
  popupDiv.innerHTML=string;
  popupDiv.style.display='block';
}

////
function createNewFile(){
  var popupDiv = document.getElementById('popup');
  var string = "";

  string += "<H1 class='title'>Create New File</H1>\n";
  string += "<div class=\"input_form\">\n";
  string += "Filename:<input id='createFilename' name='name' value=\"\" />\n";
  string += "<button onClick=\"createNewFileAction();hideItemById('popup'); \">Create</button>\n";
  string += "<button onClick=\"hideItemById('popup'); \">Cancel</button>\n";
  string += "</div>\n";
 
  popupDiv.innerHTML=string;
  popupDiv.style.display='block';
}


/////
function renameFile(name, id){
  var popupDiv = document.getElementById('popup');
  var string = "";

  string += "<H1 class='title'>Rename File</H1>\n";
  string += "<div class='input_form'>\n";
  string += "Old Filename: "+name+"<br>";
  string += "New Filename:<input id='newFilename' name='newname' value=\"\" />\n";
  string += "<input type='hidden' id='fileId' value=\""+id+"\" /><br>\n";
  string += "<button onClick=\"renameFileAction();hideItemById('popup');\">Rename</button>\n";
  string += "<button onClick=\"hideItemById('popup'); \">Cancel</button>\n";
  string += "</div>\n";
 
  popupDiv.innerHTML=string;
  popupDiv.style.display='block';
}

/// EditMenu
function insertStr(str, len){
  var editarea = document.getElementById('editarea');
  if(len < 0) len = str.length;

  if (editarea){
    if(str=='DQ') str='"';
    var strs = editarea.value;
    var cPos = editarea.selectionStart;
    var tmp = strs.substr(0,cPos);
    editarea.value = tmp +str+strs.substr(cPos, strs.length);
    cPos += len;
    editarea.setSelectionRange(cPos, cPos);
    editarea.focus();
  }
}

function insertTag(tag){
  var str;
  var len = -1;
  if (tag == "p"){
     str = "<p>  </p>";
     len = 4;
  }else if (tag == "ul"){
     str = "<ul class=\"  \"> \n\n</ul>";
     len = 17;
  }else if (tag == "li"){
     str = "<li>   </li>";
     len = 5;
  }else if (tag == "href"){
     str = "xlink:href=\"\"";
     len = 12;
  }else if (tag == "EQ"){
     str = "=\"\"";
     len = 2;
  }else if (tag == "svg:text"){
     str = "<svg:text x=\"100\" y=\"100\" fill=\"black\" font-size=\"12\"> </svg:text>";
     len = 58;
  }else if (tag == "svg:rect"){
     str = "<svg:rect x=\"10\" y=\"10\" width=\"100\" height=\"100\" fill=\"white\" stroke=\"black\" />";
     len = 13;
  }else if (tag == "svg:circle"){
     str = "<svg:circle cx=\"10\" cy=\"100\" r=\"100\" fill=\"white\" stroke=\"black\" strokc-width=\"1\"/>";
     len = 17;
  }
  insertStr(str, len);
}

function editMenuBar()
{
    var str = "";
    str += "<button onClick=\"insertStr('/',1);\">/</button>\n";
    str += "<button onClick=\"insertStr('DQ',1);\">\"</button>\n";
    str += "<button onClick=\"insertTag('EQ',1);\">=\"\"</button>\n";
    str += "<button onClick=\"insertTag('p');\">p</button>\n";
    str += "<button onClick=\"insertTag('href');\">href</button>\n";

    str += "<button onClick=\"insertTag('svg:text');\">TEXT</button>\n";
    str += "<button onClick=\"insertTag('svg:rect');\">rect</button>\n";
    str += "<button onClick=\"insertTag('svg:circle');\">circle</button>\n";

    str += "<button onClick=\"chEditareaHeight();\">...</button>\n";

    return str;
}

function updateEditMenu(){
  var menuDiv = document.getElementById('menuDiv');
  menuDiv.innerHTML="<h1 class='title'>" +document.title+"</h1>\n";
  menuDiv.innerHTML+= "<button onClick=\"saveFile();fileSelector();\"> Save </button>\n";
  menuDiv.innerHTML+= "<button onClick=\"previewData();\"> Preview </button>\n";
  menuDiv.innerHTML+= "<button onClick=\"fileSelector();\"> File List </button>\n";

  menuDiv.style.display='block';
}

//// Editor
function editFileData(transaction, results){
  var editDiv = document.getElementById('editDiv');
  var datadiv = document.getElementById('tempdata');
 
  if( results.rows.length == 0) return;
  var data = results.rows.item(0);
  var filename = data['name'];
  var filedata = data['datablob'];
  datadiv.setAttribute('lfdataid', parseInt(data['filedata_id']));

  var editcontent="<textarea id=\"editarea\" rows=\""+editarea_h+"\" cols=\""+editarea_w+"\">"+filedata+"</textarea>\n";
 
  document.title="EditFile: "+filename;
  updateEditMenu();
  editDiv.innerHTML = editMenuBar() +"<br>"+ editcontent;

  setMode('Edit');
}

function editFile(name){
   if(currentMode == 'Preview'){
     var data = getSVGContent();
     var editcontent="<textarea id=\"editarea\" rows=\""+editarea_h+"\" cols=\""+editarea_w+"\">"+data+"</textarea>\n";
     updateEditMenu();
     editDiv.innerHTML = editMenuBar() +"<br>"+ editcontent;

     setMode('Edit');
   }else{
     getFile(name, 'editFileData');
   }
}

function editCurrentFile(){
  var datadiv = document.getElementById('tempdata');
  var name = datadiv.getAttribute('lfname');

  editFile(name);
}

function downItem(){
  if(selectedItems.length != 1) return;
  var itm = selectedItems[0];
  
  var nodes = svg_top.childNodes;
  for(var i=0; i< nodes.length; i++){
    if(nodes[i] == itm) break;
  }
  if (i > 0)
    svg_top.insertBefore(itm, nodes[i-1]); 
}

function upItem(){
  if(selectedItems.length != 1) return;
  var itm = selectedItems[0];

  var nodes = svg_top.childNodes;
  for(var i=0; i< nodes.length; i++){
    if(nodes[i] == itm) break;
  }

  if (i == nodes.length-2){
    svg_top.appendChild(itm);
  }else if (i < nodes.length-1){
    svg_top.insertBefore(itm, nodes[i+2]); 
  }
}

//  Show File
function updateShowMenu(){
  var menuDiv = document.getElementById('menuDiv');
  menuDiv.innerHTML="<h1 class='title'>" +document.title+"</h1>\n";
  menuDiv.innerHTML+= "<button onClick=\"editCurrentFile();\"> Edit </button>\n";
  menuDiv.innerHTML+= "<button onClick=\"saveData();\"> Save </button>\n";
  menuDiv.innerHTML+= "<button onClick=\"fileSelector();\"> File List </button>\n";
  menuDiv.innerHTML+= "<button onClick=\"showSVGSource();\"> &lt;SVG &gt; </button>\n";
  menuDiv.innerHTML+= "<button onClick=\"upItem();\">Up</button>\n";
  menuDiv.innerHTML+= "<button onClick=\"downItem();\">Down</button>\n";
  menuDiv.innerHTML+= updateSVGObjMenu();
  menuDiv.style.display='block';
  updateToolBar();
}

function showColorPalette(val){
  var palette = document.getElementById('color-palette');
  var ele;
  var current = palette.getAttribute("targetType");

  if(palette.style.display=='block' && current == val){
    palette.style.display='none';
    return;
  }

  if(val == 'fill'){
   ele = document.getElementById('toolFill');
  }else{
   ele = document.getElementById('toolStroke');
  }
  
  var pos= ele.offsetTop + 110;
  palette.style.top = pos +"px";
  palette.style.display='block';
  palette.setAttribute("targetType", val);

}

function updateToolBar(){
  var toolbar = document.getElementById('toolBar');
  var str = "";
  if(!toolbar.innerHTML){
    str += "<li><button id=\"b_selector\" onClick=\"setSVGMode('selector');\"><img src=\"images/arrow.png\" /></button> </li>\n";
    str += "<li><button id=\"b_newPath\" onClick=\"setSVGMode('newPath'); \"><img src=\"images/path.png\" /></button></li> \n";
    str += "<li><button id=\"b_newLine\" onClick=\"setSVGMode('newLine'); \"><img src=\"images/line.png\" /> </button></li> \n";
    str += "<li><button id=\"b_text\" onClick=\"setSVGMode('text'); \"><img src=\"images/text.png\" /></button> </li>\n";
    str += "<li><button id=\"b_rect\" onClick=\"setSVGMode('rect'); \"> <img src=\"images/rect.png\" />  </button></li> \n";
    str += "<li><button id=\"b_circle\" onClick=\"setSVGMode('circle'); \"> <img src=\"images/circle.png\" /> </button></li> \n";
    str += "<li><button id=\"b_ellipse\" onClick=\"setSVGMode('ellipse'); \"> <img src=\"images/ellipse.png\" /> </button></li> \n";
    str += "<li><button id=\"b_image\" onClick=\"setSVGMode('image'); \"> <img src=\"images/img.png\" /> </button></li> \n";
    str += "<li>&nbsp;</li>";
    str += "<li><button id=\"b_fillColor\" onClick=\"showColorPalette('fill');\"><img src=\"images/Fill.png\" /><div id=\"toolFill\"></div></button></li> \n";
    str += "<li><button id=\"b_strokeColor\" onClick=\"showColorPalette('stroke');\"><img src=\"images/Stroke.png\" /><div id=\"toolStroke\"></div></button></li> \n";
    toolbar.innerHTML= "<ul>"+str+"</ul>";
  }

  toolbar.style.display='block';
}

function setMode(m){
  currentMode=m;
  switch(m){
    case 'List':
      hideItemById('editDiv');
      hideItemById('preview');
      hideItemById('popup');
      hideItemById('toolBar');
      hideItemById('color-palette');
      showItemById('menuDiv');
      break;
    case 'Edit':
      hideItemById('preview');
      hideItemById('popup');
      hideItemById('toolBar');
      hideItemById('color-palette');
      showItemById('editDiv');
      showItemById('menuDiv');
      break;
    case 'Preview':
      showItemById('preview');
      hideItemById('editDiv');
      hideItemById('popup');
      hideItemById('color-palette');
      showItemById('menuDiv');
      showItemById('toolBar');
      break;
    default:
      break;
  }
}

function hideItemById(id){
  var itm = document.getElementById(id);
  if(itm) itm.style.display='none';
}

function showItemById(id){
  var itm = document.getElementById(id);
  if(itm) itm.style.display='block';
}

function removeChildNodes(id){
  var itm = document.getElementById(id);
  if(!itm) return;

  var child = itm.firstChild;

  while(child){
    itm.removeChild(child);
    child = itm.firstChild;
  }
}

function chEditareaHeight(){
  var itm = document.getElementById('editarea');
  if(!itm) return;
  var cv = itm.getAttribute('rows');
  if(parseInt(cv) > editarea_h){
    itm.setAttribute('rows', editarea_h);
  }else{
    itm.setAttribute('rows', editarea_h * 2);
  }
}

function format_file(str){
  return "<pre>"+str+"</pre>";
}

function previewData(data){
  if(!data) data = document.getElementById('editarea').value;

  previewFile(data);

  updateShowMenu();
  setMode('Preview');
}
  
function previewFile(data){
  removeChildNodes('preview');

  preview.style.display='block';
  preview.style.position='absolute';
  preview.style.top='180px';
  preview.style.bottom='50px';
  preview.style.left='0px';
  preview.style.right='10px';
  preview.style.width='800px';
//  preview.style.height='600px';
  preview.style.height='525px';
  mkColorPalette();

  var ele = toSVGElement(data, '100%','100%');

  preview.appendChild(ele);

  svg_top = document.getElementById('svg_top');
  initSVGElementId(svg_top);
  svg_select = createSVGObj('rect', 'x=1,y=1,width=1,height=1,visibility=hidden,stroke-dasharray=9 5', 'none', 'blue', 2);
  svg_select.setAttribute("id","svg_select");
  appendSVGObj(svg_select);
}

function mkColorPalette(){
  var palette = document.getElementById('color-palette');
  if(!palette) return;
  if(palette.innerHTML) return;

  palette.innerHTML="";
  palette.addEventListener("touchstart", onTouchStartColor, false);

  for(var i=0; i<colors.length ;i++){
    if(colors[i] == 'none')
      palette.innerHTML +="<div class=\"item\" style=\"background-color:"+colors[i]+";\" color-val=\""+colors[i]+"\">X</div>";
    else
      palette.innerHTML +="<div class=\"item\" style=\"background-color:"+colors[i]+";\" color-val=\""+colors[i]+"\"> </div>";
  }
  palette.style.width='120px';
}

////// for SVG object
////////////////
function updateSVGObjMenu(){
  var res = "";
  var tag = modeSVG;
  if(selectedItems.length  > 1) return res;
  if(selectedItems.length == 1) tag = getElementTag(selectedItems[0]);

  switch(tag){
    case 'text':
     if(selectedItems[0]){
       res += setSVGObjectProp(selectedItems[0]);
     }else{
       res += propSVGText("", svg_font_size, svg_color, 0);
     }
     break;
    case 'rect':
    case 'circle':
    case 'ellipse':
    case 'newPath':
    case 'newLine':
    case 'path':
    case 'line':
    case 'polyline':
    case 'polygon':
     if(selectedItems[0]){
       res += setSVGObjectProp(selectedItems[0]);
     }else{
       res += propSVGObj(tag+":", svg_line_width, svg_color, svg_fill_color, 0);
     }
     break;
    case 'image':
     if(selectedItems[0]){
       res += setSVGObjectProp(selectedItems[0]);
     }else{
       res += propSVGImage("", 100, 100, 0);
     }
     break;
    default:
     break;
  }
  return res;
}

function propSVGText(str, size, color, rot){
  if(!size) size = 24;
  if(!color) color = '#000000';
  if(!rot) rot = 0;

  var res = "Text:";
  res += "<input type=\"hidden\" id=\"svg_text\" value=\""+str+"\"/>";
  res += "<input type=\"hidden\" id=\"svg_color\" value=\""+color+"\" size=\"8\"/>";
  res += "Rot:<input type=\"text\" id=\"svg_rotate\" value=\""+rot+"\" size=\"4\"/>";
  
  res += "Size:<input type=\"text\" id=\"svg_size\" value=\""+size+"\" size=\"4\"/>";

  document.getElementById('toolFill').style.backgroundColor=color;
  return res;
}

function propSVGObj(type, stroke, color, fill, rot){
  var res = type;
  if(!stroke) stroke = 1;
  if(!color) color = '#000000';
  if(!fill) fill = '#ffffff';
  if(!rot) rot = 0;
  res += "<input type=\"hidden\" id=\"svg_fill\" value=\""+fill+"\" size=\"8\"/>";
  res += "<input type=\"hidden\" id=\"svg_color\" value=\""+color+"\" size=\"8\"/>";
  res += "Width:<input type=\"text\" id=\"svg_stroke\" value=\""+stroke+"\" size=\"2\"/>";
  res += "Rot:<input type=\"text\" id=\"svg_rotate\" value=\""+rot+"\" size=\"4\"/>";

  document.getElementById('toolFill').style.backgroundColor=fill;
  document.getElementById('toolStroke').style.backgroundColor=color;
  return res;
}

function propSVGLine(type, stroke, color, fill, style, rot){
  var res =  propSVGObj(type, stroke, color, fill, rot);
  if(!rot) rot = 0;
  if(style==null) style="";
  res += "Type:<input type=\"text\" id=\"svg_stroke_type\" value=\""+style+"\" size=\"8\"/>";
  res += "Arrow:";

  if(hasArrow('start')){
    res += "<button class=\"tool\" onClick=\"removeLeftArrow();\"><img src=\"images/normal.png\" /></button>";
  }else{
    res += "<button class=\"tool\" onClick=\"setLeftArrow();\"><img src=\"images/larrow.png\" /></button>";
  }
  if(hasArrow('end')){
    res += "<button class=\"tool\" onClick=\"removeRightArrow();\"><img src=\"images/normal.png\" /></button>";
  }else{
    res += "<button class=\"tool\" onClick=\"setRightArrow();\"><img src=\"images/rarrow.png\" /></button>";
  }

  document.getElementById('toolFill').style.backgroundColor=fill;
  document.getElementById('toolStroke').style.backgroundColor=color;

  return res;
}

function propSVGImage(str, w, h, rot){
  var res = "image:";
  if(!rot) rot = 0;
  res += "<input type=\"text\" id=\"svg_text\" value=\""+str+"\" />";
  res += "Width:<input type=\"text\" id=\"svg_w\" value=\""+w+"\" size=\"4\"/>";
  res += "Height:<input type=\"text\" id=\"svg_h\" value=\""+h+"\" size=\"4\"/>";
  res += "Rot:<input type=\"text\" id=\"svg_rotate\" value=\""+rot+"\" size=\"4\"/>";
  return res;
}

function setSVGMode(m){
  var btn = document.getElementById('b_'+modeSVG);
  if(btn){ btn.style.border="1px solid black"; }

  modeSVG = m;
  updateShowMenu();

  if(m == 'selector'){
    targetItem=null;
    clearSelectedItems();
  }
  var btn = document.getElementById('b_'+modeSVG);
  if(btn){ btn.style.border="3px solid red"; }
}


function toSVGElement(str, w, h){
  var xmlsvg = "xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"";
  var parser = new DOMParser();
  var header = "<svg:svg width=\""+w+"\" height=\""+h+"\" "+xmlsvg+" id=\"svg_top\">";
  var footer = "</svg:svg>";
  var xmlDoc = parser.parseFromString(header+str+footer, "text/xml");
  var xmlRoot = xmlDoc.documentElement;
  var ele =  document.importNode(xmlRoot,true);

  return ele;
}

function createSVGElement(tag, id){
  if(id=='new'){
     id = 'svg_'+nextId;
     nextId++;
  }
  var ele= document.createElementNS(svg_ns, tag);
  ele.setAttribute("id", id);
  return ele;
}

function defSVGElement(node){
  if(!svg_defs) svg_defs = document.getElementById('svg_defs');
  if(!svg_defs){
    svg_defs = createSVGElement('defs', 'svg_defs');
    svg_top.insertBefore(svg_defs, svg_top.firstChild);
  }
  if(node) svg_defs.appendChild(node);
}

function initSVGElementId(svg_top){
  nextId = 1;
  checkSVGElementId(svg_top);
  appendSVGElementId(svg_top);
}

function checkSVGElementId(top){
  var objs = top.childNodes;

  for(var i=0; i<objs.length ;i++){
    if(objs[i].tagName){
      var id = objs[i].getAttribute("id");

      if(id && id.match(/svg_[0-9]+/i)){
         var n = parseInt(RegExp.lastMatch.substr(4));
         if(n >= nextId){
           nextId = n+1;
         }
       
      }
      checkSVGElementId(objs[i]);
    }
  }
}

function appendSVGElementId(top){
  var objs = top.childNodes;

  for(var i=0; i<objs.length ;i++){
    if(objs[i].tagName){
      var id = objs[i].getAttribute("id");
      if(!id){
         objs[i].setAttribute("id", "svg_"+nextId);
         nextId++;
      }
    }
    appendSVGElementId(objs[i]);
  }
}

function selectedRectangle(x, y, ex, ey){
  if(!svg_select) return null;

  svg_select.setAttribute("x",x);
  svg_select.setAttribute("y",y);
  svg_select.setAttribute("width", ex-x);
  svg_select.setAttribute("height", ey-y);
  svg_select.setAttribute("visibility", "visible");
  return svg_select;
}


function setAttributes(obj, attrs){
  var attr_array = attrs.split(',');

  for (var i=0; i<attr_array.length;i++){
    var x = attr_array[i].split('=');
    if(x.length == 2){
      obj.setAttribute(x[0], x[1]);
    }
  }
}

function createSVGObj(tag, attrs, fill, color, lw){
  var ele = createSVGElement(tag, 'new');
  setAttributes(ele, attrs);
  if (fill) ele.setAttribute('fill', fill);
  if (color) ele.setAttribute('stroke', color);
  if(lw) ele.setAttribute('stroke-width', lw);

  return ele;
}

function createSVGText(txt, x, y, size, color){
  var ele = createSVGElement('text', 'new');

  ele.setAttribute('x', x);
  ele.setAttribute('y', y);
  ele.setAttribute('font-size', size);
  ele.setAttribute('fill', color);
  ele.textContent=txt;

  return ele;
}

function createSVGImage(fname, width, height, attrs){
  var ele = createSVGElement('image', 'new');
  ele.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', fname);
  ele.setAttribute('width', width);
  ele.setAttribute('height', height);
  setAttributes(ele, attrs);

  return ele;
}

function createSVGMarker(pid, id, child){
  var parent = document.getElementById(pid);
  if(!parent) return;
  var ele = createSVGElement('marker', pid+'_'+id);
  ele.appendChild(child);
  return ele;
}

function setLeftArrow(){
 if( selectedItems.length == 1 ){
    setArrow(selectedItems[0], 'start', '');
    updateShowMenu();
 }
}

function setRightArrow(){
 if( selectedItems.length == 1 ){
    setArrow(selectedItems[0], 'end', '');
    updateShowMenu();
 }
}

function removeLeftArrow(){
 if( selectedItems.length == 1 ){
   if(!svg_defs) svg_defs = document.getElementById('svg_defs');
   var pid = selectedItems[0].getAttribute('id');
   var marker = document.getElementById(pid+'_startarrow');
   svg_defs.removeChild(marker);
   selectedItems[0].removeAttribute('marker-start');
   updateShowMenu();
 }
}

function removeRightArrow(){
 if( selectedItems.length == 1 ){
   if(!svg_defs) svg_defs = document.getElementById('svg_defs');
   var pid = selectedItems[0].getAttribute('id');
   var marker = document.getElementById(pid+'_endarrow');
   svg_defs.removeChild(marker);
   selectedItems[0].removeAttribute('marker-end');
 }
}

function hasArrow(pos){
  var pobj = selectedItems[0];
  if(!pobj) return false;
  var pid = pobj.getAttribute('id');
  var marker = document.getElementById(pid+'_'+pos+'arrow');
  if(marker) return true;
  return false;
}

function getArrowMarker(obj,pos){
  if(!obj) return false;
  var pid = obj.getAttribute('id');
  var marker = document.getElementById(pid+'_'+pos+'arrow');
  return false;
}

function setArrow(pobj, pos, type){
  if(!pobj) return;
  var pid = pobj.getAttribute('id');
  var marker = document.getElementById(pid+'_'+pos+'arrow');
  if(marker) return;

  var obj = createSVGElement('path', 'new');

  var refX = 0;
  var refY = 0; 

  switch(pos){
    case 'start':
      refX=10;
      refY=10;
      setAttributes(obj,'d=M 20 0 L 0 10 20 20 Z');
      break;
    case 'end':
      setAttributes(obj,'d=M 0 0 L 20 10 0 20 Z');
      refX= 10;
      refY=10;
      break;
    default:
      return; 
  }
  
  marker = createSVGMarker(pid, pos+'arrow' , obj);
  setAttributes(marker,'markerWidth=10,markerHeight=10,orient=auto,viewBox=0 0 20 20,markerUnits=strokeWidth,refX='+refX+',refY='+refY);

  marker.setAttribute("fill",pobj.getAttribute("stroke")); 

  defSVGElement(marker);
  var mid = "url(#"+marker.getAttribute("id")+")";
  var mattr = "marker-"+pos;
  pobj.setAttribute(mattr, mid);
}

function appendSVGObj(obj){
  var svg_top = document.getElementById('svg_top');
  if(!svg_top) return;

  svg_top.appendChild(obj);
}

function isChildById(element, id) {
  if (element == null || element.parentNode == null || element.parentNode.nodeName=='BODY') return false;
  else if (element.parentNode.id == id) return true;
  else return isChildById(element.parentNode, id);
}

/////////////////////// Formatting SVG DOM
function escapeHTML(text) {
  return text.replace( /[<>"&]/g,
    function (m) { return { '<': '&lt;', '>': '&gt;', '"': '&quot;', '&': '&amp;' }[m]; }
  );
};

function formatTag(ele){
  var str="";
  if(ele.nodeType == 1){
    var tag_a = ele.tagName.split(':');
    var tag;
    if(tag_a.length == 1){ tag = "svg:"+tag_a[0]; }else{ tag = ele.tagName; }

    str += "<"+tag;
    var attrs = ele.attributes;
    for(var i=0; i<attrs.length; i++){
      str += " "+attrs[i].nodeName+"=\""+attrs[i].nodeValue+"\"";
    }
    var cn = ele.childNodes;
    if(cn.length > 0){
      str +=">\n";
      for(var i=0; i<cn.length; i++){
        var tmp = trim(formatTag(cn[i]));
        if(tmp) str += " "+tmp+"\n";
      }
      str += "</"+tag+">";
    }else{
      str +=" />";
    }
    return str;
  }else if(ele.nodeType==3){
    return ele.textContent;
  }
}

function getSVGContent(){
  if(!svg_top) return "";

  var str = "";
  var elements = svg_top.childNodes;
  for(var i=0; i<elements.length; i++){
    if(elements[i] != svg_select){
      var tmp = trim(formatTag(elements[i]));
      if(tmp) str += tmp + '\n';
    }
  }
  return str;
}

function trim(str){
  return str.replace(/(^\s+)|(\s+$)/g, "");
}

///////  Access Server
function newXMLRequest(){
  if(this.XMLHttpRequest){
    return new XMLHttpRequest();
  }else {
    return new ActiveXObject("Microsoft.XMLHTTP");
  }
}

function createRequestData(data){
  var str="filetype=svg";
  for (var i in data){
    str = str +"&"+ i +"="+encodeURIComponent(data[i]);
  }
  return str;
}

function postRequest(url, data, func){
  var postData=createRequestData(data);
  var obj=newXMLRequest();

  obj.onreadystatechange = function(){
    if (obj.readyState == 4 && obj.status == 200){
      func(obj.responseText);
    }
  }
  obj.open("POST", url, true);
  obj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  obj.send(postData);
}

function commnadFinishAlert(s){
  alert(s);
}

function uploadFileData(transaction, results){
  var data = results.rows.item(0);
  var updata = new Array(0);
  updata['name']= data['name'];
  updata['datalob'] = data['datablob'];
  updata['cmd'] = 'upload'

  postRequest(MgrPath+iSlideMgr, updata, commnadFinishAlert);
}

function uploadFile(name){
   getFile(name, 'uploadFileData');
}

function getRemoteFileList(){
  var data=new Array();
  data['name'] = "SVG";
  data['cmd'] = "list";
  postRequest(MgrPath+iSlideMgr, data, fileSelectorOnServer);
}

function previewRemoteFile(content){
  previewFile(content);
  setMode('Preview');
}

function getRemoteFile(name){
  var data=new Array();
  data['name'] = name;
  data['cmd'] = "get";
  postRequest(MgrPath+iSlideMgr, data, previewRemoteFile);
}

function saveRemoteFile(content){
  var datadiv = document.getElementById('tempdata');
  var fname = datadiv.getAttribute('lfname');
  saveContentWithFilename(fname, content);
}

function downloadFile(name){
  var data=new Array();
  data['name'] = name;
  data['cmd'] = "get";
  var datadiv = document.getElementById('tempdata');
  datadiv.setAttribute('lfname', name);
  postRequest(MgrPath+iSlideMgr, data, saveRemoteFile);
}

function showRemoteFile(name){
  getRemoteFile(name);
}

function downloadToFile(name){
  var downloadForm = "";
  downloadForm += "<form action=\"iSlideManager.php\" method=\"post\">";
  downloadForm += "<input type=\"hidden\" name=\"cmd\" value=\"download\">";
  downloadForm += "<input type=\"hidden\" name=\"name\" value=\""+name+"\">";
  downloadForm += "<input type=\"hidden\" name=\"filetype\" value=\"svg\">";
  downloadForm += "<input type=\"submit\">";
  downloadForm += "</form>";

  var cmdForm = document.getElementById('cmdForm');
  cmdForm.innerHTML = downloadForm;
  cmdForm.firstChild.submit();
}

//////// Event Handler
function setInnerHTML(id, val){
  var itm=document.getElementById(id);
  if(itm) itm.innerHTML=val;
}

function popupInfo(val){
  var str="<button onClick=\"hideItemById('popup');\">Close</button><hr> ";
  str += val;
  setInnerHTML('popup', str);
  showItemById('popup');
}

function addAttributeVal(obj, itm, dv){
   if(obj.hasAttribute(itm)){
      var x = parseInt(obj.getAttribute(itm));
      x = x + dv;
      obj.setAttribute(itm, x)
   }
}

function showSVGSource(){
  var str = getSVGContent();
  var escstr="<button onClick=\"hideItemById('popup');\">Close</button>";
  escstr+="<button onClick=\"saveContent(document.getElementById('ContentView').value); previewData(document.getElementById('ContentView').value);\">Save</button><hr> ";
//  escstr += "<pre>"+escapeHTML(str)+"</pre>";
  escstr += "<textarea cols=\"130\" rows=\"30\" id=\"ContentView\">"+str+"</textarea>";
  setInnerHTML('popup', escstr);
  showItemById('popup');
}


function getElementTag(obj){
  if (!obj) return null;
  var tag = obj.tagName.split(':');
  if(tag.length == 2 && tag[0]=='svg') return tag[1];
  return tag[0];
}

function setSVGObjectProp(obj){
  var tag = getElementTag(obj);
  var res ="";
  switch(tag){
    case 'text':
      res = propSVGText(obj.textContent, obj.getAttribute("font-size"), obj.getAttribute("fill"),getRotateAngle(obj));
      break;
    case 'rect':
    case 'circle':
    case 'ellipse':
     res =  propSVGObj(tag+":", obj.getAttribute("stroke-width"), obj.getAttribute("stroke"), obj.getAttribute("fill"),getRotateAngle(obj));
     break;
    case 'path':
    case 'line':
     res =  propSVGLine(tag+":",obj.getAttribute("stroke-width"),
       obj.getAttribute("stroke"),obj.getAttribute("fill"), obj.getAttribute("stroke-dasharray"),getRotateAngle(obj));
     break;
    case 'image':
     res =  propSVGImage(obj.getAttribute("xlink:href"),obj.getAttribute("width"),obj.getAttribute("height"),getRotateAngle(obj));
     break;
    default:
     break;
  }
  if(res != ""){
    res += "<button onClick=\"updateSVGObj();\">Apply</button>";
    res += "<button onClick=\"delSVGObj();\">Del</button>";
  }

  return res
}

function updateSVGObj(){
  if(selectedItems.length != 1) return;
  var obj = selectedItems[0];
  var tag = getElementTag(obj);
  var deg=document.getElementById('svg_rotate');
  var res ="";
  switch(tag){
    case 'text':
      var txt=document.getElementById('svg_text');
      var color=document.getElementById('svg_color');
      var size=document.getElementById('svg_size');
      obj.textContent = txt.value;
      obj.setAttribute("fill", color.value);
      obj.setAttribute("font-size", size.value);
      setRotate(obj,deg.value);
      break;
    case 'rect':
    case 'circle':
    case 'ellipse':
      var fill=document.getElementById('svg_fill');
      var color=document.getElementById('svg_color');
      var L=document.getElementById('svg_stroke');
      obj.setAttribute("fill", fill.value);
      obj.setAttribute("stroke", color.value);
      obj.setAttribute("stroke-width", L.value);
      setRotate(obj,deg.value);
     break;
    case 'path':
    case 'line':
      var fill=document.getElementById('svg_fill');
      var color=document.getElementById('svg_color');
      var L=document.getElementById('svg_stroke');
      var dash=document.getElementById('svg_stroke_type');
      obj.setAttribute("fill", fill.value);
      obj.setAttribute("stroke", color.value);
      obj.setAttribute("stroke-width", L.value);
      setRotate(obj,deg.value);
      if(dash) obj.setAttribute("stroke-dasharray", dash.value);
      var id = obj.getAttribute("id");
      var marker = document.getElementById(id+'_startarrow');
      if(marker) marker.setAttribute("fill", color.value);
      var marker = document.getElementById(id+'_endarrow');
      if(marker) marker.setAttribute("fill", color.value);
     break;
    case 'image':
      var fname=document.getElementById('svg_text');
      var w=document.getElementById('svg_w');
      var h=document.getElementById('svg_h');
      obj.setAttribute("xlink:href", fname.value);
      obj.setAttribute("width", w.value);
      obj.setAttribute("height", h.value);
      setRotate(obj,deg.value);
     break;
    default:
     break;
  }

}

function delSVGObj(){
  if(selectedItems.length != 1) return;
  var obj = selectedItems[0];

  if(!svg_top) return;
  svg_top.removeChild(obj);
  svg_select.setAttribute("visibility","hidden");
}

///// For MobileSafari
function getPreviewX(x){ return x - preview.offsetLeft; }
function getPreviewY(y){ return y - preview.offsetTop; }

function calcDit(x1, y1, x2, y2){
 return (x1-x2)*(x1-x2) +(y1-y2)*(y1-y2);
}

function isIncludeEllipse( x1, y1, cx, cy, rx, ry){
 return ((x1-cx)*(x1-cx)/rx/rx +(y1-cy)*(y1-cy)/ry/ry) < 1;
}

function getAttributeVal(obj, name){
  try{
    return parseInt(obj.getAttribute(name)); 
  }catch(e){ return 0; }
}

function checkIntersection(obj, x, y, ex, ey){
  if(!obj) return false;
  var res = true;
  var bbox = obj.getBBox();
  var ox = bbox.x;
  var oy = bbox.y;
  var oex = bbox.x+bbox.width;
  var oey = bbox.y+bbox.height;
  if( ex < ox ||  oex < x || ey < oy || oey < y) res = false;

  var tag = getElementTag(obj);
  switch(tag){
    case 'circle':
    case 'ellipse':
      var cx = getAttributeVal(obj,"cx"); 
      var cy = getAttributeVal(obj,"cy"); 
      var rx = getAttributeVal(obj,"r"); 
      var ry = rx;
      if(!rx){
        var rx = getAttributeVal(obj,"rx"); 
        var ry = getAttributeVal(obj,"ry"); 
      }

      if(res){
        if(cx <x && cy < y && !isIncludeEllipse(x,y,cx,cy,rx,ry)) res=false;
        else if(cx < x && cy > ey && !isIncludeEllipse(x,ey,cx,cy,rx,ry)) res=false;
        else if(cx > ex && cy > ey && !isIncludeEllipse(ex,ey,cx,cy,rx,ry)) res=false;
        else if(cx > ex && cy < y && !isIncludeEllipse( ex,y,cx,cy,rx,ry)) res=false;
      }
      break;
    case 'path':
      var d = obj.getAttribute("d"); 
      var p = getPoints(d);
      for(var i=0;i<p.length;i++){
        var ox=p[i][0];
        var oy=p[i][1];
        if(x < ox && ox < ex && y < oy && oy < ey) {
           return true;
        }
      } 
      return false;
      break;
    case 'line':
      var x1 = getAttributeVal(obj,"x1"); 
      var y1 = getAttributeVal(obj,"y1"); 
      var x2 = getAttributeVal(obj,"x2"); 
      var y2 = getAttributeVal(obj,"y2"); 
      var d = (y2-y1)/(x2-x1);

      if(res){
        var xx = Math.abs(x2-x1);
        var sign = 1;
        if(x2-x1 < 0){ sign = -1; }
        for(var i=0; i < xx; i++){
          var nx = i*sign + x1;
          var ny = d * i*sign + y1;
          if(x < nx && nx < ex && y < ny && ny < ey) return true;
        }
      }
      return false;

      return res;
      break;
    case 'text':
    case 'rect':
    case 'polygon':
    case 'polyline':
    case 'image':
      break;
    default:
      res=false;
      break;
  }
  return res;
}

function getBoundingBox(obj){
  var res = new Array(4);
  var bbox = obj.getBBox();
  res[0] = bbox.x-1;
  res[1] = bbox.y-1;
  res[2] = bbox.x+bbox.width+2;
  res[3] = bbox.y+bbox.height+2;
  return res;
}

function setSelectBox(){
  if(!svg_select) return;

  if(selectedItems.length == 0){
    svg_select.setAttribute("visibility","hidden");
    return;
  }

  var bbox = new Array(4);
  bbox[0] = 1000;
  bbox[1] = 1000;
  bbox[2] = 0;
  bbox[3] = 0;
  
  for(var i=0;i<selectedItems.length;i++){
    var bp = getBoundingBox(selectedItems[i]);
    if(bp[0] < bbox[0]) bbox[0]=bp[0];
    if(bp[1] < bbox[1]) bbox[1]=bp[1];
    if(bp[2] > bbox[2]) bbox[2]=bp[2];
    if(bp[3] > bbox[3]) bbox[3]=bp[3];
  } 
  svg_select.setAttribute("x", bbox[0]);
  svg_select.setAttribute("y", bbox[1]);
  svg_select.setAttribute("width", bbox[2] - bbox[0]);
  svg_select.setAttribute("height", bbox[3] - bbox[1]);
  svg_select.setAttribute("visibility","visible;");
}

function getSelectedObjects(x1, y1, x2, y2){
   if(x1 > x2) { var tmp = x1; x1=x2; x2=tmp; } 
   if(y1 > y2) { var tmp = y1; y1=y2; y2=tmp; } 

   var val="";
   if(svg_top){
     var val ="";
     var objs = svg_top.childNodes;
     selectedItems = new Array();
     for(var i=0; i<objs.length;i++){
      if(objs[i].tagName){
       
        if(objs[i] != svg_select && checkIntersection(objs[i], x1, y1, x2, y2)){
          selectedItems.push(objs[i]);
        }
          val += objs[i].tagName+" ";
      }
    }
  }
  setSelectBox();
}

function onTouchStartCore(){
  if((!modeSVG || modeSVG == 'selector') && selectedItems.length == 0){ // Selector Mode
    var x1=getPreviewX(sx-1);
    var y1=getPreviewY(sy-1);
    var x2=getPreviewX(sx+2);
    var y2=getPreviewY(sy+2);
    getSelectedObjects(x1, y1, x2, y2);
    
    if(selectedItems.length == 0){
      setSVGMode('selector');
    }else if(selectedItems.length == 1){
      targetItem=selectedItems[0];
      setSVGMode(getElementTag(targetItem));
    }else{
      setSVGMode('Group');
    }
 }else { // CreateMode
   if(selectedItems.length == 0){

     var fill=document.getElementById('svg_fill');
     var color=document.getElementById('svg_color');
     var L=document.getElementById('svg_stroke');

     var x = getPreviewX(sx);
     var y = getPreviewY(sy);

     switch(modeSVG){
       case 'text':
         var txt=document.getElementById('svg_text');
         var size=document.getElementById('svg_size');
         if(txt.value){
             y = y + parseInt(size.value)*0.8;
             targetItem=createSVGText(txt.value, x, y, size.value, color.value);
         }else{
            putInputForm(x, y, txt.value, size.value);
         }
         break;
       case 'rect':
         var attr = 'x='+x+',y='+y+',width='+svg_width+',height='+svg_height;
         targetItem=createSVGObj(modeSVG,attr, fill.value, color.value, L.value);
         break;
       case 'circle':
         var attr = 'cx='+x+',cy='+y+',r='+svg_rx;
         targetItem=createSVGObj(modeSVG,attr, fill.value, color.value, L.value);
         break;
       case 'ellipse':
         var attr = 'cx='+x+',cy='+y+',rx='+svg_rx+',ry='+svg_ry;
         targetItem=createSVGObj(modeSVG,attr, fill.value, color.value, L.value);
         break;
       case 'newPath':
         var attr = 'd=M '+x+' '+y+' L '+x+' '+y;
         targetItem=createSVGObj('path' ,attr, 'none', color.value, L.value);
         break;
       case 'newLine':
         var x2=x+1;
         var attr = 'x1='+x+',y1='+y+',x2='+x2+',y2='+y;
         targetItem=createSVGObj('line' ,attr, 'none', color.value, L.value);
         break;
       case 'image':
         var attr = 'x='+x+',y='+y;
         var txt=document.getElementById('svg_text');
         var w=document.getElementById('svg_w');
         var h=document.getElementById('svg_h');
         if(txt.value) targetItem=createSVGImage(txt.value ,w.value, h.value, attr);
       default:
         break;
     }
     if (targetItem){
       appendSVGObj(targetItem);
       selectedItems[0]=targetItem;
     }
   }else{
     var x1=getPreviewX(sx-1);
     var y1=getPreviewY(sy-1);
     var x2=getPreviewX(sx+2);
     var y2=getPreviewY(sy+2);
     if(!checkIntersection(svg_select, x1, y1, x2, y2)){
        setSVGMode('selector');
     }
   }
 }
}


function onDoubleTap(e){
  if(selectedItems.length == 1 ){
    svg_select.setAttribute("visibility","hidden");

    var obj = selectedItems[0];
    switch(obj.tagName){
      case 'svg:text':
      case 'text':
        var txt = trim(obj.textContent);
        var size = parseInt(obj.getAttribute("font-size"));
        var x = parseInt(obj.getAttribute("x"));
        var y = parseInt(obj.getAttribute("y"));
        x = x-20;
        y = y-size*0.8 -10;
        putInputForm(x, y, txt, size, obj.id);
        obj.style.display = 'none';
        editingTextObj = obj;
        break;
      default:
        break;
    }
   return false;
  }
}

function getPoints(d){
  var p = d.split(' ');
  var res = new Array();
  var isx=true;
  var x, y;
  for(var i=0; i<p.length;i++){
    if(p[i].match('[MLHVCSQTA]','i')){
    }else{
      if(isx){
        x = parseInt(p[i]);
      }else{
        y = parseInt(p[i]);
        res.push(new Array(x, y));
      }
      isx = !isx;
    }
  }
  return res;
}
 
function updatePath(d, x, y){
  var p = d.split(' ');
  var res = "";
  var isx=true;
  var val;
  for(var i=0; i<p.length;i++){
    if(p[i].match('[MLHVCSQTA]','i')){
      res += ' '+p[i]; 
    }else{
      if(isx){
        val = parseInt(p[i])+x;
      }else{
        val = parseInt(p[i])+y;
      }

      res += ' '+ val; 
      isx = !isx;
    }
  }
  return trim(res);
}

function updateTransform(obj){
  try{
    var trans = obj.getAttribute("transform");
    if(!trans) return;
    if(trans.match(new RegExp("translate(.+,.+)","i"))){
      var str = RegExp.lastMatch;
      var vals = str.substr(10,str.length-11).split(',') ;
      var dx = parseInt(vals[0]);
      var dy = parseInt(vals[1]);
      switch(getElementTag(obj)){
        case 'text':
        case 'rect':
        case 'image':
          addAttributeVal(obj, "x", dx);
          addAttributeVal(obj, "y", dy);
          break;
        case 'circle':
        case 'ellipse':
          addAttributeVal(obj, "cx", dx);
          addAttributeVal(obj, "cy", dy);
          break;

        case 'path':
          var path = obj.getAttribute("d");
          obj.setAttribute("d", updatePath(path, dx, dy));
          break;
        case 'line':
          var x1 = getAttributeVal(obj,"x1"); 
          var y1 = getAttributeVal(obj,"y1"); 
          var x2 = getAttributeVal(obj,"x2"); 
          var y2 = getAttributeVal(obj,"y2"); 
          obj.setAttribute("x1", x1+dx); 
          obj.setAttribute("y1", y1+dy); 
          obj.setAttribute("x2", x2+dx); 
          obj.setAttribute("y2", y2+dy); 
   
          break;
        default:
          break;
      }
//      obj.removeAttribute("transform");
      replaceTranslate(obj, 0, 0);
      updateRotate(obj);
    }
  }catch (e){
  }
}

function moveSelectedRectangle(dx, dy){
  if(!svg_select) return;
  svg_select.setAttribute("transform","translate("+dx+","+dy+")");
}

function updateSelectedRectangle(){
   if(!svg_select) return;
   if(selectedItems.length > 0){
     svg_select.setAttribute("visibility","visible");
   }else{
     svg_select.setAttribute("visibility","hidden");
   }
}

function clearSelectedItems(){
  for(i in selectedItems) delete selectedItems[i];
}


function replaceTranslate(obj, dx, dy){
  var trans = obj.getAttribute("transform");
  if(trans && trans.indexOf("translate")>=0){
    var strs = trans.split(' ');
    trans = "";
    for(var i=0; i<strs.length; i++){
      if(strs[i].indexOf("translate")>=0){ strs[i] = "translate("+dx+","+dy+")"; }
      trans += strs[i]+" ";
    }
    obj.setAttribute("transform", trim(trans));
  }else{
    if(trans){
      trans += " translate("+dx+","+dy+")";
      obj.setAttribute("transform", trans);
    }else{
      obj.setAttribute("transform","translate("+dx+","+dy+")");
    }
  }
  switch(getElementTag(obj)){
    case 'text':
    case 'ellipse':
    case 'path':
      updateRotate(obj,dx,dy);
      break;
    case 'polygon':
    case 'polyline':
    case 'line':
    default:
      updateRotate(obj);
      break;
  }
}

function updateRotate(obj,dx,dy){
  var trans = obj.getAttribute("transform");

  if(!trans || trans.indexOf("rotate") < 0) return; 
  var bbox = obj.getBBox();
  var x = bbox.x+bbox.width/2;
  var y = bbox.y+bbox.height/2;
  var strs = trans.split(' ');
  trans = "";

  for(var i=0; i<strs.length ;i++){
    if(strs[i].indexOf("rotate") >= 0){
       var deg = strs[i].substr(7, strs[i].indexOf(",")-7);
       if(dx) x += dx;
       if(dy) y += dy;
       strs[i] = "rotate("+deg+","+x+","+y+")";
    }
    trans += strs[i]+" ";
  }
  obj.setAttribute("transform",trim(trans));
}

function getRotateAngle(obj){
  var trans = obj.getAttribute("transform");
  if(!trans || trans.indexOf("rotate") < 0) return 0; 
  var strs = trans.split(' ');
  for(var i=0; i<strs.length ;i++){
    if(strs[i].indexOf("rotate") >= 0){
       var deg = strs[i].substr(7, strs[i].indexOf(",")-7);
       return parseInt(deg);
    }
  }
  return 0;
}

function setRotate(obj,deg){
  var trans = obj.getAttribute("transform");
  var bbox = obj.getBBox();
  var x = bbox.x+bbox.width/2;
  var y = bbox.y+bbox.height/2;

  if(!trans) trans="";
  if(trans.indexOf("rotate") < 0){
    trans = "rotate("+deg+","+x+","+y+")";
    obj.setAttribute("transform", trans);
  }else{
    var strs = trans.split(' ');
    trans = "";
    for(var i=0; i<strs.length ;i++){
      if(strs[i].indexOf("rotate") >= 0){ strs[i] = "rotate("+deg+","+x+","+y+")"; }
      trans += strs[i]+" ";
    }
    obj.setAttribute("transform",trim(trans));
  }
}

function onTouchMoveCode1(pageX, pageY){
  if(targetItem || selectedItems.length > 0){
    switch(modeSVG){
      case 'newPath':
        if(targetItem.tagName == 'path' ){
          var path = targetItem.getAttribute("d");
          path = path + ' '+ getPreviewX(pageX) + ' '+ getPreviewY(pageY) ;
          targetItem.setAttribute("d",path);
        }
        break;
      case 'newLine':
        if(targetItem.tagName == 'line' ){
          var x2 = getPreviewX(pageX);
          var y2 = getPreviewY(pageY);
          targetItem.setAttribute("x2",x2);
          targetItem.setAttribute("y2",y2);
        }
        break;
      default:
        var dx = pageX - sx;
        var dy = pageY - sy;

        if(selectedItems.length == 1 && getElementTag(selectedItems[0]) == 'line'){
          var lx = getPreviewX(pageX);
          var ly = getPreviewY(pageY);

          if(!lineEdit){
            var x1 = getAttributeVal(selectedItems[0],"x1");
            var y1 = getAttributeVal(selectedItems[0],"y1");
            var x2 = getAttributeVal(selectedItems[0],"x2");
            var y2 = getAttributeVal(selectedItems[0],"y2");
            var xc = (x1+x2)/2;
            var yc = (y1+y2)/2;
            var eS = Math.min(Math.abs(x1-lx), Math.abs(y1-ly));
            var eC = Math.min(Math.abs(xc-lx), Math.abs(yc-ly));
            var eE = Math.min(Math.abs(x2-lx), Math.abs(y2-ly));

            var minVal = Math.min(eS, Math.min(eC, eE));
            if(minVal == eS) lineEdit='start';
            else if(minVal == eE) lineEdit='end';
            else lineEdit='move';
          }
          if(lineEdit=='start'){
            selectedItems[0].setAttribute("x1",lx );
            selectedItems[0].setAttribute("y1",ly );
            setSelectBox();
          }else if(lineEdit == 'end'){
            selectedItems[0].setAttribute("x2",lx );
            selectedItems[0].setAttribute("y2",ly );
            setSelectBox();
          }else{
            replaceTranslate(selectedItems[0], dx, dy);
//            selectedItems[0].setAttribute("transform","translate("+dx+","+dy+")");
            moveSelectedRectangle(dx, dy);
          }
        }else{
          for(var i=0; i<selectedItems.length;i++){
            if(selectedItems[i]){
//              selectedItems[i].setAttribute("transform","translate("+dx+","+dy+")");
              replaceTranslate(selectedItems[i], dx, dy);
            }
          }
          moveSelectedRectangle(dx, dy);
        }
        break;
    }
    updateShowMenu();
  }else if(modeSVG == 'selector'){
    ex = pageX;
    ey = pageY;
    var x1=sx; 
    var y1=sy; 
    var x2=ex; 
    var y2=ey; 

    if(sx > ex){ x1=ex; x2=sx; }
    if(sy > ey){ y1=ey; y2=sy; }

    selectedRectangle(getPreviewX(x1), getPreviewY(y1), getPreviewX(x2), getPreviewY(y2));
  }
}

function svgInputTextExec(e){
  var inputform = document.getElementById('svg_input');
  var color=document.getElementById('svg_color');
  var size=document.getElementById('svg_size');
  if(!color || !size) return;
  var y = parseInt(inputform.style.top) + parseInt(size.value)*0.8 + 12;
  var x = parseInt(inputform.style.left) + 12;
  if(inputform.value){
    targetItem=createSVGText(inputform.value, x, y, size.value, color.value);

    appendSVGObj(targetItem);
  }
  inputform.setAttribute("type", "hidden");
  setSVGMode('selector');
}

function svgModifyTextExec(e){
  var inputform = document.getElementById('svg_input');
  editingTextObj.textContent = inputform.value;
  inputform.setAttribute("type", "hidden");
  editingTextObj.style.display='block';

  editingTextObj=null;
  setSVGMode('selector');
}

function svgInputFormAdjust(e){
  var inputform = document.getElementById('svg_input');
  inputform.size = jstrlen(inputform.value) + 1;
}

function jstrlen(str) {
   var len = 0;
   str = escape(str);
   for (var i = 0; i < str.length; i++, len++) {
      if (str.charAt(i) == "%") {
         if (str.charAt(++i) == "u") {
            i += 3;
            len++;
         }
         i++;
      }
   }
   return len;
}

function putInputForm(x, y, txt, size, id){
  var inputform = document.getElementById('svg_input');
  if(!inputform){
    inputform = document.createElement('input');
    inputform.setAttribute("id", "svg_input");
    inputform.setAttribute("style", "position:absolute;top:0px;left:0px; border:0px none");
    preview.appendChild(inputform);
  }

  if(document.addEventListner){
    if(id){
      inputform.addEventListener("onChange", svgModifyTextExec,false);
    }else{
      inputform.addEventListener("onChange", svgInputTextExec,false);
    }
    inputform.addEventListener("onkeydown", svgInputFormAdjust,false);
  }else{
    if(id){
      inputform.setAttribute("onChange", "svgModifyTextExec()");
    }else{
      inputform.setAttribute("onChange", "svgInputTextExec()");
    }
    inputform.setAttribute("onkeydown", "svgInputFormAdjust()");
  }

  inputform.setAttribute("type", "text");
  inputform.style.left=x+'px';
  inputform.style.top=y+'px';
  inputform.style.fontSize=size+'px';
  inputform.style.background='none';
  inputform.value = txt;
  inputform.size = jstrlen(txt) + 1;
  inputform.focus();
}

///// EventHandler for iPad
var firstTouch = new Date();

function onTouchStart(e){
  //e.preventDefault();
  sx=e.touches[0].pageX;
  sy=e.touches[0].pageY;
  ex=e.touches[0].pageX;
  ey=e.touches[0].pageY;

  if (e.touches.length == 1){
    var touchtime = new Date();
    var dt = touchtime.getTime() - firstTouch.getTime();
    if(editingTextObj){
       var inputform = document.getElementById('svg_input');
       inputform.setAttribute("type", "hidden");
       editingTextObj.style.display='block';
       editingTextObj=null;
    }
    if(dt < 300 ){ onDoubleTap(); }else{ onTouchStartCore(); }
    firstTouch = touchtime;
  }
    updateSelectedRectangle();
}

function onTouchMove(e){
  if (e.touches.length == 1){
    e.preventDefault();
    onTouchMoveCode1(e.touches[0].pageX, e.touches[0].pageY);
  }else if (e.touches.length == 2){
    if(selectedItems.length == 1){
      e.preventDefault();
      var dx = e.touches[0].pageX-e.touches[1].pageX;
      var dy = e.touches[0].pageY-e.touches[1].pageY;
      var th = Math.abs(Math.atan2(dy , dx)/Math.PI *180);

      if(th > 165 ||  th < 25) svg_scale_dir = 'x';
      else if(th > 65 &&  th < 115) svg_scale_dir = 'y';
      else svg_scale_dir = null;
    }
  }
}

function onTouchEnd(e){
  e.preventDefault();

  for(var i=0; i<selectedItems.length;i++){
     updateTransform(selectedItems[i]);
  }

  if(modeSVG == 'selector'){
    var x1 = getPreviewX(sx);
    var y1 = getPreviewY(sy);
    var x2 = getPreviewX(ex);
    var y2 = getPreviewY(ey);
    getSelectedObjects(x1, y1, x2, y2);
  }

  updateSelectedRectangle();
  updateTransform(svg_select);

  setSelectBox();
  updateShowMenu();
  var btn = document.getElementById('b_'+modeSVG);
  if(btn){
    btn.style.border="3px solid red";
  }
  lineEdit=null;
}


function onGestureStart(e){
  targetItem = selectedItems[0];
  if(targetItem){
   svg_wo = targetItem.getAttribute("width");
   svg_ho = targetItem.getAttribute("height");
   svg_ro = targetItem.getAttribute("r");
   svg_rxo = targetItem.getAttribute("rx");
   svg_ryo = targetItem.getAttribute("ry");
   svg_fsize = targetItem.getAttribute("font-size");
 }else{
   svg_wo = null;
   svg_ho = null;
   svg_ro = null;
   svg_rxo = null;
   svg_ryo = null;
   svg_fsize = null;
 }
}
 
function onGestureChange(e){
  var scale = e.scale;
  var rotation = e.rotation;

  if(targetItem){
    e.preventDefault();
    if (svg_wo && svg_scale_dir != 'y') targetItem.setAttribute("width", Math.round(svg_wo*scale ));
    if (svg_ho && svg_scale_dir != 'x') targetItem.setAttribute("height", Math.round(svg_ho*scale ));
    if (svg_ro) targetItem.setAttribute("r", Math.round(svg_ro*scale ));
    if (svg_rxo && svg_scale_dir != 'y') targetItem.setAttribute("rx", Math.round(svg_rxo*scale) );
    if (svg_ryo && svg_scale_dir != 'x') targetItem.setAttribute("ry", Math.round(svg_ryo*scale) );
    if (svg_fsize) targetItem.setAttribute("font-size", Math.round(svg_fsize*scale) );

    updateShowMenu();
  }
}

function onGestureEnd(e){
//  e.preventDefault();
  svg_wo = null;
  svg_ho = null;
  svg_ro = null;
  svg_rxo = null;
  svg_ryo = null;
  svg_fsize = null;
}

function onTouchStartColor(e){
  if(e.touches.length == 1){
    var ele = e.touches[0].target;
    var color;
    try{ 
      color = ele.getAttribute("color-val");
    }catch(err){  hideItemById('color-palette'); return;}
    var palette = document.getElementById('color-palette');
    var color_sel = palette.getAttribute("targetType");
    var fill_input = document.getElementById('svg_fill');
    var color_input = document.getElementById('svg_color');
    if(color) {
      for(var i=0;i