old.js

var TRANSITIONS = require('transitions');
var THEME = require("themes/flat/theme");
var BUTTONS = require("controls/buttons");

var repeatingPatternTexture = new Texture('./assets/menuIcon.png', 1)
var repeatingPatternSkin = new Skin({ texture: repeatingPatternTexture, width: 244, height: 88, tiles: { left:0, right:0, top:0, bottom:0 }, });
var labelStyle = new Style( { font: "15px Helvetica, sans-serif;", color:"white" } );
var blueSkin = new Skin({ fill: "#88AAFF",});
var whiteSkin = new Skin({ fill: 'white',});
var redSkin = new Skin({fill:'red'});
var buttonStyle = new Style({ font: "15px Helvetica, sans-serif;", color:"white", skin: redSkin });
var buttonStyle1 = new Style({ font: "25px Helvetica, sans-serif;", color:"white", skin: redSkin });
var taskNameStyle = new Style({ font: "25px Helvetica, sans-serif; bold;", color:"black" });
var taskStyle = new Style({ font: "20px Helvetica, sans-serif;", color:"black" });

var currentScreen = "Temperature";
var toScreen = "Menu";

var MainScreen = Container.template(function($) { return { left: 0, right: 0, top: 0, bottom: 0, active: true, skin: blueSkin, behavior: Object.create((
	MainScreen.behaviors[0]).prototype)
}});


MainScreen.behaviors = new Array(2);
MainScreen.behaviors[0] = Behavior.template({
	onCreate: function(container, data) {
	},
	onTriggerTransition: function(container) {
		var toScreenObj = converter(toScreen);
		
		if(toScreen == "Menu") {
			container.run( new TRANSITIONS.Push(), container.last, toScreenObj, { direction : "right", duration : 400 } );
		} else {
			container.run( new TRANSITIONS.Push(), container.last, toScreenObj, { direction : "left", duration : 400 } );
		}
	},
})

// FUNCTIONS
var converter = function(input) {
	if(input == "Menu") {
		return MenuScreen;
	} else if(input == "Schedule")
		return ScheduleScreen;
	else if(input == "Temperature")
		return TemperatureScreen;
	else
		return SurvivalScreen;
}

// BUTTONS
var backButton = BUTTONS.Button.template(function($){ return{
	left: 50, right: 50, top: 50, height:50,
	contents: [
		new Label({left:0, right:0, height:40, string:"Go Back", style: labelStyle})
	],
	behavior: Object.create(BUTTONS.ButtonBehavior.prototype, {
		onTap: { value: function(content){
			toScreen = currentScreen;
			content.bubble("onTriggerTransition");
		}}
	})
}});

var newMenu = Container.template(function($) { return { 
	left: 1, top:1, width: 244, height: 88, skin: repeatingPatternSkin, 
	contents: [ new Label({left:0, right:0, height:88, width:244, string:"", style: buttonStyle})],
	behavior: Object.create(BUTTONS.ButtonBehavior.prototype, {
		onTouchBegan: function(container, id, x, y, ticks) {
			toScreen = "Menu";
			container.bubble("onTriggerTransition");
		}
	})
	} 
});

//create new schedule screen on touch the plus button

//CHANGE THIS, Direct to create Schedule screen
var newScheduleScreen = Container.template(function($) { return { 
	left: 1, top:1, width: 244, height: 88, skin: repeatingPatternSkin, 
	contents: [ new Label({left:0, right:0, height:88, width:244, string:"", style: buttonStyle})],
	behavior: Object.create(BUTTONS.ButtonBehavior.prototype, {
		onTouchBegan: function(container, id, x, y, ticks) {
			toScreen = "newSchedule";
			container.bubble("onTriggerTransition");
		}
	})
	} 
});


// plus button to go to create schedule screen

var plusButton = BUTTONS.Button.template(function($){ return{
	left: 285, right: 15, top: 20, height:20,
	contents: [
		new Label({left:0, right:0, height:40, string:"+", style: buttonStyle1})
	],
	behavior: Object.create(BUTTONS.ButtonBehavior.prototype, {
		onTap: { value: function(content){
			toScreen = "Menu"; // change to new schedule screen 
			content.bubble("onTriggerTransition");
		}}
	})
}});

// plus button to go to create schedule screen

