LinkedIn effect - Titanium

app.js

// right navigation button
var btn = Ti.UI.createButton({
	title:'button'
});	

// window
var win = Ti.UI.createWindow({
	rightNavButton:btn,
	backgroundColor:'blue'
});

// data for the table
var tableData = [];
for(var i = 0; i < 40; i++){
	tableData.push({
		title:'Row #'+(i+1)
	});
}

// table view
var table = Ti.UI.createTableView({
	top:0,left:0,
	rowHeight:75,
	data: tableData
});
// null the data, we don't need it anymore
tableData = null;

// create a view for the touch event
var view = Ti.UI.createView({
	left:20,top:20,width:130,height:170
});

// add the table to the window
win.add(table);
// open the window
win.open({modal:true});

// when the view is clicked, the table is tiny, so make it bigger and remove the view
view.addEventListener('click', function(){
	var t = Titanium.UI.create2DMatrix();
	win.remove(view);
	table.animate({transform:t,top:0,left:0}, function(){
		win.rightNavButton = btn1;	
		t = null;
	});
});

// when the button is clicked, make the table tiny, place it in the top left corner and add the view
btn.addEventListener('click', function(){
	var t = Titanium.UI.create2DMatrix();
	t = t.scale(0.25);
	table.animate({transform:t,top:-210,left:-150}, function(){
		win.add(view);
		win.rightNavButton = null;
		t = null;
	});
});