var selSection = -1;
var selItem = -1
var selDlg = '';
var CSSValues = false;


tplsave = function(parameter) {
  timestamp = new Date();
  var url = '/templatr/save.php?t=' + timestamp.getTime();
  var pars = parameter;
  var myAjax = new Ajax.Request(
    url,
    {
      method: 'post', 
      parameters: pars, 
      onSuccess: function() {
      },
      onComplete: function(Resp) {
        LoadImageList(true);
        window.iPreview.location.reload(true);
      },
      onFailure: reportError,
      evalScripts: true
    }
  );
//  alert(pars);
};

function show_preview(page) {
  window.iPreview.location.href = '/templatr/preview.html.php?page=' + page;
}

LoadImageList = function() {
  timestamp = new Date();
  var url = '/templatr/save.php?li=1&t=' + timestamp.getTime();
//  var pars = parameter;
  var myAjax = new Ajax.Request(
    url,
    {
      method: 'post', 
      parameters: 'section=Action&LoadImages=All', 
      onSuccess: function() {
      },
      onComplete: function(Resp) {
      },
      onFailure: reportError,
      evalScripts: true
    }
  );
//  alert(pars);
};

function hasOption(sel, val) {
  for (var i=0;sel.length>i;i++) {
    if (sel[i].value == val) {
      return i;
    }
  }
  return -1;
}

function SelectTools(section, child) {
  var EditItems = $('EditItems');
  var EditItemsHtml = $('EditItemsHtml');
  var EditItemsIdx = hasOption(EditItems, section);
  if (EditItemsIdx == -1) {
    var EditItemsIdx = hasOption(EditItems, "class_" + section);
  }
  if (EditItemsIdx > -1) {
    EditItems.options.selectedIndex = EditItemsIdx;
    filterHtmlItems(EditItems.options[EditItems.options.selectedIndex].value);
  }
  
  if (child) {
    var EditItemsHtmlIdx = hasOption(EditItemsHtml, child);
    if (EditItemsHtmlIdx > -1) {
      EditItemsHtml.options.selectedIndex = EditItemsHtmlIdx;
    }
  }
  update_dlg();
  HighlightTags();
}

function updateTools() {
  selSection = $('EditItems').options.selectedIndex;
  selItem = $('EditItemsHtml').options[$('EditItemsHtml').options.selectedIndex].value;
  var doc = window.iPreview.document;
  var elem = doc.getElementsByTagName('*');
  var s = $('EditItems');
  while (s.length > 0) {
    s.options[s.length - 1] = null;
  }
  NewEntry = new Option('Default (*)', 'default', false, true);
  s.options[s.length] = NewEntry;
  NewEntry = new Option('body', 'body', false, true);
  s.options[s.length] = NewEntry;
  for (var i=0;elem.length>i;i++) {
    if (elem[i].id != '') {
      var myid = elem[i].id;
      myid = myid.replace(/post-\d+/, '');
      if (myid != '') {
        NewEntry = new Option('#' + elem[i].id, elem[i].id, false, true);
        s.options[s.length] = NewEntry;
      }
    }
  }
  for (var i=0;elem.length>i;i++) {
    if (elem[i].className != '') {
      if (hasOption(s.options, 'class_' + elem[i].className) == -1) {
        NewEntry = new Option('  .' + elem[i].className, 'class_' + elem[i].className, false, true);
        s.options[s.length] = NewEntry;
      }
    }
  }
  $('EditItems').options.selectedIndex = selSection;
  SelectValue($('EditItemsHtml'), selItem);
}

function filterHtmlItems(section) {
  var doc = window.iPreview.document;
  if (section.match(/class_/)) {
    var sec = section.replace(/class_/, '');
    var elem = doc.getElementsByClassName(sec);
  } else {
    var elem = doc.getElementById(section);
//    alert(section + ' : ' + elem[0].tagName)
  }

  var s = $('EditItemsHtml');
  while (s.length > 0) {
    s.options[s.length - 1] = null;
  }

  NewEntry = new Option('', 'all', false, true);
  s.options[s.length] = NewEntry;

  if (elem && elem.length) {
    for (var x=0;elem.length>x;x++) {
      var items = elem[x].getElementsByTagName('*');
      for (var i=0;items.length>i;i++) {
        if (items[i].tagName != '') {
          var tag = items[i].tagName.toLowerCase();
          if (hasOption(s.options, tag) == -1) {
            NewEntry = new Option(tag, tag, false, true);
            s.options[s.length] = NewEntry;
            if (tag == 'a') {
              NewEntry = new Option('a:hover', 'a:hover', false, true);
              s.options[s.length] = NewEntry;
              NewEntry = new Option('a:link', 'a:link', false, true);
              s.options[s.length] = NewEntry;
              NewEntry = new Option('a:active', 'a:active', false, true);
              s.options[s.length] = NewEntry;
              NewEntry = new Option('a:visited', 'a:visited', false, true);
              s.options[s.length] = NewEntry;
            }
          }
        }
      }
    }
  } else {
    if (section == 'body') {
      var items = doc.body.getElementsByTagName('*');
    } else {
      if (section == 'default') {
        var items = doc.body.getElementsByTagName('*');
      } else {
        var items = elem.getElementsByTagName('*');
      }
    }
    for (var i=0;items.length>i;i++) {
      if (items[i].tagName != '') {
        var tag = items[i].tagName.toLowerCase();
        if (hasOption(s.options, tag) == -1) {
          NewEntry = new Option(tag, tag, false, true);
          s.options[s.length] = NewEntry;
          if (tag == 'a') {
            NewEntry = new Option('a:hover', 'a:hover', false, true);
            s.options[s.length] = NewEntry;
            NewEntry = new Option('a:link', 'a:link', false, true);
            s.options[s.length] = NewEntry;
            NewEntry = new Option('a:active', 'a:active', false, true);
            s.options[s.length] = NewEntry;
            NewEntry = new Option('a:visited', 'a:visited', false, true);
            s.options[s.length] = NewEntry;
          }
        }
      }
    }
  }

 SelectValue($('EditItemsHtml'), selItem);
}

