function load() {
	if ($('whatsthis')) {
		var a = $('whatsthis').getElementsByTagName('p');
		for (var i=0; i<a.length;i++) {
			a[i].style.display = 'none';
		}
		$('toggle').style.display = 'block';
		$('toggle').onclick = function () {
			var a = $('whatsthis').getElementsByTagName('p');
			for (var i=0; i<a.length;i++) {
				a[i].style.display = 'block';
			}
			$('toggle').style.display = 'none';
		}
	}
	
	if (typeof(jsfgid) != 'undefined') {
		flashProxy = new FlashProxy(jsfgid, 'jsfg.swf');
	}
	
	if ($('editpano')) {	
		$('editpano').onclick = editPano;
	}
	
	if ($('fullscreen')) {		
		$('fullscreen').onclick = fullWin;
	}
	
	if ($('yahoosignin')) {
		$('yahoosignin').setStyle({display: 'block'});
		$('yahoosignin').hide();
	}
	editing=false;
	if ($('addtogroup')) {		
		$('addtogroup').onclick = groupBox;
	}
	if ($('editgrouporder')) {
		$('editgrouporder').onclick = editGroup;
	}
	
	if ($('sitechooserbox')) {
		$('sitechooserbox').hide();
	}
	if ($('panolist') && typeof panoid != 'undefined') {
		markPanoBox(panoid);
	}
	
	if ($('comments')) {
		handleComments();
	}
	
	if ($('deletegroup')) {
		Event.observe($('deletegroup'), 'click', deleteGroup);
	}
	
	if ($('taglist') && mine) {
		manageTags();
	}
	
	if (typeof tt_Init != 'undefined') {
		tt_Init();
	}
	
	var pag = $$('.paginate');
	pag.each(function(n) {
		paginate(n, 6);
	});
	
	
	var sitebox = $$('#sitemanagelist > li');
	if (typeof window.console != 'undefined') {
		window.console.log('sitebox: ' + sitebox.length);
		window.console.log(Element.prototype.select);
	}
	for (var i=0; i < sitebox.length; i++) {
		Event.observe(sitebox[i], 'click', toggleSiteBox);	
		Droppables.add(Element.extend(sitebox[i]).select('.sitebox')[0], {
			accept: ['panodrag', 'panoalldrag'],
			hoverclass: 'hoverbox',
			onDrop: handlePanoDrop
		}
		);
	}
	
	var panodrags = $$('.panoalldrag');
	panodrags.each(function (o) {
		o.draggable = new Draggable(o, {
			revert: true,
			ghosting: true,
			reverteffect: function(element, toff, loff) {
			  new Effect.Move(element, {x: -loff, y: -toff, duration: 0.0});
			}
		}
		);
		
	});
	
	var panodrags = $$('.panodrag');
	panodrags.each(function (o) {
		new Draggable(o, {
			revert: true
		});		
		
	});
	
	var help = $$('.helpbutton');
	for (var i=0;i<help.length;i++) {
		help[i].onmouseover = function (e) {
			Tip($('text_' + this.id).innerHTML, DELAY, 10, SHADOW, true, 
			FOLLOWMOUSE, false, OFFSETY, -20, WIDTH, 200, BGCOLOR, '#FFb', SHADOWWIDTH, 2);
		}
	}	
	
	if ($('permstable')) {
		var perms = $$('.permissionselect');
		perms.each(function(o) {
			Event.observe(o, 'change', changePermission);
		});
		
		var permsrevoke = $$('.permissionrevoke');
		permsrevoke.each (function(o) {
			Event.observe(o, 'click', revokePermission);
		});
		$('newpermissionblock').hide();
/*		new Effect.SlideUp($('newpermissionblock'), {duration: 0});*/
		Event.observe($('grantpermission'), 'click', function (e) {
			new Effect.BlindUp(e.element(), {duration: 0.1});
			$('newpermissionblock').style.display='block';
			new Effect.SlideDown($('newpermissionblock'), {queue: 'end', duration: 0.2, afterFinish: function() {
				$('newpermissionblock').style.display='block';
				$('useremail').focus();
			}});
		});
		bindEnter('useremail', 'searchforuser');
		Event.observe('searchforuser', 'click', searchForUserForPerms);
		
	}
	
	var	isSafari = (navigator.userAgent.indexOf("Safari") > 0);
	if (isSafari) { 
		var	elements = document.getElementsByClassName('search', null, 'input');
		for (var i = 0; i < elements.length; i++) {
			elements[i].type = 'search';
			elements[i].setAttribute('placeholder', 'Search');
			elements[i].setAttribute('autosave', 'clevr.com');
			elements[i].setAttribute('results', '5');
		}

	}
	
	var errs = $$('.error');
	for (var i =0; i < errs.length; i++) {
		new Effect.Highlight(errs[i], {duration: 1, startcolor: '#ff9999', endcolor: '#ffff99', restorecolor: '#ffff99'});
	}
	
	var emb = $$('.embedfield');
	for (var i=0; i < emb.length; i++) {
		Event.observe(emb[i], 'click', function(e) {
			copy(e.element());
		});
	}
	
	if ($('paymentform')) {
		var issueli;
		var startli;
		var stateli;
		
		$$('#paymentform li').each(function (o) {
			if (o.down('#issue')) {
				issueli = o;
			} else if (o.down('#startdate')) {
				startli = o;
			} else if (o.down('#state')) {
				stateli = o;
			}
		});
		var ct = $F('cardtype');
		var cn = $F('country');
		if (ct != 'solo' && ct != 'maestro') {
			issueli.hide();
			startli.hide();			
		}
		 if (cn != 'US') {
			stateli.hide();
		}
		
		Event.observe($('cardtype'), 'change', function (e) {
			var ct = $F('cardtype');
			if (ct == 'solo' || ct == 'maestro') {
				issueli.show();
				startli.show();
			} else {
				issueli.hide();
				startli.hide();
			}
		});
		
		Event.observe($('country'), 'change', function (e) {
			var cn = $F('country');
			if (cn == 'US') {
				stateli.show();
			} else {
				stateli.hide();
			}
		});
	}
	
	
}

