// bigpanel globals

var add_story_open = false;
var full_story_open = false;



// idlng can be id number or longitude, lat is latitude or null
// requesttype is 'id' or 'lnglat'
function edit_marker(requesttype,idlng,lat) {
	// close map marker
	if (current_marker != null) {
		current_marker.closeLittleInfoWindow();
	}

	// prevent other windows from being opened
	catch_biginfoopen = true;

	// set up the big edit/view panel
	var div = new Element('div');
	div.setProperty('id', 'bigeditpanel');
	div.injectInside('pagebody');

	var div = new Element('div');
	div.setProperty('id', 'panelheader');
	div.injectInside('bigeditpanel');

	var div = new Element('div');
	div.setProperty('id', 'panelbody');
	div.injectInside('bigeditpanel');
	p = Math.ceil(Math.random()*4);
	$('panelbody').addClass('panelback'+p);

	var div = new Element('div');
	div.setProperty('id', 'panelfooter');
	div.injectInside('bigeditpanel');

	// request info for the current marker
	new Ajax('/ajax/retrieve_place.php', {
		postBody: Object.toQueryString({type: requesttype, idlng: idlng, lat: lat}),
		update: 'panelbody',
		evalScripts: false,
		onComplete: function() {			// on ajax return check if the place has no stories and immediately turn on add-story functionality
			currentstyle = $('bignostories').getStyle('display');
			if (currentstyle != 'none') {
				place_id = $('bignostories').getStyle('z-index');
				add_story(place_id);
			}
		}
	}).request();
}



// called from close button on big story panel
function close_bigpanel() {
	pb = document.getElementById('pagebody');
	olddiv = document.getElementById('bigeditpanel');
	pb.removeChild(olddiv);
	// reset globals
	add_story_open = false;
	catch_biginfoopen = false;
	full_story_open = false;
	sendfriendboxopen = false;
	translateboxopen = false;
}




