{% load adminmedia i18n %}
<script type="text/javascript" src="{{ FEINCMS_ADMIN_MEDIA }}jquery.json-1.3.js"></script>
<script type="text/javascript">
//<![CDATA[

/*
 * Copyright (c) 2008 Greg Weber greg at gregweber.info
 * Dual licensed under the MIT and GPL licenses
 *
 * jquery plugin
 * make an html table editable by the user
 *   user clicks on a cell, edits the value,
 *   then presses enter or clicks on any cell to save the new value
 *   pressing escape returns the cell text to its orignal text
 *
 * documentation at http://gregweber.info/projects/uitableedit
 *
 * var t = $('table')
 * $.uiTableEdit( t ) // returns t
 *
 * options : off, mouseDown, find, dataEntered, dataVerify, editDone
 *   off : turns off table editing
 *   find : defaults to tbody > tr > td
 *   mousedown : called in context of the table cell (as a normal event would be)
 *     if mouseDown returns false, cell will not become editable
 *   dataVerify : called in context of the cell,
 *     if dataVerify returns false, cell will stay in editable state
 *     if dataVerify returns text, that text will replace the cell's text
 *     arguments are the cell's text, original text, event, jquery object for the cell
 *   editDone : invoked on completion
 *     arguments: td cell's new text, original text, event, and jquery element for the td cell
*/
jQuery.uiTableEdit = function(jq, options){
  function unbind(){
    return jq.find( options.find ).unbind('mousedown.uiTableEdit')
  }
  options = options || {}
  options.find = options.find || 'tbody > tr > td'
  if( options.off ){
    unbind().find('form').each( function(){ var f = $(this);
      f.parents("td:first").text( f.find(':text').attr('value') );
      f.remove();
    });
    return jq;
  }

  function bind_mouse_down( mouseDn ){
    unbind().bind('mousedown.uiTableEdit', mouseDn )
  }
  function td_edit(){
    var td = jQuery(this);

    function restore(e){
      var val = td.find('textarea').val();
      if( options.dataVerify ){
        var value = options.dataVerify.call(this, val, orig_text, e, td);
        if( value === false ){ return false; }
        if( value !== null && value !== undefined ) val = value;
      }
      td.html( "" );
      td.text( val );
      if( options.editDone ) options.editDone(val,orig_text,e,td)
      bind_mouse_down( td_edit_wrapper );
    }

    function checkEscape(e){
      if (e.keyCode === 27) {
        td.html( "" );
        td.text( orig_text );
        bind_mouse_down( td_edit_wrapper );
      } else if (e.keyCode === 13 && !e.shiftKey) {
        restore(e);
      }
    }

    var orig_text = td.text();
    var w = td.width();
    var h = td.height();
    td.html( '<form name="td-editor" action="javascript:void(0);">' +
      '<textarea type="text" name="td_edit">' + td.text() + '</textarea></form>' )
      .find('form').submit( restore ).mousedown( restore ).blur( restore ).keypress( checkEscape );

    var textarea = td.find('textarea');
    textarea.css('min-width', '150px').css('min-height', Math.max(150, textarea[0].scrollHeight)+'px');

    function focus_text(){ td.find('textarea').get(0).focus() }

    // focus bug (seen in FireFox) fixed by small delay
    setTimeout(focus_text, 50);

    /* TODO: investigate removing bind_mouse_down
     I also got rid of bind_mouse_down(restore),
     because now that you can refocus on fields that have been blurred,
     you can have multiple edits going simultaneously
    */
    bind_mouse_down( restore );
  }

  var td_edit_wrapper = !options.mouseDown ? td_edit : function(){
    if( options.mouseDown.apply(this,arguments) == false ) return false;
    td_edit.apply(this,arguments);
  };
  bind_mouse_down( td_edit_wrapper );
  return jq;
}

function td_edit_editDone(value, original, event, td) {
    var table = $(td).parents('table');
    var data = [];
    table.find('tr').each(function(){
        var row = [];
        $('td', this).each(function(){
            row.push($(this).html());
        });
        if(row.length)
            data.push(row);
    });

    table.siblings('textarea').val($.toJSON(data));
}

contentblock_init_handlers.push(function(){
    $('.order-machine textarea[name*=tablecontent]:visible').each(function(){
        var textarea = $(this);
        var data = $.secureEvalJSON(textarea.val() || '[[""]]');

        var html = '<table class="tablecontent" border="1">';

        html += '<tr><th></th>';
        for(var i=0; i<data[0].length; i++) {
            html += '<th><span class="remove-col">-</span> column <span class="insert-col">+</span></th>';
        }
        html += '</tr>';

        for(var i=0; i<data.length; i++) {
            html += '<tr>';
            html += '<th><span class="remove-row">-</span> row <span class="insert-row">+</span></th>';
            for(var j=0; j<data[i].length; j++) {
                html += '<td>'+data[i][j]+'</td>';
            }
            html += '</tr>';
        }

        html += '</table>';

        var table = textarea.hide().after(html).siblings('table');

        $.uiTableEdit(table, {editDone: td_edit_editDone});
    });
});

$('table.tablecontent th span.insert-col').live('click', function(){
    var row = $(this.parentNode.parentNode);
    var index = row.find('th').index(this.parentNode)-1; // first row has empty TH at the beginning
    var cell = $(this.parentNode);
    var table = row.parents('table');

    cell.after(cell.clone());
    table.find('tbody tr').each(function(){
        $('td:eq('+index+')', this).after('<td></td>');
    });

    $.uiTableEdit(table, {editDone: td_edit_editDone});
    return false;
});

$('table.tablecontent th span.remove-col').live('click', function(){
    var row = $(this.parentNode.parentNode);
    var index = row.find('th').index(this.parentNode)-1; // first row has empty TH at the beginning
    var cell = $(this.parentNode);
    var table = row.parents('table');

    // prevent removal of last column
    if(table.find('tr:eq(0) th').length<=2)
        return false;

    cell.remove();
    table.find('tbody tr').each(function(){
        $('td:eq('+index+')', this).remove();
    });

    $.uiTableEdit(table, {editDone: td_edit_editDone});
    return false;
});

$('table.tablecontent th span.insert-row').live('click', function(){
    var row = $(this.parentNode.parentNode);
    var table = row.parents('table');

    row.after(row.clone()).next().find('td').empty();

    $.uiTableEdit(table, {editDone: td_edit_editDone});
    return false;
});

$('table.tablecontent th span.remove-row').live('click', function(){
    var table = $(this).parents('table');

    if(table.find('tr').length<=2)
        return false;

    $(this.parentNode.parentNode).remove();

    // TODO regenerate JSON

    return false;
});

//]]>

</script>
<style type="text/css">
table.tablecontent {
    width: 620px;
}

table.tablecontent th {
    font-weight: normal;
    background: #eef;
    text-align: center;
}

table.tablecontent th span {
    cursor: pointer;
}

table.tablecontent td {
    border: 1px solid #cccccc;
    white-space: pre-wrap;
}

table.tablecontent form {
    border: 1px dashed #000;
    white-space: normal;
}

table.tablecontent form textarea {
    width: auto;
    border: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background: inherit;
}
</style>
