//Ext.EventManager.on(window, 'load', function(){
Ext.onReady(function(){
	var domNode = Ext.get('home-tabs');
	if (domNode) {
		var searchTabHTML = '';
		searchTabHTML += '<table width="100%">';
		searchTabHTML += '<tr valign="top">';
		searchTabHTML += '<td width="33%" style="padding-right:20px;font-size:13px;">';
		searchTabHTML += '<div><b>Comprehensive search feature</b></div><p>Offers comprehensive search features for customer to find diverse mid-range to upscale restaurant / hotel / air-ticket information effectively. The search function can be based on key words of English text or '+Url.decode('%E4%B8%AD%E6%96%87')+' input, and combined with advanced options available to narrow the search results.</p>';
		searchTabHTML += '</td>';
		searchTabHTML += '<td width="33%" style="padding-right:20px;font-size:13px;">';
		searchTabHTML += '<div><b>Restaurant search</b></div><p><ul class="features" style="padding-left:1px;" style="padding-left:1px;"><li><a href="/">Search by cuisine</a></li><li><a href="/">Search by discount</a></li><li><a href="/">Search by VIP room</a></li><li><a href="/restaurants/RestaurantDistrictSearch.jsp">Search by district</a></li><li><a href="/">Search by occasion</a></li><li><a href="/">Search by expense</a></li></ul></p>';
		searchTabHTML += '</td>';
		searchTabHTML += '<td width="33%" style="padding-right:20px;font-size:13px;">';
		searchTabHTML += '<div><b>Hotel search</b></div><p><ul class="features" style="padding-left:1px;"><li><a href="/hotels/Hotels.jsp">Search by city</a></li><li><a href="/hotels/Hotels.jsp">Search by room availability</a></li><li><a href="/hotels/Hotels.jsp">Search by hotel name</a></li><li><a href="/hotels/Hotels.jsp">Search by district</a></li><li><a href="/hotels/Hotels.jsp">Search by hotel star-rating</a></li><li><a href="/hotels/Hotels.jsp">Search by hotel function room</a></li></ul></p>';
		searchTabHTML += '</td>';
		searchTabHTML += '</tr>';
		searchTabHTML += '</table>';
		
		var bookTabHTML = '';
		bookTabHTML += '<table width="100%">';
		bookTabHTML += '<tr valign="top">';
		bookTabHTML += '<td width="33%" style="padding-right:20px;font-size:13px;">';
		bookTabHTML += '<div><b>Online booking process</b></div><p><div>Simply provide basic information such as name, date and time, contact person etc. to make a booking.</div><ul class="features" style="padding-left:1px;"><li><a href="/">Restaurant booking</a></li><li><a href="/hotels/Hotels.jsp">Hotel booking</a></li><li><a href="/hotels/Hotels.jsp">Flight booking</a></li></ul></p>';
		bookTabHTML += '</td>';
		bookTabHTML += '<td width="33%" style="padding-right:20px;font-size:13px;">';
		bookTabHTML += '<div><b>Phone booking process</b></div><p><div>While on the road, just call our customer service center to tell your requirements, we will make a booking for you.</div><ul class="features" style="padding-left:1px;"><li><a href="/">Restaurant booking</a></li><li><a href="/hotels/Hotels.jsp">Hotel booking</a></li><li><a href="/hotels/Hotels.jsp">Flight booking</a></li></ul></p>';
		bookTabHTML += '</td>';
		bookTabHTML += '<td width="33%" style="padding-right:20px;font-size:13px;">';
		bookTabHTML += '<div><b>Manage your booking</b></div><p><ul class="features" style="padding-left:1px;"><li><a href="/member/MemberRestaurantBookingRecords.jsp">Monitor the status of your booking</a></li><li><a href="/member/MemberRestaurantBookingRecords.jsp">Modify your booking</a></li><li><a href="/member/MemberRestaurantBookingRecords.jsp">Cancel your booking</a></li></ul></p>';
		bookTabHTML += '</td>';
		bookTabHTML += '</tr>';
		bookTabHTML += '</table>';

		var dineTabHTML = '';
		dineTabHTML += '<table width="100%">';
		dineTabHTML += '<tr valign="top">';
		dineTabHTML += '<td width="33%" style="padding-right:20px;font-size:13px;">';
		dineTabHTML += '<div><b>Save your $</b></div><p><div>We offer you</div><ul class="features" style="padding-left:1px;"><li><a href="/">Great value for dining</a></li><li><a href="/hotels/Hotels.jsp">Great value for accommodation</a></li><li><a href="/hotels/Hotels.jsp">Great value for flying</a></li></ul></p>';
		dineTabHTML += '</td>';
		dineTabHTML += '<td width="33%" style="padding-right:20px;font-size:13px;">';
		dineTabHTML += '<div><b>Get points</b></div><p>We will help you to record the points you earn after each successful booking. These reward points  can be redeemed to gifts.</p>';
		dineTabHTML += '</td>';
		dineTabHTML += '<td width="33%" style="padding-right:20px;font-size:13px;">';
		dineTabHTML += '&nbsp;';
		dineTabHTML += '</td>';
		dineTabHTML += '</tr>';
		dineTabHTML += '</table>';

		var redeemTabHTML = '';
		redeemTabHTML += '<table width="100%">';
		redeemTabHTML += '<tr valign="top">';
		redeemTabHTML += '<td width="33%" style="padding-right:20px;font-size:13px;">';
		redeemTabHTML += '<div><b>Points based reward system</b></div><p>Every time you book with ninelogic.com online or by phone, can earn points which can be redeemed for great rewards, from dinning voucher to various gifts, even maybe cash.</p>';
		redeemTabHTML += '</td>';
		redeemTabHTML += '<td width="33%" style="padding-right:20px;font-size:13px;">';
		redeemTabHTML += '<div><b>Free membership</b></div><p><div>Our rewards scheme based on points accumulated and membership level as follows</div><ul class="features" style="padding-left:1px;"><li><a href="/member/Rewards.jsp">Ordinary card member</a></li><li><a href="/member/Rewards.jsp">Gold card member (VIP)</a></li><li><a href="/member/Rewards.jsp">Platinum card member (VIP)</a></li><li><a href="/member/Rewards.jsp">Diamond card member (VIP)</a></li></ul></p>';
		redeemTabHTML += '</td>';
		redeemTabHTML += '<td width="33%" style="padding-right:20px;font-size:13px;">';
		redeemTabHTML += '&nbsp;';
		redeemTabHTML += '</td>';
		redeemTabHTML += '</tr>';
		redeemTabHTML += '</table>';
		
		//form tabs*************************************************************************************
	    var tabs = new Ext.TabPanel({
	        activeTab: 0,
	        width:900,
	        height:230,
	        tabWidth:120,
	        //minTabWidth:120,
	        //resizeTabs:true,
	        style:'background:transparent;',
	        bodyStyle:'padding:10px;background:transparent url("/shared/sir/images/home-tabs-bg-1x220.gif") repeat-x;',
	        border: false,
	        defaults:{bodyStyle:'font-size:13px;'},
	        items:[
	        	{
	                title:'<span id="search-tab-title" style="font-size:13px;">Search</span>',
	                id:'search-tab',
	                bodyStyle: 'background:transparent;font-size:12px;',
	                html: searchTabHTML
	            },{
	                title:'<span id="book-tab-title" style="font-size:13px;">Book</span>',
	                id:'book-tab',
	                bodyStyle: 'background:transparent',
	                html: bookTabHTML
		        },{
	                title:'<span id="dine-accomodate-fly-tab-title" style="font-size:13px;">Dine, Accomodate &amp; Fly</span>',
	                id:'dine-accomodate-fly-tab',
	                bodyStyle: 'background:transparent',
	                html: dineTabHTML
	            },{
	                title:'<span id="redeem-tab-title" style="font-size:13px;">Redeem</span>',
	                id:'redeem-tab',
	                bodyStyle: 'background:transparent',
	                html: redeemTabHTML
	            }
	        ]
		});
		

		tabs.on('render', function(){
			Ext.get('search-tab-title').on('mouseover', function(){
				tabs.activate(Ext.getCmp('search-tab'));
				tabs.syncSize();
			});
			Ext.get('book-tab-title').on('mouseover', function(){
				tabs.activate(Ext.getCmp('book-tab'));
				tabs.syncSize();
			});
			Ext.get('dine-accomodate-fly-tab-title').on('mouseover', function(){
				tabs.activate(Ext.getCmp('dine-accomodate-fly-tab'));
				tabs.syncSize();
			});
			Ext.get('redeem-tab-title').on('mouseover', function(){
				tabs.activate(Ext.getCmp('redeem-tab'));
				tabs.syncSize();
			});

			Ext.getCmp('search-tab').on('activate', function(){
				Ext.get('search-tab-title').on('mouseover', function(){
					tabs.activate(Ext.getCmp('search-tab'));
					tabs.syncSize();
				});
			});
			Ext.getCmp('book-tab').on('activate', function(){
				Ext.get('book-tab-title').on('mouseover', function(){
					tabs.activate(Ext.getCmp('book-tab'));
					tabs.syncSize();
				});
			});
			Ext.getCmp('dine-accomodate-fly-tab').on('activate', function(){
				Ext.get('dine-accomodate-fly-tab-title').on('mouseover', function(){
					tabs.activate(Ext.getCmp('dine-accomodate-fly-tab'));
					tabs.syncSize();
				});
			});
			Ext.getCmp('redeem-tab').on('activate', function(){
				Ext.get('redeem-tab-title').on('mouseover', function(){
					tabs.activate(Ext.getCmp('redeem-tab'));
					tabs.syncSize();
				});
			});

		});
		
		tabs.render('home-tabs')
	}
});