Ext.onReady(function(){
	var domNode = Ext.get('show-restaurant-details');
	if (domNode) {
		Ext.override(Ext.Element, {
		    update : function(html, loadScripts, callback, scope){
		        html = html || "";
		        
		        if(loadScripts !== true){
		            this.dom.innerHTML = html;
		            if(Ext.isFunction(callback)){
		                callback.call(scope);
		            }
		            return this;
		        }
		        
		        var id = Ext.id(),
		            dom = this.dom;
		
		        html += '<span id="' + id + '"></span>';
		
		        dom.innerHTML = html.replace(/(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig, "");
		        var DOC = document,
		            hd = DOC.getElementsByTagName("head")[0],
		            re = /(?:<script([^>]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig,
		            srcRe = /\ssrc=([\'\"])(.*?)\1/i,
		            typeRe = /\stype=([\'\"])(.*?)\1/i,
		            match,
		            attrs,
		            srcMatch,
		            typeMatch,
		            el,
		            s;
		
		        while(match = re.exec(html)){
		            attrs = match[1];
		            srcMatch = attrs ? attrs.match(srcRe) : false;
		            if(srcMatch && srcMatch[2]){
		               s = DOC.createElement("script");
		               s.src = srcMatch[2];
		               typeMatch = attrs.match(typeRe);
		               if(typeMatch && typeMatch[2]){
		                   s.type = typeMatch[2];
		               }
		               hd.appendChild(s);
		            }else if(match[2] && match[2].length > 0){
		                if(window.execScript) {
		                   window.execScript(match[2]);
		                } else {
		                   window.eval(match[2]);
		                }
		            }
		        }
		        el = DOC.getElementById(id);
		        if(el){
		            Ext.removeNode(el);
		        }
		        if(Ext.isFunction(callback)){
		            callback.call(scope);
		        }
		        return this;
		    }
		});
	
		var idDomNode = Ext.get("req-param-restid");
		var restId = '';
		if (idDomNode) {
			restId = idDomNode.dom.innerHTML;
		}

		var prevDesc = 'View previous search result';
		var nextDesc = 'View next search result';
		var goBackDesc = 'Go back search results';
		//this dom node is created in header.jsp
		var latestSearchUrlDomNode = Ext.get("req-param-latest-search-url");
		var latestSearchUrl = '';
		var hideSearchBtn = true;
		if (latestSearchUrlDomNode) {
			latestSearchUrl = latestSearchUrlDomNode.dom.innerHTML;
			latestSearchUrl = Url.replaceEscape(latestSearchUrl);
			hideSearchBtn = false;
		}
		
		var srcDomNode = Ext.get("req-param-src");
		var fromRecommendedRestaurants = false;
		if (srcDomNode) {
			if (srcDomNode.dom.innerHTML=='recommended_restaurants') {
				fromRecommendedRestaurants = true;
				var cursor = '';
				var domNode = Ext.get('req-param-recommd-rest-cursor');
				if (domNode) {
					cursor = domNode.dom.innerHTML;
				}
				latestSearchUrl = "/restaurants/showSummary.jsp?view=recommended_restaurants"+cursor;
				latestSearchUrl = Url.replaceEscape(latestSearchUrl);
				hideSearchBtn = false;
				prevDesc = 'View previous recommended restaurant';
				nextDesc = 'View next recommended restaurant';
				goBackDesc = 'Go back recommended restaurants';
			}
		}

		try {
			top.location.href;
		} catch(err) {
			hideSearchBtn = true;
		}
		//followings are set in showDetails.jsp
		var prevIdDomNode = Ext.get("req-param-prev-restid");
		var prevRestId = '';
		var hideLeftBtn = true;
		if (prevIdDomNode && !hideSearchBtn) {
			prevRestId = prevIdDomNode.dom.innerHTML;
			hideLeftBtn = false;
		}

		var prevNameDomNode = Ext.get("req-param-prev-restname");
		var prevRestName = '';
		if (prevNameDomNode && !hideSearchBtn) {
			prevRestName = prevNameDomNode.dom.innerHTML;
		}

		var prevNameIdentifierDomNode = Ext.get("req-param-prev-restnameidentifier");
		var prevRestNameIdentifier = '';
		if (prevNameIdentifierDomNode && !hideSearchBtn) {
			prevRestNameIdentifier = prevNameIdentifierDomNode.dom.innerHTML;
		}

		var nextIdDomNode = Ext.get("req-param-next-restid");
		var nextRestId = '';
		var hideRightBtn = true;
		if (nextIdDomNode && !hideSearchBtn) {
			nextRestId = nextIdDomNode.dom.innerHTML;
			hideRightBtn = false;
		}

		var nextNameDomNode = Ext.get("req-param-next-restname");
		var nextRestName = '';
		if (nextNameDomNode && !hideSearchBtn) {
			nextRestName = nextNameDomNode.dom.innerHTML;
		}

		var nextNameIdentifierDomNode = Ext.get("req-param-next-restnameidentifier");
		var nextRestNameIdentifier = '';
		if (nextNameIdentifierDomNode && !hideSearchBtn) {
			nextRestNameIdentifier = nextNameIdentifierDomNode.dom.innerHTML;
		}

		
		
		//define stores*******************************************************************************************
	    var menuStore = new Ext.data.JsonStore({
	    	url: '/RestaurantServlet?action=getRestaurantMenu&rest-id='+restId
	       ,root: 'results'
	       ,fields: ['mode', 'last_update', 'groups']
	    });
	    
	    var menuTpl = new Ext.XTemplate(
	    	'<p style="{desc:this.getDisplay}>',
	    		'<div">{desc}</div>',
	    	'</p>',
	    	'<table width="97%" cellspacing="0" cellpadding="0">',
		    	'<tr>',
			    	'<td width="15%" class="body"><b>Snapshot</b></td>',
			    	'<td width="30%" class="body"><b>Name</b></td>',
			    	'<td width="15%" class="body"><b>Price</b></td>',
			    	'<td width="50%" class="bodyend"><b>Description</b></td>',
		    	'</tr>',
			    '<tpl for="items">',
				    	'<tr>',
					    	"<td class='body' align='center'>&nbsp;<span style='{smallphoto:this.getDisplay}'><img src='/{smallphoto}' width='50' height='50' style='cursor:pointer' onClick='showDishPhoto(\"/{photo}\", \"{name}\", \"{desc}\", \"{price}\")'/></span></td>",
					    	'<td class="body">{name:this.getValue}</td>',
					    	'<td class="body">{price:this.getValue}</td>',
					    	'<td class="bodyend">{desc:this.getValue}</td>',
				    	'</tr>',
			    '</tpl>',
			    '<tr><td colspan="4" class="bodylast">&nbsp;</td></tr>',
	    	'</table>',
	    	{
	    		getDisplay: function(value){
	    			return (value && value.length!=0)?'':'display:none;';
	    		}
	    	},
	    	{
	    		getValue: function(value){
	    			return (value && value.length!=0)?value:'&nbsp;';
	    		}
	    	}
	    );
	
	    var menuTpl2 = new Ext.XTemplate(
	    	'<p style="{desc:this.getDisplay}>',
	    		'<div">{desc}</div>',
	    	'</p>',
	    	'<table width="97%" cellspacing="0" cellpadding="0">',
		    	'<tr>',
			    	'<td width="15%" class="body"><b>Snapshot</b></td>',
			    	'<td width="70%" class="body"><b>Name</b></td>',
			    	'<td width="15%" class="bodyend"><b>Price</b></td>',
		    	'</tr>',
			    '<tpl for="items">',
				    	'<tr>',
					    	"<td class='body' align='center'>&nbsp;<span style='{smallphoto:this.getDisplay}'><img src='/{smallphoto}' width='50' height='50' style='cursor:pointer' onClick='showDishPhoto(\"/{photo}\", \"{name}\", \"{desc}\", \"{price}\")'/></span></td>",
					    	'<td class="body">{name:this.getValue}</td>',
					    	'<td class="bodyend">{price:this.getValue}</td>',
				    	'</tr>',
			    '</tpl>',
			    '<tr><td colspan="3" class="bodylast">&nbsp;</td></tr>',
	    	'</table>',
	    	{
	    		getDisplay: function(value){
	    			return (value && value.length!=0)?'':'display:none;';
	    		}
	    	},
	    	{
	    		getValue: function(value){
	    			return (value && value.length!=0)?value:'&nbsp;';
	    		}
	    	}
	    );
		
		var text_btn_colors = [];
		for (var i=0;;i++) {
			var menuColorDomNode = Ext.get("req-param-menu-color-"+i);
			var menu_color = '';
			if (menuColorDomNode) {
				menu_color = menuColorDomNode.dom.innerHTML;
				text_btn_colors.push(menu_color);
			} else {
				break;
			}
		}
	    menuStore.on('load', function(store, records){
	    	var menupanel = Ext.getCmp('restaurant-details-menu');
	    	Ext.get('menu-loading_menu').dom.style.display = 'none';
	    	var textEnabled = false;
	    	var picEnabled = false;
	    	var text_panel;
	    	var pic_panel
	    	var text_last_update = '';
	    	var pic_last_update = '';
	    	if (!records) {
	    	} else {
	    		if (records.length==0) {
		    		var emptyPanel = new Ext.Panel({
		    			border:false,
		    			bodyStyle:'font-size:12px;padding:7px;',
		    			html:'<div class="rest-details-menu">None</div>'
		    		});
		    		menupanel.add(emptyPanel);
		    		menupanel.doLayout();
	    		}
	    		for (var i=0; i<records.length; i++) {
		    		if (records[i].get('mode') == 'text') {
						var groups = records[i].get('groups');
						var tbar = new Ext.Toolbar({
							id:'text-toolbar',
							items:[]
						});
						text_panel = new Ext.Panel({
							id: 'text-menu',
							border: false,
							style:'margin-bottom:10px;',
							width:720,	//markking 1
							height:340,
							defaults:{bodyStyle:'padding:5px 0 5px 5px;font-size:12px;'},
							tbar:tbar
						});
						
						if (groups.length<2) {
							tbar.hide();
						}
						var groupnames = [];
						for (var x=0; x<groups.length; x++) {
							var groupname = groups[x].name;
							groupnames.push(groupname);
							var btnText = '<span style="color:'+text_btn_colors[x]+';">'+groupname+'</span>';
							if (x==0) {
								btnText = '<span style="color:'+text_btn_colors[x]+';"><b>'+groupname+'</b></span>';
							}
							var btn = new Ext.Button({
								id:'btn-'+groupname,
								groupname:groupname,
								text:btnText,
								handler:function(){
									for (var a=0; a<groupnames.length; a++) {
										if (this.groupname == groupnames[a]) {
											//show tabpanel of newly selected group
											Ext.getCmp('text-'+groupnames[a]).show();
											//hightlight newly selected group button
											Ext.getCmp('btn-'+groupnames[a]).setText('<span style="color:'+text_btn_colors[a]+';"><b>'+groupnames[a]+'</b></span>');
										} else {
											//hide tabpanel under current group
											Ext.getCmp('text-'+groupnames[a]).hide();
											//un-hightlight current group button
											Ext.getCmp('btn-'+groupnames[a]).setText('<span style="color:'+text_btn_colors[a]+';">'+groupnames[a]+'</span>');
										}
									}
								}
							});
							tbar.items.add(btn);
							tbar.items.add(new Ext.Toolbar.Separator());
			    			var tabpanel = new Ext.TabPanel({
				    			id:'text-'+groupname,
					            border: false,
					            width:670,	//if remove marking 1 and this line, the menu display has problem. when click on the 2nd group button, no menu is shown
					        	height:300,
					        	enableTabScroll:true,
					        	scrollIncrement:400,
					        	style:'padding:5px 3px 5px 5px;',
					            layoutOnTabChange:true,
					        	hidden:true
					        });
							if (x==0) {
								tabpanel.show();
							}
				    		var types = groups[x].types;
				    		for (var j=0; j<types.length; j++) {
					    		var tab;
					    		var hasDesc = types[j].hasdesc;
					    		if (hasDesc && (hasDesc=='n'||hasDesc=='N')) {
						    		tab = new Ext.Panel({
						    			title: '<span style=color:'+text_btn_colors[x]+';>'+types[j].name+'</span>'
						    			,border: false
						    			,height: 400
						    			,autoScroll:true
						    			,html: menuTpl2.apply(types[j])
						    		});
					    		} else {
						    		tab = new Ext.Panel({
						    			title: '<span style=color:'+text_btn_colors[x]+';>'+types[j].name+'</span>'
						    			,border: false
						    			,height: 400
						    			,autoScroll:true
						    			,html: menuTpl.apply(types[j])
						    		});
					    		} 
					    		tabpanel.add(tab);
					    		if (j==0) {
					    			tabpanel.setActiveTab(tab);
					    		}
				    		}
				    		text_panel.add(tabpanel);
						}
				    	
				    	text_last_update = records[i].get('last_update');
				    	textEnabled = true;
		    		} else if (records[i].get('mode') == 'pic') {
				    	pic_last_update = records[i].get('last_update');
		    			var qs = '';
		    			qs += 'last_update='+pic_last_update;
		    			
						var groups = records[i].get('groups');
						for (var x=0; x<groups.length; x++) {
			    			var types = groups[x].types;
			    			var items = types[0].items;
			    			for (var j=0; j< items.length; j++) {
			    				qs+= '&img'+j+'='+items[j].photo;
			    			}
			    			var url = '/restaurants/menu-img-slider.jsp?'+qs;
			    			var pic_panel = new Ext.Panel({
			    				id:'menu-pic',
			    				border:false,
			    				style:'padding-left:0px;',
			    				autoHeight:true,
			                	html:'<iframe src="'+url+'" frameborder="0" marginwidth="0" width="672" height="600"></iframe>'
			    			});
						}
		    			picEnabled = true;
		    		}
	    		}
	    	}
	    	if (textEnabled) {
		    	menupanel.add(text_panel);
		    	menupanel.doLayout();
	    	}
	    	if (picEnabled) {
    			menupanel.add(pic_panel);
    			menupanel.doLayout();
	    	}
	    });
		
		
	    var panel = new Ext.Panel({
	    	el: 'show-restaurant-details',
	        autoHeight: true,
	        autoScroll: true,
	        frame: true,
	        style:'padding:0',
	        title: '<span class="home-centerpanel-header">Restaurant Details <span style="font-weight:normal;">&#39184;&#21381;&#35814;&#24773;</span></span>',
	        iconCls:'icon-book-open',
			tools: [
			    {
			        //text: 'Go back',
			        id: 'search',
			        qtip: {text: goBackDesc},
			        hidden: hideSearchBtn,
			        handler: function(){location.href = latestSearchUrl},
			        scope: this
			    },
			    {
					id: 'left',
			        qtip: {title: prevDesc, text: prevRestName},
			        hidden: hideLeftBtn,
					handler: function(){
						if (fromRecommendedRestaurants) {
							location.href = '/singapore/restaurant/'+prevRestNameIdentifier+'/&src=recommended_restaurants';
						} else {
							location.href = '/singapore/restaurant/'+prevRestNameIdentifier+'/';
						}
					},
			        scope: this
			    },
			    {
					id: 'right',
			        qtip: {title: nextDesc, text: nextRestName},
			        hidden: hideRightBtn,
					handler: function(){
						if (fromRecommendedRestaurants) {
							location.href = '/singapore/restaurant/'+nextRestNameIdentifier+'/&src=recommended_restaurants';
						} else {
							location.href = '/singapore/restaurant/'+nextRestNameIdentifier+'/';
						}
					},
			        scope: this
			    }
			],
	        items: [
		        {
                	xtype:'panel',
                	id:'restaurant-details-head',
                	border:false,
			        style:'margin:10px 0 0;',
                	autoLoad: {
						url: '/restaurants/ShowDetails_Header.jsp?rest-id='+restId,
						timeout: 180,
						scripts: true
					}
		        }
		        ,{
                	xtype:'panel',
                	id:'restaurant-details-promo',
                	frame:true,
                	title:'<a name="promotions"></a><span class="home-centerpanel-header">Promotion <span style="font-weight:normal;">&#20419;&#38144;</span></span>',
					iconCls: 'icon-dollar',
			        style:'margin:10px 0px;',
			        collapsible:true,
                	autoLoad: {
						url: '/restaurants/ShowDetails_Promotion.jsp?rest-id='+restId,
						timeout: 180,
						scripts: true
					}
		        }
		        ,{
                	xtype:'panel',
                	id:'restaurant-details-menu',
                	frame:true,
                	title:'<span id="menu" class="home-centerpanel-header" style="float:left">Menu <span style="font-weight:normal;">&#33756;&#21333;</span><a name="menu">&nbsp;</a></span>',
			        iconCls: 'icon-report',
			        style:'margin:10px 0px;',
			        collapsible:true,
			        html:'<span id="menu-loading_menu" style="padding:7px;"><img src="/shared/sir/images/loading.gif" /> Loading...</span>',
			        hidden:false
		        }
		        ,{
                	xtype:'panel',
                	id:'restaurant-details-additionalinfo',
                	frame:true,
                	title:'<span class="home-centerpanel-header">Additional Info <span style="font-weight:normal;">&#38468;&#21152;&#20449;&#24687;</span></span>',
			        iconCls: 'icon-information',
			        style:'margin:10px 0px;',
			        collapsible:true,
                	autoLoad: {
						url: '/restaurants/ShowDetails_AdditionalInfo.jsp?rest-id='+restId,
						//url: '',
						timeout: 180,
						scripts: true
					}
		        }
		        ,{
                	xtype:'panel',
                	id:'restaurant-details-map',
                	frame:true,
                	title:'<span class="home-centerpanel-header">Map <span style="font-weight:normal;">&#22320;&#22270;</span></span>',
			        iconCls: 'icon-map',
			        style:'margin:10px 0px;',
			        collapsible:true,
                	autoLoad: {
						url: '/restaurants/ShowDetails_Map.jsp?rest-id='+restId,
						timeout: 180,
						scripts: true
					}
		        }
		        ,{
                	xtype:'panel',
                	id:'restaurant-details-restphotos',
                	frame:true,
                	title:'<span class="home-centerpanel-header">Restaurant Photos <span style="font-weight:normal;">&#39184;&#21381;&#29031;&#29255;</span></span>',
			        iconCls: 'icon-images',
			        style:'margin:10px 0px;',
			        collapsible:true,
                	autoLoad: {
						url: '/restaurants/ShowDetails_RestaurantPhotos.jsp?rest-id='+restId,
						timeout: 180,
						scripts: true
					}
		        }
		        ,{
                	xtype:'panel',
                	id:'restaurant-details-dishphotos',
                	frame:true,
                	title:'<span class="home-centerpanel-header">Dish Photos <span style="font-weight:normal;">&#33756;&#32948;&#29031;&#29255;</span></span>',
			        iconCls: 'icon-images',
			        style:'margin:10px 0px;',
			        collapsible:true,
                	autoLoad: {
						url: '/restaurants/ShowDetails_DishPhotos.jsp?rest-id='+restId,
						//url: '',
						timeout: 180,
						scripts: true
					}
		        }
		        ,{
                	xtype:'panel',
                	id:'restaurant-details-reviews',
                	frame:true,
                	title:'<a name="Reviews"></a><span class="home-centerpanel-header">Reviews <span style="font-weight:normal;">&#28857;&#35780;</span></span>',
			        iconCls: 'icon-comments-red',
			        style:'margin:10px 0px;',
			        collapsible:true,
                	autoLoad: {
						url: '/restaurants/ShowDetails_Reviews.jsp?rest-id='+restId,
						timeout: 180,
						scripts: true
					}
		        }
	        ]
	    });
		
		panel.on('render', function(){
			menuStore.load({
		    	waitMsg:'loading...'
		    });
		});
	    panel.render();
	}

});