/* NOT IMPLEMENTED YET
var deleteButton = BUTTONS.Button.template(function($){ return{
	left: 285, right: 15, top: 20, height:20,
	contents: [
		new Label({left:0, right:0, height:40, string:"+", style: buttonStyle1})
	],
	behavior: Object.create(BUTTONS.ButtonBehavior.prototype, {
		onTap: { value: function(content){
			toScreen = "Menu"; // change to new schedule screen 
			content.bubble("onTriggerTransition");
		}}
	})
}});
*/

var menuButton = BUTTONS.Button.template(function($){ return{
	left: 1, right: 200, top: 1, height:50,
	contents: [
		new Label({left:0, right:0, height:40, string:"Menu", style: buttonStyle})
	],
	behavior: Object.create(BUTTONS.ButtonBehavior.prototype, {
		onTap: { value: function(content){
			toScreen = "Menu";
			content.bubble("onTriggerTransition");
		}}
	})
}});

var survivalButton = BUTTONS.Button.template(function($){ return{
	left: 50, right: 50, top: 50, height:50,
	contents: [ new Label({left:0, right:0, height:40, string:"Survival", style: labelStyle})],
	behavior: Object.create(BUTTONS.ButtonBehavior.prototype, {
		onTap: { value: function(content){
			toScreen = "Survival";
			content.bubble("onTriggerTransition");
		}}
	})
}});
var scheduleButton = BUTTONS.Button.template(function($){ return{
	left: 50, right: 50, top: 50, height:50,
	contents: [ new Label({left:0, right:0, height:40, string:"Schedules", style: labelStyle})],
	behavior: Object.create(BUTTONS.ButtonBehavior.prototype, {
		onTap: { value: function(content){
			toScreen = "Schedule";
			content.bubble("onTriggerTransition");
		}}
	})
}});
var temperatureButton = BUTTONS.Button.template(function($){ return{
	left: 50, right: 50, top: 50, height:50,
	contents: [	new Label({left:0, right:0, height:40, string:"Temperature", style: labelStyle})],
	behavior: Object.create(BUTTONS.ButtonBehavior.prototype, {
		onTap: { value: function(content){
			toScreen = "Temperature";
			content.bubble("onTriggerTransition");
		}}
	})
}});

var bButton = new backButton();
var tButton = new temperatureButton();
var sButton = new scheduleButton();
var suButton = new survivalButton();



// populate the screen with existed schedules
//start

var THEME = require('themes/sample/theme');
var SCROLLER = require('mobile/scroller');
var SCREEN = require('mobile/screen');


// SCREENS
var MenuScreen = Column.template(function($) { return { left: 0, right: 0, top: 0, bottom: 0, skin: blueSkin, contents: [
	Label($, { left: 0, right: 0, top: 20, style: labelStyle, string: 'Menu', }),
	tButton,
	sButton,
	suButton,
	bButton,
], }});

var ScheduleScreen = Container.template(function($) { return { left: 0, right: 0, top: 0, bottom: 0, skin: blueSkin, contents: [
	Label($, { left: 0, right: 0, style: labelStyle, string: '', }),
	new menuButton(),
	new newMenu(),
	new plusButton(),
	screen
	
],
 }});


/* ASSETS */
var blackSkin = new Skin({ fill: 'black',});
var whiteSkin = new Skin({ fill: 'white',});
var yellowSkin	= new Skin({ fill: 'yellow'});
var blueSkin = new Skin({fill: 'blue'})
var separatorSkin = new Skin({ fill: 'silver',});

/* STYLES */
var productNameStyle = new Style({  font: 'bold 22px', horizontal: 'left', vertical: 'middle', lines: 1, });
var productDescriptionStyle = new Style({  font: '16px', horizontal: 'left', vertical: 'middle', left: 1, color: 'Black' });

/* STATIC */
/* A simple array of objects. Each will be used as a single
 * entry in our scrollable list. */
 
 
//Change this Daniel

var newSchedule = [{name: "Morning Tea", 
	temperature: "100 C", 
	repeat: "1", 
	repeatedDays:"Mon, Tu", 
	time: "10:45"}];

//var test = [    // this is the schedule data structure. 
//    	{title: '*Mornig Tea Scheduled at 10:30 on Mon and Wed'},
//    	{title: '*Evening Coffee Scheduled at 9:20 everyday'}];

function generateDisplayString(newSchedule) {
	result = [];
	for (var i = 0; i < newSchedule.length; i++) {
		temp = i+1+"."+newSchedule[i].name + " scheduled at " + newSchedule[i].time + " on " + newSchedule[i].repeatedDays;
		dict = {};
		dict["title"] = temp;
		result.push(dict);
	}
	return result;
}    