function open_dlg(dlg) {
  if (!dlg) {
    toogle_dlg(dlg, false);
    return;
  }
  if (dlg) {
    toogle_dlg(dlg, true);
  } else {
    if (window.name = 'iPreview') {
      top.toogle_dlg(dlg, true);
    }
  }
}

function toogle_dlg(dlg, show) {
  var dlgs = document.getElementsByClassName('toolsdlg');
  for (i=0;dlgs.length>i;i++) {
    Element.hide(dlgs[i]);
  }
  if (show) {
    if (dlg == 'backgrounddlg') {
      var s = $('backgroundImage');
      while (s.length > 0) {
        s.options[s.length - 1] = null;
      }
      NeuerEintrag = new Option('', '', false, true);
      s.options[s.length] = NeuerEintrag;
      for (var i=0; ImageList.length>i;i++) {
        NeuerEintrag = new Option(ImageList[i], ImageList[i], false, true);
        s.options[s.length] = NeuerEintrag;
      }
    }
    if (dlg == 'listdlg') {
      var s = $('listStyleImage');
      while (s.length > 0) {
        s.options[s.length - 1] = null;
      }
      NeuerEintrag = new Option('', '', false, true);
      s.options[s.length] = NeuerEintrag;
      for (var i=0; ImageList.length>i;i++) {
        NeuerEintrag = new Option(ImageList[i], ImageList[i], false, true);
        s.options[s.length] = NeuerEintrag;
      }
    }
    Element.show(dlg);
    selDlg = dlg;
    update_dlg();
  } else {
    selDlg = '';
  }
}

function SelectValue(sel, val) {
  var idx = hasOption($(sel), val);
  if (idx > -1) {
    $(sel).selectedIndex = idx;
  }
}

function SetValue(sel, val) {
  if (!sel) return false;
  if (!$(sel)) return false;
  if ($(sel).tagName) {
    if ($(sel).tagName == 'SELECT') {
      SelectValue(sel, val);
      return true;
    }
    if ($(sel).tagName == 'INPUT') {
      $(sel).value = val;
      return true;
    }
  }
}

function FillDialogFields(section, tag, name) {
  if ($(name)) {
    SetValue(name, '');
    if (CSSValues) {
      if (CSSValues[section]) {
        if (CSSValues[section][tag]) {
          if (CSSValues[section][tag][name]) {
            var val = CSSValues[section][tag][name];
            if (val == 'undefined') {
              val = '';
            }
            if ($('unit' + name)) {
              if (val.match(/px$/)) {
                val = val.replace(/px$/, '');
                SelectValue($('unit' + name), 'px');
              }
              if (val.match(/pt$/)) {
                val = val.replace(/pt$/, '');
                SelectValue($('unit' + name), 'pt');
              }
              if (val.match(/em$/)) {
                val = val.replace(/em$/, '');
                SelectValue($('unit' + name), 'em');
              }
              if (val.match(/percent$/)) {
                val = val.replace(/percent$/, '');
                SelectValue($('unit' + name), 'percent');
              }
            }
            SetValue(name, val);
          }
        }
      }
    }
  }
}

