var imgBaseUrl = 'http://www.tokyo-motorshow.com/show/2007/public/menu_img'; //メニュー画像を格納するディレクトリ
var jsonUri    = 'http://www.tokyo-motorshow.com/show/2007/public/js/menu.txt'; //JSONファイルへのパス

var createMenuFunc = function(json) {
	var menuHtml    = '';
	var submenuHtml = '';
	var imgs        = new Array();
	
	menuHtml  = '<div align="left">';
	menuHtml += '<table width="800" border="0" cellpadding="0" cellspacing="0">';
	menuHtml += '<tr>';
	menuHtml += '<td width="10"><img src="' + imgBaseUrl + '/public_submenu_bg01.gif" border="0" width="10" height="30" alt=""></td>';
	
	json.menu.each(
		function (menu) {
			imgs[menu.id] = new Array();
			imgs[menu.id]['on'] = new Image();
			imgs[menu.id]['on'].src = imgBaseUrl + '/' + menu.on;
			imgs[menu.id]['off'] = new Image();
			imgs[menu.id]['off'].src = imgBaseUrl + '/' + menu.off;
			imgs[menu.id]['current'] = new Image();
			imgs[menu.id]['current'].src = imgBaseUrl + '/' + menu.current;
			
			if (menu.id == currentId) {
				imgSrc = menu.current;
			}
			else {
				imgSrc = menu.off;
			}
			if (menu.url != '') {
				menuHtml += '<td id="' +  menu.id + '"><a href="' + menu.url + '"><img id="' +  menu.id + 'Img" src="' + imgBaseUrl + '/' + imgSrc + '" border="0" width="' + menu.width + '" height="' + menu.height + '" alt="' + menu.alt + '"></a></td>';
			}
			else {
				menuHtml += '<td id="' +  menu.id + '"><img id="' +  menu.id + 'Img" src="' + imgBaseUrl + '/' + imgSrc + '" border="0" width="' + menu.width + '" height="' + menu.height + '" alt="' + menu.alt + '"></td>';
			}
			
			if (menu.submenu != '') {
				submenuHtml += '<div id="' + menu.submenu.id + '" style="display:none;">';
				
				menu.submenu.label.each(
					function (label) {
						imgs[menu.id][label.id] = new Array();
						imgs[menu.id][label.id]['on'] = new Image();
						imgs[menu.id][label.id]['on'].src = imgBaseUrl + '/' + label.on;
						imgs[menu.id][label.id]['off'] = new Image();
						imgs[menu.id][label.id]['off'].src = imgBaseUrl + '/' + label.off;
						
						if (label.url != '') {
							submenuHtml += '<a href="' + label.url + '"><img id="' +  label.id + 'Img" src="' + imgBaseUrl + '/' + label.off + '" border="0" width="' + label.width + '" height="' + label.height + '" alt="' + label.alt + '"></a><br>';
						}
						else {
							submenuHtml += '<img id="' +  label.id + 'Img" src="' + imgBaseUrl + '/' + label.off + '" border="0" width="' + label.width + '" height="' + label.height + '" alt="' + label.alt + '"><br>';
						}
					}
				);
				
				submenuHtml += '</div>';
			}
		}
	);
	
	menuHtml += '<td width="10"><img src="' + imgBaseUrl + '/public_submenu_bg02.gif" border="0" width="10" height="30" alt=""></td>';
	menuHtml += '</tr>';
	menuHtml += '</table>';
	
	menuHtml += submenuHtml;
	
	$('menu').innerHTML = menuHtml;
	
	json.menu.each(
		function (menu) {
			if (menu.id != currentId && menu.on != '') {
				Event.observe(menu.id, 'mouseover', function(event) { $(menu.id + 'Img').src = imgBaseUrl + '/' + menu.on; }, false);
				Event.observe(menu.id, 'mouseout',  function(event) { $(menu.id + 'Img').src = imgBaseUrl + '/' + menu.off; }, false);
			}
			
			if (menu.submenu != '' || menu.url != '') {
				Element.setStyle($(menu.id), {'cursor' : 'pointer'});
			}
			
			if (menu.submenu != '') {
				//Element.setStyle($(menu.submenu.id), {'cursor' : 'pointer'});
				
				Event.observe(menu.submenu.id, 'mouseover', function(event) { $(menu.id + 'Img').src = imgBaseUrl + '/' + menu.on; }, false);
				Event.observe(menu.submenu.id, 'mouseout',  function(event) { $(menu.id + 'Img').src = imgBaseUrl + '/' + menu.off; }, false);
				
				Event.observe(menu.id, 'mouseover', function(event) { Element.show(menu.submenu.id); }, false);
				Event.observe(menu.id, 'mouseout',  function(event) { Element.hide(menu.submenu.id); }, false);
				
				Event.observe(menu.submenu.id, 'mouseover', function(event) { Element.show(menu.submenu.id); }, false);
				Event.observe(menu.submenu.id, 'mouseout',  function(event) { Element.hide(menu.submenu.id); }, false);
				
				menu.submenu.label.each(
					function (label) {
						Event.observe(label.id + 'Img', 'mouseover', function(event) { $(label.id + 'Img').src = imgBaseUrl + '/' + label.on; }, false);
						Event.observe(label.id + 'Img', 'mouseout',  function(event) { $(label.id + 'Img').src = imgBaseUrl + '/' + label.off; }, false);
					}
				);
			}
		}
	);
}


function loadMenu(event) {
	var menu = new Menu({
		onSuccessFunc : createMenuFunc,
		uri           : jsonUri
		});
	
	menu.load();
}

Event.observe(window, 'load', loadMenu, false);

//List Editor Class
Menu = Class.create();
Menu.prototype = {
	initialize : function(options) {
		this._setOptions(options);
		
		if (this.options.isCentered) {
			this.center();
		}
	},
	
	_setOptions: function(options) {
		this.options = {
			onLoadingFunc   : function(json) {},
			onSuccessFunc   : function(json) {},
			onCompleteFunc  : function(json) {},
			onFailureFunc   : function(json) {},
			onExceptionFunc : function(json) {},
			uri             : '',
			method          : 'get',
			requestHeaders  : ['If-Modified-Since','Wed, 15 Nov 1995 00:00:00 GMT']
		}
		Object.extend(this.options, options || {});
	},
	load : function() {
		var onLoadingFunc   = this.options.onLoadingFunc;
		var onSuccessFunc   = this.options.onSuccessFunc;
		var onCompleteFunc  = this.options.onCompleteFunc;
		var onFailureFunc   = this.options.onFailureFunc;
		var onExceptionFunc = this.options.onExceptionFunc;
		
		var params = '';
		
		var funcs = {
			onLoading : onLoadingFunc,
			onSuccess : function(res) {
				var json = eval('(' + res.responseText + ')');
				
				if(json.error != -1) {
					onSuccessFunc(json);
				}
				else {
					onFailureFunc(json);
				}
			},
			onComplete  : onCompleteFunc,
			onException : onExceptionFunc
		};
		
		this._request(params, funcs);
	},
	_request : function(params, funcs) {
		var ajaxOptions = {
			method         : this.options.method,
			requestHeaders : this.options.requestHeaders,
			postBody       : params,
			onLoading      : funcs.onLoading,
			onSuccess      : funcs.onSuccess,
			onComplete     : funcs.onComplete,
			onFailure      : funcs.onFailure,
			onException    : funcs.onException
		};
		
		new Ajax.Request(this.options.uri, ajaxOptions);
	}
};