Tmap.Control.SelectTheme = Class.create(Tmap.Control, {
	ajax_url	: 'ControlSelectCommCode.jsp',
	init_msg	: '-----------선택-----------',
	init_data	: 'TRTC0000',
	oTheme      : null,
	oChecked    : [],
	themeCache  : {},

	initialize: function(theme_id, init_data) {
		this.oTheme = $(theme_id);
		this.init_data = init_data || this.init_data;

		if(this.oTheme != null) {

			// cleanup procedure is required.
			
			this.oChecked = [];
			$('menu2').childElements().each(function(elem) {
				elem.remove();
			});

			var blue_tds = $('bluebox').select('td');
			blue_tds.each(function(elem) {
				elem.remove();
			});

			Event.observe(this.oTheme, 'change', 
						  this.on_change_theme1.bindAsEventListener(this));
			Event.observe($('sel_theme_btn'), 'click',
						   this.on_click_them_btn.bindAsEventListener(this));
			Event.observe($('cancel_btn'), 'click',
						   this.on_click_cancel_btn.bindAsEventListener(this));
			Event.observe($('x_btn'), 'click',
						   this.on_click_cancel_btn.bindAsEventListener(this));
		}

		this.load_theme(init_data, this.on_load_1st);
	},

	load_theme : function(menu_init, handler) {
		new Ajax.Request(this.ajax_base_url + this.ajax_url,
			{
				asynchronous: false,
				method: 'post',
				parameters: {
					code_up:menu_init
				},
				onComplete: handler.bindAsEventListener(this)
			}
		);
	},

	// 새로운 option을 추가
	options_push : function(o, text, value) {
		var opt = new Option(text, value);
		o[o.length] = opt;
	},
	
	options_reset : function(o) {
		this.options_clear(o);
		this.options_push(o, this.init_msg, this.init_data);
	},
	
	// option의 모든 항목을 삭제
	options_clear : function(o) {
		while(o.options.length > 0) {
			var obj = o.options[(o.options.length-1)];
			o.remove(obj.index);
		}
	},

	on_click_cancel_btn : function () {
		this.oChecked = [];
		$('tour_area_theme').value = '';
		$('l_theme_select').style.display = 'none';
	},

	on_click_them_btn : function () {
		var tmpNames = [], tmpCache = this.themeCache;

		for (var k in tmpCache)
			if (this.oChecked.include(k))
				tmpNames.push(tmpCache[k]);

		// NOTE this cTourMap is from tourmap.jsp
		cTourMap.arrTheme = this.oChecked;	// 여기에 선택된 테마 코드를 저장합니다.
		$('tour_area_theme').update('');
		this.oChecked = [];
		tmpNames.each(function(tn) {
			var spanElm = new Element('span', { 'class':'ts11' });
			spanElm.insert(tn);
			spanElm.insert('&nbsp;');

			var xImg = new Element('img', { 'src': '/design/images/place/tourmap/icon_x.gif' });
			xImg.observe('click', function(e) {
				var tmpThemes = cTourMap.arrTheme;
				tmpThemes.each(function(theme) {
					for (var k in tmpCache) {
						if (tn == tmpCache[k]) {
							cTourMap.arrTheme = cTourMap.arrTheme.reject(function (rejm) {
								return rejm == k
							});
						}
					}
				});
				spanElm.remove();
				e.stop('click');
			});
			spanElm.insert(xImg);
			$('tour_area_theme').insert(spanElm);
		});
		$('l_theme_select').style.display = 'none';

	},

	on_change_theme1 : function() {
		var selOpt = this.oTheme[this.oTheme.selectedIndex];
		
		if(selOpt != null) {
			this.load_theme(selOpt.value, this.on_load_2nd);
		}
		else {
			alert( 'conjead' );
		}
	},

	on_load_1st : function(transport) {
		var list = transport.responseJSON.list;
		this.options_reset(this.oTheme);
		list.each(function (elem) {
			this.themeCache[elem.CD] = elem.NM;
			this.options_push(this.oTheme, elem.NM, elem.CD);
		}, this);
	},

	on_load_2nd: function(transport) {
		var list = transport.responseJSON.list;
		var c = 0, tmp_items = [];

		this.insert_checkbox_menu2(list);
		this.set_checkbox_event();
	},

	insert_checkbox_menu2: function(list) {
		var tmp_items = [], menu2_items = []

		list.each(function(elem) {
			this.themeCache[elem.CD] = elem.NM;

			var checked = '';
			if (this.oChecked.include(elem.CD)) {
				checked = ' checked';
			}
			tmp_items.push('<td width="84"><input type="checkbox" name="checkbox9" value="' + elem.CD + '" ' + checked + '/><span class="ts11">' + elem.NM + '</span></td>');
		},this);

		tmp_items.each(function(elem, idx) {
			var mod = idx % 3;
			if (mod == 0) {
				menu2_items.push('<tr>');
				menu2_items.push(elem);
			} else if (mod == 2) {
				menu2_items.push(elem);
				menu2_items.push('</tr>');
			} else {
				menu2_items.push(elem);
			}
		});

		if (menu2_items[menu2_items.length - 1] != '</tr>') {
			menu2_items.push('</tr>');
		}

		$('menu2').update(menu2_items.join(''));
		
	},

	set_checkbox_event: function() {
		var input_chks = $('menu2').select('input[type=checkbox]');
		input_chks.each(function(elem) {
			elem.observe('click', function() {
				if (elem.checked) {
					if (this.oChecked.length < 3) {
						this.oChecked.push( elem.value );
						this.insert_bluebox( elem.value );
					} else if (this.oChecked.length >= 3) {
						alert("테마는 3개까지만 선택 가능합니다.");
						elem.checked = false;
					}
				} else {
					var blue_tds = $('bluebox').select('td');
					blue_tds.each ( function(belem) {
						if (belem.id == elem.value)
							belem.remove();
					});
					this.oChecked = this.oChecked.reject(function (rejm) {
						return rejm == elem.value
					});
				}
			}.bindAsEventListener(this));
		}, this);
	},
	
	insert_bluebox: function(value) {
		// trying to get the very first tr of the bluebox table.
		var bluebox_tr = $('bluebox').firstDescendant().firstDescendant();

		// creating a blue td node with content nodes
		var my_td = new Element('td', {'width': '78', 'align':'center', 'id': value});
		var my_span = new Element('span', { 'class':'ts11' });
		var my_img = new Element('img', { 'src':"/design/images/place/tourmap/icon_x.gif", 'alt':"x", 'align':"" });

		my_img.observe('click', function() {
			
			var input_chks2 = $('menu2').select('input[type=checkbox]');
			input_chks2.each ( function(chk) {
				if (value == chk.value)
					chk.checked = false;
			});
			
			this.oChecked = this.oChecked.reject(function (rejm) {
				return rejm == value;
			});

			my_td.remove();
		}.bindAsEventListener(this));
		
		Element.insert(my_span, this.get_theme_NM(value));
		Element.insert(my_td, my_span);
		Element.insert(my_td, my_img);
		Element.insert(bluebox_tr, my_td);
	},

	get_theme_NM: function(CD) {
		return this.themeCache[CD];
	},

	clear_checkboxes: function() {
		var input_chks = $('menu2').select('input[type=checkbox]');
		input_chks.each(function(elem) {
			elem.checked = false;
		});
	}

});