function update_dlg() {
  if (selDlg == '') return false;
  var section = $('EditItems').options[$('EditItems').selectedIndex].value;
  var item = $('EditItemsHtml').options[$('EditItemsHtml').selectedIndex].value;
//  alert(item);
  if (item == 'all') {
    item = 'def';
  }
  switch (selDlg) {
    case "sizedlg":
      FillDialogFields(section, item, 'display');
      FillDialogFields(section, item, 'width');
      FillDialogFields(section, item, 'height');
      $('SaveButton').onclick = save_size;
      break;
    case "listdlg":
      FillDialogFields(section, item, 'listStyleType');
      FillDialogFields(section, item, 'listStylePosition');
      FillDialogFields(section, item, 'listStyleImage');
      $('SaveButton').onclick = save_list;
      break;
    case "positiondlg":
      FillDialogFields(section, item, 'top');
      FillDialogFields(section, item, 'left');
      FillDialogFields(section, item, 'bottom');
      FillDialogFields(section, item, 'right');
      FillDialogFields(section, item, 'position');
      FillDialogFields(section, item, 'float');
      $('SaveButton').onclick = save_position;
      break;
    case "borderdlg":
      FillDialogFields(section, item, 'bsall');
      FillDialogFields(section, item, 'bstop');
      FillDialogFields(section, item, 'bsleft');
      FillDialogFields(section, item, 'bsbottom');
      FillDialogFields(section, item, 'bsright');
      FillDialogFields(section, item, 'bwall');
      FillDialogFields(section, item, 'bwtop');
      FillDialogFields(section, item, 'bwleft');
      FillDialogFields(section, item, 'bwbottom');
      FillDialogFields(section, item, 'bwright');
      FillDialogFields(section, item, 'bcall');
      FillDialogFields(section, item, 'bctop');
      FillDialogFields(section, item, 'bcleft');
      FillDialogFields(section, item, 'bcbottom');
      FillDialogFields(section, item, 'bcright');
      $('SaveButton').onclick = save_border;
      break;
    case "margindlg":
      FillDialogFields(section, item, 'marginall');
      FillDialogFields(section, item, 'margintop');
      FillDialogFields(section, item, 'marginleft');
      FillDialogFields(section, item, 'marginbottom');
      FillDialogFields(section, item, 'marginright');
      $('SaveButton').onclick = save_margin;
      break;
    case "paddingdlg":
      FillDialogFields(section, item, 'paddingall');
      FillDialogFields(section, item, 'paddingtop');
      FillDialogFields(section, item, 'paddingleft');
      FillDialogFields(section, item, 'paddingbottom');
      FillDialogFields(section, item, 'paddingright');
      $('SaveButton').onclick = save_padding;
      break;
    case "aligndlg":
      FillDialogFields(section, item, 'textalign');
      FillDialogFields(section, item, 'verticalalign');
      $('SaveButton').onclick = save_align;
      break;
    case "fontdlg":
      FillDialogFields(section, item, 'fontFamily');
      FillDialogFields(section, item, 'fontSize');
      FillDialogFields(section, item, 'fontWeight');
      FillDialogFields(section, item, 'fontColor');
      FillDialogFields(section, item, 'textDecoration');
      $('SaveButton').onclick = save_font;
      break;
    case "backgrounddlg":
      FillDialogFields(section, item, 'backgroundColor');
      FillDialogFields(section, item, 'backgroundImage');
      FillDialogFields(section, item, 'backgroundRepeat');
      FillDialogFields(section, item, 'backgroundPosition');
      $('SaveButton').onclick = save_background;
      break;
  };
}

function toogle_toolbar(bar, show) {
  var bars = document.getElementsByClassName('toolbar');
  for (i=0;bars.length>i;i++) {
    Element.hide(bars[i]);
    Element.removeClassName('a' + bars[i].id, 'active');
  }
  if (show) {
    Element.show(bar);
    Element.addClassName('a' + bar, 'active');
    window.scrollTo(0,0);
    if (bar == 'ImageTools') {
      $('ToolbarStatus').innerHTML = 'File will begin to upload just after selection.... ';
    }
    if (bar == 'ExpertTools') {
      $('ToolbarStatus').innerHTML = '1. Click on an Element below. 2. Select the Action above. 3. After changing the element click save ...';
    }
  }
}

function ToogleDebugColors() {
  if (Element.hasClassName($('mainwrap'), 'debug')) {
    Element.removeClassName($('mainwrap'), 'debug');
  } else {
    Element.addClassName($('mainwrap'), 'debug');
  }
}

function HighlightTags() {
  var EditItems = $('EditItems');
  var EditItemsHtml = $('EditItemsHtml');
  if (EditItems.selectedIndex > -1) {
    var section = EditItems.options[EditItems.selectedIndex].value;
  }
  if (EditItemsHtml.selectedIndex > -1) {
    var childs = EditItemsHtml.options[EditItemsHtml.selectedIndex].value;
    if (childs == 'all') {
      childs = false;
    }
  }
  var doc = window.iPreview.document;
  var obj = doc.getElementsByTagName('*');
  for (var i=0;obj.length>i;i++) {
    if (Element.hasClassName(obj[i], 'HighlightSection')) {
      Element.removeClassName(obj[i], 'HighlightSection');
    }
    if (Element.hasClassName(obj[i], 'HighlightChild')) {
      Element.removeClassName(obj[i], 'HighlightChild');
    }
  }

  if (!$('ShowHighlightColors').checked) return false;

  if (section.match(/class_/)) {
    var sec = section.replace(/class_/, '');
    var elem = doc.getElementsByClassName(sec);
    for (var i=0; elem.length > i; i++) {
      Element.addClassName(elem[i], 'HighlightSection');
    }
  } else if(section == 'body' || section == 'default')  {
    var elem = doc.body;
    Element.addClassName(elem, 'HighlightSection');
  } else {
    var elem = doc.getElementById(section);
    Element.addClassName(elem, 'HighlightSection');
  }

  if (childs) {
    if (childs.match(/\:/)) {
      childs = childs.replace(/\:.*$/, '');
    }
    if (elem && elem.length) {
      for (x=0; elem.length>x;x++) {
        var elements = elem[x];
        var items = elements.getElementsByTagName(childs);
        for (var i=0;items.length>i;i++) {
          if (items[i].tagName != '') {
            Element.addClassName(items[i], 'HighlightChild');
          }
        }
      }
    } else {
      var items = elem.getElementsByTagName(childs);
      for (var i=0;items.length>i;i++) {
        if (items[i].tagName != '') {
          Element.addClassName(items[i], 'HighlightChild');
        }
      }
    }
  }
}