// called from main "add story" button in big panel
function add_story(pid) {
	if (!add_story_open) {
		// hide main add story/photo links
		clear_bigmainform();
		$('biglinks').setStyle('display', 'none');			// hide links
		$('allstories').setStyle('display', 'none');		// hide existing stories

		if (special_map == 'sounds') {
			// set up the big edit/view panel
			var div = new Element('div');
			div.setProperty('id', 'soundpagewarning');
			div.injectInside('bigmainform');
			$('soundpagewarning').addClass('soundpagewarning');
			sw = '<strong>Please Note:</strong><br>';
			sw = sw + 'You are currently viewing the Sounds of the World page, where MapSkip only features stories that contain a sound recording.<br>';
			sw = sw + 'If you add a story without sound, it will be visible only on the homepage of the site.';
			d_write_layer('soundpagewarning',sw);
		}
		
		// set up the big edit/view panel
		var div = new Element('div');
		div.setProperty('id', 'formaddstory');
		div.injectInside('bigmainform');
	
		var div = new Element('div');
		div.setProperty('id', 'formboxmain');
		div.injectInside('formaddstory');
		$('formboxmain').addClass('formbox');
	
		storyform = '';
		
		storyform = storyform + '<form name="addstoryform" id="addstoryform" action="/ajax/store_newstory.php" method="POST">';
		storyform = storyform + '<div class="formheader">Add Your Own Story</div>';
		storyform = storyform + '<div id="formerror" class="errormessage"></div>';
		storyform = storyform + '<div><div class="formlegend">Year:</div><input type="text" name="storyyear" maxlength="4" class="veryshortfield"></div>';
		storyform = storyform + '<div><div class="formlegend">Headline:</div><input type="text" id="storytitle" name="storytitle" maxlength="256" class="fullfield" onkeyup="add_to_tweet()"></div>';
		storyform = storyform + '<div><div class="formlegend">The Story:</div><textarea name="storybody" class="fullarea"></textarea></div>';
		storyform = storyform + '<div style="padding: 5px 0 10px 0;"><input type="checkbox" name="commentnotify" class="checkboxfield" value="yes" checked><span class="formlegendright">&nbsp;Notify me via email if a new comment is submitted to this story</span></div>';
		storyform = storyform + '<div id="photouploadbutton" style="float: left;"><a href="javascript:open_photo_uploadframe('+pid+')" id="addphotoslink" class="buttonadd">Add your photos to this story</a></div>';
		storyform = storyform + '<div id="addstoryphotos" style="clear: both;"></div>';
		storyform = storyform + '<div id="sounduploadbutton" style="float: left;"><a href="javascript:open_audio_uploadframe('+pid+')" id="addsoundlink" class="buttonadd">Add a sound recording to this story</a></div>';
		storyform = storyform + '<div id="addsound" style="clear: both; padding-top: 10px;"></div>';

		storyform = storyform + '<div id="addvideobutton" style="float: left;"><a href="javascript:open_videopanel()" id="addvideolink" class="buttonadd">Add a YouTube video to this story</a></div>';
		storyform = storyform + '<div id="addvideo" style="clear: both; padding: 5px 0 5px 0;"></div>';

if (userid == 2) {
		storyform = storyform + '<div id="groupaddbutton" style="float: left;"><a href="javascript:open_grouppanel()" id="addgrouplink" class="buttonadd">Make your story part of a group</a></div>';
		storyform = storyform + '<div id="addgroup" style="clear: both; padding-top: 10px;"></div>';
}

		storyform = storyform + '<div id="tweetbox" style=""></div>';

		storyform = storyform + '<input type="hidden" name="placeid" value="'+pid+'">';
		storyform = storyform + '<input type="hidden" name="storyphotos" value="">';
		storyform = storyform + '<input type="hidden" name="storysound" value="">';
		storyform = storyform + '<input type="hidden" name="storyvideoembed" value="">';
		storyform = storyform + '<input type="hidden" name="storyvideotitle" value="">';
		storyform = storyform + '</form>';
		storyform = storyform + '<div style="float: right;" id="addstorysubmitbutton"><a href="javascript:submit_story('+pid+');" class="buttonsave">Save Story</a></div>';
		storyform = storyform + '<div style="padding:10px 0 10px 0;"><span class="metainfo"><a href="javascript:var newwin=window.open(\'/about/privacy.shtml\',\'policy\',wscr+\'width=420,height=500\');">Privacy Policy and Copyright</a></span></div>';
	
		d_write_layer('formboxmain',storyform);
		
		// bind event so that we can check for mouse position in get_mousecoords() below
		$('addphotoslink').onclick = get_mousecoords.bindWithEvent($('addphotoslink'));
		$('addsoundlink').onclick = get_mousecoords.bindWithEvent($('addsoundlink'));
		$('addvideolink').onclick = get_mousecoords.bindWithEvent($('addvideolink'));
if (userid == 2) {
		$('addgrouplink').onclick = get_mousecoords.bindWithEvent($('addgrouplink'));
}		

		// request full story
		new Ajax('/ajax/retrieve_tweetbox.php', {
			update: 'tweetbox',
			evalScripts: false
		}).request();


		add_story_open = true;
	}
}


function add_to_tweet() {
	shortheader = $('storytitle').value.substring(0,74);
	if ($('storytitle').value.length > 75) {
		shortheader = shortheader + '...';
	}
	$('storytweet').value = 'My new MapSkip story: ' + shortheader;
}




