<?xml version="1.0" encoding="utf-8" ?>

<Module>
	<ModulePrefs title="ShoutEm application"
				 description="Displays feed with statuses from microblogging network hosted on ShoutEm service. To create your free microblogging community go to www.shoutem.com"
				 screenshot="http://www.shoutem.com/apps/Ning/1.0/ningappscreenshot.png"
				 author="Matija Smalcelj"
				 thumbnail="http://www.shoutem.com/css_new/gfx/logo.png"
				 author_email="matija@shoutem.com"
				 author_location="Zagreb, Croatia"
				 author_affiliation="Shoutem Ltd.">
		<Require feature="opensocial-0.7" />

		<Require feature="dynamic-height" />
		<Require feature="analytics" />
		<Require feature="skins" />

	</ModulePrefs>
	<Content type="html">
		<![CDATA[

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<script type='text/javascript'>

//////////////////////////////////////////////////////////////////
//
//  ShoutEm application for user's profile Ning network, v1.0
//  www.shoutem.com
//  
//  Author: Matija Smalcelj - matija@shoutem.com
//  ALL RIGHTS RESERVED ©ShoutEm 2009
//
//////////////////////////////////////////////////////////////////


ShoutEmNingApp = function() {

	var viewer; // app owner user object
	var owner; // app viewer user object
	var env; // app environment

	// blank feed API url and keys that are used for 
	// search/replace inserting of real values
	var feedUrl = "#address#/api/twitter/1.0/statuses/user_timeline/#username#.json?count=10&include_shoutem_fields=true";
	var addressKey = "#address#";
	var usernameKey = "#username#";

	// animation parameters
	var animationSlideStep = 451; // in px, depends on thumb and app width 
	var animationSlideDuration = 200; // in mili sec
	var gadgetHeightAdjustDelay = 500;
	   
	// timeouts
	var feedFetchTimeout = 10000;

	// texts
	var txtUpdating = "&nbsp;&nbsp;&nbsp;Updating...";
	var txtIntroViewer = "<b>Welcome to <a href='http://www.shoutem.com/' target='_top'><img style='height: 12px; position: relative; top: 1px;' src='http://www.bakbak.in/skins/shoutemLogo.png'/></a> application!</b><br/><br/><p>With this app you can display feed with your statuses from microblogging network hosted on <a href='http://www.shoutem.com/' target='_top'>ShoutEm service</a>.</p><p>If you're unfamiliar with ShoutEm, it's a free service for hosting microblogging communities. Creating networks is very simple and it takes only a few minutes of your time. With a little more effort you can customize your community to the smallest detail, embed it into existing web sites, connect to other services and much more... <a href='http://www.shoutem.com/wizard' target='_top'>Create one here!</a><br />For more info visit <a href='http://www.shoutem.com/' target='_top'>www.shoutem.com</a></p>";
	var txtIntroOwner = txtIntroViewer + "<br/><p>If you already have account on one of ShoutEm networks, enter your account details in <a href='javascript:void(0);' id='SettingsLink' onclick='app.openSettings(this);' class='openBox'>settings</a></p>";
	var txtSettingsInvalidOwner = "&nbsp;&nbsp;&nbsp;Please check settings!";
	var txtSettingsInvalidViewer = txtIntroViewer;

	// keys for accessing data in persistent storage
	var storageKeys = new function() {
		this.numberOfShouts = "numberOfShouts";
		this.networkAddress = "networkAddress";
		this.userName = "userName";
		this.userPassword = "userPassword";
	}
	
	// shoutem attachment types
	var attTypes = new function() {
	    this.link = "link";
	    this.picture = "picture";
        this.location = "location";
	}
	
	// strings for identifying video links
	var attLinkPatterns = new function() {
	    this.youtube = "youtube.com/watch";
        this.vimeo = "vimeo.com/";
    }

	return app = {
		// these var's store current app settings
		config: function() {
			this.currentFeedLength = 5;
			this.currentAddress = "";
			this.currentUsername = "";
			this.currentPassword = "";
			this.reqTimeoutId = 0;
		},
		
		// these var's store current app settings
		vars: function() {
			this.sliderActive = false;
		},

		////////////////////////////////////////////////////////////////////////////////////////////////
		//
		//	GUI FUNCTIONS
		//
		////////////////////////////////////////////////////////////////////////////////////////////////

		// extracts style from ning network and applies it to the app elements
		generateStyle: function() {
			var fontColor = gadgets.skins.getProperty(gadgets.skins.Property.FONT_COLOR);
			var linkColor = gadgets.skins.getProperty(gadgets.skins.Property.ANCHOR_COLOR);
			var bgColor = gadgets.skins.getProperty(gadgets.skins.Property.BG_COLOR);

			$('#ShoutEmApp_frame').css("color", fontColor);
			$('#ShoutEmApp_frame').css("background-color", bgColor);
			$('#ShoutEmApp_frame a').css("color", linkColor);
			$('#ShoutEmApp_frame .button').css("color", bgColor);
			$('#ShoutEmApp_frame .button').css("background-color", linkColor);
			$('#ShoutEmApp_frame a.arrowBtn').css("color", fontColor);
			$('#ShoutEmApp_frame table').css("color", fontColor);
			$('#ShoutEmApp_frame table a.time').css("color", fontColor);
			$('#ShoutEmApp_feed').css("border-bottom", "1px solid " + fontColor);
			$('#ShoutEmApp_feed td').css("border-top", "1px dotted " + fontColor);
			$('#ShoutEmApp_feed td.avatar').css("border-top", "1px solid " + fontColor);
			$('#ShoutEmApp_feed td.memberUrl').css("border-top", "1px solid " + fontColor);
		},

		// toggles visibility of certain element
		// obj - object that caused the event
		// boxId - id of the element that needs visibility toggling
		toggleBox: function(obj, boxId) {
			obj.blur();
			$("#" + boxId).toggle();
			setTimeout("gadgets.window.adjustHeight();", gadgetHeightAdjustDelay);
		},

		// searches container for element with "slideContainer" class
		// and slides it to the left
		// obj - object that caused the event
		// boxId - id of the element that contains element for sliding
		slideLeft: function(link, boxId) {
		    if (app.vars.sliderActive == false){
		        app.blockSlider();
			    link.blur();
			    var step = animationSlideStep;
			    var obj = $("#" + boxId).find(".slideContainer:first");
			    var pos = parseInt(obj.css("left").replace("px", ""));
			    if (obj.width() > step && (obj.width() + pos > animationSlideStep)) {
				    var newPos = (pos - step) + "px";
				    obj.animate({
					    left: newPos
				    }, animationSlideDuration, "", app.unblockSlider());
			    }
			    else {
					/*
				    var newPos = (pos - Math.ceil(step / 15)) + "px";
				    obj.animate({
					    left: newPos
				    }, animationSlideDuration).animate({
					    left: pos + "px"
				    }, animationSlideDuration, "", app.unblockSlider());
					*/
			    }
			}
			return false;
		},

		// searches container for element with "slideContainer" class
		// and slides it to the right
		// obj - object that caused the event
		// boxId - id of the element that contains element for sliding
		slideRight: function(link, boxId) {
		    if (app.vars.sliderActive == false){
			    app.blockSlider();
			    link.blur();
			    var step = animationSlideStep;
			    var obj = $("#" + boxId).find(".slideContainer:first");
			    var pos = parseInt(obj.css("left").replace("px", ""));
			    if ((pos + step) <= 0) {
				    var newPos = (pos + step) + "px";
				    obj.animate({
					    left: newPos
				    }, animationSlideDuration, "", app.unblockSlider());
			    }
			    else {
					/*
				    var newPos = (pos + Math.ceil(step / 15)) + "px";
				    obj.animate({
					    left: newPos
				    }, animationSlideDuration).animate({
					    left: pos + "px"
				    }, animationSlideDuration, "", app.unblockSlider());
					*/
			    }
            }
            return false;
		},

		// sets animationActive attribute to true thus disabling all 
		// other animations on friends slider
		blockSlider: function() {
			app.vars.sliderActive = true;
		},

		// sets animationActive attribute to false so we can apply
		// new animation to friends slider
		unblockSlider: function() {
			app.vars.sliderActive = false;
		},



		////////////////////////////////////////////////////////////////////////////////////////////////
		//
		//	DATA TRANSFER FUNCTIONS
		//
		////////////////////////////////////////////////////////////////////////////////////////////////


		// sends request for viewer's friends that also have ShoutEm app
		fetchFriends: function() {
			var req = opensocial.newDataRequest();

			var opt_params = {};
			opt_params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [opensocial.Person.Field.PROFILE_URL];
			// this filters out all friends that don't have ShoutEm app
			opt_params[opensocial.DataRequest.PeopleRequestFields.FILTER] = opensocial.DataRequest.FilterType.HAS_APP;

			req.add(req.newFetchPeopleRequest(opensocial.DataRequest.Group.VIEWER_FRIENDS, opt_params), "viewer_friends");
			req.send(app.processFriends);

		},

		// handles response from fetchFriends()
		processFriends: function(response) {
			var html = '';
			var viewer_friends = response.get("viewer_friends").getData();
			viewer_friends.each(function(person) {
				var thumb = person.getField(opensocial.Person.Field.THUMBNAIL_URL);
				var profile = person.getField(opensocial.Person.Field.PROFILE_URL);
				html += ('<a href="' + profile + '" target="_top" class="thumb"><img src="' + thumb + '" /></a>');
			});

			// if we have something to show, put it in GUI
			if (html != '') {
				$("#FriendsUsingApp").find(".slideContainer").html(html);
				app.unblockSlider();
				$("#FriendsLink").show();
				setTimeout("gadgets.window.adjustHeight();", gadgetHeightAdjustDelay);
			}
		},

		// sends request for user's feed
		fetchFeed: function() {
			var address = app.config.currentAddress;
			address = address.replace("/", "");
			address = address.replace("http:", "");

			var username = app.config.currentUsername;
			username = username.replace(" ", "");

			// replaces blank feed url with real address and username
			var url = feedUrl.replace(addressKey, address);
			url = url.replace(usernameKey, username);
			url = "http://" + url;
			
			/*
			var params = {};
			params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
			params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.GET;
			gadgets.io.makeRequest(url, app.processFeed, params);
					 */
			
			app.config.reqTimeoutId = window.setTimeout("app.requestError()", feedFetchTimeout);
			url += "&callback=?";
            jQuery.getJSON(url, function(json) {
                app.processFeed(json);
            });
					   
		},

		// handles response from fetchFeed()
		processFeed: function(response) {
			 /* 
			if (typeof response.data == "undefined") {
				if (viewer.isOwner()) $('#ShoutEmApp_feed').html(txtSettingsInvalidOwner);
				else $('#ShoutEmApp_feed').html(txtSettingsInvalidViewer);
				$('#Header').html("");
				return;
			}
			 */
			window.clearTimeout(app.config.reqTimeoutId);
			   
			var shouts = response;
			var statusHTML = "";
			var feedSize = shouts.length;

			// we get max 10 feed items and if user wants to see less than that,
			// then we process only what's needed
			if (feedSize > app.config.currentFeedLength) feedSize = app.config.currentFeedLength;

			statusHTML += "<table id='ShoutEmApp_update_list' cellpadding='0' cellspacing='0'>";
			var url = "";
			for (var i = 0; i < feedSize; i++) {
				if (i == 0) statusHTML += '<tr class="first">';
				else statusHTML += '<tr>';
				
				if (shouts[i].user.profile_image_url.indexOf("http://") == -1) shouts[i].user.profile_image_url = "http://" + networkUrl + shouts[i].user.profile_image_url;
				if (shouts[i].text == "") shouts[i].text = "&raquo;";
                else shouts[i].text = app.encodeString(shouts[i].text);
                shouts[i].user.screen_name = app.encodeString(shouts[i].user.screen_name);

				url = "http://" + app.config.currentAddress + "/" + app.config.currentUsername + "/shouts/" + shouts[i].id + "/";
				statusHTML += '<td class="content"><span>' + shouts[i].text + '</span> - <a href="' + shouts[i].user.shoutem_profile_url + '" class="time" target="_blank">' + shouts[i].shoutem_relative_created_at + '</a>';
				
				if (typeof (shouts[i].shoutem_attachments) != "undefined" && shouts[i].shoutem_attachments.length != 0) {
                    statusHTML += app.processAttachments(shouts[i]);
                }
                
				statusHTML += '</td></tr>';
			}
			statusHTML += "</table>";

			// here we add user's thumbnail and link to his profile
			if (shouts.length > 0) {
				url = "http://" + app.config.currentAddress + "/";
				$('#Header')[0].setAttribute('href', url)
				url += (app.config.currentUsername + "/");

				var temp = '<table cellpadding="0" cellspacing="0"><tr><td class="avatar"><a href="' + shouts[0].user.shoutem_profile_url + '" target="_blank"><img src="' + shouts[0].user.profile_image_url + '" alt="' + shouts[0].user.screen_name + '" title="' + shouts[0].user.name + '"/></a></td>';
				temp += '<td class="memberUrl"><a href="' + url + '" target="_blank">';
				temp += app.config.currentAddress;
				temp += "/";
				temp += app.config.currentUsername;
				temp += '</a></td></tr></table>';
				statusHTML += temp;

				$('#Header').html(app.config.currentAddress + " STATUSES");
			}
			$('#ShoutEmApp_feed').html(statusHTML);

			// style is generated dynamically so we need to update it with
			// every GUI change
			app.generateStyle();
			setTimeout("gadgets.window.adjustHeight();", gadgetHeightAdjustDelay);
			
			// this one is needed because of images that need to be loaded
			setTimeout("gadgets.window.adjustHeight();", gadgetHeightAdjustDelay * 5);
		},
		  
		requestError: function() {
			if (viewer.isOwner()) $('#ShoutEmApp_feed').html(txtSettingsInvalidOwner);
			else $('#ShoutEmApp_feed').html(txtSettingsInvalidViewer);
			$('#Header').html("");
		},
		
		// converts shout's attachments to html code
		processAttachments: function(shout) {
            var html = "";
            var att = shout.shoutem_attachments;
            for (var i = 0; i < att.length; i++) {
                if (att[i].type == attTypes.link) {  
                    // link (can be: normal link || youtube || vimeo)
                    
                    // part of html shared by all videos
                    var videoThumbHtml = "<br /><a href='" + shout.url + "' style='display: block; max-height: 80px; width: 80px; overflow: hidden; position: relative; padding: 2px 0 0 0;'>";
                    videoThumbHtml += "<img src='http://" + app.config.currentAddress + "/skins/youtubePlay.gif' alt='' style='border: none; position: absolute; height: 14px; width: 20px; z-index: 100; top: 24px; left: 31px;'/>";
                    
                    if (att[i].url.indexOf(attLinkPatterns.youtube) != -1) {
                        // http://www.youtube.com/watch?v=yEQPpjzoqHs
                        var videoId = att[i].url.split("watch?v=")[1].split("&")[0];
                        html += videoThumbHtml;
                        html += "<img src='http://img.youtube.com/vi/" + videoId + "/2.jpg' style='border: none; width: 80px; height: auto;' /></a>";
                    }
                    else if (att[i].url.indexOf(attLinkPatterns.vimeo) != -1) {
                        // http://www.vimeo.com/2104162
                        var videoId = att[i].url.split("/")[3].split("?")[0];
                        html += videoThumbHtml;
                        html += "<img src='http://images.vimeo.com/17/08/73/170873299/170873299_80.jpg' style='border: none; height: auto;' /></a>";
                    }
                    else {
                        // normal link
                        var urlParts = att[i].url.split("/");
                        var shortUrl = "";
                        // if (urlParts.length > 3 && urlParts[3].length > 0) shortUrl = urlParts[2] + "/...";
                        // else shortUrl = att[i].url.replace("http://", "");
												shortUrl = att[i].url.replace("http://", "");
                        html += "<br /><a href='" + att[i].url + "' style='text-decoration: none;'>" + shortUrl + "</a>";
                    }
                }
                else if (att[i].type == attTypes.picture) {
                    // picture
                    html += "<br /><a href='" + shout.url + "' style='display: block; max-height: 80px; width: 80px; overflow: hidden; padding: 2px 0 0 0;'>";
                    html += "<img src='" + att[i].url_thumbnail + "' style='border: none; width: 80px; height: auto;' /></a>";
                }
                else if (att[i].type == attTypes.location) {
                    // location
                }
            }
            return html;
        },
        
        encodeString: function(orig) {
            return orig.replace("<", "&lt;").replace(">", "&gt;");
        },
        
		// opens settingsView and populates text boxes and drop down list
		// obj - object that caused the event
		openSettings: function(obj) {
			// only app owner can access settings
			if (viewer.isOwner() == false) return;

			obj.blur();
			var obj = $("#FeedLength")[0];
			if (obj != null) {
				for (var i = 0; i < obj.options.length; i++) {
					if ((obj.options.item(i)) && (obj.options.item(i).value == app.config.currentFeedLength)) {
						obj.options.item(i).setAttribute('selected', 'true');
						break;
					}
				}
			}
			obj = $("#NetworkAddress")[0];
			if (obj != null) obj.value = app.config.currentAddress;
			if (obj.value == "undefined") obj.value = "";
			obj = $("#UserName")[0];
			if (obj != null) obj.value = app.config.currentUsername;
			if (obj.value == "undefined") obj.value = "";
			obj = $("#UserPassword")[0];
			if (obj != null) obj.value = app.config.currentPassword;
			if (obj.value == "undefined") obj.value = "";
			
			$('#SEprofileView').hide();
			$('#SEsettingsView').show();
			setTimeout("gadgets.window.adjustHeight();", gadgetHeightAdjustDelay);

		},

		// sends request for app settings
		fetchSettings: function() {
			var req = opensocial.newDataRequest();
			var fields = [storageKeys.numberOfShouts, storageKeys.networkAddress, storageKeys.userName, storageKeys.userPassword];
			req.add(req.newFetchPersonAppDataRequest(opensocial.DataRequest.PersonId.OWNER, fields), "owner_data");
			req.send(app.processSettings);
		},

		// handles response from fetchSettings()
		processSettings: function(response) {
			if (response.get("owner_data").hadError()) alert("Error while loading settings");
			else {
				if (viewer.isOwner()) $("#SettingsLink").show();

				var data = response.get("owner_data").getData();

				// if data is valid, we read it...
				if (data[owner.getId()]) {
					app.config.currentFeedLength = data[owner.getId()][storageKeys.numberOfShouts];
					app.config.currentAddress = data[owner.getId()][storageKeys.networkAddress];
					app.config.currentUsername = data[owner.getId()][storageKeys.userName];
					app.config.currentPassword = data[owner.getId()][storageKeys.userPassword];
					app.fetchFeed();
				}
				// if not then we show different message for viewer and owner
				else {
					if (viewer.isOwner()) $('#ShoutEmApp_feed').html(txtIntroOwner);
					else $('#ShoutEmApp_feed').html(txtIntroViewer);
				}
				setTimeout("gadgets.window.adjustHeight();", gadgetHeightAdjustDelay);
			}
		},

		// saves settings to Ning server
		saveSettings: function(obj) {
			if (viewer.isOwner() == false) return;

			// store old values so we can check for changes later
			var oldFeedLength = app.config.currentFeedLength;
			var oldAddress = app.config.currentAddress;
			var oldUsername = app.config.currentUsername;

			var obj = $('#FeedLength')[0];
			if (obj != null) app.config.currentFeedLength = obj.options[obj.selectedIndex].value;

			obj = $('#NetworkAddress')[0];
			if (obj != null) {
				app.config.currentAddress = obj.value;
				app.config.currentAddress = app.config.currentAddress.replace("/", "");
				app.config.currentAddress = app.config.currentAddress.replace("http:", "");
				obj.value = app.config.currentAddress;
			}

			obj = $('#UserName')[0];
			if (obj != null) {
				app.config.currentUsername = obj.value;
				app.config.currentUsername = app.config.currentUsername.replace(" ", "");
				obj.value = app.config.currentUsername;
			}
			
			obj = $('#UserPassword')[0];
			if (obj != null) {
				app.config.currentPassword = obj.value;
				app.config.currentPassword = app.config.currentPassword.replace(" ", "");
				obj.value = app.config.currentPassword;
			}

			// hide settings window
			app.toggleBox(obj, 'SEprofileView');
			app.toggleBox(obj, 'SEsettingsView');
			setTimeout("gadgets.window.adjustHeight();", gadgetHeightAdjustDelay);

			// if user left empty box, show error message
			if (app.config.currentAddress == '' || app.config.currentUsername == '') {
				$('#ShoutEmApp_feed').html(txtSettingsInvalidOwner);
				return;
			}

			// check for changes and if there's any save settings
			if (app.config.currentAddress != oldAddress || app.config.currentFeedLength != oldFeedLength || app.config.currentUsername != oldUsername) {
				var req = opensocial.newDataRequest();
				req.add(req.newUpdatePersonAppDataRequest("OWNER", "numberOfShouts", app.config.currentFeedLength), "set_data");
				req.add(req.newUpdatePersonAppDataRequest("OWNER", "networkAddress", app.config.currentAddress), "set_data");
				req.add(req.newUpdatePersonAppDataRequest("OWNER", "userName", app.config.currentUsername), "set_data");
				req.add(req.newUpdatePersonAppDataRequest("OWNER", "userPassword", app.config.currentPassword), "set_data");

				$('#Header').html("");
				$('#ShoutEmApp_feed').html(txtUpdating);
				setTimeout("gadgets.window.adjustHeight();", gadgetHeightAdjustDelay);
				req.send(app.settingsSaved);
			}
		},

		// handles response from saveSettings()
		settingsSaved: function(response) {
			if (response.get("set_data").hadError()) {
				alert("Error while saving settings");
			} else {
				// if everything is ok proceed to GUI refresh
				app.fetchFeed();
			}
		},

		// sends request for basic data about apps environment
		fetchInfo: function() {
			env = opensocial.getEnvironment();

			var req = opensocial.newDataRequest();
			req.add(req.newFetchPersonRequest(opensocial.DataRequest.PersonId.OWNER), "owner");
			req.add(req.newFetchPersonRequest(opensocial.DataRequest.PersonId.VIEWER), "viewer");
			req.send(this.processInfo);
		},

		// handles response from fetchInfo() 
		// only after we have basic data about how's the app 
		// owner and how's viewer can we proceed with app loading
		processInfo: function(response) {
			viewer = response.get("viewer").getData();
			owner = response.get("owner").getData();
			setTimeout("gadgets.window.adjustHeight();", gadgetHeightAdjustDelay);
			app.fetchFriends();
			app.fetchSettings();
		},

		// app entry point
		init: function() {
			setTimeout("gadgets.window.adjustHeight();", gadgetHeightAdjustDelay);
			this.generateStyle();
			this.fetchInfo();
		}
	};

};

	gadgets.util.registerOnLoadHandler(function() {
		var app = new ShoutEmNingApp();
		app.init();
	});
	
	// sets the app entry point
	//gadgets.util.registerOnLoadHandler(init);
	
</script>



<style type='text/css'>
	
	#ShoutEmApp_frame { font-size: 12px; padding: 0; }
	/*
	#ShoutEmApp_frame #SEprofileView, #ShoutEmApp_frame #SEsettingsView { width: 502px; }
	#ShoutEmApp_frame #SEcanvasView { width: 737px; }
	*/
	#ShoutEmApp_frame a { text-decoration: none; }
	#ShoutEmApp_frame a:hover { text-decoration: underline; }
	#ShoutEmApp_frame img { border: none; }
	#ShoutEmApp_frame p, #ShoutEmApp_frame h3 { margin: 0; }
	#ShoutEmApp_frame p { padding: 0 0 4px 0; }
	#ShoutEmApp_frame a#Header { display: inline-block; padding: 3px 0 6px 0; text-transform: uppercase; font-weight: bold; font-size: 14px; }
	#ShoutEmApp_feed { padding: 0 0 3px 0; margin: 0 0 3px 0; }
	#ShoutEmApp_feed img { border: none; height: 24px; }
	#ShoutEmApp_feed table { margin: 0px; table-layout: fixed; width: 100%; font-size: 11px; }
	#ShoutEmApp_feed td { overflow: hidden; padding: 2px; }
	#ShoutEmApp_feed td a.time { opacity: 0.65; filter:alpha(opacity=65); }
	#ShoutEmApp_feed tr.first td { border: none; font-weight: bold; font-size: 13px; padding: 10px 0; }
	#ShoutEmApp_feed td.avatar { width: 30px; vertical-align: middle; border-top-style: solid; height: 33px; }
	#ShoutEmApp_feed td.avatar a { padding: 3px 0 1px 3px; display: block; }
	#ShoutEmApp_feed td.memberUrl { vertical-align: middle; font-weight: bold; border-top-style: solid; font-size: 13px; height: 33px; }

	#FriendsWrapper { width: 502px; overflow: hidden; padding: 3px 0 0 0; }
	#FriendsUsingApp { width: 446px; float: left; overflow: hidden; padding: 0 0 0 6px; }

	#ShoutEmApp_frame .thumb { padding: 0 9px 0 0; }
	#ShoutEmApp_frame .thumb img { height: 32px; width: 32px; }
	#ShoutEmApp_frame .openBox { opacity: 0.7; filter:alpha(opacity=70); font-size: 12px; }
	#ShoutEmApp_frame .arrowBtn { float: left; font-size: 33px; position: relative; top: -7px; }
	#ShoutEmApp_frame .arrowBtn:hover { text-decoration: none; }
	#ShoutEmApp_frame .slideContainer { position: relative; height: 32px; white-space: nowrap; float: left; }
	#ShoutEmApp_frame .button { padding: 1px 6px 2px 4px; display: inline-block; line-height: 1.2em; }


</style>
 
<div id='ShoutEmApp_frame'>
	<div id="SEprofileView">
		<a id='Header' target="_blank"></a>
		<div id='ShoutEmApp_feed'>
			&nbsp;&nbsp;&nbsp;Updating...
		</div>
		
		<table style="width:100%"><tr>
			<td align="left">
				<a href="javascript:void(0);" id="FriendsLink" onclick="app.toggleBox(this,'FriendsWrapper');" class="openBox" style="display:none;">See who else is using ShoutEm app <img src="http://www.shoutem.com/apps/images/ArrowDown.gif" alt="" /></a>
			</td>
			<td align="right" style="width:30%;">
				<a href="javascript:void(0);" id="SettingsLink" onclick="app.openSettings(this);" class="openBox" style="display:none;"><img src="http://www.shoutem.com/apps/images/SettingsIcon.gif" alt="" /> Settings</a>
			</td>
		</tr></table>
		
		<div id="FriendsWrapper" style="display:none;">
			<a href="javascript:void(0);" onclick="return app.slideRight(this, 'FriendsUsingApp');" class="arrowBtn">&laquo;</a>
			<div id='FriendsUsingApp'>
				<div class="slideContainer">
					
				</div>
			</div>
			<a href="javascript:void(0);" onclick="return app.slideLeft(this, 'FriendsUsingApp');" class="arrowBtn">&raquo;</a>
		</div>
	</div>
	<div id="SEsettingsView" style="display:none;">
		<h3>Settings</h3>
		<br />
		<p>How many shouts would you like to show: &nbsp;
		<select id="FeedLength">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="5" selected="true">5</option>
			<option value="10">10</option>
		</select></p>
		<p>
			Network address:
			<br /><input type="text" value="" id="NetworkAddress" name="Text"/>&nbsp;e.g. team.shoutem.com
		</p>
		<p>
			Username:
			<br /><input type="text" value="" id="UserName" name="Text"/>
		</p>
		<p style='display: none;'>
			Password:
			<br /><input type="text" value="" id="UserPassword" name="Text"/>&nbsp;needed only for private networks
		</p>
		
		<p style="text-align:right;">
			<a class="button" href="javascript:void(0);" onclick="app.saveSettings(this)">Save</a>&nbsp;&nbsp;
			<a class="button" href="javascript:void(0);" onclick="app.toggleBox(this,'SEprofileView'); app.toggleBox(this,'SEsettingsView');">Cancel</a>
		</p>
	</div>
	<div id="SEintroView" style="display:none;">
		
	</div>
	<div id="SEcanvasView">
	</div>
	
	
</div>







]]>
	</Content>
</Module>