function init_layoutdlg() {
  var dlg = HTML_dlgframe('layout');
  var btn = HTML_savebutton('layout');
  var html = $('Layouts').innerHTML;
  if ($('mainwrap')) {
    new Insertion.Bottom($('mainwrap'), dlg);
  } else {
    new Insertion.After($('plugin'), dlg);
  }
  var box = $('layout-form');
  new Insertion.Bottom(box, html);
  $('Layouts').parentNode.removeChild($('Layouts'));
}

function init_sizedlg() {
  var dlg = HTML_dlgframe('size');
  var btn = HTML_savebutton('size');
  var html = '';
  html += '<div style="float:left">';
  html += 'display:<br />';
  html += '<select class="sizeinput" id="display" name="display" value="" title="" style="width:140px;">';
  html += '<option value=""></option>';
  html += '<option value="block">block</option>';
  html += '<option value="inline">inline</option>';
  html += '<option value="list-item">list-item</option>';
  html += '<option value="run-in">run-in</option>';
  html += '<option value="compact">compact</option>';
  html += '<option value="marker">marker</option>';
  html += '<option value="inline-table">inline-table</option>';
  html += '<option value="table-row-group">table-row-group</option>';
  html += '<option value="table-header-group">table-header-group</option>';
  html += '<option value="table-footer-group">table-footer-group</option>';
  html += '<option value="table-row">table-row</option>';
  html += '<option value="table-column-group">table-column-group</option>';
  html += '<option value="table-column">table-column</option>';
  html += '<option value="table-cell">table-cell</option>';
  html += '<option value="table-caption">table-caption</option>';
  html += '<option value="table">table</option>';
  html += '<option value="none">none</option>';
  html += '</select>';
  html += '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'height:<br />';
  html += '<input class="sizeinput" type="text" id="height" name="height" value="" title="">';
  html += '</div>';
  html += '<div style="float:left">';
  html += '&nbsp;<br />';
  html += '' + HTML_units_select('height') + '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'width:<br />';
  html += '<input class="sizeinput" type="text" id="width" name="width" value="" title="">';
  html += '</div>';
  html += '<div style="float:left">';
  html += '&nbsp;<br />';
  html += '' + HTML_units_select('width') + '';
  html += '</div>';
  html += '<div style="clear:both; visibility:hide; height: 1px;"></div>';

  if ($('mainwrap')) {
    new Insertion.Bottom($('ExpertTools'), dlg);
  } else {
    new Insertion.Bottom($('ExpertTools'), dlg);
  }
  var box = $('size-form');
  new Insertion.Bottom(box, html);
  $('SaveButton').onclick = save_size;
//  new Insertion.Bottom(box, btn);
}

function init_listdlg() {
  var dlg = HTML_dlgframe('list');
  var btn = HTML_savebutton('list');
  var html = '';
  html += '<div style="float:left">';
  html += 'Type:<br />';
  html += '<select class="sizeinput" id="listStyleType" name="listStyleType" value="" title="" style="width:140px;">';
  html += '<option value=""></option>';
  html += '<option value="none">none</option>';
  html += '<option value="disc">disc</option>';
  html += '<option value="circle">circle</option>';
  html += '<option value="square">square</option>';
  html += '<option value="decimal">decimal</option>';
  html += '<option value="decimal-leading-zero">decimal-leading-zero</option>';
  html += '<option value="lower-roman">lower-roman</option>';
  html += '<option value="upper-roman">upper-roman</option>';
  html += '<option value="lower-alpha">lower-alpha</option>';
  html += '<option value="upper-alpha">upper-alpha</option>';
  html += '<option value="lower-latin">lower-latin</option>';
  html += '<option value="upper-latin">upper-latin</option>';
  html += '<option value="lower-greek">lower-greek</option>';
  html += '<option value="hebrew">hebrew</option>';
  html += '<option value="armenian">armenian</option>';
  html += '<option value="georgian">georgian</option>';
  html += '<option value="cjk-ideographic">cjk-ideographic</option>';
  html += '<option value="hiragana-iroha">hiragana-iroha</option>';
  html += '<option value="hiragana">hiragana</option>';
  html += '<option value="katakana-iroha">katakana-iroha</option>';
  html += '<option value="katakana">katakana</option>';
  html += '</select>';
  html += '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'Position:<br />';
  html += '<select class="sizeinput" type="text" id="listStylePosition" name="listStylePosition" value="" title="" style="width:140px;">';
  html += '<option value=""></option>';
  html += '<option value="inside">inside</option>';
  html += '<option value="outside">outside</option>';
  html += '</select>';
  html += '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'Image:<br />';
  html += '<select class="sizeinput" type="text" id="listStyleImage" name="listStyleImage" value="" title="" style="width:240px;">';
  html += '<option value=""></option>';
  html += '</select>';
  html += '</div>';
  html += '<div style="clear:both; visibility:hide; height: 1px;"></div>';

  if ($('mainwrap')) {
    new Insertion.Bottom($('ExpertTools'), dlg);
  } else {
    new Insertion.Bottom($('ExpertTools'), dlg);
  }
  var box = $('list-form');
  new Insertion.Bottom(box, html);
  $('SaveButton').onclick = save_list;
//  new Insertion.Bottom(box, btn);
}