// called from main "edit story" button in big panel
function edit_story(storyid,pid) {
	if (!add_story_open) {

		//request function
		var xhrFunc = new function(){
			new XHR({
				method: 'post',
				onSuccess: function(req){

					storyparts = req.split('@@@');

					// hide main add story/photo links
					clear_bigmainform();
					$('biglinks').setStyle('display', 'none');			// hide links
					$('allstories').setStyle('display', 'none');		// hide existing stories
			
					// set up the big edit/view panel
					var div = new Element('div');
					div.setProperty('id', 'formaddstory');
					div.injectInside('bigmainform');
				
					var div = new Element('div');
					div.setProperty('id', 'formboxmain');
					div.injectInside('formaddstory');
					$('formboxmain').addClass('formbox');

					photolist = storyparts[4].split(',');				// make sure we turn off photo upload if there are 3 photos
					photonum = photolist.length;
				
					storyform = '';
					
					storyform = storyform + '<form name="addstoryform" id="addstoryform" action="/ajax/store_changedstory.php" method="POST">';
					storyform = storyform + '<div class="formheader">Edit Story</div>';
					storyform = storyform + '<div id="formerror" class="errormessage"></div>';
					storyform = storyform + '<div><div class="formlegend">Year:</div><input type="text" name="storyyear" maxlength="4" class="veryshortfield" value="'+storyparts[0]+'"></div>';
					storyform = storyform + '<div><div class="formlegend">Headline:</div><input type="text" name="storytitle" maxlength="256" class="fullfield" value="'+storyparts[1]+'"></div>';
					storyform = storyform + '<div><div class="formlegend">The Story:</div><textarea name="storybody" class="fullarea">'+storyparts[2]+'</textarea></div>';
					storyform = storyform + '<div style="padding: 5px 0 10px 0;"><input type="checkbox" name="commentnotify" class="checkboxfield" value="yes" '+storyparts[5]+'><span class="formlegendright">&nbsp;Notify me via email if a new comment is submitted to this story</span></div>';
					if (photonum < 3) {
						storyform = storyform + '<div id="photouploadbutton" style="float: left;"><a href="javascript:open_photo_uploadframe('+pid+')" id="addphotoslink" class="buttonadd">Add your photos to this story</a></div>';
					}
					storyform = storyform + '<div id="addstoryphotos" style="clear: both;">'+storyparts[3]+'</div>';
					storyform = storyform + '<div id="sounduploadbutton" style="float: left;"><a href="javascript:open_audio_uploadframe('+pid+')" id="addsoundlink" class="buttonadd">Add a sound recording to this story</a></div>';
					storyform = storyform + '<div id="addsound" style="clear: both; padding-top: 10px;"></div>';

					storyform = storyform + '<div id="addvideobutton" style="float: left;"><a href="javascript:open_videopanel()" id="addvideolink" class="buttonadd">Add a YouTube video to this story</a></div>';
					storyform = storyform + '<div id="addvideo" style="clear: both; padding: 5px 0 5px 0;"></div>';  // TODO: Allow to replay existing video

					storyform = storyform + '<input type="hidden" name="storyid" value="'+storyid+'">';
					storyform = storyform + '<input type="hidden" name="storyphotos" value="'+storyparts[4]+'">';
					storyform = storyform + '<input type="hidden" name="storysound" value="'+storyparts[6]+'">';
					storyform = storyform + '<input type="hidden" name="storyvideoembed" value="'+storyparts[7]+'">';
					storyform = storyform + '<input type="hidden" name="storyvideotitle" value="'+storyparts[8]+'">';
					storyform = storyform + '</form>';
					storyform = storyform + '<div style="float: right;" id="addstorysubmitbutton"><a href="javascript:submit_story('+pid+');" class="buttonsave">Save Story</a></div>';
					storyform = storyform + '<div style="padding:10px 0 10px 0;"><span class="metainfo"><a href="javascript:var newwin=window.open(\'/about/privacy.shtml\',\'policy\',wscr+\'width=420,height=500\');">Privacy Policy and Copyright</a></span></div>';

					d_write_layer('formboxmain',storyform);
					
					// bind event so that we can check for mouse position in get_mousecoords() below
					if (photonum < 3) {
						$('addphotoslink').onclick = get_mousecoords.bindWithEvent($('addphotoslink'));
					}
					$('addsoundlink').onclick = get_mousecoords.bindWithEvent($('addsoundlink'));
					$('addvideolink').onclick = get_mousecoords.bindWithEvent($('addvideolink'));

					add_story_open = true;

					if (storyparts[6] != -1) {
						var so = new SWFObject('/flash/audioplayer.swf','mpl','105','48','8');
						so.addParam('wmode','transparent');
						so.addParam('flashvars','soundurl=/audiodb/'+storyparts[6]+'.mp3');
						so.write('addsound');
					}						

				}
			}).send('/ajax/retrieve_storydata.php','story='+storyid);
		};

	}
}










