//The name of your application
var demo;

( function() {

	/***************************************************************************
	 * Private properties
	 **************************************************************************/

	// FCCam reference
	var FCCam;

	/***************************************************************************
	 * Public properties and methods
	 **************************************************************************/

	demo = {

		// grab a copy of the dialogStyle object
		dialogBoxStyle1 :$.extend( {}, FCCamConfig.dialogStyle),
		
		//a flag for whether or not the camera is muted
		muted:0,
	
		/***********************************************************************
		 * main - The entry point of your application. You should set up the
		 * event listeners and do any background initialization here.
		 * 
		 * Arguments: 
		 * instance_ID [string]: a reference to the instance id of FCCam 
		 * 
		 * Returns: null
		 **********************************************************************/

		main : function(instanceId) {

			// Reference to the FCCam object
			FCCam = window["FCCam" + instanceId];

			// Set up event listeners
			FCCam.addEventListener("onInfoPanelLoaded", this.initInfoPanel);
			FCCam.addEventListener("onCamPanelLoaded", this.initCamPanel);
			FCCam.addEventListener("onResultPanelLoaded", this.initResultPanel);
			FCCam.addEventListener("onResult", this.resultListener);
			FCCam.addEventListener("onStatus", this.statusListener);

			// application initialization
			this.dialogBoxStyle1.color = "green";
		},

		/***********************************************************************
		 * initInfoPanel - Handler for the onInfoPanelLoaded event. This event
		 * is fired when the info panel is ready for DOM manipulation.
		 * Application specific initialization of the info panel goes here
		 * 
		 * Arguments: none Returns: null
		 **********************************************************************/

		initInfoPanel : function() {
			// Set the info panel text/HTML.
			FCCam
				.setInfoPanelText("<b><span style='color:lightblue;font-weight:bold'><big>Step One:</big></span> Press \"Snapshot\" when you are ready to take a picture.</b><br><br>"
								+ "<b><span style='color:lightblue;font-weight:bold'><big>Step Two:</big></span> When your snapshot appears below, click on \"Add to my gallery\".</b><br>");
		},

		/***********************************************************************
		 * initCamPanel - Handler for the onCamPanelLoaded event. This event is
		 * fired when the cam panel is ready to be accessed through the FCCAM
		 * api. Application specific initialization of the cam panel goes here
		 * 
		 * Arguments: none Returns: null
		 **********************************************************************/

		initCamPanel : function() {
			// Init the cam panel here.
		},

		/***********************************************************************
		 * initResultPanel - Handler for the onResultPanelLoaded event. This
		 * event is fired when the result panel is ready for DOM manipulation.
		 * Application specific initialization of the result panel goes here
		 * 
		 * Arguments: none Returns: null
		 **********************************************************************/

		initResultPanel : function() {
			// Initialize the result panel here
		},

		/***********************************************************************
		 * resultListener - Handler for the onResult event. This event is fired
		 * when the the processing of a snapshot or recording is completed, and
		 * the result is ready to be displayed in the result panel
		 * 
		 * Arguments: 
		 * result [object]: Contains information about the result.
		 * 
		 * Returns: null
		 **********************************************************************/

		resultListener : function(result) {
			
			//Change the caption a little.
			
			result.showName = false;
			result.showFileSize = true;
			//set up the "actions panel" with some appropriate actions.
			
			if (result.type == "snapshot") {
				result.actionsPanelContent = "<div style='margin-top:5px;margin-bottom:10px;width:250px;border:0px solid blue'>"
						+ "<a href='' style='color:white' onclick='return demo.openDeleteDialog("
						+ result.id
						+ ")'>Delete</a>"
						+ "<br><a href='' style='color:white' onClick='return false' onmousedown='return demo.openAddToGalleryDialog(" + result.id + ",1)'>Add to my gallery</a>"
						+ "</div>";
			} else {
				result.actionsPanelContent = "<div style='margin-top:5px;margin-bottom:10px;width:250px;border:0px solid blue'>"
						+ "<a href='' style='color:white' onclick='return demo.play("
						+ result.id
						+ ")'>Play</a>"
						+ "<br><a href='' style='color:white' onclick='return demo.openDeleteDialog("
						+ result.id
						+ ")'>Delete</a>"
						+ "<br><a href='' style='color:white' onClick='return false' onmousedown='return demo.openAddToGalleryDialog(" + result.id + ",0)'>Add to my gallery</a>"
						+ "</div>";
			}
		},

		/***********************************************************************
		 * statusListener - Handler for the onStatus event. This event is fired
		 * when the the application state has changed. User actions, netStatus
		 * events, etc., will trigger the status event.
		 * 
		 * Arguments: 
		 * type [string]: Type of message 
		 * msg [string]: The name of the message 
		 * data [object]: Attached data
		 * 
		 * Returns: null
		 **********************************************************************/
		
		statusListener : function(type, msg, data) {
			if (type == "event") {
				//Change the instructions depending on which panel is active
				
				if(msg == "recordpanel.active"){
					$(FCCam.infoPanel).css("background-color","green");
					FCCam
					.setInfoPanelText("<b><span style='color:yellow;font-weight:bold'><big>Step One:</big></span> Press \"Record\" when you are ready to make a recording.</b><br><br>"
									+ "<b><span style='color:yellow;font-weight:bold'><big>Step Two:</big></span> When your recording appears below, click on \"Add to my gallery\".</b><br>");
				};
				if(msg == "snapshotpanel.active"){
					$(FCCam.infoPanel).css("background-color","#3030a0");
					FCCam
					.setInfoPanelText("<b><span style='color:lightblue;font-weight:bold'><big>Step One:</big></span> Press \"Snapshot\" when you are ready to take a picture.</b><br><br>"
									+ "<b><span style='color:lightblue;font-weight:bold'><big>Step Two:</big></span> When your snapshot appears below, click on \"Add to my gallery\".</b><br>");
				}
				//Hey! Don't turn of the cam
				if(msg == "camera.status"){
					if(data == "Camera.Muted"){
						this.muted=1;
						FCCam.setStatusBar(0,"Camera muted. Please enable cam");
						FCCam.setStatusBar(1,"Camera muted. Please enable cam");
					}
					if(data == "Camera.Unmuted"){
						if(this.muted){
							this.muted=0;
							FCCam.setStatusBar(0,null);
							FCCam.setStatusBar(1,null);
						}
					}
			}
			}else{
				alert(msg);
			}
		},

		/*
		 * Actions panel functions.
		 */

		openDeleteDialog: function(id){
			FCCam.openDialog(demo.removeResultBoxHTML,demo.dialogBoxStyle1,true,true,"demo.removeResultBox("+id+")");
			return false;
		},
		play: function(id){
			FCCam.play(id);
			return false;
		},
		openAddToGalleryDialog: function(id,type){
			if(!FCCam.resultArray[id].added){
				if(type==1){ //snapshot
					FCCam.openDialog(demo.addSnapshotHTML,demo.dialogBoxStyle1,true,true,"demo.addToGallery("+id+",1)");
				}else{ //recording
					FCCam.openDialog(demo.addRecordingHTML,demo.dialogBoxStyle1,true,true,"demo.addToGallery("+id+",0)");
				}
			}else{
				FCCam.openDialog(demo.alreadyAddedHTML, demo.dialogBoxStyle1);
			}
			return false;
		},
		
		/*
		 * Some HTML to inject into the dialog box.
		 */
		
		removeResultBoxHTML : function() {
			return "<span style='font-size:11px;color:white'>Are you sure you want to delete this?</span>"
		},
		addSnapshotHTML : function() {
			return "<span style='font-size:11px;color:white'>Are you sure you want to add this image?</span>"
		},
		addRecordingHTML : function() {
			return "<span style='font-size:11px;color:white'>Are you sure you want to add this recording?</span>"
		},
		alreadyAddedHTML : function() {
			return "<span style='font-size:11px;color:white'>You have already added this one!</span>"
		},
		
		
		/*
		 * Remove a result box 
		 */
		
		removeResultBox : function(id){
			FCCam.removeResultBox(id);
			FCCam.closeDialog();
		},
		
		/*
		 * Add a new thumbnail to the gallery
		 */
		
		thumbCount:0,
		currentColumn:1,
		nextColumn:2,
		
		addToGallery : function(id,type) {
			
			// Throw up the busy message
			
			FCCam.openDialog(demo.busyHTML, demo.dialogBoxStyle1, false);
			
			// Process request 
			 
			var result = FCCam.resultArray[id];
			var w = parseInt($(result.thumbnail).css("width"));
			var h = parseInt($(result.thumbnail).css("height"));
			var href=(type==0?"/cam/demo/EmbeddedPlayer.asp?id="+result.fileName+"&num="+result.count:result.fileURL);
			var marginTop=0;
			if(w>h){
				h="";
				w="200px";
			}else{
				w="";
				h="200px";
			}
			$("#nextpic").remove();
			$("#column"+demo.currentColumn)
				.append("<div style='position:relative;width:200px;height:200px;'><div style='position:absolute;bottom:0px'><a href='"+href+"' target='_blank'><img border=0 src='"+result.thumbnailURL+"' style='width:"+w+";height:"+h+"'></a></div></div>" +
						(type==0?"Recording ":"Snapshot ") + result.count + "<br><br>");
			$("#column"+demo.nextColumn)
				.append("<div id='nextpic'><div style='width:202px;height:202px;'><img src='../../images/nextpic.gif'></div>" +
						"Next thumbnail here.</div>");
			demo.nextColumn=(demo.currentColumn=(++demo.thumbCount)%3+1)%3+1;
			result.added=true;
			
			// 1 second delay for confirmation
			
			setTimeout("demo.confirmationDialog("+type+")", 1000);
			return false;
		},
		busyHTML : function() {
			return "<span style='font-size:11px;color:white'>Please Wait...<br>&nbsp;</span>"
		},
		
		/*
		 * Tell the user that their image/recording was successfully added.
		 */
		
		confirmationDialog : function(type) {
			FCCam.openDialog(demo.confirmationHTML(type), demo.dialogBoxStyle1);
			return false;
		},
		confirmationHTML : function(type) {
			return "<span style='font-size:11px;color:white'>The "+(type==0?"recording":"snapshot")+" has been successfully added to your gallery!</span>";
		}
	}
})();