function init_positiondlg() {
  var dlg = HTML_dlgframe('position');
  var btn = HTML_savebutton('position');
  var html = '';

  html += '<div style="float:left;">';
  html += 'float:<br />' + HTML_float_select() + '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'position:<br />' + HTML_position_select('position') + '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'top:<br/>';
  html += '<input class="sizeinput" type="text" id="top" name="top" value="">';
  html += '</div>';
  html += '<div style="float:left">';
  html += '&nbsp;<br />';
  html += '' + HTML_units_select('top') + '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'left:<br/>';
  html += '<input class="sizeinput" type="text" id="left" name="left" value="">';
  html += '</div>';
  html += '<div style="float:left">';
  html += '&nbsp;<br />';
  html += '' + HTML_units_select('left') + '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'bottom:<br/>';
  html += '<input class="sizeinput" type="text" id="bottom" name="bottom" value="">';
  html += '</div>';
  html += '<div style="float:left">';
  html += '&nbsp;<br />';
  html += '' + HTML_units_select('bottom') + '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'right:<br/>';
  html += '<input class="sizeinput" type="text" id="right" name="right" value="">';
  html += '</div>';
  html += '<div style="float:left">';
  html += '&nbsp;<br />';
  html += '' + HTML_units_select('right') + '';
  html += '</div>';
  html += '<div style="clear:both; visibility:hide; height: 1px;"></div>';

  if ($('mainwrap')) {
    new Insertion.Bottom($('ExpertTools'), dlg);
  } else {
    new Insertion.Bottom($('ExpertTools'), dlg);
  }
  var box = $('position-form');
  new Insertion.Bottom(box, html);
  $('SaveButton').onclick = save_position;
//  new Insertion.Bottom(box, btn);
}

function init_borderdlg() {
  var dlg = HTML_dlgframe('border');
  var btn = HTML_savebutton('border');
  var html = '';
  html += '<table align=left border=0 cellspacing=2 cellpadding=0>';
  html += '<tr>';
  html += '<td>&nbsp;</td>';
  html += '<td align=center>size</td>';
  html += '<td>&nbsp;</td>';
  html += '<td align=center>style</td>';
  html += '<td align=center>color</td>';
  html += '</tr>';
  html += HTML_bordersline('All');
  html += '</table>';

  html += '<table align=left border=0 cellspacing=2 cellpadding=0>';
  html += '<tr>';
  html += '<td>&nbsp;</td>';
  html += '<td align=center>size</td>';
  html += '<td>&nbsp;</td>';
  html += '<td align=center>style</td>';
  html += '<td align=center>color</td>';
  html += '</tr>';
  html += HTML_bordersline('Top');
  html += HTML_bordersline('Left');
  html += HTML_bordersline('Bottom');
  html += HTML_bordersline('Right');
  html += '</table>';
  html += '<div style="clear:both; visibility:hide; height: 1px;"></div>';

  if ($('mainwrap')) {
    new Insertion.Bottom($('ExpertTools'), dlg);
  } else {
    new Insertion.Bottom($('ExpertTools'), dlg);
  }

  var box = $('border-form');
  new Insertion.Bottom(box, html);
  $('SaveButton').onclick = save_border;
//  new Insertion.Bottom(box, btn);
}

function init_margindlg() {
  var dlg = HTML_dlgframe('margin');
  var btn = HTML_savebutton('margin');
  var html = '';

  html += '<div style="float:left">';
  html += 'All:<br /><input class="sizeinput" type="text" id="marginall" name="marginall">';
  html += '</div>';
  html += '<div style="float:left">';
  html += '&nbsp;<br />';
  html += '' + HTML_units_select('marginall') + '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'Top:<br /><input class="sizeinput" type="text" id="margintop" name="margintop">';
  html += '</div>';
  html += '<div style="float:left">';
  html += '&nbsp;<br />';
  html += '' + HTML_units_select('margintop') + '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'Left:<br /><input class="sizeinput" type="text" id="marginleft" name="marginleft">';
  html += '</div>';
  html += '<div style="float:left">';
  html += '&nbsp;<br />';
  html += '' + HTML_units_select('marginleft') + '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'Bottom:<br /><input class="sizeinput" type="text" id="marginbottom" name="marginbottom">';
  html += '</div>';
  html += '<div style="float:left">';
  html += '&nbsp;<br />';
  html += '' + HTML_units_select('marginbottom') + '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'Right:<br /><input class="sizeinput" type="text" id="marginright" name="marginright">';
  html += '</div>';
  html += '<div style="float:left">';
  html += '&nbsp;<br />';
  html += '' + HTML_units_select('marginright') + '';
  html += '</div>';
  html += '<div style="clear:both; visibility:hide; height: 1px;"></div>';

  if ($('mainwrap')) {
    new Insertion.Bottom($('ExpertTools'), dlg);
  } else {
    new Insertion.Bottom($('ExpertTools'), dlg);
  }

  var box = $('margin-form');
  new Insertion.Bottom(box, html);
  $('SaveButton').onclick = save_margin;
//  new Insertion.Bottom(box, btn);
}

