var isMapLoaded = false;
google.load("maps", "2.x");

Ext.onReady(function(){
    var tabs = new Ext.TabPanel('tabs1');
    var mapTab = tabs.addTab('map', "Map of Recent Reviews and Updates");
    commentsTab = tabs.addTab('reviews', 'Recent Reviews (0)');
    updatesTab = tabs.addTab('updates', 'Recent Updates (0)');    
    tabs.activate('map');
	
    mapTab.on('beforeshow', function(){
    	//if (isMapLoaded == false){
    		loadMap();
    		//isMapLoaded = true;
    	//}
    });
    
   	//Recent reviews
   	var mapDs = new Ext.data.Store({
	    proxy: new Ext.data.MemoryProxy(commentData),		
	    reader: new Ext.data.ArrayReader({}, [
				{name: 'restaurant_id', type: 'int'},
				{name: 'restaurant_name'},
				{name: 'address'},
				{name: 'city'},
				{name: 'province'},
				{name: 'postal_code'},
				{name: 'telephone'},
				{name: 'rating', type: 'int'},
				{name: 'type'},
				{name: 'user_id', type: 'int'},
				{name: 'user_name'},
				{name: 'latitude', type: 'float'},
				{name: 'longitude', type: 'float'},
				{name: 'created_date'},
				{name: 'comment'}
              ])
	});
	mapDs.load();
   	
	var commentDs = new Ext.data.Store({
	    proxy: new Ext.data.MemoryProxy(commentData),		
	    reader: new Ext.data.ArrayReader({}, [
				{name: 'restaurant_id', type: 'int'},
				{name: 'restaurant_name'},
				{name: 'address'},
				{name: 'city'},
				{name: 'province'},
				{name: 'postal_code'},
				{name: 'telephone'},
				{name: 'rating', type: 'int'},
				{name: 'type'},
				{name: 'user_id', type: 'int'},
				{name: 'user_name'},
				{name: 'latitude', type: 'float'},
				{name: 'longitude', type: 'float'},
				{name: 'created_date'},
				{name: 'comment'}
              ])
	});
	
	commentDs.setDefaultSort('created_date', 'desc');		
	
	var commentCm = new Ext.grid.ColumnModel([{
		id: "restaurant_name", 
	 	header: "Restaurant Name and Review",
		dataIndex: 'restaurant_name', 
		width: 430,
		renderer: renderTopic,
		css: 'white-space:normal;',
		resizable: false,
		sortable: true
	},{
		header: "Rating", 
		dataIndex: 'rating', 
		width: 100,
		renderer: renderRating,
		resizable: false,
		sortable: true
	},{
		id: "created_date",
		header: "Date", 
		dataIndex: 'created_date', 
		width: 130, 
		locked: false,
		renderer: renderCreatedDate,
		resizable: false,
		sortable: true
     }]);
	
	var commentGrid = new Ext.grid.Grid('grid-comments', {
        ds: commentDs,
        cm: commentCm,	        
        enableColLock:false,
        loadMask: true,
        autoExpandColumn: 'restaurant_name',
        enableColumnMove: false
    });

    commentGrid.getSelectionModel().lock();
	commentGrid.render();
	
	commentGrid.getView().tdClass = "maximized";
	commentGrid.getView().refresh();
	
	var gridFoot = commentGrid.getView().getFooterPanel(true);
    var paging = new Ext.PagingToolbar(gridFoot, commentDs, {
        pageSize: 50,
        displayInfo: true,
        displayMsg: 'Displaying restaurants {0} - {1} of {2}',
        emptyMsg: "No restaurants to display"
    });
    
    var toolbarButton = new Ext.Toolbar.Button({
        pressed: true,
        enableToggle:true,
        text: 'Detailed View',
        cls: 'x-btn-text-icon details',
        toggleHandler: toggleDetails
    });
    
    paging.add('-', toolbarButton);
	commentDs.load();
	commentsTab.setText("Recent Reviews (" + commentDs.getTotalCount() + ")");	

	//Recent restaurant updates        	
	var updateDs = new Ext.data.Store({
	    proxy: new Ext.data.MemoryProxy(updateData),		
	    reader: new Ext.data.ArrayReader({}, [
				{name: 'restaurant_id', type: 'int'},
				{name: 'restaurant_name'},
				{name: 'address'},
				{name: 'city'},
				{name: 'province'},
				{name: 'postal_code'},
				{name: 'telephone'},
				{name: 'average_rating', type: 'int'},
				{name: 'type'},
				{name: 'neighbourhood_id', type: 'int'},
				{name: 'neighbourhood_name'},
				{name: 'latitude', type: 'float'},
				{name: 'longitude', type: 'float'},
				{name: 'created_date'}
              ])
	});
	
	updateDs.setDefaultSort('created_date', 'desc');
			
	var updateCm = new Ext.grid.ColumnModel([{
		id: "restaurant_name", 
	 	header: "Restaurant Name",
		dataIndex: 'restaurant_name', 
		width: 150,
		renderer: renderRestaurant,
		resizable: false,
		sortable: true
	},{
		header: "Neighbourhood", 
		dataIndex: 'neighbourhood_name', 
		width: 100,
		renderer: renderNeighbourhood,
		resizable: false,
		sortable: true
	},{
		header: "Average Rating", 
		dataIndex: 'average_rating', 
		width: 100,
		renderer: renderRating,
		resizable: false,
		sortable: true
	},{
		header: "Date", 
		dataIndex: 'created_date', 
		width: 130, 
		locked:false,
		renderer: renderDate,
		resizable: false,
		sortable: true
     }]);

    var updatesGrid = new Ext.grid.Grid('grid-restaurant-updates', {
        ds: updateDs,
        cm: updateCm,
        enableColLock:false,
        loadMask: true,
        autoExpandColumn: 'restaurant_name',
        enableColumnMove: false      
    });

    updatesGrid.getSelectionModel().lock();
	updatesGrid.render();
	    	
    new Ext.PagingToolbar(updatesGrid.getView().getFooterPanel(true), updateDs, {
        pageSize: 25,
        displayInfo: true,
        displayMsg: 'Displaying restaurants {0} - {1} of {2}',
        emptyMsg: "No restaurants to display"
    });
        	
	updateDs.load();
	updatesTab.setText("Recent Updates (" + updateDs.getTotalCount() + ")");	
		
  loadMap();		
		
	function loadMap(){
		if (Ext.util.GoogleMaps.isAvailable() == true){
			for (var i=0; i<updateDs.getCount(); i++){
				mapDs.add(updateDs.getAt(i));
			}
			
			var oMap = Ext.util.GoogleMaps.createMap(Ext.get("map"),  document.getElementById("map_area"), mapDs);
			
			var html = '<table cellspacing="5" cellpadding="5" border="0" style="border: 1px solid #000000; background-color: #ffffff; z-index:9999; filter:alpha(opacity=80); -moz-opacity:0.8;">';
			html = html + '<tr class="legend"><td><img src="/images/marker_20_red.png"/></td><td>Review</td></tr>'
			html = html + '<tr class="legend"><td><img src="/images/marker_20_brown.png"/></td><td>Update</td></tr>'
			html = html + '</table>';
			
			function Legend() {
			}
			
			Legend.prototype = new google.maps.Control();
			Legend.prototype.initialize = function(oMap) {
				var container = document.createElement("div");			
				
				container.innerHTML = html;
				
				
				oMap.getContainer().appendChild(container);
				return container;
			}
			
			Legend.prototype.getDefaultPosition = function() {
				return new google.maps.ControlPosition(G_ANCHOR_BOTTOM_RIGHT, new google.maps.Size(7, 21));
			}

			oMap.addControl(new Legend());
		}
	}
	
	function toggleDetails(btn, pressed){
	    document.getElementById("neighbourhood_id").focus();
	    
	    if (pressed == true){
	       toolbarButton.setText("Detailed View");
	    } else {
	       toolbarButton.setText("Standard View"); 
	    }
	    
	    commentCm.getColumnById('restaurant_name').renderer = pressed ? renderTopic : renderTopicPlain;
    	commentCm.getColumnById('created_date').renderer = pressed ? renderCreatedDate : renderCreatedDatePlain;
    	commentGrid.getView().refresh();    	
	}
	
	function renderRating(value, p, record){			
		var fullStars = "";
		var emptyStars = "";			
		
		for (var i=0; i<value; i++){
			fullStars = fullStars + "*";
		}
		
		for (var i=0; i<(5-value); i++){
			emptyStars = emptyStars + "*";
		}
		
		return '<font class="ratings" color="#cc3300">' + fullStars + '</font><font class="ratings" color="#cccccc">' + emptyStars + '</font>';
	}
	
	function renderTopic(value, p, record){
    	return String.format('{0}<br />{1}', renderRestaurant(value, p, record), Ext.util.Format.ellipsis(record.data['comment'], record.data['comment'].length-1));    	
	}
	
	function renderTopicPlain(value, p, record){
    	return renderRestaurant(value, p, record);
	}
	
	function renderRestaurant(value, p, record){
	    return String.format('<a href="/restaurant/{1}/">{0}</a>', value, record.data['restaurant_id']);
	}
	 
	function renderUsername(value, p, record){
	    return String.format('<a href="/user.php?id={1}">{0}</a>', value, record.data['user_id']);
	}
	
	function renderNeighbourhood(value, p, record){
		return String.format('<a href="/restaurant_list.php?neighbourhood_id={1}">{0}</a>', value, record.data['neighbourhood_id']);
	}
	
	function renderCreatedDate(value, p, record){
		var user_name = renderUsername(record.data['user_name'], p, record);
    	return String.format('{0}<br/>by {1}', renderDate(value, p, record), user_name);
	}
	
	function renderCreatedDatePlain(value, p, record){			
    	return String.format('{0}', renderDate(value, p, record), record.data['user_name']);
	}
	
	function renderDate(value, p, record){			
		var dt = Date.parseDate(value, Date.patterns.ISO8601Long);
		return dt.format("d.m.Y") + " at " + dt.format("h:i A");
	}
});