// ####### top navigation functions 

navnumber = new Array();
navnumber[1] = 1;	// places
navnumber[2] = 2;	// stories
navnumber[3] = 3;	// photos
navnumber[4] = 5;	// people
navnumber[5] = 7;	// blog
navnumber[6] = 4;	// sounds
navnumber[7] = 6;	// passport

function topnav_init() {
	if (sitesection != -1) {
		topnav_rollon(navnumber[sitesection],true);
	}
}

function topnav_rollon(n,onlaunch) {
	if (navnumber[sitesection] != n  ||  onlaunch == true) {
		$('topnav'+n+'on').setStyle('visibility', 'visible');
		$('topnav'+n+'off').setStyle('visibility', 'hidden');
	}
}

function topnav_rolloff(n) {
	if (navnumber[sitesection] != n) {
		$('topnav'+n+'off').setStyle('visibility', 'visible');
		$('topnav'+n+'on').setStyle('visibility', 'hidden');
	}
}




// ####### header geosearch functions

function geosearch_clear() {
	if (this.document.geosearchform.geodata.value == 'Search for places on the map') {
		this.document.geosearchform.geodata.value = '';
	}
}

function geosearch() {
	enteredgeodata = this.document.geosearchform.geodata.value;
	if (sitesection == 1) {														// make sure we are on map page
		if (catch_biginfoopen) {
			close_bigpanel();
		}
		mapShowAddress(enteredgeodata);
		return false;
	}
	return true;																// if we are not on map, submit search form to index page via form action
}





// ####### user logout from link in top right corner, delete the session and reload homepage
function userlogout() {
	DeleteCookie('mapskipuser');
	DeleteCookie('mapskipname');
	this.location = 'http://www.mapskip.com';
}





// ###### ratings functions
function save_rating(rating_category,ritemid,rating,ruserid,divid) {
	d_write_layer('ratinglegend'+divid,'<img src="/images/global/icon_favorite_on.gif" width="63" height="22" border="0" alt="Favorite!">');

	// store rating data
	new Ajax('/ajax/store_rating.php', {
		method: 'post',
		postBody: 'rating_category='+rating_category+'&ritemid='+ritemid+'&rating='+rating
	}).request();
}







// ####### lighttable functions

function show_full_photo(photoid,destination) {
	// set up the lighttable
	var div = new Element('div');
	div.setProperty('id', 'ltableback');
	div.injectInside('pagebody');

	var div = new Element('div');
	div.setProperty('id', 'ltablecontainer');
	div.injectInside('ltableback');

	var div = new Element('div');
	div.setProperty('id', 'ltabletextbox');
	div.injectInside('ltablecontainer');

	if (destination == 'photopage') {		// check if photo will be displayed as part of a story or out of context
		context = 'photo';
	} else {
		context = 'story';	
	}

	// request story info for this photo
	new Ajax('/ajax/retrieve_lighttable.php', {
		postBody: Object.toQueryString({photoid: photoid, context: context}),
		update: 'ltabletextbox',
		evalScripts: false,
		onComplete: function(){ 
			winheight = window.getScrollHeight();					// fix style sheet not catching 100% height
			$('ltableback').setStyle('height', winheight+'px');
		}
	}).request();

}

function ltable_close() {
	pb = document.getElementById('pagebody');
	olddiv = document.getElementById('ltableback');
	pb.removeChild(olddiv);
}

function ltable_show_photo(photoid) {
	// request story info for this photo
	new Ajax('/ajax/retrieve_lighttable.php', {
		postBody: Object.toQueryString({photoid: photoid}),
		update: 'ltabletextbox',
		evalScripts: false,
		onComplete: function(){ nothing='examplecode'; }	// todo: do we need a function call on AJAX success?
	}).request();

}

