Help with CoverSlider code

Hello,

I downloaded the CoverSliderExample project from https://github.com/atsusy/CoverSliderExample but completely clueless as to how to make it useable - tried to the best of my knowledge so would like some help please.

This is what I get when I run the project: https://picasaweb.google.com/lh/photo/h2PuSs2im7elNqHwpej9PtMTjNZETYmyPJy0liipFm0?feat=directlink (menu with menu button and white body section).

App.js code:

var CoverSlider = require('/lib/coverSlider');
 
var window = Ti.UI.createWindow();
 
var menu = (require('/ui/menu')).createMenuView({
 
});
window.add(menu);
 
var home = (require('/ui/home')).createHomeView({
    width:320,
    height:460
});
window.add(home);
 
 
var candidates = (require('/ui/candidates')).createCandidatesView({
    width:320,
    height:460,
    visible:false
});
window.add(candidates);
 
var twitter = (require('/ui/twitter')).createTwitterView({
    width:320,
    height:460,
    visible:false
});
window.add(twitter);
 
 
var settings = (require('/ui/settings')).createSettingsView({
    width:320,
    height:460,
    visible:false
});
window.add(settings);
 
var detail = Ti.UI.createView({
    backgroundColor:'#333'
});
window.add(detail);
 
var covers = [home, candidates, twitter, settings];
 
var coverSlider = CoverSlider.createCoverSlider({
    left:menu,
    cover:covers[0],
    right:detail
});
 
Ti.App.addEventListener('app:changeCover', function(e){
    if(covers[e.index]){
        coverSlider.changeCover(covers[e.index]);
    }
});
 
Ti.App.addEventListener('app:toggleCover', function(e){
    if(coverSlider.current() === 'cover'){
        coverSlider.slideCover('left');
    }else{
        coverSlider.slideCover('cover');
    }
});
 
window.open();

Candidates.js code:

exports.createCandidatesView = function(args){
    var view = Ti.UI.createView({
        backgroundColor:'white'
    });
 
    // 2.0?????????????????...
    if(args){
        for(var arg in args){
            view[arg] = args[arg]
        }
    }
 
    var flexSpace = Ti.UI.createButton({
        systemButton:Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
    });
 
    var title = Ti.UI.createLabel({
        text:'Candidates',
        color:'white',
        shadowColor:'#666',
        shadowOffset:{x:0.0, y:1.0},
        font:{
            fontSize:24,
            fontWeight:'bold'
        }
    });
 
    var toMenu = Ti.UI.createButton({
        style:Ti.UI.iPhone.SystemButtonStyle.DONE,
        image:'/images/menu.png',
        width:32,
        height:32,
    });
 
    var bar = Ti.UI.createToolbar({
        items:[toMenu, flexSpace, title, flexSpace],
        top:0,
        barColor:'#f32',
        height:44,
    });
    view.add(bar);
 
    toMenu.addEventListener('click', function(){
        Ti.App.fireEvent('app:toggleCover');
    });
 
    return view;
};

Example of what, but not limited to, I would like to add:

function formatDate()
{
var date = new Date();
var datestr = date.getMonth()+'/'+date.getDate()+'/'+date.getFullYear();
if (date.getHours()>=12)
{
datestr+=' '+(date.getHours()==12 ? date.getHours() : date.getHours()-12)+':'+date.getMinutes()+' PM';
}
else
{
datestr+=' '+date.getHours()+':'+date.getMinutes()+' AM';
}
return datestr;
}
 
var data = [
{title:"Row 1"},
{title:"Row 2"},
{title:"Row 3"}
];
 
var lastRow = 4;
 
var tableView = Ti.UI.createTableView({
data: data
});
 
window.add(tableView);
 
var border = Ti.UI.createView({
backgroundColor:"#576c89",
height:2,
bottom:0
});
 
var tableHeader = Ti.UI.createView({
backgroundColor:"#e2e7ed",
width:320,
height:60
});
 
// fake it til ya make it.. create a 2 pixel
// bottom border
tableHeader.add(border);
 
var arrow = Ti.UI.createView({
backgroundImage:"../images/whiteArrow.png",
width:23,
height:60,
bottom:10,
left:20
});
 
var statusLabel = Ti.UI.createLabel({
text:"Pull to reload",
left:55,
width:200,
bottom:30,
height:"auto",
color:"#576c89",
textAlign:"center",
font:{fontSize:13,fontWeight:"bold"},
shadowColor:"#999",
shadowOffset:{x:0,y:1}
});
 
var lastUpdatedLabel = Ti.UI.createLabel({
text:"Last Updated: "+formatDate(),
left:55,
width:200,
bottom:15,
height:"auto",
color:"#576c89",
textAlign:"center",
font:{fontSize:12},
shadowColor:"#999",
shadowOffset:{x:0,y:1}
});
 
var actInd = Titanium.UI.createActivityIndicator({
left:20,
bottom:13,
width:30,
height:30
});
 
tableHeader.add(arrow);
tableHeader.add(statusLabel);
tableHeader.add(lastUpdatedLabel);
tableHeader.add(actInd);
 
tableView.headerPullView = tableHeader;
 
 
var pulling = false;
var reloading = false;
 
function beginReloading()
{
// just mock out the reload
setTimeout(endReloading,2000);
}
 
function endReloading()
{
// simulate loading
for (var c=lastRow;c<lastRow+10;c++)
{
tableView.appendRow({title:"Row "+c});
}
lastRow += 10;
 
// when you're done, just reset
tableView.setContentInsets({top:0},{animated:true});
reloading = false;
lastUpdatedLabel.text = "Last Updated: "+formatDate();
statusLabel.text = "Pull down to refresh...";
actInd.hide();
arrow.show();
}
 
tableView.addEventListener('scroll',function(e)
{
var offset = e.contentOffset.y;
if (offset < -65.0 && !pulling && !reloading)
{
var t = Ti.UI.create2DMatrix();
t = t.rotate(-180);
pulling = true;
arrow.animate({transform:t,duration:180});
statusLabel.text = "Release to refresh...";
}
else if((offset > -65.0 && offset < 0 ) && pulling && !reloading)
{
pulling = false;
var t = Ti.UI.create2DMatrix();
arrow.animate({transform:t,duration:180});
statusLabel.text = "Pull down to refresh...";
}
});
 
tableView.addEventListener('dragEnd', function()
{   
if(pulling && !reloading)
{
reloading = true;
pulling = false;
arrow.hide();
actInd.show();
statusLabel.text = "Reloading...";
tableView.setContentInsets({top:60},{animated:true});
tableView.scrollToTop(-60,true);
arrow.transform=Ti.UI.create2DMatrix();
beginReloading();
}
});

In a nutshell, I would like to know how to add content to the Candidate.js e.g. open a web window, insert a table etc.

Titanium Studio, build: 2.1.1.20, Mac running Lion

Many Thanks