var DropDownMenu = {
	id   : '',
	$menu: '',
	css  : '/YungSang/dd_menu.css',

	$bg      : null,
	bg_image : '/YungSang/images/blank.gif',
	bg_height: '400px',

	init: function(id) {
		jQuery('<link/>').appendTo('head').
			attr({
				'type': 'text/css',
				'rel' : 'stylesheet',
				'href': this.css
			});
		this.id = id;
		this.$menu = jQuery('ul#' + this.id);
		var hoverbox = 'li';
		if (jQuery.browser.msie) hoverbox = 'a';
		jQuery('li', this.$menu).each(function() {
			jQuery(this).addClass('topmenu');
			jQuery(hoverbox, this.$menu).hover(function() {
				var $ul = jQuery('ul:first', this).show();
				if ($ul.length) {
					DropDownMenu.$bg.show();
				}
			},
			function() {
				jQuery('ul:first', this).hide();
			});
		});
		this.make_bg();
	},

	reset: function() {
		jQuery('ul', this.$menu).each(function () {
			jQuery(this).hide();
		});
	},

	make_bg: function() {
		this.$bg = jQuery('<div/>').appendTo('body')
			.attr('id', this.id + '_bg')
			.css({
				'left': this.$menu.offset().left - 10 + 'px',
				'top' : this.$menu.offset().top - 10 + 'px'
			});
		var $a = jQuery('<a/>').appendTo(this.$bg)
			.hover(function() {
				DropDownMenu.$bg.hide();
				DropDownMenu.reset();
			},
			function(){});
		jQuery('<img/>').appendTo($a)
			.attr({
				'src'   : this.bg_image,
				'width' : this.$menu.width() + 40 + 'px',
				'height': this.bg_height,
				'border': 0
			});
	},

	getsubcate: function($menu, url, id) {
		var params = {
			'ts': (new Date()).getTime()
		};
		if (id) params['id'] = id;
		url += '?' + jQuery.param(params);
		jQuery.get(url, function(xml) {
			if (!xml) return;

			var xotree = new XML.ObjTree();
			var json = xotree.parseDOM(xml.documentElement);

			if (!json || !json.response || !json.response.categories) return;

			DropDownMenu.setsubcate($menu, json.response.categories);
		});
	},

	setsubcate: function($menu, cates) {
		var categories = [];
		if (typeof cates.category[0] == 'undefined') {
			categories[0] = cates.category;
		}
		else {
			categories = cates.category;
		}

		var $box = $menu;
		var hoverbox = 'li';
		if (jQuery.browser.msie) {
			$box = jQuery('a', $menu).append('<br/>');
			hoverbox = 'a';
		}
		var $submenu = jQuery('<ul/>').appendTo($box)
			.addClass('submenu')
			.css({
				'top'   : $menu.height() + 'px',
				'zIndex': parseInt($menu.css('zIndex')) + 10
			});
		if (!$menu.attr('id')) {
			$submenu.css({
				'top' : '0',
				'left': '200px'//$menu.css('width')
			});
		}
		for (var i = 0 ; i < categories.length ; i++) {
			var $li = jQuery('<li/>').appendTo($submenu)
				.addClass('submenu');
			var $a = jQuery('<a/>').appendTo($li)
				.addClass('submenu')
				.attr('href', categories[i].url)
				.append(categories[i].title);
			if (categories[i].categories) {
				$a.addClass('submenus');
				jQuery(hoverbox, $submenu).hover(function() {
					jQuery('ul:first', this).show();
				},
				function() {
					jQuery('ul:first', this).hide();
				});
				this.setsubcate($li, categories[i].categories);
			}
		}
	}
};