function ltable_markbad(photoid) {
	var div = new Element('div');
	div.setProperty('id', 'ltableapprodia');
	div.injectInside('ltabletext');
	$('ltableapprodia').addClass('ltabledialogue');

	dialogue = '<br clear="all"><div class="infohdr" style="padding-top: 15px;">Please Confirm</div>';
	dialogue = dialogue + '<div class="infodesc">Do you feel that this image is inappropriate for MapSkip.com or is copyrighted?</div>';
	dialogue = dialogue + '<div style="width:400px;"><div class="infotools" style="float:right;"><a href="javascript:ltable_store_markbad('+photoid+')">Yes, remove this image</a></div>';
	dialogue = dialogue + '<div class="infotools" style="padding-right:20px;"><a href="javascript:ltable_close_dialogue()">Oops - no, the photo is OK</a></div></div>';

	d_write_layer('ltableapprodia',dialogue);
}

function ltable_close_dialogue() {
	pb = document.getElementById('ltabletext');
	olddiv = document.getElementById('ltableapprodia');
	pb.removeChild(olddiv);
}

function ltable_store_markbad(photoid) {					// called from confirmation dialogue
	// store new photo status
	new Ajax('/ajax/store_photostatus.php', {
		method: 'post',
		postBody: 'photoid='+photoid+'&status=2'
	}).request();
	
	ltable_close();											// close all panels to force reload on open by user...
	fullstory_back();
	close_bigpanel();
}







// video player functions

function play_video(embedcodeurl,title) {
	// due to Firefox object leakage, tags are encoded
	embedcode = '@object width=425 height=355#@param name=movie value='+embedcodeurl+'&rel=0&color1=0x5d1719&color2=0xcd311b&border=0#@/param#@param name=wmode value=transparent#@/param#@embed src='+embedcodeurl+'&rel=0&color1=0x5d1719&color2=0xcd311b&border=0 type=application/x-shockwave-flash wmode=transparent width=425 height=355#@/embed#@/object#';
	// second part of firefox/javascript object leakage bug fix
	lessthan = /@/g;
	embedcode = embedcode.replace(lessthan,"<");
	greaterthan = /#/g;
	embedcode = embedcode.replace(greaterthan,">");

	// set up the lighttable
	var div = new Element('div');
	div.setProperty('id', 'ltableback');
	div.injectInside('pagebody');

	var div = new Element('div');
	div.setProperty('id', 'videocontainer');
	div.injectInside('ltableback');

	var div = new Element('div');
	div.setProperty('id', 'videoplayerbox');
	div.injectInside('videocontainer');

	winheight = window.getScrollHeight();					// fix style sheet not catching 100% height
	$('ltableback').setStyle('height', winheight+'px');

	content = '<div id="bigcloser" style="margin: 5px 0 0 0; padding-bottom: 10px;">';
	content = content + '<a href="javascript:ltable_close();" class="buttonclose">Close</a>';
	content = content + '</div><br clear="all" />';
	
	content = content + '<div style="padding: 0 0 10px 0;"><span class="storyheader">' + title + '</span></div>';
	
	content = content + '<div>' + embedcode + '</div>';

	$('videoplayerbox').setHTML(content);

}

function videoplayer_close() {
	pb = document.getElementById('pagebody');
	olddiv = document.getElementById('ltableback');
	pb.removeChild(olddiv);
}





// story commenting system (works same both for homepage and story page)
// comment form name: addcommentform, comment text area: commentbody, hidden comment author name: commentownername
// needs the following layer ids to exist: commentformerror, commentslist
// also: commentformsubmitbutton is the submit button div to be rewritten with a loading animation

var comment = '';
var commentwithquotes = '';
var commentownername = '';

