// For getting area
jQuery.fn.areapicker = function(opt)
{
  if (this.size() == 1)
  {
    return this.areapicker_construct(opt);
  }
  else
  {
    return this.each(function()
    {
      $(this).areapicker_construct(opt);
    });
  }
}

jQuery.fn.areapicker_construct = function(opt)
{
  // Checking of instance existence
  if (typeof this.attr('global_uid') != 'undefined' && opt != 'reset')
  {
    if (typeof jQuery.areapicker.instances[this.attr('global_uid')] != 'undefined')
      return jQuery.areapicker.instances[this.attr('global_uid')];
  }
  
  // Combining options  
  var opt = jQuery.extend({
      labels : "Propinsi,Kota,Kecamatan,Kelurahan",
      url : "http://",
      section : 1,
      on_select : function(){}
    }, opt);
    
  // Properties
  this.labels = opt.labels.split(',');
    
  // Functions 
  
  /**
   * Show Area Dialog
   */
  this.showAreaDialog = function(force)
  {
    if (!area_dialog.attr('chosen') || force)
    {
      area_dialog.dialog("open");
    }
  }
  
  /**
   * Get Areas
   */
  this.getAreas = function (parent)
  {
    if (typeof jQuery.areapicker.cache[parent] != 'undefined')
    {
      this.showArea(parent, jQuery.areapicker.cache[parent]);
      return;
    }
    
    $.ajax({
        url : opt.url,
        type : 'POST',
        data : {
            option : 'com_cattree',
            parent : parent,
            section : opt.section,
            task : 'listCategory',
            source : 'areapicker'
          },
        dataType : 'html',
        bag : {
            container : area_dialog,
            parent : parent
          },
        success : function(data)
        {
          var control = jQuery.areapicker.instances[this.bag.container.attr('entryuid')];
          
          if (control)
          {
            jQuery.areapicker.cache[this.bag.parent] = data;
            control.showArea(this.bag.parent, data);
          }
        }
      });
  }
  
  this.select = function()
  {
    var d = [];
    var t = [];
    area_dialog.find('select').each(function()
    {
      t[t.length] = $(this).find('option:selected').text();
      d[d.length] = {'value' : $(this).val(), 'name' : $(this).find('option:selected').text()}
    });
    
    if (d.length)
    {
      var display = t.join(',');
      this.val(display);
      $("[name='" + jQuery.areapicker.get_value_name(this.attr('name')) +"']").val(d[d.length - 1].value);
      area_dialog.attr('chosen', d[d.length - 1].value);
      area_dialog.dialog("close");
      
      opt.on_select(d);
    }
  }
  
  this.showArea = function (parent, data)
  {
    if (!data)
    {
      if (parent != '-1')
        area_dialog.append('<button type="button" style="margin-top:5px;" onclick="jQuery.areapicker.instances[\'' + this.attr('global_uid') + '\'].select();">wilayah terdekat saya</button>');
      return;
    }
      
    if (parent == 0)
      area_dialog.html("<span class='hint'>Pilih wilayah terdekat anda hingga tampil tombol dan tekan</span>");
      
    var level = area_dialog.find('select').size();
    var added = "<div level='" + level + "'><label><strong>" + this.labels[level] + "</strong></label><br/><select name=''><option value='-1'>[pilih ...]</option>" + data + "</select></div>";
    area_dialog.append(added);
    
    area_dialog.find('select').unbind('change').bind('change', function()
    {
      var $this = $(this);
      var wrapper = $this.parent();
      while (wrapper.next('[level],button').size() > 0)
      {
        wrapper.next('[level],button').remove();
      }
      var control = jQuery.areapicker.instances[wrapper.parent().attr('entryuid')];
      control.getAreas($this.val());
    });
  }
  
  // Event Handlers
  this.focus(function()
  {
    $(this).areapicker().showAreaDialog();
  });
  
  this.dblclick(function()
  {
    $(this).areapicker().showAreaDialog(true);
  });
  
  this.keypress(function(e)
  {
    if (e.which == 13)
    {
      $(this).areapicker().showAreaDialog(true);
    }
  });
  
  
  // Initialization
  var uid = Number(new Date());
  var area_dialog = this.next('.areadialog');
  this.attr('readonly', true);
  
  if (area_dialog.size() == 0)
  {
    this.after('<div class="areadialog kf" entryuid="uid' + uid + '"></div>');
    area_dialog = this.next('.areadialog');
  }
  
  area_dialog
    .css('height', ((this.labels.length ? this.labels.length : 1) * 30) + 60)
    .dialog({
        title     : 'Tentukan Wilayah Terdekat Anda',
        width     : 300,
        modal     : true,
        overlay   : {background:'black', opacity:0.5},
        autoOpen  : false,
        open : function()
        {
          var dlg = $(this);
          dlg.html("Loading ...");
          jQuery.areapicker.instances[dlg.attr('entryuid')].getAreas(0);
        }
      })
  
  var new_name = jQuery.areapicker.get_value_name(this.attr('name'));
  
  hidden_value = this.prev('[name="' + new_name + '"]');
  
  if (hidden_value.size() == 0)
  {
    this.before('<input type="hidden" name="' + new_name + '" value=""/>');
    hidden_value = this.prev('[name="' + new_name +'"]');
  }
  
  this.attr('global_uid', "uid" + uid)
  jQuery.areapicker.instances["uid" + uid] = this;
  
  // end of initialization
  
  return jQuery.areapicker.instances["uid" + uid];
}

jQuery.areapicker = {
  instances : {}, 
  cache : {},
  get_value_name : function(the_name)
    {
      var new_name = "";
      if (the_name.match(/\s*\]\s*$/ig) != null)
      {
        new_name = the_name.replace(/\s*\]\s*$/ig, "_value]");
      }
      else
      {
        new_name = the_name + "_value";
      }      
      
      return new_name;
    }
  };