function showMap(){
	var win = Ext.getCmp('sg-district-map');
	if (win) {
		win.show();
		return;
	}
	//Create window*****************************************************************************
    var mapWindow = new Ext.Window({
    	id: 'sg-district-map',
        title: 'Singapore Districts',
        width: 600,
        height:500,
        autoScroll:true,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
        closeAction: 'hide',
        autoLoad: {
			url: '/restaurants/sg_districts.html',
			scripts: true
		},

        buttons: [{
        text: 'Close',
            handler: function(){mapWindow.hide()},
            scope: this
        }]
    });
    mapWindow.on('render', function(){
    	this.body.setStyle('overflow-y', 'scroll');
    });
	mapWindow.show();
}

function showMap2(){
	var win = Ext.getCmp('sg-district-map2');
	if (win) {
		win.show();
		return;
	}
	//Create window*****************************************************************************
    var mapWindow = new Ext.Window({
    	id: 'sg-district-map2',
        title: 'Singapore Districts',
        width: 600,
        height:500,
        autoScroll:true,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
        closeAction: 'hide',
        autoLoad: {
			url: '/restaurants/sg_districts2.html',
			scripts: true
		},

        buttons: [
	        {
	        	text: 'Close',
	            handler: function(){mapWindow.hide()},
	            scope: this
	        }
        ]
    });
    mapWindow.on('render', function(){
    	this.body.setStyle('overflow-y', 'scroll');
    });
	mapWindow.show();
}

function showPointsRecAnnotation(){
	var win = Ext.getCmp('points-exp-win');
	if (win) {
		win.show();
		return;
	}
	//Create window*****************************************************************************
    var popup = new Ext.Window({
    	id: 'points-exp-win',
        title: 'Points Records Annotation',
        width: 600,
        height:350,
        autoScroll:true,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
        closeAction: 'hide',
        autoLoad: {
			url: '/member/points-records-annotation.html',
			scripts: true
		},

        buttons: [{
        text: 'Close',
            handler: function(){popup.hide()},
            scope: this
        }]
    });
	popup.show();
}

function showRestaurantPhoto(url, desc) {

	var win = Ext.getCmp('show-rest-photo-window-'+url);
	if (win) {
		win.show();
		return;
	}

	//Create window*****************************************************************************
    var newWindow = new Ext.Window({
    	id: 'show-rest-photo-window-'+url,
        title: 'Restaurant Photo',
        width: 750,
        height:'auto',
        autoScroll:true,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
//        maximizable:true,
//        closeAction: 'destroy',
		html: '<div style="padding:10px;text-align:center;"><p style="color:green;font-size:13px;font-weight:bold;padding-bottom:15px;">'+desc+'</p><div><img style="" src="'+url+'" /></div></div>',

        buttons: [
	        {
	        	text: 'Close',
	            handler: function(){newWindow.destroy()},
	            scope: this
	        }
        ]
    });
	newWindow.show();
}

function showHotelPhoto(url, desc) {

	var win = Ext.getCmp('show-hotel-photo-window-'+url);
	if (win) {
		win.show();
		return;
	}

	//Create window*****************************************************************************
    var newWindow = new Ext.Window({
    	id: 'show-hotel-photo-window-'+url,
        title: 'Hotel Photo',
        width: 750,
        height:'auto',
        autoScroll:true,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
//        maximizable:true,
//        closeAction: 'destroy',
		html: '<div style="padding:10px;text-align:center;"><p style="color:green;font-size:13px;font-weight:bold;padding-bottom:15px;">'+desc+'</p><div><img style="" src="'+url+'" /></div></div>',

        buttons: [
	        {
	        	text: 'Close',
	            handler: function(){newWindow.destroy()},
	            scope: this
	        }
        ]
    });
	newWindow.show();
}

function showDishPhoto(url, name, desc, price) {

	var win = Ext.getCmp('show-dish-photo-window-'+url);
	if (win) {
		win.show();
		return;
	}
	
	var htmlStr = '';
	htmlStr += '<div style="padding:10px;">';
	htmlStr += '<p style="color:green;font-size:13px;font-weight:bold;padding-bottom:15px;">'+name+'</p>',
	htmlStr += '<div><img src="'+url+'" /></div>';
	if (desc && desc.length!=0) {
		htmlStr += '<div style="color:green;font-size:12px;font-weight:bold;padding:20px 0 5px 0">Description:</div><div style="color:green;font-size:12px;padding:5px 0 0 15px">'+desc+'</div>';
	}
	if (price && price.length!=0) {
		htmlStr += '<div style="color:green;font-size:12px;font-weight:bold;padding:20px 0 5px 0">Price:</div><div style="color:green;font-size:12px;padding:5px 0 0 15px">'+price+'</div>';
	}
	htmlStr += '</div>';
	//Create window*****************************************************************************
    var newWindow = new Ext.Window({
    	id: 'show-dish-photo-window-'+url,
        title: 'Dish Photo',
        width: 750,
        height:'auto',
        autoScroll:true,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
//        maximizable:true,
//        closeAction: 'destroy',
		html: htmlStr,

        buttons: [
	        {
	        	text: 'Close',
	            handler: function(){newWindow.destroy()},
	            scope: this
	        }
        ]
    });
	newWindow.show();
}

function showMenu(restId) {

	var win = Ext.getCmp('rest-menu-'+restId);
	if (win) {
		win.show();
		return;
	}

	//Create window*****************************************************************************
    var newWindow = new Ext.Window({
    	id: 'rest-menu-'+restId,
        title: 'Restaurant Menu',
        width: 600,
        height:'auto',
        autoScroll:true,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
        autoLoad: {
			url: '/rest-menu.jsp?rest-id='+restId,
			scripts: true
		},
		html: '<div style="padding:10px;"><p style="color:green;font-size:13px;font-weight:bold;padding-bottom:15px;">Dish Menu:</p></div>',

        buttons: [
	        {
	        	text: 'Close',
	            handler: function(){newWindow.destroy()},
	            scope: this
	        }
        ]
    });
	newWindow.show();
}