function moveinfo() {
	document.getElementById('picinfo').style.top=(document.documentElement.scrollTop||document.body.scrollTop) + 'px';
	document.getElementById('picinfo').style.right=((document.documentElement.scrollLeft||document.body.scrollLeft)*-1) + 'px';
}
function togglemain(num) {
	var title=document.getElementById('maintitle' + num);
	if(title.innerHTML.search('hide')!=-1) {
		title.innerHTML=title.innerHTML.replace(/hide/i, 'show');
		title.style.marginBottom='-10px';
		document.getElementById('maincontent' + num).style.display='none';
		if(num==2) {
			clearcaptions();
			clearcaptiontext();
		}
	} else {
		title.innerHTML=title.innerHTML.replace(/show/i, 'hide');
		title.style.marginBottom='10px';
		document.getElementById('maincontent' + num).style.display='block';
		if(num==2) {
			showcaptions();
		}
		var i=1;
		for(i=1;i<=3;i++) if(i!=num) {
			if(i==2) {
				clearcaptions();
				clearcaptiontext();
			}
			document.getElementById('maintitle' + i).innerHTML=document.getElementById('maintitle' + i).innerHTML.replace(/hide/i, 'show');
			document.getElementById('maintitle' + i).style.marginBottom='-10px';
			document.getElementById('maincontent' + i).style.display='none';
		}
	}
}
function showcaption(number) {
	document.getElementById('captionframe' + number).style.border='5px solid white';
	document.getElementById('captionframe' + number).style.opacity=1.0;
	document.getElementById('captionframe' + number).style.filter='alpha(opacity=100)';
	document.getElementById('captiondetail').style.display='block';
	document.getElementById('captiontitle').innerHTML='Caption #' + number;
	document.getElementById('captiontext').innerHTML=document.getElementById('captionframe' + number).title;
	var i=1;
	for (i=1;i<=document.getElementById('captioncount').value;i++) if(i!=number) hidecaption(i);
}
function hidecaption(number) {
	document.getElementById('captionframe' + number).style.border='5px double white';
	document.getElementById('captionframe' + number).style.opacity='0.7';
	document.getElementById('captionframe' + number).style.filter='alpha(opacity=70)';
}
function fixframebg() {
	document.getElementById('frame').style.backgroundPosition=((document.documentElement.scrollLeft||document.body.scrollLeft)-document.getElementById('picture').offsetLeft)*-1 + 'px ' + ((document.documentElement.scrollTop||document.body.scrollTop)-document.getElementById('picture').offsetTop)*-1 + 'px';
}
function mousedownevt(evt) {
	evt=evt||event;
	if(document.getElementById('tagging').value==1) {
		document.getElementById('mousedownxref').value=evt.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft);
		document.getElementById('mousedownx').value=evt.clientX-document.getElementById('picture').offsetLeft+(document.documentElement.scrollLeft||document.body.scrollLeft);
		document.getElementById('mousedownyref').value=evt.clientY+(document.documentElement.scrollTop||document.body.scrollTop);
		document.getElementById('mousedowny').value=evt.clientY-document.getElementById('picture').offsetTop+(document.documentElement.scrollTop||document.body.scrollTop);
		document.getElementById('frame').style.width='0px';
		document.getElementById('frame').style.height='0px';
		document.getElementById('frame').style.display='block';
		document.getElementById('frame').style.left=(evt.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft)) + 'px';
		document.getElementById('frame').style.top=(evt.clientY+(document.documentElement.scrollTop||document.body.scrollTop)) + 'px';
		document.getElementById('picture').style.opacity=0.8;
		document.getElementById('picture').style.filter='alpha(opacity=80)';
		document.getElementById('resizingtag').value='1';
		document.getElementById('clicked_on_picture').value=1;
		fixframebg();
	}
}
function mouseupevt(evt) {
	evt=evt||event;
	if(document.getElementById('tagging').value==1) {
		if(document.getElementById('clicked_on_picture').value==1) {
			document.getElementById('mouseupx').value=evt.clientX-document.getElementById('picture').offsetLeft+(document.documentElement.scrollLeft||document.body.scrollLeft);
			document.getElementById('mouseupy').value=evt.clientY-document.getElementById('picture').offsetTop+(document.documentElement.scrollTop||document.body.scrollTop);
			document.getElementById('resizingtag').value='0';
			document.getElementById('clicked_on_picture').value=0;
			if(document.getElementById('frame').style.width!='0px' || document.getElementById('frame').style.height!='0px') {
				document.getElementById('tagstep1').style.display='none';
				document.getElementById('tagstep2').style.display='inline';
				document.getElementById('newcaptiontext').style.display='block';
				document.getElementById('submitcaption').style.display='inline';
			}
		}
	}
}
function mousemoveevt(evt) {
	evt=evt||event;
	if(document.getElementById('tagging').value==1) {
		if(document.getElementById('resizingtag').value=='1'){
			if(evt.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft)>document.getElementById('mousedownxref').value){
				document.getElementById('frame').style.width=(evt.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft)-document.getElementById('frame').offsetLeft) + 'px';
				document.getElementById('frame').style.left=document.getElementById('mousedownxref').value + 'px';
			}else{
				document.getElementById('frame').style.left=(evt.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft)) + 'px';
				document.getElementById('frame').style.width=(document.getElementById('mousedownxref').value-evt.clientX-(document.documentElement.scrollLeft||document.body.scrollLeft)) + 'px';
			}
			if(evt.clientY+(document.documentElement.scrollTop||document.body.scrollTop)>document.getElementById('mousedownyref').value){
				document.getElementById('frame').style.top=document.getElementById('mousedownyref').value + 'px';
				document.getElementById('frame').style.height=(evt.clientY+(document.documentElement.scrollTop||document.body.scrollTop)-document.getElementById('frame').offsetTop) + 'px';
			}else{
				document.getElementById('frame').style.top=(evt.clientY+(document.documentElement.scrollTop||document.body.scrollTop)) + 'px';
				document.getElementById('frame').style.height=(document.getElementById('mousedownyref').value-evt.clientY-(document.documentElement.scrollTop||document.body.scrollTop)) + 'px';
			}
		}
	}
}
function starttagging() {
	document.getElementById('tagging').value=1;
	document.getElementById('maintitle2').innerHTML='New Caption';
	document.getElementById('currentcaptions').style.display='none';
	document.getElementById('starttagging').style.display='none';
	document.getElementById('canceltagging').style.display='inline';
	document.getElementById('tagstep1').style.display='inline';
	clearcaptions();
	clearcaptiontext();
	return false;
}
function stoptagging() {
	document.getElementById('tagging').value=0;
	document.getElementById('frame').style.display='none';
	document.getElementById('picture').style.opacity=1.0;
	document.getElementById('picture').style.filter='alpha(opacity=100)';
	document.getElementById('maintitle2').innerHTML='Captions (hide)';
	document.getElementById('currentcaptions').style.display='block';
	document.getElementById('canceltagging').style.display='none';
	document.getElementById('starttagging').style.display='inline';
	document.getElementById('tagstep1').style.display='none';
	document.getElementById('tagstep2').style.display='none';
	document.getElementById('newcaptiontext').value='';
	document.getElementById('newcaptiontext').style.display='none';
	document.getElementById('submitcaption').style.display='none';
	document.getElementById('mousedownx').value='';
	document.getElementById('mousedownxref').value='';
	document.getElementById('mousedowny').value='';
	document.getElementById('mousedownyref').value='';
	document.getElementById('mouseupx').value='';
	document.getElementById('mouseupy').value='';
	showcaptions();
}
function clearcaptions() {
	var i=1;
	for (i=1;i<=Number(document.getElementById('captioncount').value);i++) {
		document.getElementById('captionframe' + i).style.display='none';
		hidecaption(i);
	}
	document.getElementById('captiondetail').style.display='none';
}
function clearcaptiontext() {
	document.getElementById('captiontitle').innerHTML='';
	document.getElementById('captiontext').innerHTML='';
}
function showcaptions() {
	var i=1;
	for (i=1;i<=document.getElementById('captioncount').value;i++) document.getElementById('captionframe' + i).style.display='block';
}
function addtag(id) {
	var currenttag=Number(document.getElementById('captioncount').value)+1;
	var x=(Number(document.getElementById('mousedownx').value)<=Number(document.getElementById('mouseupx').value) ? Number(document.getElementById('mousedownx').value) : Number(document.getElementById('mouseupx').value));
	var y=(Number(document.getElementById('mousedowny').value)<=Number(document.getElementById('mouseupy').value) ? Number(document.getElementById('mousedowny').value) : Number(document.getElementById('mouseupy').value));
	var width=Math.abs(Number(document.getElementById('mousedownx').value)-Number(document.getElementById('mouseupx').value))-10;
	var height=Math.abs(Number(document.getElementById('mousedowny').value)-Number(document.getElementById('mouseupy').value))-10;
	var ajaxRequest;
	try{
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				alert("Javascript Error");
				return false;
			}
		}
	}
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			if(ajaxRequest.responseText=='good'){
				document.getElementById('captioncount').value=currenttag;
				document.getElementById('picture').innerHTML+='<div style="width:' + width + 'px;height:' + height + 'px;left:' + (x+document.getElementById('picture').offsetLeft) + 'px;top:' + (y+document.getElementById('picture').offsetTop) + 'px;" title="' + document.getElementById('newcaptiontext').value + '" id="captionframe' + currenttag + '" onmouseover="showcaption(' + currenttag + ');">' + currenttag + '</div>';
				document.getElementById('captionlist').innerHTML+='<li><a href="#" onclick="showcaption(' + currenttag +');return false;">Caption #' + currenttag +'</a></li>';
				stoptagging();
				showcaptions();
				showcaption(currenttag);
			} else {
				alert(ajaxRequest.responseText);
			}
		}
	}
	ajaxRequest.open('POST', '/library/newcaption', true);
	ajaxRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	ajaxRequest.send('screenshot=' + id + '&top=' + y + '&left=' + x + '&width=' + width + '&height=' + height + '&newcaptiontext=' + document.getElementById('newcaptiontext').value);
}
function onloadfnc() {
togglemain(2);
togglemain(3);
if (typeof document.getElementById('picture').onselectstart!="undefined") {
	document.getElementById('picture').onselectstart=function(){return false;};
} else if (typeof document.getElementById('picture').style.MozUserSelect!="undefined") {
	document.getElementById('picture').style.MozUserSelect="none";
} else {
	document.getElementById('picture').onmousedown=function(){return false;};
}
document.getElementById('picture').onmousedown=mousedownevt;
document.getElementById('picture').onmousemove=mousemoveevt;
document.body.onmouseup=mouseupevt;
document.getElementById('starttagging').onclick=function() {starttagging();return false;};
document.getElementById('canceltagging').onclick=function() {stoptagging();return false;};
document.body.onscroll=function() {fixframebg();moveinfo();};
document.onscroll=function() {fixframebg();moveinfo();};
}