function init_paddingdlg() {
  var dlg = HTML_dlgframe('padding');
  var btn = HTML_savebutton('padding');
  var html = '';

  html += '<div style="float:left">';
  html += 'All:<br /><input class="sizeinput" type="text" id="paddingall" name="paddingall">';
  html += '</div>';
  html += '<div style="float:left">';
  html += '&nbsp;<br />';
  html += '' + HTML_units_select('paddingall') + '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'Top:<br /><input class="sizeinput" type="text" id="paddingtop" name="paddingtop">';
  html += '</div>';
  html += '<div style="float:left">';
  html += '&nbsp;<br />';
  html += '' + HTML_units_select('paddingtop') + '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'Left:<br /><input class="sizeinput" type="text" id="paddingleft" name="paddingleft">';
  html += '</div>';
  html += '<div style="float:left">';
  html += '&nbsp;<br />';
  html += '' + HTML_units_select('paddingleft') + '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'Bottom:<br /><input class="sizeinput" type="text" id="paddingbottom" name="paddingbottom">';
  html += '</div>';
  html += '<div style="float:left">';
  html += '&nbsp;<br />';
  html += '' + HTML_units_select('paddingbottom') + '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'Right:<br /><input class="sizeinput" type="text" id="paddingright" name="paddingright">';
  html += '</div>';
  html += '<div style="float:left">';
  html += '&nbsp;<br />';
  html += '' + HTML_units_select('paddingright') + '';
  html += '</div>';
  html += '<div style="clear:both; visibility:hide; height: 1px;"></div>';

  if ($('mainwrap')) {
    new Insertion.Bottom($('ExpertTools'), dlg);
  } else {
    new Insertion.Bottom($('ExpertTools'), dlg);
  }

  var box = $('padding-form');
  new Insertion.Bottom(box, html);
  $('SaveButton').onclick = save_padding;
//  new Insertion.Bottom(box, btn);
}

function init_aligndlg() {
  var dlg = HTML_dlgframe('align');
  var btn = HTML_savebutton('align');
  var html = '';

  html += '<div style="float:left">';
  html += 'horizontal:<br />';
  html += '<input class="sizeinput" type="text" id="textalign" name="textalign">';
  html += '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'vertical:<br />';
  html += '<input class="sizeinput" type="text" id="verticalalign" name="verticalalign">';
  html += '</div>';
  html += '<div style="clear:both; visibility:hide; height: 1px;"></div>';

  if ($('mainwrap')) {
    new Insertion.Bottom($('ExpertTools'), dlg);
  } else {
    new Insertion.Bottom($('ExpertTools'), dlg);
  }

  var box = $('align-form');
  new Insertion.Bottom(box, html);
  $('SaveButton').onclick = save_align;
//  new Insertion.Bottom(box, btn);
}

function init_fontdlg() {
  var dlg = HTML_dlgframe('font');
  var btn = HTML_savebutton('font');
  var html = '';

  html += '<div style="float:left">';
  html += 'Family:<br />';
  html += '<input class="" type="text" id="fontFamily" name="fontFamily" style="width:240px;">';
  html += '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'Size:<br />';
  html += '<input class="sizeinput" type="text" id="fontSize" name="fontSize">';
  html += '</div>';
  html += '<div style="float:left">';
  html += '&nbsp;<br />';
  html += '' + HTML_units_select('fontSize') + '';
  html += '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'Color:<br />';
  html += '<input class="colorinput" type="text" id="fontColor" name="fontColor" onclick="colpicker(this);">';
  html += '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'Weight:<br />';
  html += '<input class="sizeinput" type="text" id="fontWeight" name="fontWeight">';
  html += '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'Text Deco.:<br />';
  html += '<input class="sizeinput" type="text" id="textDecoration" name="textDecoration">';
  html += '</div>';
  html += '<div style="clear:both; visibility:hide; height: 1px;"></div>';

  if ($('mainwrap')) {
    new Insertion.Bottom($('ExpertTools'), dlg);
  } else {
    new Insertion.Bottom($('ExpertTools'), dlg);
  }
  var box = $('font-form');
  new Insertion.Bottom(box, html);
  $('SaveButton').onclick = function () {
    save_font;
  }
//  new Insertion.Bottom(box, btn);
}

function init_backgrounddlg() {
  var dlg = HTML_dlgframe('background');
  var btn = HTML_savebutton('background');
  var html = '';
  html += '<div style="float:left">';
  html += 'Color:<br />';
  html += '<input class="colorinput" type="text" id="backgroundColor" name="backgroundColor" onclick="colpicker(this);">';
  html += '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left;">';
  html += 'Image:<br />';
  html += '<select id="backgroundImage" name="backgroundImage" style="width:240px;font-size:14px;">';
  html += '<option value="">none</option>';
  html += '</select>';
  html += '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'Repeat:<br />';
  html += '<select id="backgroundRepeat" name="backgroundRepeat" style="width:100px;font-size:14px;">';
  html += '<option value=""></option>';
  html += '<option value="no-repeat">no-repeat</option>';
  html += '<option value="repeat-x">repeat-x</option>';
  html += '<option value="repeat-y">repeat-y</option>';
  html += '</select>';
  html += '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'Pos. Hor.:<br />';
  html += '<input class="sizeinput" type="text" id="backgroundPositionH" name="backgroundPositionH">';
  html += '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="float:left">';
  html += 'Pos. Ver.:<br />';
  html += '<input class="sizeinput" type="text" id="backgroundPositionV" name="backgroundPositionV">'
  html += '&nbsp;&nbsp;';
  html += '</div>';
  html += '<div style="clear:both; visibility:hide; height: 1px;"></div>';

  if ($('mainwrap')) {
    new Insertion.Bottom($('ExpertTools'), dlg);
  } else {
    new Insertion.Bottom($('ExpertTools'), dlg);
  }
  var box = $('background-form');
  new Insertion.Bottom(box, html);
  $('SaveButton').onclick = save_background;
//  new Insertion.Bottom(box, btn);
}

