example-sencha-app.js

Application.handlers = {
	registration_submit : function(){
		var form = Ext.getCmp('registration_form_panel');
		form.submit();
	},
	poll_submit : function(){
		var form = Ext.getCmp('poll_question_2_panel_form');
		form.submit();
	}
};

Application.form_items_for = function(config){
	var fields = [];

	fields = _(config).chain().map(function(field){
		field.labelAlign = 'left';

		if(field.type == "text"){
			return {
				fieldLabel : field.label,
				allowBlank : !field.required,
				xtype : 'textfield',
				name : field.name,
				labelAlign : field.labelAlign || 'left'
			};
		}

		if(field.type == "checkbox"){
			return {
				xtype : 'checkbox',
				inputValue : 1,
				name : field.name,
				fieldLabel : field.label,
				labelAlign : field.labelAlign || 'left'
			};
		}

		if(field.type == "multiple-choice"){
			var parts = [];

			if(field.poll_id){
				parts.push({
					xtype : 'hidden',
					name : 'poll_id',
					value : field.poll_id
				});
			}

			_.each(field.options,function(question,value){
				parts.push({
					xtype : 'radio',
					inputValue : value,
					name : field.name,
					fieldLabel : question
				});
			});

			return {
				xtype : 'fieldset',
				title : field.question,
				items : parts
			};
		}

		if( field.type == "submit_button"){
			return {
				xtype : 'button',
				ui : 'confirm',
				text : 'Next',
				handler : Application.handlers[ field.handler ]
			};
		}
	}).flatten().value();

	return(fields);
};
Application.sample_chart = function(options){
	options = options || {};

	options.data = options.data || [
		['Revolutionary',   25],
		['Magical',       10],
		['Awesome',    15],
		['Epic Fail',     50]
	];

	options.container = options.container || 'chart_container';
	options.header = options.header || "What do you think?";

	new Highcharts.Chart({
		chart: {
			renderTo: options.container,
			margin: [0,0,0,0],
			height: 400,
			width: 700
		},
		title: {
			text: options.header
		},
		plotArea: {
			shadow: null,
			borderWidth: null,
			backgroundColor: null
		},
		tooltip: {
			formatter: function() {
				return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
			}
		},
		plotOptions: {
			bar: {
				allowPointSelect: true,
				cursor: 'pointer',
				dataLabels: {
					enabled: true,
					color: 'white',
					style: {
						font: '13px Trebuchet MS, Verdana, sans-serif'
					}
				}
			},
			pie: {
				allowPointSelect: true,
				cursor: 'pointer',
				dataLabels: {
					enabled: true,
					formatter: function() {
						if (this.y > 5) return this.point.name;
					},
					color: 'white',
					style: {
						font: '13px Trebuchet MS, Verdana, sans-serif'
					}
				}
			}
		},
		legend: {
			layout: 'vertical',
			style: {
				left: 'auto',
				bottom: 'auto',
				right: '5px',
				top: '5px'
			}
		},
	    series: [{
			type: options.type || 'pie',
			name: options.header,
			data: options.data
		}]
	});
};
Application.slides_for = function(presentation){
	var slides = Application.parse_presentation(presentation);

	return slides;
};
/*
	This function is responsible for parsing slides from a Presentation object

	it will iterate over the Presentation::Layout and convert it into an Application::Slide object
*/
Application.parse_presentation = function(presentation){
	var parsed = _( presentation.layout() ).chain().map(function(item){
		return item.slide_type ? Application.parse_slide(item.slide_type, item) : item;
	}).flatten().value();

	return(parsed);
};

/*
	This function is responsible for parsing a layout item in a presentation
*/

Application.parse_slide = function(slide_type,item){
	return Application['parse_' + slide_type](item);
};


Application.parse_data_display = function(item){
	var panel = {
		cls : 'poll ' + item.section,
		id : item.id,
		items : [{
			html : '<div id="' + item.data_container + '" class="data_display"></div>'
		}],
		listeners : {
			activate : function(){
				var panel = Ext.getCmp(item.id),
					data_container = $('#' + item.data_container);

				if( !panel.loaded ){
					$.get(item.query,{},function(response){
						panel.loaded = true;
						data_container.html('');
						data_container.html(response);
					});
				}
			}
		}
	};

	return panel;
};

Application.parse_poll_results = function(item){
	var panel = {
		cls : 'poll_results ' + item.section,
		id : item.id,
		items : [{
			html : '<div id="' + item.chart_container +'" class="chart-container"></div>'
		}],
		listeners : {
			activate : function(){
				var panel = Ext.getCmp(item.id);

				Application.sample_chart({
					container : item.chart_container,
					header : 'Results',
					data : item.default_data
				});

				if( !panel.loaded ){
					$.get(item.query,{},function(response){
						panel.loaded = true;
					});
				}

			}
		}
	};

	return panel;
};

