var SEARCHTIMER;
var SEARCHDELAY = 500;
var CURWORD = '';
var CURDEF = '';
var CURDEFS = null;
var CURDEFIDX = 0;
var ORIGDEF;
var DEFLOADED = false;
var PAGESHOWN = false;
var USEKEYBOARDSHORTCUTS = false;

jQuery.preloadImages = function()
{
	for(var i = 0; i<arguments.length; i++)
	{
		jQuery("<img>").attr("src", arguments[i]);
	}
}

$.preloadImages('add.gif','cancel.gif','dpgleft.gif','dpgright.gif','edit.gif','loading.gif','new.gif','ok.gif','pgleft.gif','pgright.gif','save.gif');

$(document).ready(function() {
  $('#body').submit( function() { return false; } );
  $('input.word').val('');
  $('a#about').click(function() {
    if (PAGESHOWN)
      hide_page();
    else
      show_page('doktrin','doktrin.htm');
    this.blur();
    return false;
  });
  init();
});

function myGetKeyCode(e) {
  return (e.keyCode || e.which);
}

function my_focus(obj) {
  setTimeout(function() {
    obj.focus();
    obj.setSelection();
    obj.val(obj.val());
  },1);
}

function init() {
  my_focus($('input.word'));

  $('input.word').keydown( function(e) {
    k = myGetKeyCode(e);
    switch (k) {
    case 9:  // TAB
      if (USEKEYBOARDSHORTCUTS) {
        if (DEFLOADED) {
          edit_def();
        }
        e.preventDefault();
        e.stopPropagation();
        return false;
      }
      break;

    case 13:  // ENTER
      if (!DEFLOADED) {
        clearTimeout(SEARCHTIMER);
        DEFLOADED = false;
        CURWORD = $('input.word').val().toLowerCase();
        $('div#content').empty();
        if (CURWORD.length > 1) {
          get_def();
        }
      }
      e.preventDefault();
      e.stopPropagation();
      return false;
      break;

    default:
      if ( // disable some keys as documented at http://tinyurl.com/229yqw
        (k > 47 && k < 58) || (k > 95 && k < 108) ||
        k == 110 || k == 111 || (k > 218 && k < 222) ||
        k == 187 || k == 188 || k == 190 || k == 191 ||
        k == 192 || (k == 222 && e.shiftKey)
      ) {
        e.preventDefault();
        e.stopPropagation();
        return false;
      }

    }
  });

  $('input.word').keyup( function(e) {
    k = myGetKeyCode(e);
    
    switch (k) {
    case 27: // Esc
      //if (USEKEYBOARDSHORTCUTS) {
        clearTimeout(SEARCHTIMER);
        CURWORD = '';
        CURDEFS = null;
        CURDEFIDX = 0;
        DEFLOADED = false;
        $('input.word').val('').focus();
        $('div#content').empty();

        e.preventDefault();
        e.stopPropagation();
        return false;
      //}
      break;

    case 9:  // Tab
      // do nothing -- handled by keydown
      break;

    case 13: // ENTER
      // do nothing -- handled by keydown
      break;

    default: // (Presumably) Any letter or backspace
      if ($('input.word').val() != CURWORD) {
        clearTimeout(SEARCHTIMER);
        DEFLOADED = false;
        CURWORD = $('input.word').val().toLowerCase();
        $('div#content').empty();
        if (CURWORD.length > 1) {
          SEARCHTIMER = setTimeout(function(){get_defs()},SEARCHDELAY);
        }
      }
    }
  });
}

function show_def() {
  $('div#content').html(html_def(CURDEFS[CURDEFIDX].def));

  $('a#editlink')
  .mouseover(function() {
    $('div.def').addClass('highlight');
  })
  .mouseout(function() {
    $('div.def').removeClass('highlight');
  })
  .click(function() {
    edit_def();
    return false;
  });
  
  $('a#olderdeflink').click(function() {
    CURDEFIDX++;
    show_def();
    $(this).blur();
    return false;
  });
  
  $('a#newerdeflink').click(function() {
    CURDEFIDX--;
    show_def();
    $(this).blur();
    return false;
  });
}

function get_def() {
  show_loading('mencari...');

  $.get('get_def.php', {word: CURWORD}, function(def) {
    $('input.word').val($('input.word').val().toLowerCase());
    CURDEF = def;
    DEFLOADED = true;
    show_def();
  });
}

function get_defs() {
  show_loading('mencari...');

  $.getJSON('get_defs.php', {word: CURWORD}, function(rst) {
    $('input.word').val($('input.word').val().toLowerCase());
    CURDEFS = rst.defs;
    CURDEFIDX = 0;
    DEFLOADED = true;
    show_def();
  });
}