function openIDChange(event) {
	var images = {
		aim: 'aim.png',
		openid: 'openid.gif',
		livejournal: 'livejournal.png',
		typepad: 'typepad.png',
		wordpress: 'wordpress.png',
		blogger: 'blogger.gif'
	};
	var messages = {
		aim: 'Please enter your AIM or AOL username',
		openid: 'Please enter your OpenID identity',
		livejournal: 'Please enter your LiveJournal username',
		typepad: 'Please enter your TypePad username',
		wordpress: 'Please enter your WordPress.com username',
		blogger: 'Please enter your full Blogger/Blogspot address. Your account must be OpenID enabled.',
		yahoo: ''
	};
	var type = $('openidtype').value;
	if (type == 'yahoo') {
		$('openid').hide();
		$('openidsignin').hide();
		$('yahoosignin').show();
	} else {
		$('openid').show();
		$('openidsignin').show();
		$('yahoosignin').hide();
		
		$('openid').setStyle({
			backgroundImage: 'url(images/icons/' + images[type] + ')'
		});	
	}
	$('openidinfo').innerHTML = messages[type];
	
}

function bindEnter(input, button) {
	Event.observe(input, 'keypress', function(e) {
		if (e.keyCode == 13 || e.keyCode == 3) {
			$(button).click();
		}
	});
}

