<?php use_helper('ModalBox'); ?>
<?php $thumbList = sfConfig::get('app_thumbnail_view_name') ?>

<?php echo form_tag('', array('onsubmit'=>'return false;')) ?>
  <div id="selected_pages"></div>
  Nhập trang riêng muốn nhúng:<br />
  <div>
    <?php echo input_tag('search_str', '', array('style'=>'width:460px;')) ?>
    <?php echo submit_tag('Tìm kiếm', array('style'=>'width:65px', 'onclick'=>'search_blog();'))?>
  </div>
  <div id="result" style="margin-bottom:10px"></div>
  <?php echo submit_tag('Cập nhật', array('style'=>'width:65px', 'onclick'=>'update_blog();')) ?>&nbsp;
  <?php echo m_finish('Thoát') ?>
  <span id="note" style="margin-left:20px"></span>
</form>

<script type="text/javascript">
  create_blog_tag = function(bl_id, bl_host, bl_title, bl_list) {
    $("selected_pages").innerHTML += "\
    <div class='blog_selected'>\
      <span class='sortlist'></span>&nbsp;\
      <input type='hidden' value='"+bl_id+"' class='bl_id'>\
      <input value='"+bl_title+"' style='width:290px;' class='bl_title'>&nbsp;&nbsp;\
      Kiểu: <select class='bl_list'>\
        <?php foreach ($thumbList as $key=>$name) echo "<option value='$key'\"+(bl_list=='$key'? ' selected': '')+\">$name</option>" ?>\
      </select>&nbsp;&nbsp;\
      <span style='text-decoration:underline; cursor:pointer;' onclick=\"if (confirm('Bạn có chắc chắn xóa?')) move_blog(this.parentNode.getAttribute('index'))\">Xóa</span>\
      <span style='font-style:italic; width:400px; color:#BBB' class='bl_host'>"+bl_host+"</span>\
    </div>";
  }

  update_indexes = function(total) {
    var indexes = document.getElementsByClassName("sortlist");
    for (var i = 1; i <= indexes.length; i++) {
      var content = "<select onchange=\"move_blog('" + i + "', this.value); this.value=" + i + ";\">";
      for (var j = 1; j <= indexes.length; j++) {
        var flag = (i == j)? " selected": "";
        content += "<option" + flag + ">" + j + "</option>";
      }
      content += "</select>";
      indexes[i-1].innerHTML = content;
      indexes[i-1].parentNode.setAttribute('index', i);
    }
  }

  search_blog = function() {
    var key = $("search_str").value;
    if (key == "") $("result").value = "";
    else new Ajax.Updater("result", "<?php echo url_for('/admin/searchblog') ?>/content/"+key);
  }

  add_blog = function(bl_id, bl_host, bl_title) {
    create_blog_tag(bl_id, bl_host, bl_title, "thumb")
    $("search_str").focus();
    $("search_str").value = "";
    $("result").innerHTML = "";
    update_indexes();
  }

  move_blog = function(current, newpos) {
    var parent = $("selected_pages");
    var contents = document.getElementsByClassName("blog_selected");
    var currenttag = contents[current-1].cloneNode(true);
    contents[current-1].remove();
    if (newpos != undefined) {  // delete if undefine newpos
      if (newpos-1 == contents.length) parent.appendChild(currenttag);
      else parent.insertBefore(currenttag, contents[newpos-1]);
    }
    update_indexes();
  }

  update_blog = function() {
    var bl_id = document.getElementsByClassName("bl_id");
    var bl_host = document.getElementsByClassName("bl_host");
    var bl_title = document.getElementsByClassName("bl_title");
    var bl_list = document.getElementsByClassName("bl_list");
    var m_bl_id = new Array();
    var m_bl_host = new Array();
    var m_bl_title = new Array();
    var m_bl_list = new Array();
    for (var i = 0; i < bl_id.length; i++) {
      m_bl_id[i] = bl_id[i].value;
      m_bl_host[i] = bl_host[i].innerHTML;
      m_bl_title[i] = bl_title[i].value;
      m_bl_list[i] = bl_list[i].value;
    }
    new Ajax.Updater("note", "<?php echo url_for('/admin/updateListblogs') ?>", {
      parameters: {"bl_id[]":m_bl_id, "bl_host[]":m_bl_host, "bl_title[]":m_bl_title, "bl_list[]":m_bl_list},
      onComplete: function(result) {Modalbox.hide()}});
  }

  <?php foreach ($params as $i => $param): ?>
  create_blog_tag(<?php echo $param['id'] ?>, "<?php echo $param['url'] ?>", "<?php echo $param['name'] ?>", "<?php echo $param['list'] ?>");
  <?php endforeach ?>
  update_indexes();
  $("MB_window").style.height = "auto";
</script>
