/*
<select id="r1" name="r1"></select>
<select id="r2" name="r2"></select>
<input type="text" id="regional" name="regional" value="1996">
<span id="reginame" style="color:red"></span>

<script language='JavaScript'>	
  var opts = {
    'c1'   : 'r1',
    'c2'   : 'r2',
    'c3'   : 'r3',
    'txt'  : ['regional', 'reginame'],
    'curv' : $('#regional').val()
  };
  var mregi = new MemberRegional(opts);
</script>
*/

document.write("<script language='javascript' src='/js/jquery-1.3.2.min.js'><\/script>");
     
var MemberRegional = function(opts) {
	this._c1   = opts.c1;
	this._c2   = opts.c2;
	this._c3   = opts.c3;
	this._txt  = opts.txt  || [];
	this._curv = opts.curv || '';
	var self   = this;

  $.ajax({
    type : "GET",
    url  : "/additional/regional.php",
    dataType : "json",
    success: function(cates) {
      self._init(cates);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
    }
  });
}

MemberRegional.prototype = {
  _init : function(cates) {
		this._cates = cates;
		this._c1 = $('#'+this._c1);
		this._c2 = $('#'+this._c2);
		this._c3 = $('#'+this._c3);
	  this._setValue   = this._setSelect;

		this._setValue(this._curv);
		this._setText(this._curv);
		
		var self = this;
		if (this._c1[0]) {    
    	this._c1.bind('change', function() { self._setText(self._c1.val()); });

    	if (this._c2[0]) {  
    	  this._c1.bind('change', function() { self._setValue(self._c1.val()); });
    	  this._c2.bind('change', function() { self._setText(self._c2.val() ? self._c2.val() : self._c1.val()); });

      	if (this._c3[0]) { 
    	    this._c2.bind('change', function() { self._setValue(self._c2.val() ? self._c2.val() : self._c1.val()); });
    	    this._c3.bind('change', function() { self._setText(self._c3.val() ? self._c3.val() : self._c2.val()); });
    	  }
    	}
    }
  },
 
  _getCurVal : function(curv) {
    curv = curv.toString();
    var cur1 = curv.substr(0, 2) ? curv.substr(0, 2) : '';
    var cur2 = curv.substr(2, 2) ? curv.substr(0, 4) : '';
    var cur3 = curv.substr(4, 2) ? curv.substr(0, 6) : '';

    var name = '';
    if (cur1) {
      curv = this._cates['c']['c'+cur1];
      if (curv instanceof Array)
        name = curv[0];
    }
    if (cur2 && this._cates['c'+cur1]) {
      curv = this._cates['c'+cur1]['c'+cur2];
      if (curv instanceof Array)
        name = name + ' >> ' + curv[0];
    }
    if (cur3 && this._cates['c'+cur2]) {
      curv = this._cates['c'+cur2]['c'+cur3];
      if (curv instanceof Array)
        name = name + ' >> ' + curv[0];
    }
    
    return {
      'cur1' : cur1,
      'cur2' : cur2,
      'cur3' : cur3,
      'name' : name
    };
  },

  _setText : function(curv) {
    if (this._txt instanceof Array) {
      var vals = this._getCurVal(curv);

      if ($('#'+this._txt[0]).attr('tagName') == 'INPUT' || $('#'+this._txt[0]).attr('tagName') == 'TEXTAREA')
        $('#'+this._txt[0]).val(curv ? curv : '');
      else
        $('#'+this._txt[0]).html(curv ? curv : '');
        
      if ($('#'+this._txt[1]).attr('tagName') == 'INPUT' || $('#'+this._txt[1]).attr('tagName') == 'TEXTAREA')
        $('#'+this._txt[1]).val(vals.name ? vals.name : '');
      else
        $('#'+this._txt[1]).html(vals.name ? vals.name : '');
    }
  },
  
  _setSelect : function(curv) {
    var cates = this._cates;
    var vals  = this._getCurVal(curv);
    var cur1  = vals.cur1;
    var cur2  = vals.cur2;
    var cur3  = vals.cur3;


    var setOptions = function(curs, curv, prev) {
    	curs.options.length = 0;
      if (prev) {
        prev = prev==-1 ? '' : prev;
        var len = prev.length + 2;
        for (var key in cates['c'+prev]) {
          var val = key.substr(1);
          var txt = cates['c'+prev][key][0];
      		curs.options.add(new Option(txt, val));
        }
      }
      if (curv)
    		curs.value = curv;
    };
    
  	if (this._c1[0]) {
  	  setOptions(this._c1[0], cur1, -1);

    	if (this._c2[0]) {   
    	  setOptions(this._c2[0], cur2, cur1);
    	  
      	if (this._c3[0]) { 
      	  setOptions(this._c3[0], cur3, cur2);
    	  }
    	}
    } 
  }
  
};