function submit_comment() {
	errornumber = 0;
	errortext = 'Please correct the following problems:<br>';
	f_check_text('addcommentform','commentbody','Your comment seems to be a little short<br>');
	if (errornumber == 0) {
		f_check_badwords('addcommentform','commentbody','Please don\'t use words like ');
	}
	if (!f_validate_form('commentformerror')) {
		d_write_layer('commentformsubmitbutton','<img src="http://cdn.mapskip.com/images/global/ajax_loader_small_light.gif" width="32" height="32" border="0" alt="">');
		commentwithquotes = this.document.addcommentform.commentbody.value;
		// deal with single quotes
		singlequote = /'/g;
		comment = this.document.addcommentform.commentbody.value.replace(singlequote,"\\'");
		this.document.addcommentform.commentbody.value = comment;
	
		commentownername = this.document.addcommentform.commentownername.value;
		
		// submit new story and on success reload main panel
		$('addcommentform').send({onComplete: display_new_comment});
	}
}

// called from AJAX return event after saving new content
function display_new_comment() {
	newcomment = '<div class="commentsheader">' + commentownername + ' just said</div>';
	newcomment = newcomment + commentwithquotes.replace(/\n/g,'<br />');

	var div = new Element('div');
	div.setProperty('id', 'singlecomment');
	div.innerHTML = newcomment;
	div.injectInside('commentslist');
	div.addClass('singlecommentlayout');

	$('addcommentform').commentbody.value = '';
	
	d_write_layer('commentformsubmitbutton','<a href="javascript:submit_comment();" class="buttonsave">Save Comment</a>');
}




// ####### send to a friend

var sendfriendboxopen = false;
var sendfriendboxlocation = '';

function send_to_a_friend(sid,stype) {
	if (!sendfriendboxopen) {

		storyform = '';

		if (stype == 0) {				// sharing a story
			// set up the big edit/view panel
			var div = new Element('div');
			div.setProperty('id', 'sendfriendbox');
			div.injectInside('bigstory');
			sendfriendboxlocation = 'bigstory';
			storyform = storyform + '<form name="sendfriendform" id="sendfriendform" action="/ajax/send_friend.php" method="POST" onSubmit="return submit_sendfriend(\'returnsubmit\');">';
			storyform = storyform + '<div class="formheader">Send This Story to a Friend</div>';
			storyform = storyform + '<div class="formlegend" style="padding:4px 0 10px 0;">We will identify you by your first name and email address to your friend.<br><br>Please enter only one email address at a time.</div>';
			storyform = storyform + '<div id="formerror" class="errormessage"></div>';
			storyform = storyform + '<div><span class="formlegend">Your Friend\'s Email Address: </span><input type="text" name="friendemail" maxlength="50" class="shortfield"></div>';
			storyform = storyform + '<div style="float: right;"><a href="javascript:submit_sendfriend();" class="buttonsave">Send Story</a></div>';
			storyform = storyform + '<input type="hidden" name="storyid" value="'+sid+'">';
			storyform = storyform + '<input type="hidden" name="stype" value="story">';
			storyform = storyform + '</form><br>';
		}

		if (stype == 1) {				// sharing a place
			// set up the big edit/view panel
			var div = new Element('div');
			div.setProperty('id', 'sendfriendbox');
			div.injectInside('bigmainform');
			sendfriendboxlocation = 'bigmainform';
			storyform = storyform + '<form name="sendfriendform" id="sendfriendform" action="/ajax/send_friend.php" method="POST" onSubmit="return submit_sendfriend(\'returnsubmit\');">';
			storyform = storyform + '<div class="formheader">Send a link to this place to a friend</div>';
			storyform = storyform + '<div class="formlegend" style="padding:4px 0 10px 0;">We will identify you by your first name and email address to your friend.<br><br>Please enter only one email address at a time.</div>';
			storyform = storyform + '<div id="formerror" class="errormessage"></div>';
			storyform = storyform + '<div><span class="formlegend">Your Friend\'s Email Address: </span><input type="text" name="friendemail" maxlength="50" class="shortfield"></div>';
			storyform = storyform + '<div style="float: right;"><a href="javascript:submit_sendfriend();" class="buttonsave">Send Place</a></div>';
			storyform = storyform + '<input type="hidden" name="storyid" value="'+sid+'">';
			storyform = storyform + '<input type="hidden" name="stype" value="place">';
			storyform = storyform + '</form><br>';
		}
		
		d_write_layer('sendfriendbox',storyform);
		
		sendfriendboxopen = true;
	}
}


