var SelectBox = Class.create({
	initialize : function(x) {
		this.id = x['id'];
		this.name = x['id'];
		this.width = x['width'];
		this.title = x['title'];
		this.data = x['data'];
		this.backColor = '#000000';
		// IE
		this.flag = '\v'=='v' ;
		this.high = this.CntHigh();

		//	onchange Event
		this.Change = null;

		this.Draw();
	},
	$ : function(x) {
		return document.getElemetById(x);	
	},
	CE : function(x) {
		return document.createElement(x);
	},
	CTN : function(x) {
		return document.createTextNode(x); 
	},
	CntHigh : function() {
		var i = 0;
		for (var x in this.data)
			i++;
		return i;
	},
	Eject : function(x) {
		while(x.firstChild) {
			x.removeChild(x.firstChild);
		}	// end of while : 
	},
	ElNTxt : function(el, txt){
		var obj = this.CE(el);
		var text = this.CTN(txt);
		obj.appendChild(text);
		return obj;
	},
	Choice : function() {

		var it = this;
		var el = $(this.name+'_table');

		var F = this.CE('IFRAME');
		F.id = $(this.name+'_frame');
		F.frameBorder = 0;
		F.style.zIndex = -11;
		F.style.position = 'absolute';
		F.style.width = this.width;

		if (this.flag) {
			F.style.height = 19*this.CntHigh();
		} else {
			F.style.height = 17*this.CntHigh();
		}

		F.scroll = 'no';

		el.appendChild(F);

		if (1<el.childNodes.length)
		{
			this.Eject(el);
			el.style.display = 'none';
		} else {
			el.style.display = 'inline';

			var i=0;

			var input = it.name+'_input';
			var value = $(input).value;

			for (var x in this.data)
			{
				//if (value!=this.data[x])
				if (1)
				{
					var obj = this.ElNTxt('DIV', this.data[x]);
					obj.setAttribute('id', this.name+'_'+i);
					obj.style.cursor = 'hand';

					obj.className = 'sgray02';
					obj.style.backgroundColor = '#FFFFFF';

//					obj.style.zIndex = (it.index+1);

					if (this.flag) {
						obj.style.width = this.width - 7;
					}else{
						obj.style.width = this.width;
					}
					obj.key = x;
					obj.onclick = function() {
						var html = it.name+'_select';
						var hidden = it.name+'_table';
						var input = it.name+'_input';
						var key = it.name+'_key_input';
						$(html).innerHTML = this.innerHTML;
						$(input).value = this.innerHTML;
						$(key).value = this.key;
						$(hidden).scrollTop = 0;
						$(hidden).style.display = 'none';

						it.Eject($(hidden));

						if (typeof it.Change == 'function')
						{
							it.Change($(key).value, $(input).value);
						}

					};
					obj.onmouseover = function() {
						this.style.backgroundColor = it.backColor;
					};
					obj.onmouseout = function() {
						this.style.backgroundColor = '#FFFFFF';
					};

					i++;
					el.appendChild(obj);

				}	// end of if : (value!=this.data[x])
			}	// end of for : (var x in this.data)
		}	// end of if : (1<el.childNodes.length)
	},
	Draw : function() {
		var obj = this;

		//	debug mode
		var type = (1)?'hidden':'text';

		var INPUT = this.CE('INPUT');
		INPUT.id = this.name+'_input';
		INPUT.type = type;
		INPUT.value= this.title;

		var KEY_INPUT = this.CE('INPUT');
		KEY_INPUT.id = this.name+'_key_input';
		KEY_INPUT.type = type;

		/*
			개선필요
		*/
		var i=0;
		for(var x in this.data) if (i==0) break;
		KEY_INPUT.value = x;

		var TABLE = this.CE('TABLE');
		TABLE.width = this.width;
		TABLE.cellSpacing = 0;
		TABLE.cellPadding = 0; 
		TABLE.border = 0;

		var TBODY = this.CE('TBODY');
		var TR = this.CE('TR');
		TR.style.backgroundColor = '#D1D1D1';
		var TD = this.CE('TD');

		if (1)
		{
			var TABLE1 = this.CE('TABLE');
			TABLE1.width = this.width;
			TABLE1.cellSpacing = 1;
			TABLE1.cellPadding = 0; 
			TABLE1.border = 0;		

			var TBODY1 = this.CE('TBODY');
			var TR1 = this.CE('TR');
			var TD1 = this.CE('TD');
			TD1.className = 'sgray02';
			TD1.align = 'center';
			TD1.style.backgroundColor = '#FFFFFF';

			if (1)
			{
				var TABLE2 = this.CE('TABLE');
				TABLE2.width = this.width;
				TABLE2.cellSpacing = 0;
				TABLE2.cellPadding = 0; 
				TABLE2.border = 0;	

				var TBODY2 = this.CE('TBODY');
				var TR2 = this.CE('TR');
				var TD2 = this.CE('TD');
				TD2.className = 'sgray02';
				TD2.align = 'center';
				TD2.style.backgroundColor = '#FFFFFF';

				if (1)
				{
					var TABLE3 = this.CE('TABLE');
					TABLE3.width = this.width - 5;
					TABLE3.cellSpacing = 1;
					TABLE3.cellPadding = 0; 
					TABLE3.border = 0;	

					var TBODY3 = this.CE('TBODY');
					var TR3 = this.CE('TR');
					var TR4 = this.CE('TR');
					var TD3 = this.CE('TD');
					var TD4 = this.CE('TD');
					var TD5 = this.CE('TD');

					TR3.onclick = function() {obj.Choice()};
					TR3.onmouseover = function () { this.style.backgroundColor = obj.backColor; };
					TR3.onmouseout = function () { this.style.backgroundColor = ''; };

					TD3.width = this.width -18;
					TD3.className = 'sgray02';
					var DIV1 = this.ElNTxt('DIV', this.title);
					DIV1.setAttribute('id', this.name+'_select');
					DIV1.style.cursor = 'hand';
					TD3.appendChild(DIV1);
					TR3.appendChild(TD3);

					TD4.width = 18;
					TD4.align = 'right';
					IMG = this.CE('IMG');
					IMG.src = '/assets/images/bullet/select.gif';
					IMG.setAttribute('width', 18);
					IMG.height = 17;
					TD4.appendChild(IMG);
					TR3.appendChild(TD4);

					var DIV2 = this.ElNTxt('DIV', '');
					DIV2.setAttribute('id', this.name+'_table');

					var tmpWidth = null;
//					var tmpHeight = (this.high-1) * 20;
//					var height = (tmpHeight>=100) ? 90 : tmpHeight;
					var height = '';
					if (this.flag)
					{
						tmpWidth = this.width - 4;
					}else{
						tmpWidth = this.width - 5;
					}

					var styleLine = 'position:absolute;border: 1px solid #D1D1D1;height:'+height+';width:'+tmpWidth+';overflow-x:hidden;overflow-y:auto;display:none';

					if (this.flag)
					{
						DIV2.style.position = 'absolute';
						DIV2.style.border = '1px solid #D1D1D1';
						DIV2.style.height = height;
						DIV2.style.width = tmpWidth;
						DIV2.style.overflowX = 'hidden';
						DIV2.style.overflowY = 'auto';
						DIV2.style.display = 'none';
					}else{
						DIV2.setAttribute('style', styleLine);
					}

					TD5.colSpan = 2;
					TD5.appendChild(DIV2);
					TR4.appendChild(TD5);

					TBODY3.appendChild(TR3);
					TBODY3.appendChild(TR4);
					TABLE3.appendChild(TBODY3);
				}
		
				TD2.appendChild(TABLE3);
				TR2.appendChild(TD2);
				TBODY2.appendChild(TR2);
				TABLE2.appendChild(TBODY2);
			}

			TD1.appendChild(TABLE2);
			TR1.appendChild(TD1);
			TBODY1.appendChild(TR1);
			TABLE1.appendChild(TBODY1);
		}

		TD.appendChild(TABLE1);
		TR.appendChild(TD);
		TBODY.appendChild(TR);
		TABLE.appendChild(TBODY);

		var id = $(this.name);

		id.appendChild(KEY_INPUT);
		id.appendChild(INPUT);
		id.appendChild(TABLE);

	}
});


    function select_another_service(id, title, obj, width, func)
        {

            var X = {'id':id, 'title':title, 'data':obj, 'width':width};
            var O = new SelectBox(X);

            if (func) {
                O.Change = func();
            }
        }

        function another_on_change()
        {
            function X(k, v)
            {
                var tmp = k.split('_');

                var href = '/myservice/service_mng_detail/'+tmp[0]+'/'+tmp[1];
                location.href = href;
            }
            return X;
        }

      function get_another_service(it)
        {
            var url = '/myservice/shot_list_hosting_ajax';
            var lines = '';

            var payment_ajax = new Ajax.Request(
                url,
                {
                    method: 'post',
                    parameters: lines,
                    onComplete:it
                });
                return false;
        }

/*
var Data = {
	'0':'서울',
	'1':'대전',
	'2':'대구',
	'3':'부산',
	'4':'광주',
	'5':'울산',
	'6':'제주',
	'7':'일본',
	'8':'하와이'
};

var tel = {
	'0':'02',
	'1':'010',
	'2':'011'
}


	function make_on_change()
	{
		function change_select(x)
		{
//			var id = document.getElementById('test1_select');
			alert(x);
		}
		return change_select;
	}

	function aaa()
	{
		function abc(x)
		{
			window.status = x;
		}
		return abc;
	}


var RollData = {'id':'test1', 'title':'선택하세요', 'data':Data, 'width':'150'};
var RollData1 = {'id':'test2', 'title':'02', 'data':tel, 'width':'100'};

	var x = new SelectBox(RollData);
//	x.Change = make_on_change();
	var b = new SelectBox(RollData1);
	b.Change = aaa();
*/