var saved_pid = null;															// pid is current placemark id, saved to bridge story save AJAX call

function submit_story(pid) {
	saved_pid = pid;															// keep place id for return from AJAX save

	errornumber = 0;
	errortext = 'Please correct the following problems:<br>';
	f_check_text('addstoryform','storyyear','Tell us when your story happened.');
	f_is_number('addstoryform','storyyear','The year you\'ve entered doesn\'t appear to be a number');
	f_check_text('addstoryform','storytitle','Your story doesn\'t seem to have a title.');
	f_check_text('addstoryform','storybody','You have to tell us more about your story.<br>');
	if (errornumber == 0) {
		f_check_badwords('addstoryform','storytitle','Please don\'t use words like ');
		f_check_badwords('addstoryform','storybody','Please don\'t use words like ');
	}
	if (!f_validate_form('formerror')) {
		// change submit button to animation
		d_write_layer('addstorysubmitbutton','<img src="http://cdn.mapskip.com/images/global/ajax_loader_small_medium.gif" width="32" height="32" border="0" alt="">');
		// deal with single quotes
		singlequote = /'/g;
		storytitle = this.document.addstoryform.storytitle.value.replace(singlequote,"\\'");
		this.document.addstoryform.storytitle.value = storytitle;
		story = this.document.addstoryform.storybody.value.replace(singlequote,"\\'");
		this.document.addstoryform.storybody.value = story;
		
		// submit new story and on success reload main panel
		$('addstoryform').send({onComplete: reload_bigpanel});
		// clear big panel
		close_bigpanel();
	}
}


// called on return from story save AJAX call, uses placemarker id  to re-open full big story panel
function reload_bigpanel() {
	edit_marker('id',saved_pid);
}


	
function open_photo_uploadframe(pid) {
	// add new layer
	var div = new Element('div');
	div.setProperty('id', 'photoupload');
	div.injectInside('pagebody');
	$('photoupload').addClass('photouploadbox');

	// position layer near mouse
	$('photoupload').setStyle('top', (mouse_y-300)+'px');
	$('photoupload').setStyle('left', (mouse_x+50)+'px');

	uploadyear = this.document.addstoryform.storyyear.value;

	// display form in iframe
	storyform = '<iframe name="addphotoframe" src="/sitetools/image_upload.php?placeid='+pid+'&year='+uploadyear+'" width="300" height="300" frameborder="0"></iframe>';
	d_write_layer('photoupload',storyform);
}


// click event on "add a photo" link in main story panel is bound to this function 
function get_mousecoords(event){
	mouse_x = event.page.x;														//position of the mouse in the page
	mouse_y = event.page.y;
};


// called from photo upload iframe
function close_photo_uploadframe() {
	pb = document.getElementById('pagebody');
	olddiv = document.getElementById('photoupload');
	pb.removeChild(olddiv);
}




// called from photo upload iframe (onload when iframe reloads itself after storing a new photo)
function add_uploaded_photo(newphotoid) {
	// add new pic to form
	currentpics = this.document.addstoryform.storyphotos.value;
	if (currentpics == '') {
		currentpics = newphotoid;
	} else {
		currentpics = currentpics + ',' + newphotoid;
	}
	this.document.addstoryform.storyphotos.value = currentpics;
	// show new pic
	
	allpics = new Array();	
	forcedstring = currentpics + ' ';
	if (forcedstring.indexOf(',') != -1) {
		allpics = currentpics.split(',');
	} else {
		allpics[0] = currentpics;
	}
	
	content = '<table border="0" cellpadding="0" cellspacing="0"><tr>';
	for (c=0;c<allpics.length;c++) {
		photoid = allpics[c];
		content = content + '<td align="center"><img src="/sitetools/image.php?image_name='+photoid+'.jpg&style=mini" alt="" title="" border="0" class="addedpicpreview" /><br><a href="javascript:delete_photo('+photoid+')" class="picpreviewlink">delete</a></td>';
	}
	content = content + '</tr></table>';

	d_write_layer('addstoryphotos',content);
	if (allpics.length == 3) {
		close_photo_uploadframe();
		$('photouploadbutton').setStyle('display', 'none');
	}
}