function submit_sendfriend(p) {
	errornumber = 0;
	errortext = 'Please correct the following problems:<br>';
	f_check_email('sendfriendform','friendemail','The email address is not valid<br>');
	if (!f_validate_form('formerror')) {
		// submit new story and on success reload main panel
		$('sendfriendform').send({onComplete: close_sendfriendbox});
	}
	if (p == 'returnsubmit') {
		return false;
	}
}


function close_sendfriendbox() {
	sentto = $("sendfriendform").friendemail.value;
	pb = document.getElementById(sendfriendboxlocation);
	olddiv = document.getElementById('sendfriendbox');
	pb.removeChild(olddiv);
	sendfriendboxopen = false;
	// set up send confirmation panel
	var div = new Element('div');
	div.setProperty('id', 'sendfrienddone');
	div.injectInside(sendfriendboxlocation);
	storyform = '<div class="formlegend">MapSkip has sent an email to: ' + sentto + '</div>';
	d_write_layer('sendfrienddone',storyform);
}




// ######### translation code

var translateboxopen = false;
var translatecounter = 0;

function translate_story(sid) {
	if (!translateboxopen) {

		// set up the translation tool panel
		var div = new Element('div');
		div.setProperty('id', 'translatebox');
		div.injectInside('bigstory');
	
		storyform = '';
		
		storyform = storyform + '<form name="translateform" id="translateform">';
		storyform = storyform + '<div class="formheader">Translate This Story</div>';
		storyform = storyform + '<div class="formlegend" style="padding:4px 0 10px 0;">Translation services courtesy of Google Inc.</div>';
		storyform = storyform + '<div><span class="formlegend">Your Requested Language: </span>';
		storyform = storyform + '<select name="targetlanguage" onChange="submit_translate('+sid+')">';
		storyform = storyform + '<option value="-1" selected>Target Language<\/option>';
		storyform = storyform + '<option value="ar">Arabic<\/option>';
		storyform = storyform + '<option value="zh-TW">Chinese (Traditional)<\/option>';
		storyform = storyform + '<option value="zh-CN">Chinese (Simplified)<\/option>';
		storyform = storyform + '<option value="nl">Dutch<\/option>';
		storyform = storyform + '<option value="en">English<\/option>';
		storyform = storyform + '<option value="fr">French<\/option>';
		storyform = storyform + '<option value="de">German<\/option>';
		storyform = storyform + '<option value="it">Italian<\/option>';
		storyform = storyform + '<option value="ja">Japanese<\/option>';
		storyform = storyform + '<option value="ko">Korean<\/option>';
		storyform = storyform + '<option value="pt-PT">Portuguese<\/option>';
		storyform = storyform + '<option value="ru">Russian<\/option>';
		storyform = storyform + '<option value="es">Spanish<\/option>';
		storyform = storyform + '<\/select></div></form><br>';
	
		d_write_layer('translatebox',storyform);
		
		translateboxopen = true;
	}


}