/* This is a template that will be used to for each entry populating the list. 
 * Note that it is anticipating an object each time in is instanciated */
var ProcessorLine = Line.template(function($) { return { left: 0, right: 0, active: true, skin: THEME.lineSkin, 
    behavior: Object.create(Behavior.prototype, {
    	/* Gives the user some visual feedback on which entry they have tapped.
    	 * note that the skin is reverted to white in onTouchEnded() */    	 
    	onTouchBegan: { value: function(container, id, x,  y, ticks) {
    		//container.skin = yellowSkin;
    	}},
    	/* Traces out the value of the first Label's string. The
    	 * silly string of "first" in the trace can be thought of as
    	 * container.Column.Container.Label.string.  This pattern can
    	 * be seen reading down the contents of this object below */
    	onTouchEnded: { value: function(container, id, x,  y, ticks) {	
			container.skin = whiteSkin;
			trace(container.first.first.first.string+"\n");
		}}
    }),
	contents: [
     	Column($, { left: 0, right: 0, contents: [
     		Container($, { left: 4, right: 4, height: 32, 
     			contents: [
     			           /* This label expects that the object passed to ProcessorLine() 
     			            * includes a value for title.  Note that this Label is not marked
     			            * as active. Touches registered here will bubble back up to the
     			            * nested objects until it hits one which is active. */
 //    			           Label($, { left: 10, style: productNameStyle, string: $.title,}),
     			           /* This label is expecting a value for button.  Note that this Label
     			            * is marked active.  Touches registered here will be handeled here */
     			           Label($, { left: 0, right: 0, style: productDescriptionStyle, skin: whiteSkin, active: true, string: $.title,
     			               behavior: Object.create(Behavior.prototype, {
     			           		    	/* When this label is touched, simply trace out its string.
     			           		    	 * Note that no chain of "first" is needed here because the
     			           		    	 * touch happened in the object that contains the property
     			           		    	 * we want to trace */
     			           		    	onTouchEnded: { value: function(label, id, x,  y, ticks) {	
											trace(label.string+"\n");
										}}
								})
     			           }), 
 			           ], 
	           }),
     		Line($, { left: 0, right: 0, height: 1, skin: separatorSkin, }),
     	], }),
     ], 
 }});

/* This is template for a container which takes up the
 * whole screen.  It contains only a single object,
 * the SCROLLER.VerticalScroller.  Although we are not
 * referencing any values from an object passed on creation,
 * an object is still required as the SCROLLER uses it internally. */
var ScreenContainer = Container.template(function($) { return {
	left:0, right:0, top:100, bottom:100,
	contents: [
	   		/* Note that the scroller is declared as having only an empty
	   		 * Column and a scrollbar.  All the entries will be added 
	   		 * programmatically. */ 
	   		SCROLLER.VerticalScroller($, { 
	   			contents: [
              			Column($, { left: 0, right: 0, top: 0, name: 'menu', }),
              			SCROLLER.VerticalScrollbar($, { }),
              			]
	   		})
	   		]
	}});

var data = new Object();
var screen = new ScreenContainer(data);

/* This simple function exists so we can call "forEach" on
 * our array of list entries (menuItems).  It adds a new 
 * ProcessorLine() object to the Column named "menu" in the
 * screen object's SCROLLER */
function ListBuilder(element, index, array) {
	screen.first.menu.add(new ProcessorLine(element));
}

application.behavior = Object.create(Object.prototype, {
	onLaunch: { value: function(application) {
		/* Call ListBuilder for each element in our array of
		 * list items.*/
		var str = generateDisplayString(newSchedule);
		str.forEach(ListBuilder);
//		application.add(screen);
	}}
});




var SurvivalScreen = Container.template(function($) { return { left: 0, right: 0, top: 0, bottom: 0, skin: blueSkin, contents: [
	Label($, { left: 0, right: 0, style: labelStyle, string: 'Survival Mode', }),
	new menuButton()
], }});

var TemperatureScreen = Container.template(function($) { return { left: 0, right: 0, top: 0, bottom: 0, skin: blueSkin, contents: [
	Label($, { left: 0, right: 0, style: labelStyle, string: 'Manual Temperature Control', }),
	new menuButton()
], }});

var data = {}
var mainScreen = new MainScreen( data );

var MenuScreen = new MenuScreen();
var ScheduleScreen = new ScheduleScreen();



var SurvivalScreen = new SurvivalScreen();
var TemperatureScreen = new TemperatureScreen();


application.add( mainScreen )
mainScreen.add( ScheduleScreen )