function delete_photo(oldphotoid) {
	currentpics = this.document.addstoryform.storyphotos.value;
	allpics = new Array();
	forcedstring = currentpics + ' ';

	if (forcedstring.indexOf(',') != -1) {
		allpics = currentpics.split(',');
		// re-assemble currentpics without oldphotoid
		currentpics = '';
		content = '<table border="0" cellpadding="0" cellspacing="0"><tr>';
		for (c=0;c<allpics.length;c++) {
			if (allpics[c] != oldphotoid) {
				photoid = allpics[c];
				content = content + '<td align="center"><img src="/sitetools/image.php?image_name='+photoid+'.jpg&style=mini" alt="" title="" border="0" class="addedpicpreview" /><br><a href="javascript:delete_photo('+photoid+')" class="picpreviewlink">delete</a></td>';
				if (c > 0) {
					currentpics = currentpics + ',';
				}
				currentpics = currentpics + photoid;
			}
		}
		content = content + '</tr></table>';

	} else {
		currentpics = '';
		content = '';
	}

	this.document.addstoryform.storyphotos.value = currentpics;

	d_write_layer('addstoryphotos',content);

	$('photouploadbutton').setStyle('display', 'block');
}




function open_audio_uploadframe(pid) {
	// add new layer
	var div = new Element('div');
	div.setProperty('id', 'photoupload');
	div.injectInside('pagebody');
	$('photoupload').addClass('photouploadbox');

	// position layer near mouse
	$('photoupload').setStyle('top', (mouse_y-300)+'px');
	$('photoupload').setStyle('left', (mouse_x+50)+'px');

	// display form in iframe
	storyform = '<iframe name="addphotoframe" src="/sitetools/sound_upload.php?placeid='+pid+'" width="300" height="320" frameborder="0"></iframe>';
	d_write_layer('photoupload',storyform);
}


// called from sound upload iframe (onload when iframe reloads itself after storing new mp3)
function add_uploaded_sound(newsoundid) {
	// add new mp3 to form
	this.document.addstoryform.storysound.value = newsoundid;

	// show new mp3
	var so = new SWFObject('/flash/audioplayer.swf','mpl','105','48','8');
	so.addParam('wmode','transparent');
	so.addParam('flashvars','soundurl=/audiodb/'+newsoundid+'.mp3');
	so.write('addsound');

	close_photo_uploadframe();
//	$('sounduploadbutton').setStyle('display', 'none');
}





// called from links around each story excerpt in the big panel
function open_fullstory(sid) {
	if (!full_story_open) {
		// hide main add story/photo links
		clear_bigmainform();
		$('biglinks').setStyle('display', 'none');			// hide links
		$('allstories').setStyle('display', 'none');		// hide existing stories

		// set up the big edit/view panel
		var div = new Element('div');
		div.setProperty('id', 'fullstory');
		div.injectInside('bigmainform');

		full_story_open = true;

		// request full story
		new Ajax('/ajax/retrieve_story.php', {
			postBody: Object.toQueryString({story: sid, section: 1}),
			update: 'fullstory',
			evalScripts: false,
			onComplete: function(){
				soundstatus = $('soundplayer').getStyle('z-index');
				if (soundstatus != '-1') {
					var so = new SWFObject('/flash/audioplayer.swf','mpl','105','48','8');
					so.addParam('wmode','transparent');
					so.addParam('flashvars','soundurl=/audiodb/'+soundstatus+'.mp3');
					so.write('soundplayer');
					if (sitesection == 6) {		// on sounds page, if a audio player is invoked, turn off any map sounds
						soundworld_cancel();
					}
				}
			}
		}).request();

	}

}