function submit_translate(sid) {
	targetlanguage = $('translateform').targetlanguage.value;
	close_translatebox();
	original_story_header = $('storyheaderbody').innerHTML;
	htmlbreak = /<br><br>/g;
	original_story = $('mainstorybody').innerHTML.replace(htmlbreak,'<br>');
	htmlbreak = /<br>/g;
	original_story = original_story_header + '|' + original_story.replace(htmlbreak,'|');
	
	// set up the translation result box
	var div = new Element('div');
	translatecounter++;
	div.setProperty('id', 'translationresult'+translatecounter);
	div.setProperty('class', 'translationresult');
	div.injectInside('bigstory');
	d_write_layer('translationresult'+translatecounter,'<center><img src="http://cdn.mapskip.com/images/global/ajax_loader_small_medium.gif" width="32" height="32" border="0"></center>');

	// initiate translation tasks (one per paragraph - there seems to be a 1400 character limitation in the Google API)
	storyparagraphs = original_story.split('|');
	splen = storyparagraphs.length;
	transresult = '';
	for (sp=0;sp<storyparagraphs.length;sp++) {
		google.language.translate(storyparagraphs[sp], '', targetlanguage, function(result) {
			transresult = transresult + result.translation + '<br><br>'
			splen--;
			if (splen == 0) {						// only when the last task comes back do we write the results
				write_translation(transresult);
			}
		});
	}
}

function write_translation(tr) {
	tr = '<i>Translation courtesy of Google Inc.</i><br><br>' + tr;
	d_write_layer('translationresult'+translatecounter,tr);

}


function close_translatebox() {
	pb = document.getElementById('bigstory');
	olddiv = document.getElementById('translatebox');
	pb.removeChild(olddiv);
	translateboxopen = false;
}






// ######### tracking code


function track_comments(sid) {
	new Ajax('/ajax/store_trackstory.php', {
		postBody: Object.toQueryString({storyid: sid}),
		evalScripts: false,
		onComplete: report_storytrack
	}).request();
}

function track_author(aid) {
	new Ajax('/ajax/store_trackauthor.php', {
		postBody: Object.toQueryString({authorid: aid}),
		evalScripts: false,
		onComplete: report_authortrack
	}).request();
}

function report_storytrack() {
	// set up send confirmation panel
	var div = new Element('div');
	div.setProperty('id', 'sendfrienddone');
	div.injectInside('toolnotifications');
	storyform = '<div class="formlegend">This story has been added to your tracking list. You will be notified via email if this story is changed or when comments are added.<br><br>To stop these emails, go to <a href="/sitetools/mypassport.php">your passport<\/a>.<\/div>';
	d_write_layer('sendfrienddone',storyform);
}

function report_authortrack() {
	// set up send confirmation panel
	var div = new Element('div');
	div.setProperty('id', 'sendfrienddone');
	div.injectInside('toolnotifications');
	storyform = '<div class="formlegend">This author has been added to your tracking list. You will be notified via email when this author writes new stories.<br><br>To stop these emails, go to <a href="/sitetools/mypassport.php">your passport<\/a>.<\/div>';
	d_write_layer('sendfrienddone',storyform);
}

// Cancel Tracking - for story display tool box only
var canceltempstoryid = -1;
var canceltempbutton = -1;
function cancel_tracking_global(buttonid,sid,tid) {
	canceltempbutton = buttonid;
	canceltempstoryid = sid;
	canceltempid = tid;
	new Ajax('/ajax/store_trackcancel.php', {
		postBody: Object.toQueryString({trackid: tid}),
		evalScripts: false,
		onComplete: reset_trackbutton
	}).request();
}

function reset_trackbutton() {
	if (canceltempbutton == 1) {
		canceltempbutton = 'tracklinkleft';
		newbutton = '<a href="javascript:track_comments(' + canceltempstoryid + ');" class="buttonbullet">Track Comments for this Story</a>';
	} else {
		canceltempbutton = 'tracklinkright';
		newbutton = '<a href="javascript:track_author(' + canceltempstoryid + ');" class="buttonbullet">Track Author</a>';
	}
	$(canceltempbutton).setHTML(newbutton);
}



// ########## class list handlers for story display

function classlist_open() {
	$('classstorylistbutton').setStyle('display','none');
	$('classstorylist').setStyle('display','block');
}

function classlist_close() {
	$('classstorylist').setStyle('display','none');
	$('classstorylistbutton').setStyle('display','block');
}