/**
 * STEP 2 (Implementing the "Add Topic" button)
 * - Encode object as JSON string -> toJSON(obj)
 * - Decode JSON string into an object -> toObject(str)
 * - Stores data in the OpenSocial gadget -> addInput()
 */

/** Encode object as JSON string */
function toJSON(obj) { 
	return gadgets.json.stringify(obj); 
}

/** Decode JSON string into an object */
function toObject(str) {
    return gadgets.json.parse(str);
}

/** Stores data in the OpenSocial gadget */
function addInput(){
	// Getting the state
	var state = wave.getState();
	
	// Retrieves topics from storage.
	var jsonString = state.get('topics','[]');
	// Converts JSON to an array of topics
	var topics = toObject(jsonString);
	
	// Push textbox value into the array and set the textbox to blank
	var url = document.getElementById('textBox').value;
	topics.push(document.getElementById('textBox').value);
	document.getElementById('textBox').value = '';
	
	// Create an array for the topic and add it to the "master" array.
	var votes = toObject(state.get('votes','[]'));
	votes.push(new Array());
	
	// Submit everything to storage
	state.submitDelta({'topics' : toJSON(topics), 'votes' : toJSON(votes),'snapshot':url});
}

/** 
 * STEP 3 (Rendering topics)
 * - Get state
 * - Retrieve topics
 * - Add topics to the canvas
 * - Create "Add topic" button to the footer
 * - Adjust window size dynamically
 */

// Renders the gadget
function renderInfo() {
    /** Get state */
    if (!wave.getState()) {
        return;
    }
    var state = wave.getState();
    
    /** Retrieve topics */
    var topics = toObject(state.get('topics','[]'));
    var votes = toObject(state.get('votes','[]'));
    var url = state.get('snapshot');
    /** Add topics to the canvas */

//    for (var i = 0; i < topics.length; i++){
//        var id = "topic"+i;
//        html += '<div class="topic"><h4> ' + topics[i] + '</h4></div>';
//    }
    if(url){
    	var frame_snap='<iframe width="100%" src="'+url+'" name="iframe_a" height="300"></iframe>';
	document.getElementById('body').innerHTML = frame_snap;
    }
    else{
    	var html = "";
    	/** Create "Add topic" button to the footer */
    	html += '<input type="text" id="textBox" value=""/><button id="addInput" onclick="addInput()">Add Topic</button>';
    	document.getElementById('footer').innerHTML = html;
    }
    /** Adjust window size dynamically */
    gadgets.window.adjustHeight();
}

// Initializes gadget, sets callbacks
function init() {
    if (wave && wave.isInWaveContainer()) {
    	// Loads the gadget's initial state and the subsequent changes to it
        wave.setStateCallback(renderInfo);
        
        // Loads participants and any changes to them
        wave.setParticipantCallback(renderInfo);
    }
}

// Initializes gadget after receiving a notification that the page is loaded and the DOM is ready.
gadgets.util.registerOnLoadHandler(init);