function clear_bigmainform() {
	d_write_layer('bigmainform','');
	full_story_open = false;
}


function fullstory_back() {
	clear_bigmainform();
	$('biglinks').setStyle('display', 'block');			// show links
	$('allstories').setStyle('display', 'block');		// show existing stories
}




// site help panel

function help_close() {
	$('sitehelp').setStyle('display', 'none');
}

var current_help = 0;

function help_text(ht) {
	$('sitehelptext' + current_help).setStyle('display', 'none');
	$('sitehelptext' + ht).setStyle('display', 'block');
	current_help = ht;
}






// add embedded video

function open_videopanel() {
	// add new layer
	var div = new Element('div');
	div.setProperty('id', 'videopanel');
	div.injectInside('pagebody');
	$('videopanel').addClass('photouploadbox');

	// position layer near mouse
	$('videopanel').setStyle('top', (mouse_y-300)+'px');
	$('videopanel').setStyle('left', (mouse_x+50)+'px');

	gpanel = '<div style="padding: 10px 10px 10px 10px;	text-align: left;"><form name="videoform" id="videoform" action="" method="POST">';
	gpanel = gpanel + '<div style="float: right;"><a href="javascript:close_videopanel();" class="buttondone">Done</a></div>';
	gpanel = gpanel + '<div class="formheader" style="padding-top: 10px;">Add a YouTube Video to this Story</div>';
	gpanel = gpanel + '<div class="formlegend">If you have a YouTube video for this story, you can simply copy the YouTube embed tag or the YouTube URL here. Please only add videos that you have created yourself and that are relevant for this story.<br>&nbsp;</div>';
	gpanel = gpanel + '<div id="videoformerror" class="errormessage"></div>';
	gpanel = gpanel + '<div><div class="formlegend">Embed Tag or URL (copy and paste from YouTube):</div><input type="text" name="videoembed" maxlength="1000" class="shortfield" value=""></div>';
	gpanel = gpanel + '<div><div class="formlegend">Title:</div><input type="text" name="videotitle" maxlength="100" class="shortfield" value=""></div>';
	gpanel = gpanel + '<div id="videoformbody" style="padding-top: 5px;"><a href="javascript:submit_video();" class="buttonupload">Add Video</a></div>';
	gpanel = gpanel + '</form></div>';
	$('videopanel').setHTML(gpanel);
}

// called from video panel
function close_videopanel() {
	pb = document.getElementById('pagebody');
	olddiv = document.getElementById('videopanel');
	pb.removeChild(olddiv);
}

// called from videopanel - form is actually never submitted, data is stored in hidden form fields
function submit_video() {

	// form validation
	errornumber = 0;
	errortext = 'Please correct the following problems:<br>';
	f_check_text('videoform','videoembed','Please copy and paste the YouTube embed code for your video');
	f_check_text('videoform','videotitle','Please add a title for your video');
// TODO: special treatment for embed tags goes here
//	if (fvar.indexOf('.jpg') == -1) {
//		errortext = errortext + 'The photo has to be in the JPG format<br>';
//		errornumber++;
//	}

	if (errornumber == 0) {
		f_check_badwords('videoform','videotitle','Please don\'t use words like ');
	}

	if (!f_validate_form('videoformerror')) {
		// fix single quotes in title
		singlequote = /'/g;
		fieldtext = this.document.videoform.videotitle.value.replace(singlequote,"\\'");
		this.document.addstoryform.storyvideotitle.value = fieldtext;
		// remove double quotes in embed tag
		doublequote = /"/g;
		fieldtext = this.document.videoform.videoembed.value.replace(doublequote,"");
		// store only (first) URL
		fieldtext = fieldtext.substring(fieldtext.indexOf('http'),fieldtext.length);	// grab first URL
		if (fieldtext.indexOf('>') != -1) {												// check if inside of embed tag
			fieldtext = fieldtext.substring(0,fieldtext.indexOf('>'));					// remove embed tag after URL
		}
		if (fieldtext.indexOf('watch') != -1) {											// check if YouTube addressbar URL was entered
			browserurl = /watch\?v=/;
			fieldtext = fieldtext.replace(browserurl,"v/");;								// change to embed URL
		}
		
		
		this.document.addstoryform.storyvideoembed.value = fieldtext;
	
	
		close_videopanel();
		
		// show youtube icon (TODO: preview?)
		content = '<table border="0" cellpadding="0" cellspacing="0"><tr>';
		content = content + '<td align="center"><a href="javascript:play_new_video();"><img src="http://cdn.mapskip.com/images/global/icon_videoplayer.gif" width="105" height="48" alt="" title="" border="0" class="addedpicpreview" /></a><br><a href="javascript:delete_video()" class="picpreviewlink">delete</a></td>';
		content = content + '</tr></table>';
		d_write_layer('addvideo',content);
		$('addvideobutton').setStyle('display', 'none');
	}
}

