var win = Ti.UI.currentWindow;

win.showNavBar(); // Force the navbar to show

// Create the icon and place it in the right hand side of the navbar
var navIcon = Ti.UI.createImageView({
	// The image is brought over from the row tapped from the previous window
	url: win.data.leftImage,
	height: 30
});
win.rightNavButton = navIcon;

// Background image view
var bgImage = Ti.UI.createImageView({
    height	: 500,
	top		: -30,
	image	: 'images/bg.png',
	zIndex	: 0
});
win.add(bgImage);


/**
 * Starts a blank array called 'rows'.
 * 'rows' will be used to store the data for the tableview.  The general work flow will be
 * to manually create a tableViewRow and append labels, images, and whatever else needed for
 * the row.  That row, with all it's labels, images, etc. will then be pushed in to the 'rows'
 * array to be used by the tableView.
 */
var rows = [];
	
/**
 * This is where you would want to start looping through your rows of data.  Each loop through
 * you would add your tableViewRow object and it's children (i.e. labels, images, etc.).  At 
 * the end of the loop, push the 'row' to the 'rows' array above to create a new index for storage
 *
 * NOTE:  I'm faking a for loop here to simulate multiple rows of data that would be pulled
 * from your data source
 */

for (var i = 0; i < 4; i++) {
	var row = Titanium.UI.createTableViewRow({ 
		height			: 'auto',	// Make sure the row adjusts to whatever is inside it
		backgroundColor	: 'transparent' // Set the background color for the row
	});

	// Title for the row
	var title = Titanium.UI.createLabel({ 
		text	: 'Website Design',	// The text to populate the row with    
		font	: { fontSize: 14, fontWeight: 'bold' },  // Font styling
		height	: 20,
		width	: 200,
		top		: 10,
		left	: 10,
		color	: '#fff'				// Text color
		
	});
	// Tags label
	var tag = Titanium.UI.createLabel({ 
		text	: 'HTML & CSS',
		font	: { fontSize: 11 },
		height	: 40,
		width	: '70%',
		top		: 16,
		left	: 10,
		color	: '#fff'
	});

	// Wrapper view for date
	var wrapper = Titanium.UI.createView({ 
		width: 50,
		backgroundColor	: '#fff', 

	
		height	: 'auto',
		right	: 10,
		borderRadius: 3 // Round the corners of this view
	});
	// Due date label
	var buyNow = Titanium.UI.createLabel({ 
  
		text		: 'Connect',
		textAlign	: 'center',
		height		: 20,
		left		: 0,
		font		: { fontSize: 9, fontWeight: 'bold' },
		color		: '#444'
	});
	/**
	 * Here we're adding the date label to the wrapper.  This allows us to control
	 * positioning better and also add a gradient around the labels.  Think of it as a div
	 * that wrap the label inside.
	 */
	wrapper.add(buyNow);

	/**
	 * Below we're adding all the above items to the tableViewRow object we created previously
	 * After the row is done beig populated, it's pushed as a new index in the 'rows' array
	 */
	row.add(title);
	row.add(tag);
	row.add(wrapper);

	rows.push(row);
}
// NOTE: If you are looping through your data you would stop the loop here.

// ----- Create the actual tableView for the page ----- //
var tableview = Titanium.UI.createTableView({
	data			: rows,				// Assigns the array of data to the tableView
	backgroundColor	: 'transparent',	// Force the tableView to be transparent 
	layout			: 'vertical',		// The layout of the table
	bottom			: 0,
	height			: '68%',
	style			: Titanium.UI.iPhone.TableViewStyle.GROUPED,
	separatorColor	: '#999'	
});
// Add the tableView to the window
win.add(tableview);

// ----- Create an event listener for the tableView ----- //
tableview.addEventListener('click', function() {
	// Do what you need here
});