@@ -1,2170 +1,939 @@
-/**%0A * STEP 2 (Implementing the %22Add Topic%22 button)%0A * - Encode object as JSON string -%3E toJSON(obj)%0A * - Decode JSON string into an object -%3E toObject(str)%0A * - Stores data in the OpenSocial gadget -%3E addInput()%0A */%0A%0A/** Encode object as JSON string */%0Afunction toJSON(obj) %7B %0A%09return gadgets.json.stringify(obj); %0A%7D%0A%0A/** Decode JSON string into an object */%0Afunction toObject(str) %7B%0A    return gadgets.json.parse(str);%0A%7D%0A%0A/** Stores data in the OpenSocial gadget */%0Afunction addInput()%7B%0A%09// Getting the state%0A%09var state = wave.getState();%0A%09%0A%09// Retrieves topics from storage.%0A%09var jsonString = state.get('topics','%5B%5D');%0A%09// Converts JSON to an array of topics%0A%09var topics = toObject(jsonString);%0A%09%0A%09// Push textbox value into the array and set the textbox to blank%0A%09var url = document.getElementById('textBox').value;%0A%09topics.push(document.getElementById('textBox').value);%0A%09document.getElementById('textBox').value = '';%0A%09%0A%09// Create an array for the topic and add it to the %22master%22 array.%0A%09var votes = toObject(state.get('votes','%5B%5D'));%0A%09votes.push(new Array());%0A%09%0A%09// Submit everything to storage%0A%09state.submitDelta(%7B'topics' : toJSON(topics), 'votes' : toJSON(votes),'snapshot':url%7D);%0A%7D%0A%0A/** %0A * STEP 3 (Rendering topics)%0A * - Get state%0A * - Retrieve topics%0A * - Add topics to the canvas%0A * - Create %22Add topic%22 button to the footer%0A * - Adjust window size dynamically%0A */%0A%0A// Renders the gadget%0Afunction renderInfo() %7B%0A    /** Get state */%0A    if (!wave.getState()) %7B%0A        return;%0A    %7D%0A    var state = wave.getState();%0A    %0A    /** Retrieve topics */%0A    var topics = toObject(state.get('topics','%5B%5D'));%0A    var votes = toObject(state.get('votes','%5B%5D'));%0A    var url = state.get('snapshot');%0A    /** Add topics to the canvas */%0A%0A//    for (var i = 0; i %3C topics.length; i++)%7B%0A//        var id = %22topic%22+i;%0A//        html += '%3Cdiv class=%22topic%22%3E%3Ch4%3E ' + topics%5Bi%5D + '%3C/h4%3E%3C/div%3E';%0A//    %7D%0A    if(url)%7B%0A    %09var frame_snap='%3Ciframe width=%22100%25%22 src=%22'+url+'%22 name=%22iframe_a%22 height=%22300%22%3E%3C/iframe%3E';%0A%09document.getElementById('body').innerHTML = frame_snap;%0A    %7D%0A    else%7B%0A    %09var html = %22%22;%0A    %09/** Create %22Add topic%22 button to the footer */
+%0A/** Stores data in the OpenSocial gadget */%0Afunction addInput()%7B%0A%09// Getting the state%0A%09var state = wave.getState();%0A%09// Push textbox value into the array and set the textbox to blank%0A%09var url = document.getElementById('textBox').value;%0A%09document.getElementById('textBox').value = '';%0A%09%0A%09// Submit everything to storage%0A%09state.submitDelta(%7B'snapshot':url%7D);%0A%7D%0A%0A// Renders the gadget%0Afunction renderInfo() %7B%0A    /** Get state */%0A    if (!wave.getState()) %7B%0A        return;%0A    %7D%0A    var state = wave.getState();%0A    var url = state.get('snapshot');%0A%0A    if(url)%7B%0A    %09var frame_snap='%3Ciframe width=%22100%25%22 src=%22'+url+'%22 name=%22iframe_a%22 height=%22300%22%3E%3C/iframe%3E';%0A%09document.getElementById('body').innerHTML = frame_snap;%0A%09var html = '%3Cinput type=%22text%22 id=%22textBox%22 value=%22%22/%3E%3Cbutton id=%22updateURL%22 onclick=%22updateURL()%22%3Eupdate Snapshot URL%3C/button%3E';%0A    %09document.getElementById('footer').innerHTML = html;%0A    %7D%0A    else%7B
 %0A    %09
+var 
 html 
-+
 = '%3C
@@ -988,21 +988,19 @@
  id=%22add
-Input
+URL
 %22 onclic
@@ -1009,21 +1009,19 @@
 %22add
-Input
+URL
 ()%22%3EAdd 
 Topi
@@ -1020,13 +1020,20 @@
 Add 
-Topic
+Snapshot URL
 %3C/bu

Update adding_topics_1.js