Effect like Path - Titanium app.js

app.js

//
// Base
//

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

// create tab group
var tabGroup = Titanium.UI.createTabGroup();

// create base UI tab and root window
var win = Titanium.UI.createWindow({  
    title:'Effect like Path',
    backgroundColor:'#fff'
});
var tab = Titanium.UI.createTab({  
    window:win
});
win.hideTabBar();

//  add tabs
tabGroup.addTab(tab);

// open tab group
tabGroup.open();


//
// Table View
//
var table_view = Titanium.UI.createTableView();
win.add(table_view);

image_urls = [
  'http://people.ucsc.edu/~aminer/5dawn250x250.jpg',
  'http://www.acrossthebritain.co.uk/wp-content/uploads/2010/07/Bamburgh-Castle.jpg'
];

for (i = 0; i < image_urls.length; i++) {
  var row = create_row(image_urls[i]);
  table_view.appendRow(row);
}

function create_row(image_url) {
  var row = Ti.UI.createTableViewRow({
    height: 'auto',
    expanded: false,
  });

  // Somehow without adding EventListener to row, photoImageView cannot catch click Event.
  row.addEventListener('click', function(e){});
  
  var maskedView = Ti.UI.createView({
    borderRadius: 5,
    width: 250,
    height: 80,
    top: 10,
    right: 10,
  });

  var photoImageView = Ti.UI.createImageView({
    image: image_url,
    width: 250,
    height: 250,
    hires: true,
  });
  photoImageView.addEventListener('click', function(e){
    var option = row.expanded ? {height: 80, duration: 200} : {height: 250, duration: 200};
    maskedView.animate(option);
    row.expanded = !row.expanded;
  });
  maskedView.add(photoImageView);
  
  row.add(maskedView);
  
  return row;
}