Application.parse_poll = function(item){
	var panel = {
		cls : 'poll ' + item.section,
		layout : 'card',
		scroll : 'vertical',
		id : item.id,
		items : [{
			xtype : 'form',
			id : item.id + '_form',
			scroll : 'vertical',
			items : Application.form_items_for(item.fields),
			standardSubmit : false,
			url : '/polls/create',
			method : 'POST',
			listeners : {
				submit : function(form,result){
					$('#' + item.id + '_form .x-panel-body').html('<div class="confirmation_message"><h2>Thanks. The results will be available shortly.</h2></div>');
				}
			}
		}]
	};

	return panel;
};

/*
	item:
		section: gets added as a css class
		fields : list of the fields which are getting rendered into ext.touch objects
*/
Application.parse_registration = function(item){
	var panel = {
		cls : 'registration ' + item.section,
		id : 'registration_form',
		scroll : 'vertical',
		layout : 'card',
		items : [{
			xtype : 'form',
			scroll : 'vertical',
			id : 'registration_form_panel',
			items : [{
				xtype : 'fieldset',
				title : 'Registration Information',
				items : Application.form_items_for(item.fields)
			}],
			url : '/registrations/create',
			method : "POST",
			standardSubmit : false,
            listeners : {
                submit : function(form, result){
					$('#registration_form .x-panel-body').html('<div class="confirmation_message"><h2>Thanks. The presentation will begin shortly.</h2></div>');
                    console.log('success', Ext.toArray(arguments));
                },
                exception : function(form, result){
                    console.log('failure', Ext.toArray(arguments));
                }
            }
		},{
			html : 'Results Form'
		}]
	};

	return panel;
};

Application.parse_video = function(item){
	var panel = new Ext.Video({
		fullscreen : false,
		items : [{
			width: 300,
			height: 240,
			layout : 'fit',
			url : '/video.mp4'
		}]
	});

	return panel;
};

Application.parse_static = function(item,options){

	options = options || {

	};

	options.cls = options.cls || 'card';
	options.slide_prefix = options.slide_prefix || 'slide';
	options.slide_format = options.slide_format || 'jpg';

	var static_slides = [];

	for(var i = 1; i <= parseInt(item.count); i++){
		var slide_image = '/images/slides/' + item.image_source + '/' + options.slide_prefix + i + '.' + options.slide_format;

		static_slides.push({
			cls : options.cls,
			html : '<img src="' + slide_image + '" />'
		});
	}

	return(static_slides);
};

Application.insert_slide_at = function(index,slide){

};
Application.load_carousel = function(){
	var cfg = {
		id : 'carousel',
		fullscreen : true,
		layout : 'card',
		activeItem : 0,
		items : Application.slides_for(Presentation)
	};

	if( Application.user.is_presenter() ){
		cfg.dockedItems = {
			dock : 'bottom',
			xtype : 'toolbar',
			id : 'presenter_toolbar',
			items : [{
				text : 'Clear Data',
				id : 'clear-data-button',
				handler : function(){
					$.post("/clear",{},function(){
						alert('Data Cleared');
					});
				}
			},{
				xtype  : 'spacer'
			},{
				text : 'Enable Questions',
				id : 'enable-questions-button',
				handler : function(){
					var button = Ext.getCmp('enable-questions-button'),
						current_text = button.getText(),
						enabled = current_text.match(/Enable/),
						value = enabled ? 1 : 0;

					$.post("/relay/toggle/questions/" + value, {}, function(){
						button.setText( enabled ? "Disable Questions" : "Enable Questions ");
					});
				}
			}]
		};
	}

	if( !Application.user.is_presenter() ){
		cfg.dockedItems = {
			dock : 'bottom',
			xtype : 'toolbar',
			id : 'client_toolbar',
			items : [{
				xtype  : 'spacer'
			},{
				text : 'Ask A Question',
				id : 'ask-a-question-button',
				handler : function(){

				}
			}]
		};
	}


	var carousel = new Ext.Carousel(cfg);

	Application.carousel = carousel;

	Application.carousel_callbacks( carousel );
};

Application.carousel_callbacks = function(carousel){
	carousel.on("beforecardswitch", function(){
		if( !Application.user.is_presenter() ){
			return carousel.moveable;
		}
	});

	carousel.on("cardswitch", function(carousel, newCard, oldCard, index, animated){
		/*
		if( newCard.getId().match(/poll_results/) ){
			var container_id = newCard.getId().replace(/panel/,'container'),
				container = $('#' + container_id),
				content = container.html(),
				options = Application.charts[container_id];

			if( content.length < 2 ){
				Application.charts.sample_chart({
					container : container_id,
					header : options.header,
					data : options.data
				});
			}
		}
		*/
		if( Application.user.is_presenter() ){
			$.post('/relay/cardswitch/' + index,{
				presenter: Application.user.is_presenter(),
				index : index
			});
		}
	});
};