function delete_video() {
	$('addvideo').setStyle('display', 'none');
	$('addvideobutton').setStyle('display', 'block');
}

function play_new_video() {
	play_video(this.document.addstoryform.storyvideoembed.value,this.document.addstoryform.storyvideotitle.value);	// function in siteglobal.js
}







// group assignment

function open_grouppanel() {
	// add new layer
	var div = new Element('div');
	div.setProperty('id', 'grouppanel');
	div.injectInside('pagebody');
	$('grouppanel').addClass('photouploadbox');

	// position layer near mouse
	$('grouppanel').setStyle('top', (mouse_y-300)+'px');
	$('grouppanel').setStyle('left', (mouse_x+50)+'px');

	gpanel = '<div style="padding: 10px 10px 10px 10px;	text-align: left;"><form name="groupform" id="groupform" action="" method="POST">';
	gpanel = gpanel + '<div style="float: right;"><a href="javascript:close_grouppanel();" class="buttondone">Done</a></div>';
	gpanel = gpanel + '<div class="formheader" style="padding-top: 10px;">Add Your Story to a Group</div>';
	gpanel = gpanel + '<div class="formlegend">You can either add your story to an existing group or create a new group first. A story can be part of multiple groups.<br>&nbsp;</div>';
	gpanel = gpanel + '<div id="groupformerror" class="errormessage"></div>';
	gpanel = gpanel + '<div id="groupformbody" style="padding-top: 5px;"><div style="width:280px;text-align:center;"><img src="http://cdn.mapskip.com/images/global/ajax_loader_small.gif" width="32" height="32" border="0" alt=""></div></div>';
	gpanel = gpanel + '</form></div>';
	$('grouppanel').setHTML(gpanel);

	//request current groups
	var xhrFunc = new function(){
		new XHR({
			method: 'post',
			onSuccess: function(req){
				dropdowns = req.split('@@@');
				if (dropdowns[0] == '') {
					persongroups = '<div>You have not yet created any groups</div>'
				} else {
					persongroups = '<div><div class="formlegend">Choose one of your own groups:</div><select name="persongroups">' + dropdowns[0] + '</select></div>';
				}
				if (dropdowns[1] == '') {
					publicgroups = '<div>There are no public groups yet</div>'
				} else {
					publicgroups = '<div><div class="formlegend">Choose a public group:</div><select name="persongroups">' + dropdowns[1] + '</select></div>';
				}
				restofform = persongroups + publicgroups;
				restofform = restofform + '<div style="padding-top: 8px;"><a href="javascript:submit_group();" class="buttonupload">Add to Group</a></div>';
				$('groupformbody').setHTML(restofform);
			}
		}).send('/ajax/retrieve_groups.php','nothing=null');
	};

}









// called from group panel
function close_grouppanel() {
	pb = document.getElementById('pagebody');
	olddiv = document.getElementById('grouppanel');
	pb.removeChild(olddiv);
}