save_size = function() {
  var doc = window.iPreview.document;
  var Section = $('EditItems').value;
  var Items = $('EditItemsHtml').value;
  var display = $('display').value;
  var height = $('height').value;
  var width = $('width').value;
  var parameter = '';
  parameter += 'section=' + Section;
  parameter += '&items=' + Items;
  parameter += '&display=' + display;
  if (height != '') height = height + $('unitheight').value;
  parameter += '&height=' + height;
  if (width != '') width = width + $('unitwidth').value;
  parameter += '&width=' + width;
  tplsave(parameter, true);
}

save_list = function() {
  var doc = window.iPreview.document;
  var Section = $('EditItems').value;
  var Items = $('EditItemsHtml').value;
  var listStyleType = $('listStyleType').value;
  var listStylePosition = $('listStylePosition').value;
  var listStyleImage = $('listStyleImage').value;
  var parameter = '';
  parameter += 'section=' + Section;
  parameter += '&items=' + Items;
  parameter += '&listStyleType=' + listStyleType;
  parameter += '&listStylePosition=' + listStylePosition;
  parameter += '&listStyleImage=' + listStyleImage;
  tplsave(parameter, true);
}

save_position = function() {
  var doc = window.iPreview.document;
  var Section = $('EditItems').value;
  var Items = $('EditItemsHtml').value;
  var position = $('position').value;
  var top = $('top').value;
  var left = $('left').value;
  var bottom = $('bottom').value;
  var right = $('right').value;
  var float = $('float').value;
  var parameter = '';
  parameter += 'section=' + Section;
  parameter += '&items=' + Items;
  parameter += '&position=' + position;
  if (top != '') top = top + $('unittop').value;
  parameter += '&top=' + top;
  if (left != '') left = left + $('unitleft').value;
  parameter += '&left=' + left;
  if (bottom != '') bottom = bottom + $('unitbottom').value;
  parameter += '&bottom=' + bottom;
  if (right != '') right = right + $('unitright').value;
  parameter += '&right=' + right;
  parameter += '&float=' + float;
  tplsave(parameter, true);
}

save_margin = function() {
  var doc = window.iPreview.document;
  var Section = $('EditItems').value;
  var Items = $('EditItemsHtml').value;
  var marginall = $('marginall').value;
  var margintop = $('margintop').value;
  var marginleft = $('marginleft').value;
  var marginbottom = $('marginbottom').value;
  var marginright = $('marginright').value;
  var parameter = '';
  parameter += 'section=' + Section;
  parameter += '&items=' + Items;
  if ((marginall != '') && (marginall != 'auto')) marginall = marginall + $('unitmarginall').value;
  parameter += '&marginall=' + marginall;
  if ((margintop != '') && (margintop != 'auto')) margintop = margintop + $('unitmargintop').value;
  parameter += '&margintop=' + margintop;
  if ((marginleft != '') && (marginleft != 'auto')) marginleft = marginleft + $('unitmarginleft').value;
  parameter += '&marginleft=' + marginleft;
  if ((marginbottom != '') && (marginbottom != 'auto')) marginbottom = marginbottom + $('unitmarginbottom').value;
  parameter += '&marginbottom=' + marginbottom;
  if ((marginright != '') && (marginright != 'auto')) marginright = marginright + $('unitmarginright').value;
  parameter += '&marginright=' + marginright;
  tplsave(parameter, true);
}

save_padding = function() {
  var doc = window.iPreview.document;
  var Section = $('EditItems').value;
  var Items = $('EditItemsHtml').value;
  var paddingall = $('paddingall').value;
  var paddingtop = $('paddingtop').value;
  var paddingleft = $('paddingleft').value;
  var paddingbottom = $('paddingbottom').value;
  var paddingright = $('paddingright').value;
  var parameter = '';
  parameter += 'section=' + Section;
  parameter += '&items=' + Items;
  if ((paddingall != '') && (paddingall != 'auto')) paddingall = paddingall + $('unitpaddingall').value;
  parameter += '&paddingall=' + paddingall;
  if ((paddingtop != '') && (paddingtop != 'auto')) paddingtop = paddingtop + $('unitpaddingtop').value;
  parameter += '&paddingtop=' + paddingtop;
  if ((paddingleft != '') && (paddingleft != 'auto')) paddingleft = paddingleft + $('unitpaddingleft').value;
  parameter += '&paddingleft=' + paddingleft;
  if ((paddingbottom != '') && (paddingbottom != 'auto')) paddingbottom = paddingbottom + $('unitpaddingbottom').value;
  parameter += '&paddingbottom=' + paddingbottom;
  if ((paddingright != '') && (paddingright != 'auto')) paddingright = paddingright + $('unitpaddingright').value;
  parameter += '&paddingright=' + paddingright;
  tplsave(parameter, true);
}