function searchForUserForPerms(e) {
	var email = $('useremail');
	var regex = /^((\"[^\"\f\n\r\t\v\b]+\")|([\w\!\#\$\%\&'\*\+\-\~\/\^\`\|\{\}]+(\.[\w\!\#\$\%\&'\*\+\-\~\/\^\`\|\{\}]+)*))@((\[(((25[0-5])|(2[0-4][0-9])|([0-1]?[0-9]?[0-9]))\.((25[0-5])|(2[0-4][0-9])|([0-1]?[0-9]?[0-9]))\.((25[0-5])|(2[0-4][0-9])|([0-1]?[0-9]?[0-9]))\.((25[0-5])|(2[0-4][0-9])|([0-1]?[0-9]?[0-9])))\])|(((25[0-5])|(2[0-4][0-9])|([0-1]?[0-9]?[0-9]))\.((25[0-5])|(2[0-4][0-9])|([0-1]?[0-9]?[0-9]))\.((25[0-5])|(2[0-4][0-9])|([0-1]?[0-9]?[0-9]))\.((25[0-5])|(2[0-4][0-9])|([0-1]?[0-9]?[0-9])))|((([A-Za-z0-9\-])+\.)+[A-Za-z\-]+))$/;
	if (email.value =='' || !regex.test(email.value)) {
		email.className = 'error';
		var oldvalue = email.value;
		email.value = 'Enter a valid email';
		email.blur();
		var clear = function (ev) {
			var o = ev.element(); 
			o.className = '';
			o.value = oldvalue;
			Event.stopObserving(email, 'focus', clear);
		};
		Event.observe(email, 'focus', clear);
		return;
	}
	$('searchforuser').disabled = true;
	$('searchforuser').value = 'Searching...';
	email.className = 'searching';
	var o = {
		token: sessionid,
		email: email.value,
		permission: 'Read-only',
		site: siteid
		
	};
	
	new XMLRPC(rpcserver, 'clevr.finduserandgrant', o, findUserCallback, null);
}

function findUserCallback(o) {
	$('useremail').className = '';
	$('searchforuser').disabled = false;
	$('searchforuser').value = 'Search for user';
	if (o == false) {
		$('useremail').className = 'error';
		if (confirm('No user with that email address was found. Would you like to create an account for them?')) {
			document.location.href='newuser?email=' + $('useremail').value;
		}
	} else {
		var id = o[0].id;
		if ($('permrow_' + id)) {
			new Effect.Highlight($('permrow_' + id));
			return;
		}
		
		new Effect.SlideUp('newpermissionblock', {duration: 0.1});
		new Effect.BlindDown('grantpermission', {duration: 0.1});
		$('nopermission').hide();
		
		var tr = Builder.node('tr', {id: 'permrow_' + o[0].id});
		var h = '<td title="' + o[0].email;
		h += '"><img src="images/icons/user.png" width="16" height="16" alt="User"> ' + o[0].name;
		h += '</td><td><select id="perm_';
		h += id + '" class="permissionselect"><option selected="selected">Read-only</option>';
		h += '<option>Editor</option></select></td><td><img src="images/icons/delete.png" id="permrevoke_';
		h += id + '" width="16" height="16" alt="revoke" title="Revoke this permission" class="permissionrevoke"></td>';
		tr.innerHTML = h;
		$('permstable').getElementsByTagName('tbody')[0].appendChild(tr);
		Event.observe($('perm_' + id), 'change', changePermission);
		Event.observe($('permrevoke_' + id), 'click', revokePermission);
	}
}

function changePermission (e) {
	var el = e.element();
	var id = el.id.substr(5);
	new Effect.Highlight('permrow_' + id);
	var idx = el.selectedIndex;
	var o = {
		token: sessionid,
		id: id,
		permission: $F('perm_' + id)
	}
	new XMLRPC(rpcserver, 'clevr.changepermission', o, nullMethod, null);
	
}

function revokePermission (e) {
	if (!confirm("Revoke this permission?")) {
		return;
	}
	var el = e.element();
	var id = el.id.substr(11);
	var row = $('permrow_' + id);
	new Effect.DropOut(row);
	var o = {
		token: sessionid,
		id: id
	};
	new XMLRPC(rpcserver, 'clevr.revokepermission', o, nullMethod, null);
}


function collectSitePanos() {
	var sites = {};
	var panos = $$('.panodrag');
	panos.each(function(o) {
		if (o.parentNode.id == 'allpanosol') {
			return;
		}
		var site = o.parentNode.id.substr(6);
		if (typeof sites[site] == 'undefined') {
			sites[site] = [];
		}
		sites[site].push(o.id.substr(4));
	});
	return sites;
}

function updateSitePanos() {
	
	var o = {
		token: sessionid,
		sites: collectSitePanos()
	};
	new XMLRPC(rpcserver, 'clevr.updatesitepanos', o, nullMethod, null);
	
}

function handlePanoDrop(drag, drop, event) {
	new Effect.Highlight(drop, {duration: 0.5, startcolor: '#ffff33'});
	if (drag.parentNode.id == 'allpanosol') {
		drag.draggable.options.reverteffect = function(element, toff, loff) {
		  new Effect.Move(element, {x: -loff, y: -toff, duration: 0.0, afterFinishInternal: function(effect) {
				var id = 'pan_' + effect.element.id.substr(4);
				var el = effect.element.cloneNode(true);
				el.className = 'panodrag';
				var panoitems = $$(".panodrag");
				panoitems.each(function(o) {
					if (o.id == id) {
						o.parentNode.removeChild(o);
					}
				});
				
				el.setStyle({opacity: 1});
				new Draggable(el, {revert: true});
				$(drop.parentNode).select('.sitepanolist')[0].appendChild(el);	
				el.setAttribute('id', id);
				updateSitePanos();
			}			
			});
		
		
		}
		return;
		
	}
	drag.parentNode.removeChild(drag);		
	$(drop.parentNode).select('.sitepanolist')[0].appendChild(drag);
	updateSitePanos();		
}

function toggleSiteBox(e) {
	var box = Event.findElement(e, 'DIV');
	if (box.className != 'sitebox') {
		return;
	}
	var boxes = $$('.sitebox');
	boxes.each(function(o) {
		o.className = 'sitebox';
	});
	
	box.className = 'sitebox selectedbox';
	
	var el = Event.findElement(e, 'LI');
	var cont = $$('.sitepanolistcontainer');
	cont.each(function(o) {
		o.setStyle({display: "none"});
	});
	el.select('.sitepanolistcontainer')[0].setStyle({display: 'block'});
}

function deleteGroup(e) {
	if (confirm("Delete this group?")) {
		$('deletegroupform').submit();
	}
}

function handleComments() {
	var c = $$('#comments li.editable');
	for (var i=0; i < c.length; i++) {
		if (c[i].className == 'hidden') {
			continue;
		}
		var cid = c[i].id.substr(8);
      	Element.extend(c[i]);

		var b = c[i].select('.commentbuttons')[0];
		b.innerHTML = 'Delete';
		b.cid = cid;
		Event.observe(b, 'click', deleteComment);
	}
	if ($('newcommentbutton')) {
		Event.observe($('newcommentbutton'), 'click', addComment);
	}
}

function manageTags() {
	var tags = $('taglist').getElementsByTagName('li');
	for (var i=0;i<tags.length;i++) {
		var a = tags[i].getElementsByTagName('span');
		if (a.length > 0) {
			a[0].remove();
		}
		var del = Builder.node('span', {className: 'tagdelete', title: 'Delete tag'}, ['x']);
		del.tag = tags[i].firstChild.innerHTML;
		del.li = tags[i];
		Event.observe(del, 'click', deleteTag);
		tags[i].insertBefore(del, tags[i].firstChild);
	}
	var addbutton = Builder.node('button', {type: 'button', className: 'utilbutton'}, [
	Builder.node('img', {src: 'images/icons/tag_blue_add.png'}),
	"Add tags"
	]);
	var add = Builder.node('div', {id: 'newtagform'}, [ Builder.node('div', [
		"Add new tags, separated by spaces",
		Builder.node('input', {id: 'newtags', type: 'text'}),
		Builder.node('input', {id: 'newtagbutton', type: 'button', value: 'Add'})
	])]);
	Element.hide(add);
	
	addbutton.elem = add;

	Event.observe(addbutton, 'click', function(e) {
		var el = Event.element(e);
		Effect.SlideDown(el.elem, {duration: 0.2 });		
		el.remove();
		
		Event.observe('newtagbutton', 'click', addTags);
	});
	
	$('taglist').parentNode.appendChild(addbutton);
	$('taglist').parentNode.appendChild(add);
}

function addTags(e) {
	$('newtags').value = $('newtags').value.toLowerCase();
	var reg = new RegExp("[!@#%^Y&*()_;':\\|=+`~/?,.<>{}\[\]]", "g");
	$('newtags').value = $F('newtags').replace(reg, '');	
	var tags = $F('newtags').split(" ");
	for (var i=0;i<tags.length;i++) {
		if (tags[i] == '') {
			continue;
		}
		var li = Builder.node('li', [Builder.node('a', {href: "tag/" + tags[i]}, [tags[i]])]);
		$('taglist').appendChild(li);
	}
	$('newtagform').remove();
	var o = {
		tags: tags,
		token: sessionid,
		panorama: panoid
	};
	manageTags();
	new XMLRPC(rpcserver, 'clevr.addtags', o, nullMethod, null);
	
}

function checkDomain (domain, el) {
	new XMLRPC(rpcserver, 'clevr.checkdomain', domain, checkDomainCallback, el);
}

function checkDomainCallback (o,el) {
	var result = o[0];
	el = $(el);
	if (!el) {
		return;
	}
	if (result == 1) {
		el.innerHTML = '<img src="images/icons/accept.png">';
	} else {
		el.innerHTML = '<img src="images/icons/cancel.png"> Domain does not point to <tt>custom.clevr.com</tt>';
	}
}


function nullMethod(o) {
	return;
}

function deleteTag(e) {
	var el = Event.element(e);
	var tag = el.tag;
	new Effect.Fade(el.li, {duration: 0.2});
	var o = {
		token: sessionid,
		tag: tag,
		panorama: panoid
	};
	
	new XMLRPC(rpcserver, 'clevr.deletetag', o, nullMethod, null);
	
}

function deleteComment(e) {
	var c = Event.element(e);
	Effect.BlindUp('comment_' + c.cid, {duration: 0.2});
	var o = {
		id: c.cid,
		token: sessionid
	};
	new XMLRPC(rpcserver, 'clevr.deletecomment', o, function(){}, null);
}

function addComment(e) {
	var b = Event.element(e);
	var o = {
		token: sessionid,
		panorama: panoid,
		text: $F('newcomment')
	};
	Effect.BlindUp('newcommentform', {duration: 0.1});
	new XMLRPC(rpcserver, 'clevr.newcomment', o, newComment, null);
}

function newComment(o, unused) {
	var c = decode_utf8(o[0]);
	var h = c + $('comments').innerHTML;
	$('comments').innerHTML = h;
	handleComments();
}

function markPanoBox(id) {
   if (!$('panolist')) {
      return;
   }
	var li = $('panolist').childNodes;
	for (var i=0; i < li.length; i++) {
		if (li[i].getAttribute('id') == 'panolist_' + id) {
			li[i].firstChild.className = 'panobox panoboxchosen';
			scrollToElement($('panolistcontainer'), li[i]);
		} else {
			li[i].firstChild.className = 'panobox';
		}
	}
}

function decode_utf8( s ){
  return decodeURIComponent( escape( s ) );
}

function loadPano(id) {
	if (editing) {
		return;
	}
	if (typeof(id) == 'object' || typeof(id) == 'undefined' ) {
		id = this.panoid;
	}
	if (!id) {
		return false;
	}
	flashProxy.call('loadPano', id);
	switchToPano(id);
}

function panoBox(o) {
	var li = document.createElement('li');
	li.setAttribute('id', 'panolist_' + o.id);
	var divpb = document.createElement('div');
	li.appendChild(divpb);
	divpb.className = 'panobox';
	divpb.panoid = o.id;
	var a=document.createElement('a');
	a.setAttribute('href', 'pano/' + o.id);
	a.setAttribute('title', o.name);
	
	var img = document.createElement('img');
	img.setAttribute('id', 'panothumb_' + o.id);
	img.setAttribute('src', 'files/' + o.file + '/' + o.user + '-' + o.file + '-t.jpg');
	a.appendChild(img);
	divpb.appendChild(a);

	var a2=document.createElement('a');
	a2.setAttribute('href', 'pano/' + o.id);
	a2.setAttribute('title', o.name);

	var p = document.createElement('p');
	p.innerHTML = o.name;
	a2.appendChild(p);
	divpb.appendChild(a2);
	return li;
}

function groupPanoList(o) {
	var ib = document.createElement('div');
	ib.className = 'infobox';
	var h4 = document.createElement('h4');
	h4.innerHTML = '<img src="images/icons/pictures.png">';
	ib.appendChild(h4);
	var div = document.createElement('div');
	div.setAttribute('id', 'panolistcontainer');
	ib.appendChild(div);
	var a = document.createElement('a');
	a.innerHTML = o.name;
	h4.appendChild(a);
	var ol = document.createElement('ol');
	ol.setAttribute('id','panolist');
	div.appendChild(ol);
	for (var i=0; i<o.panos.length; i++) {
		ol.appendChild(panoBox(o.panos[i]));
	}
	return ib;
}

function fullWin()
{
	var x = document.getElementsByTagName('object')[0];
	var w = self.screen.availWidth;
	var h = self.screen.availHeight;
	var win = window.open('', 'fullwin', 'width=' + w + ',height=' + h+',top=0,left=0,scrollbars=no,location=no,status=no,menubar=no,toolbar=no,directories=no');
	var o = win.document.createElement('object');
	o.setAttribute('type', 'application/x-shockwave-flash');
	o.setAttribute('data', x.getAttribute('data'));
	o.setAttribute('width', w - 20);
	o.setAttribute('height', h - 50);
	o.innerHTML = x.innerHTML;
	win.document.getElementsByTagName('body')[0].appendChild(o);
}

function editPano() {
	var b = $('editpano');
	b.innerHTML = "<img src='images/icons/application_get.png'>Save";
	b.onclick = savePano;
	
	var nf = document.createElement('input');
	nf.type='text';
	nf.setAttribute('id', 'namefield');
	var n = $('panoname');
	nf.value = n.innerHTML;
	n.innerHTML = 'Name: ';
	n.appendChild(nf);
	
	var df = document.createElement('textarea');
	df.setAttribute('id', 'descfield');
	var d = $('panodesc');
	n.style.backgroundColor = '#fbb';
	d.style.backgroundColor = '#fbb';
	
	n.style.padding = '2px';
	d.style.padding = '2px';
	
	
	df.value = d.innerHTML.replace(/\n/g, '').replace(/<br *\/*>/gi,"\n");
	d.innerHTML = '  Description: ';
	d.appendChild(df);
   if ($('sitechooserli')) {	
	$('sitechooserli').style.backgroundColor = '#fbb';
	$('sitechooserbox').show();
	$('sitelink').hide();
   }
	
}

function editGroup() {
	makePanoListSortable();
	var title = Builder.node('input', {type: 'text', id: 'groupnameinput',value: $('groupname').innerHTML});
	$('groupname').innerHTML ='Name: ';
	$('groupname').appendChild(title);
	
	var desc = Builder.node('textarea', {id: 'groupdescinput'});
	desc.innerHTML = $('groupdescription').innerHTML;
	$('groupdescription').innerHTML ='Description:<br>';
	$('groupdescription').appendChild(desc);
	title.focus();
}



function savePano () {
	var o = {
		name: $('namefield').value,
		description: $('descfield').value,
		id: panoid,
		token: sessionid
	};
if ($('sitechooser')) {
o.site = $('sitechooser').value;
}


	new XMLRPC(rpcserver, 'clevr.editpano', o, panoInfoCallback, null);

}

function saveGroup () {
	doneSorting();
	var o = {
		name: $F('groupnameinput'),
		description: $F('groupdescinput'),
		id: groupid,
		token: sessionid
	};
	$('groupname').innerHTML = o.name;
	$('groupdescription').innerHTML = o.description;
	new XMLRPC(rpcserver, 'clevr.editgroup', o, groupInfoCallback, null);

}

function groupInfoCallback (o) {
	return;
}


function loadGroupList (box) {
	var o = {
		token: sessionid
	};
	new XMLRPC(rpcserver, 'clevr.getgroups', o, processLoadGroupsResponse, box);
}

function processLoadGroupsResponse(o, box) {
	box.innerHTML = '';
	var g = o[0];
	if (g.length < 1) {
		var p = document.createElement('p');
		p.innerHTML = 'You have no groups';
		box.appendChild(p);
	} else {
		var ul = document.createElement('ul');
		for (var i=0; i < g.length; i++) {
			var li = document.createElement('li');
			li.gid = g[i].id;
			if (li.gid == groupid) {
				li.className = 'chosengroup';
				var cancel = document.createElement('img');
				cancel.setAttribute('src', 'images/icons/cancel.png');
				cancel.setAttribute('title', 'Remove from group');
				cancel.style.cursor = 'pointer';
				cancel.onclick = function () {
					setGroup(0, panoid);
				};
				li.appendChild(cancel);
				li.appendChild(document.createTextNode(g[i].name));
			
			} else {
				li.innerHTML = g[i].name;
				li.onclick = function () {
					setGroup(this.gid, panoid);
				};
			}
			ul.appendChild(li);
		}
		box.appendChild(ul);
	}
	var label = document.createElement('label');
	label.setAttribute('for', 'newGroup');
	label.innerHTML = 'New group: ';
	box.appendChild(label);
	var newgroup = document.createElement('input');
	newgroup.setAttribute('type', 'text');
	newgroup.setAttribute('id', 'newGroup');
	box.appendChild(newgroup);
	
	var g = document.createElement('input');
	g.setAttribute('type', 'button');
	g.setAttribute('value', 'Create');
	g.setAttribute('id', 'newGroupButton');
	g.onclick = function () {
		var n = $('newGroup').value;
		if (n.length < 1) {
			alert('Please enter a name for the new group');
			$('newgroup').focus();
			return;
		}
		var o = {
			token: sessionid,
			panorama: panoid,
			name: n			
		};
		new XMLRPC(rpcserver, 'clevr.addtonewgroup', o, setGroupCallback, true);
	}
	
	box.appendChild(g);
	
}

function setGroup(g, p) {
	var o = {
		token: sessionid,
		panorama: p,
		group: g
	};
	new XMLRPC(rpcserver, 'clevr.setgroup', o, setGroupCallback, true);
}

function setGroupCallback(o, hidelist) {
	if (o[0]) {
		groupid = o[0].id;
		$('groupinfobox').innerHTML = '';
		var g = groupPanoList(o[0]);
		$('groupinfobox').appendChild(g);
		markPanoBox(panoid);
	} else {
		groupid = 0;
		$('groupinfobox').innerHTML = '';		
	}
	if (hidelist)
		$('addtogroup').onclick();
	
}

function switchToPano(id) {
	new XMLRPC(rpcserver, 'clevr.panoinfo', Number(id), panoInfoCallback, null);
}

function groupBox() {
	var gb = $('groupboxcontainer');
	gb.style.display = 'block';
	gb.innerHTML = '<h4>Choose a group</h4>';
	var b = document.createElement('div');
	b.setAttribute('id', 'groupbox');
	b.innerHTML = 'Loading group list...';
	gb.appendChild(b);
	loadGroupList(b);
	var c = $('addtogroup');
	c.oldhtml = c.innerHTML;
	c.innerHTML = '<img src="images/icons/cancel.png"> Cancel';
	c.box = gb;
	c.onclick = function () {
		this.box.innerHTML = '';
		this.box.style.display='none';
		this.onclick = groupBox;
		this.innerHTML = c.oldhtml;
	};
}

function panoInfoCallback (o, x) {
	var p = o[0];
	$('panodesc').innerHTML = p.description.replace(/\n/g, "<br>");
	$('panoname').innerHTML = p.name;
	$('panodesc').style.background = 'none';
	$('panoname').style.background = 'none';
	$('panodesc').style.padding = '0';
	$('panoname').style.padding = '0';
   if ($('sitelink')) {
	if (p.site) {
		siteid = p.site;
		$('sitelink').innerHTML = '<a href="http://' + p.site.domain + '/pano/' + p.id+ '">' + p.site.name + '</a>';
	} else {
		$('sitelink').innerHTML = 'None';
	}
	$('sitelink').show();
	}
   if ($('sitechooserli')) {
   $('sitechooserli').style.background = 'none';
	
	$('sitechooserbox').hide();
	}
   if($('editpano')) {
		$('editpano').onclick = editPano;
		$('editpano').innerHTML = "<img src='images/icons/application_edit.png'>Edit";
	}
	$('panocreated').innerHTML = p.created;
	var img = p.file + '/' + p.user + '-' + p.file + '-t.jpg';
	var s = $('panothumb_' + panoid).getAttribute('src');
	s =  s.substr(0, s.lastIndexOf('/'));
	s =  s.substr(0, s.lastIndexOf('/') + 1);
	
	$('panothumb_' + panoid).setAttribute('src', s + img);
	if (p.group != groupid) {
		new XMLRPC(rpcserver, 'clevr.getgroup', p.group, setGroupCallback, false);
	} else {
		markPanoBox(p.id);
	}
	panoid = p.id;	
}

function scrollToElement(container, element) {
    var x = element.x ? element.x : element.offsetLeft, y = element.y ? element.y : element.offsetTop;
	new ScrollGradual(container, y-(document.all?0:container.offsetTop));
}

ScrollGradual = function (element, target) {
	var max = element.scrollHeight - element.clientHeight;
	if (target > max) {
		target = max;
	}
	this.doScroll = function () {
		var diff = Math.round(target - element.scrollTop);
		if (Math.abs(diff / 4) < 1) {
			window.clearInterval(intervalId);
			return;
		} else {
			element.scrollTop += Math.round(diff /4 );
		}
	}
	var intervalId = window.setInterval(this.doScroll, 100);
	
}

function doneSorting() {
	$('editgrouporder').innerHTML = "<img src='images/icons/pictures.png'>Edit group</button>";
	$('editgrouporder').onclick = editGroup;
	if (!$('panolist')) {
		return;
	}
	$('panolist').className = '';
	editing=false;
	var li = $('panolist').childNodes;
	for (var i=0; i<li.length; i++) {
		li[i].removeChild(li[i].lastChild);
		li[i].removeChild(li[i].lastChild);
	}
}

function deleteGroupItem () {
	var x = this;
	var finishCallback = function() {
		var ol = x.parentNode.parentNode;
		ol.removeChild(x.parentNode);
		saveListOrder(ol);
	};
	Effect.SwitchOff(this.parentNode.getAttribute('id'), {afterFinish: finishCallback });
}

function saveListOrder(ol) {
	var li = $(ol.childNodes);
	var x = new Array;
	for (var i=0; i<li.length; i++) {
		x[i] = {
			pano: Number(li[i].getAttribute('id').substr(9)),
			order: i
		};
	}
	var o = {
		token: sessionid,
		group: groupid,
		panos: x
	};
	new XMLRPC(rpcserver, 'clevr.setgrouporder', o, listOrderCallBack, null);
}

function listOrderCallBack(o, x) {
	//alert('done');
}

function makePanoListSortable() {
	editing=true;
	$('editgrouporder').innerHTML = "<img src='images/icons/accept.png'>Save</button>";	
	$('editgrouporder').onclick = saveGroup;
	if (!$('panolist')) {
		return;
	}
	$('panolist').className = 'sortinglist';
	var li = $('panolist').childNodes;
	for (var i=0; i < li.length; i++) {
		var screen = document.createElement('div');
		screen.className = 'listscreen';
		screen.setAttribute('title', 'Drag to reorder group');
		li[i].appendChild(screen);
		var x = document.createElement('img');
		x.setAttribute('src', 'images/icons/delete.png');
		x.onclick = deleteGroupItem;
		x.setAttribute('title', 'Remove panorama from group');
		x.className = 'groupitemdelete';
		li[i].appendChild(x);
	}
	
	Sortable.create('panolist', {scroll: 'panolistcontainer', handle: 'listscreen', onUpdate: function (e) {saveListOrder(e);}});
}

function paginate(list, num) {
	var ul = $(list);
	ul.cursor = 0;
	var li = ul.select('li');
	if (li.length == 0) {
		return;
	}
	for (var i = 0; i < li.length; i++) {
		if (i >= num) {
			li[i].hide();
		} else {
			li[i].show();
		}
	}
	ul.setStyle({height: ul.getHeight() + 100 + 'px'})
	ul.status = new Element('p').update("1 to " + (Math.min(li.length, num)) + ' of ' + li.length);
	ul.status.setStyle({marginLeft: '95px', marginBottom: '0', textAlign: 'left'});
	ul.insert({before: ul.status});
	ul.up = new Element('img', {src: 'images/icons/uparrow.png'});
	ul.up.observe('click', function(e) {
		pageDown(list, num);
	});
	ul.insert({before: ul.up});
	ul.up.addClassName('scrolldown');
	ul.up.setStyle({visibility: 'hidden'});
	
	ul.down = new Element('img', {src: 'images/icons/downarrow.png'});
	ul.down.observe('click', function(e) {
		pageUp(list, num);
	});
	ul.insert({after: ul.down});
	ul.down.addClassName('scrollup');
	ul.down.setStyle({visibility: (li.length > num ? 'visible' : 'hidden')});
	
	
}

function pageUp(list, num) {
	var ul = $(list);
	var li = ul.select('li');
	
	for (var i=ul.cursor; i < (num + ul.cursor) && i < li.length - num; i++) {
/*		alert('hiding: ' + i + ' showing: ' + (i + num));*/
		new Effect.Parallel([
			
			new Effect.SlideUp(li[i], {sync: true}),
			new Effect.SlideDown(li[i + num], {sync: true})
		], {queue: 'end', duration: 0.1, transition: Effect.Transitions.linear});
	}
	ul.cursor = i;
	ul.down.setStyle({visibility: (li.length > ul.cursor + num ? 'visible' : 'hidden')});
	ul.up.setStyle({visibility: (ul.cursor > 0 ? 'visible' : 'hidden')});
	ul.status.update((ul.cursor + 1) + " to " + (Math.min(li.length, num + ul.cursor )) + ' of ' + li.length);
}
function pageDown(list, num) {
	var ul = $(list);
	var li = ul.select('li');
	for (var i=ul.cursor - 1; i > ((ul.cursor - num) - 1) && i >= 0; i--) {
/*		alert('showing: ' + (i + 1) + ' hiding: ' + ((i + num) + 1));*/
		new Effect.Parallel([
			new Effect.SlideDown(li[i], {sync: true}),
			new Effect.SlideUp(li[i + num], {sync: true})
		], {queue: 'end', duration: 0.1, transition: Effect.Transitions.linear});
	}
	ul.cursor = i + 1;
	ul.down.setStyle({visibility: (li.length > ul.cursor + num ? 'visible' : 'hidden')});
	ul.up.setStyle({visibility: (ul.cursor > 0 ? 'visible' : 'hidden')});
	ul.status.update((ul.cursor + 1) + " to " + (Math.min(li.length, num + ul.cursor )) + ' of ' + li.length);
}

function setupDomainChanger(el) {
	$('changedomain_' + el).onclick = function (e) {
		$("domainwrapper_" + el).style.display = 'none';
		$("domainchangewrapper_" + el).style.display = 'block';
	} 
	var d = $(el).value;
	$('customdomain_' + el).onblur = function (e) {
		checkDomain($('customdomain_' + el).value, 'customdomainstatus_' + el);
		if ($('domaintypecustomdomain_' + el).checked) {
			$(el).value = $('customdomain_' +el).value;
		}
		
	};
	
	$('subdomain_' +el).onblur = function (e) {
		if ($('domaintypesubdomain_' + el).checked) {
			$(el).value = $('subdomain_' +el).value + '.clevr.com';
		} 
	};
	
	var isSub = (d.substring(d.length - 10, d.length) == '.clevr.com');
	if (isSub) {
		$('domaintypesubdomain_' + el).checked = true;
		$('domaintypesubdomaininput_' + el).style.display = 'block';
		$('domaintypecustominput_' + el).style.display = 'none';
		$('subdomain_' +el).value = d.substring(0, d.length - 10);
	} else {
		$('domaintypecustomdomain_' + el).checked = true;
		$('domaintypesubdomaininput_' + el).style.display = 'none';
		$('domaintypecustominput_' + el).style.display = 'block';
		$('customdomain_' +el).value = d;
	}
	$('domaintypecustomdomain_' + el).onchange = $('domaintypesubdomain_' + el).onchange = function(e) {
		if ($('domaintypesubdomain_' + el).checked) {
			$('domaintypesubdomaininput_' + el).style.display = 'block';
			$('domaintypecustominput_' + el).style.display = 'none';
			$(el).value = $('subdomain_' +el).value;
		} else {
			$('domaintypesubdomaininput_' + el).style.display = 'none';
			$('domaintypecustominput_' + el).style.display = 'block';
			$(el).value = $('customdomain_' +el).value;
		}
	};
	if (d == '') {
		$('changedomain_' + el).onclick();
		$('domaintypesubdomain_' + el).checked = true;
		$('domaintypecustomdomain_' + el).onchange();
	}
}

function copy(el) {
	var text = $(el).value;
	if (window.clipboardData) {
		window.clipboardData.setData("Text",text);
	} else {
		var flashcopier = 'flashcopier';
		if(!$(flashcopier)) {
			var divholder = document.createElement('div');
			divholder.id = flashcopier;
			document.body.appendChild(divholder);
		}
		$(flashcopier).innerHTML = '';
		var divinfo = '<embed src="http://s3.clevr.com/c.swf" FlashVars="clipboard='+encodeURIComponent(text)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
		$(flashcopier).innerHTML = divinfo;
	}
	new Effect.Highlight($(el), {duration: 0.5,
		beforeStart: function(e) {
			$(el).value = 'Copied';
		},
		afterFinish: function(e) {
			$(el).value = text;
			$(el).select();
		}
	});
	
}

// <div id="domainwrapper_domain"><span id="domaintext_domain">http://mattbook.local/</span>
// 			<input type="hidden" id="domain" name="domain" id="domain" value="mattbook.local">
// 			<input type="button" value="Change" id="changedomain_domain"></div>
// 			<div style="display: none" id="domainchangewrapper_domain">
// 			<input type="radio" name="domaintype_domain" value="subdomain" id="domaintypesubdomain_domain"> Subdomain
// 			<input type="radio" name="domaintype_domain" value="custom" id="domaintypesubdomain_domain"> Custom domain
// 			<br>http://<span id="domaintypesubdomaininput_domain"><input type="text" id="subdomain_domain">.clevr.com/</span>
// 		<span id="domaintypecustominput_domain"><input type="text" id="customdomain_domain">/</span>