Application.toggle_client_toolbar = function(on){
	var toolbar = Ext.getCmp('client_toolbar');
	on ? toolbar.enable() : toolbar.disable();
};
/*
	Presentation is responsible for organizing the types of slides

	it provides a layout function which returns a JSON representation of the slides
	which are later parsed by the discussionware application

*/
var Presentation = {
	layout : function(){
		return [{
			slide_type : 'registration',
			section : 'discussionware',
			fields : [{
				label : 'What is your full name?',
				type : 'text',
				required : true,
				labelAlign : 'top',
				name : 'name'
			},{
				label : 'What is your title?',
				type : 'text',
				required : false,
				labelAlign : 'left',
				name : 'title'
			},{
				label : 'Check here to be emailed updates.',
				type : 'checkbox',
				name : 'updates_ok',
				inputValue : 1,
				haha : 0,
				labelAlign : 'top'
			},{
				question : 'How much do you already know about Discussionware?',
				type : 'multiple-choice',
				name : 'poll-question-1',
				value : 'poll-question-1',
				poll_id : 'poll-question-1',
				options : {
					'1' : 'I am <b>not familiar</b> with it',
					'2' : 'I am <b>slightly familiar</b> with it',
					'3' : 'I am <b>very familiar</b> with it'
				}
			},{
				type : 'submit_button',
				handler : 'registration_submit'
			}]
		},
		{
			slide_type : 'poll_results',
			chart_type : 'pie',
			query: '/poll/poll-question-1',
			section : 'discussionware',
			chart_container : 'poll_results_1',
			id : 'poll_results_1_panel',
			default_data : [
				['Not Familiar',66],
				['Slightly Familiar',17],
				['Very Familiar',15]
			]
		},
		{
			slide_type : 'data_display',
			section : 'discussionware',
			query : '/data/registrations',
			id : 'data_display_1_panel',
			data_container : 'data_container_1'
		},
		{
			slide_type : 'static',
			count : '8',
			image_source : 'discussionware'
		},{
			slide_type : 'static',
			count : '5',
			image_source : 'gilead'
		},{
			slide_type : 'poll',
			section : 'gilead',
			id : 'poll_question_2_panel',
			fields : [{
				question : 'How many of your patients are currently on Viread?',
				type : 'multiple-choice',
				name : 'poll-question-2',
				poll_id : 'poll-question-2',
				value : 'poll-question-2',
				section : 'gilead',
				options : {
					'1' : '1-10',
					'2' : '10-20',
					'3' : '20-30',
					'4' : '30+'
				}
			},{
				type : 'submit_button',
				handler : 'poll_submit'
			}]
		},
		{
			slide_type : 'poll_results',
			chart_type : 'pie',
			query: '/poll/poll-question-2',
			section : 'gilead',
			chart_container : 'poll_results_2',
			id : 'poll_results_2_panel',
			default_data : [
				['1-10',25],
				['10-20',25],
				['20-30',25],
				['30+',25],
			]
		}
		];
	}
};



Application.settings = function(key){
	var settings = {
		prevent_user_cardswitch : true,
		presenters : {
			"10.0.1.3" : "ipad one",
			"192.168.1.3" : "ipad son",
			"ereg.adobe.com" : "local"
		}
	};

	return settings[key];
};

Application.initialize = function(){
 	Application.pusher = new Juggernaut();

	Application.user = {
		is_presenter : function(){
			if( Application.settings('presenters').hasOwnProperty(Application.client.host) ){
				return true;
			}
			return false;
		},
		is_client : function(){
			return !Application.user.is_presenter();
		}
	};

	/* in case you gotta get crazy */
	Application.pusher.subscribe("admin", function(data){
		eval(data);
	});

	if( !Application.user.is_presenter() ) {
		Application.pusher.subscribe("cardswitch", function(index){
			var carousel = Ext.getCmp('carousel');

			carousel.moveable = true;
			carousel.setCard( parseInt(index,10) );
			carousel.moveable = false;
		});

		Application.pusher.subscribe("toggle", Application.toggle_client_toolbar);
	}


	Application.pusher.subscribe("reloaded", function(cmd){
     var parts = cmd.split(/,/),
         method = parts.shift(),
         data = parts.shift();

     Reloaded[method].call(Reloaded, data);
   });

	Application.load_carousel();
};

Ext.setup({
	onReady : Application.initialize
});