save_align = function() {
  var doc = window.iPreview.document;
  var Section = $('EditItems').value;
  var Items = $('EditItemsHtml').value;
  var textalign = $('textalign').value;
  var verticalalign = $('verticalalign').value;
  var parameter = '';
  parameter += 'section=' + Section;
  parameter += '&items=' + Items;
  parameter += '&textalign=' + textalign;
  parameter += '&verticalalign=' + verticalalign;
  tplsave(parameter, true);
}

save_border = function() {
  var doc = window.iPreview.document;
  var Section = $('EditItems').value;
  var Items = $('EditItemsHtml').value;
  var bsall = $('bsall').value;
  var bstop = $('bstop').value;
  var bsleft = $('bsleft').value;
  var bsbottom = $('bsbottom').value;
  var bsright = $('bsright').value;
  var bwall = $('bwall').value;
  var bwtop = $('bwtop').value;
  var bwleft = $('bwleft').value;
  var bwbottom = $('bwbottom').value;
  var bwright = $('bwright').value;
  var bcall = $('bcall').value;
  var bctop = $('bctop').value;
  var bcleft = $('bcleft').value;
  var bcbottom = $('bcbottom').value;
  var bcright = $('bcright').value;
  bcall = bcall.replace(/\#/, '');
  bctop = bctop.replace(/\#/, '');
  bcleft = bcleft.replace(/\#/, '');
  bcbottom = bcbottom.replace(/\#/, '');
  bcright = bcright.replace(/\#/, '');
  var parameter = '';
  parameter += 'section=' + Section;
  parameter += '&items=' + Items;
  parameter += '&bsall=' + bsall;
  parameter += '&bstop=' + bstop;
  parameter += '&bsleft=' + bsleft;
  parameter += '&bsbottom=' + bsbottom;
  parameter += '&bsright=' + bsright;
  if (bwall != '') bwall = bwall + $('unitbwall').value;
  parameter += '&bwall=' + bwall;
  if (bwtop != '') bwtop = bwtop + $('unitbwtop').value;
  parameter += '&bwtop=' + bwtop;
  if (bwleft != '') bwleft = bwleft + $('unitbwleft').value;
  parameter += '&bwleft=' + bwleft;
  if (bwbottom != '') bwbottom = bwbottom + $('unitbwbottom').value;
  parameter += '&bwbottom=' + bwbottom;
  if (bwright != '') bwright = bwright + $('unitbwright').value;
  parameter += '&bwright=' + bwright;
  parameter += '&bcall=' + bcall;
  parameter += '&bctop=' + bctop;
  parameter += '&bcleft=' + bcleft;
  parameter += '&bcbottom=' + bcbottom;
  parameter += '&bcright=' + bcright;
  tplsave(parameter, true);
}

save_font = function() {
  var doc = window.iPreview.document;
  var Section = $('EditItems').value;
  var Items = $('EditItemsHtml').value;
  var fontFamily = $('fontFamily').value;
  var fontSize = $('fontSize').value;
  var fontWeight = $('fontWeight').value;
  var fontColor = $('fontColor').value;
  var textDecoration = $('textDecoration').value;
  fontColor = fontColor.replace(/\#/, '');
  var parameter = '';
  parameter += 'section=' + Section;
  parameter += '&items=' + Items;
  parameter += '&fontFamily=' + fontFamily;
  if (fontSize != '') fontSize = fontSize + $('unitfontSize').value;
  parameter += '&fontSize=' + fontSize;
  parameter += '&fontWeight=' + fontWeight;
  parameter += '&fontColor=' + fontColor;
  parameter += '&textDecoration=' + textDecoration;
  tplsave(parameter, true);
}

save_background = function() {
  var doc = window.iPreview.document;
  var Section = $('EditItems').value;
  var Items = $('EditItemsHtml').value;
  var backgroundColor = $('backgroundColor').value;
  var backgroundImage = $('backgroundImage').value;
  var backgroundRepeat = $('backgroundRepeat').value;
  var backgroundPosition = $('backgroundPositionH').value;
  backgroundColor = backgroundColor.replace(/\#/, '');
  var parameter = '';
  parameter += 'section=' + Section;
  parameter += '&items=' + Items;
  parameter += '&backgroundColor=' + backgroundColor;
  parameter += '&backgroundImage=' + backgroundImage;
  parameter += '&backgroundRepeat=' + backgroundRepeat;
  parameter += '&backgroundPosition=' + backgroundPosition;
  tplsave(parameter, true);
}

DeleteImages = function() {
  var parameter = '';
  parameter += 'section=Action';
  parameter += '&DeleteImages=All';
  tplsave(parameter, true);
}

/* This function is called when user selects file in file dialog */
function jsUpload(upload_field) {
  var re_text = /\.jpg|\.png|\.gif|\.bmp/i;
  var filename = upload_field.value;

  /* Checking file type */
  if (filename.search(re_text) == -1) {
    alert("File does not have image(jpg, png, gif, bmp) extension");
    upload_field.form.reset();
    return false;
  }

  upload_field.form.submit();
  document.getElementById('ToolbarStatus').innerHTML = "uploading file...";
  upload_field.disabled = true;
  return true;
}