function edit_def() {
  ORIGDEF = CURDEF;
  $('div#content').html(
    '<textarea class="def">'+CURDEFS[CURDEFIDX].def+'</textarea><div id="actions">'+
    //img_button('resetbutton','new.gif','baru') +
    img_button('savebutton','save.gif','simpan') +
    img_button('cancelbutton','cancel.gif','batal') + '</div>'
  );
  $('div#title').html('<div class="word">'+CURWORD+'</div>');

  my_focus($('textarea.def'));

  $('#cancelbutton').click(function(){
    $('div#content').html('<div class="def">'+html_def(CURDEFS[CURDEFIDX].def)+'</div>');
    $('div#title').html('<input class="word" value="'+CURWORD+'" />');
    show_def(); init();
    return false;
  });

  $('#savebutton').click(function(){
    newdef = clean_def($('textarea.def').val());
    if (newdef == '') newdef = CURDEFS[CURDEFIDX].def;

    show_loading('menyimpan...');
    $('div#title').html('<input class="word" value="'+CURWORD+'" />');

    if (newdef == clean_def(CURDEFS[CURDEFIDX].def)) {
      show_def(); init();
    } else {
      $.post('add_def.php',{word: CURWORD, def: newdef}, function(){
        get_defs();
      });
    }
    return false;
  });
  
  //if (USEKEYBOARDSHORTCUTS) {
    $('textarea.def').keyup(function(e) {
      switch (myGetKeyCode(e)) {
      case 27: // Esc
        $('div#content').html('<div class="def"></div>');
        $('div#title').html('<input class="word" value="'+CURWORD+'" />');
        show_def(); init();

        e.preventDefault();
        e.stopPropagation();
        return false;
        break;
      }
    });
  //}
}

function html_def(def) {
  def = clean_def(def);
  if (def == '') {
    return '<div class="statusmsg">belum ada definisi</div>' +
      '<div id="actions">' +
      img_button('editlink','add.gif','tambah definisi') +
      '</div>';
  } else {
    str = '<div class="def">';
    if (CURDEFS.length > 1) {
      str += '<div id="defnavbtns">';
      if (CURDEFIDX < CURDEFS.length -1) {
        str +=  img_button('olderdeflink','pgleft.gif','definisi lebih lampau');
      } else {
        str +=  img_button('d_olderdeflink','dpgleft.gif','tiada definisi lebih lampau',true);
      }
      if (CURDEFIDX > 0) {
        str += img_button('newerdeflink','pgright.gif','definisi lebih terkini');
      } else {
        str += img_button('d_newerdeflink','dpgright.gif','tiada definisi lebih terkini',true);
      }
      str += '</div>';
    }
    str += '<ol><li>' + def.replace(/\n/g,'</li><li>') + '</li></ol></div>' +
          '<div id="actions">';
    str += img_button('editlink','edit.gif','sunting definisi');
    str += '</div>';
      
    return str;
  }
}

function clean_def(def) {
  def = def.replace(/^(\s*)(.*?)(\s*)$/, '$2'); // trim
  def = def.replace(/\n +/g, '\n');          // leading spaces
  def = def.replace(/ +\n/g, '\n');          // trailing spaces
  def = def.replace(/ {2,}/g, ' ');             // double spaces  
  def = def.replace(/\n\s*\n/g, '\n');          // empty lines
  def = def.replace(/<\/?\w+>/g, '');            // tags
  return def;
}

function img_button(id,src,caption,disabled) {
  if (disabled == null) 
    disabled = false;
  if (!disabled) {
    return '<a href="" id="'+id+'" class="imgbutton">' +
    '<img src="'+src+'" alt="'+caption+'" title="'+caption+'" />' +
    '</a> ';
  } else {
    return '<img src="'+src+'" alt="'+caption+'" /> ';
  }
}

function show_loading(message) {
  $('div#content').html(
    '<div class="loading">'+
    '<img src="loading.gif" alt="'+message+'" title="'+message+'" />'+
    '</div>'
  );
}

function show_page(title, page) {
  $('div#title').html('<div class="word">'+title+'</div>');
  show_loading('tunggu sebentar...');
  r = new Date();
  r = r.getMilliseconds();
  $.get(page,{t: r},function(content) {
    $('div#content').html(
      '<div class="pagecontent">' + content + '</div>' +
      '<div id="actions">'+
      img_button('closelink','ok.gif','ok')+
      '</div>'
    );
    $('a#closelink').click(function(){
      hide_page();
      return false;
    });
  });
  PAGESHOWN = true;
}

function hide_page() {
  $('div#title').html('<input type="text" class="word" value="" />');
  $('div#content').html('<div class="statusmsg">masukkan perkataan di atas</div>');
  CURWORD = '';
  CURDEFS = null;
  DEFLOADED = false;
  PAGESHOWN = false;
  init();
}