var fnServerPath = '/ajax/';
var fnServerFotonotesScript = 'ajax_api.php';
var fnServer = fnServerPath + fnServerFotonotesScript;
var fnXMLHTTP = null;
if (window.ActiveXObject){
	try{
		fnXMLHTTP = new ActiveXObject('Microsoft.XMLHTTP');
	}catch (e) { }
}else if (window.XMLHttpRequest){
	fnXMLHTTP = new XMLHttpRequest();
}

isIE=(document.all&&navigator.userAgent.match(/msie/gi))?true:false;
if (!window.FN_ADD)    var FN_ADD = 'allow';
if (!window.FN_MODIFY) var FN_MODIFY = 'allow';
if (!window.FN_DELETE) var FN_DELETE = 'allow';

var FN_CREDITS = 'DHTML Viewer\n\n';
var FN_DISALLOWED = '對不起，您沒有權限執行此操作。\n\n' + '請嘗試換一帳號登錄.';
var FN_NEEDLOGIN = '對不起，您還沒有登錄。\n\n' + '請先登錄.';
var FN_POST_UNSUPPORTED = '對不起，您的瀏覽器無法编辑便利貼.';
var FN_DELETE_CONFIRM = '你確定要刪除此便利貼嗎?';
var FN_SAVE_WAIT = 'Loading ...';
var FN_SAVE_FAIL = '儲存失敗!';
var FN_SAVE_SUCCESS = '儲存成功!';
var FN_NEED_CONTENT = '請輸入内容!';

// Other global variables:
var fnDebugMode = false;    // Set to true to show XML sent/received.
var fnHideTimer = null;     // Hide notes after timeout.
var fnActiveNote = null;    // Currently visible note.
var defaultfnAction = 'edit';	// Default action
var fnActionVerb = 'edit';      // Control bar's current action.
var fnActionTrigger = ''; // Control bar's lit item.
var fnEditingData = null;   // Data store during note editing process.
var formMarginTop	= 7;	// Margin between box and form
var activeNoteId	= null;	// Active note id
var photoCache = Array();
var RotateTime = Array();
var borderoffset = 4;		// for firefox

var aeOL = [];
function addEvent(o, n, f, l){
	var a = 'addEventListener', h = 'on'+n, b = '', s = '';
	if (o[a] && !l) return o[a](n, f, false);
	o._c |= 0;
	if (o[h]){
		b = '_f' + o._c++;
		o[b] = o[h];
	}
	s = '_f' + o._c++;
	o[s] = f;
	o[h] = function(e){
		e = e || window.event;
		var r = true;
		if (b) r = o[b](e) != false && r;
		r = o[s](e) != false && r;
		return r;
	};
	aeOL[aeOL.length] = { o: o, h: h };
};
addEvent(window, 'unload', function() {
	for (var i = 0; i < aeOL.length; i++) with (aeOL[i]){
			o[h] = null;
			for (var c = 0; o['_f' + c]; c++) o['_f' + c] = null;
		}
	}
);

function cancelEvent(e, c){
	e.returnValue = false;
	if (e.preventDefault) e.preventDefault();
	if (c){
		e.cancelBubble = true;
		if (e.stopPropagation) e.stopPropagation();
	}
};


// *** CLIENT LOAD DIVS ***
// The following functions run after page loaded and retrieve Fotonotes data into the document to show annotations.

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

// *** Drag and Resize Library Code ***
// (c) 2005 Angus Turnbull http://www.twinhelix.come
function DragResize(myName, config)
{
 var props = {
  myName: myName,                  // Name of the object.
  enabled: true,                   // Global toggle of drag/resize.
  handles: ['tl', 'tr', 'bl', 'br'], // Array of drag handles: top/mid/.
  isElement: null,                 // Function ref to test for an element.
  isHandle: null,                  // Function ref to test for move handle.
  element: null,                   // The currently selected element.
  dragging: null,                  // Active handle reference of the element.
  minWidth: 20, minHeight: 20,     // Minimum pixel size of elements.
  minLeft: 0, maxRight: 9999,      // Bounding box area.
  minTop: 0, maxBottom: 9999,
  zIndex: 220,                       // The highest Z-Index yet allocated.
  mouseX: 0, mouseY: 0,            // Current mouse position, recorded live.
  lastMouseX: 0, lastMouseY: 0,    // Last processed mouse positions.
  mOffX: 0, mOffY: 0,              // A known offset between position & mouse.
  elmX: 0, elmY: 0,                // Element position.
  elmW: 0, elmH: 0,                // Element size.
  allowBlur: true,                 // Whether to allow automatic blur onclick.
  ondragfocus: null,               // Event handler functions.
  ondragstart: null,
  ondragmove: null,
  ondragend: null,
  ondragblur: null
 };

 for (var p in props) {
  this[p] = (typeof config[p] == 'undefined') ? props[p] : config[p];
 }
};


DragResize.prototype.apply = function(node)
{ 
 var obj = this;
 addEvent(node, 'mousedown', function(e) { obj.mouseDown(e) } );
 addEvent(node, 'mousemove', function(e) { obj.mouseMove(e) } );
 addEvent(node, 'mouseup', function(e) { obj.mouseUp(e) } );
};


DragResize.prototype.handleSet = function(elm, show) { with (this)
{
 if (!elm._handle_tr)
 {
  for (var h = 0; h < handles.length; h++){  
   var hDiv = document.createElement('div');
   hDiv.className = myName + ' ' +  myName + '-' + handles[h];
   elm['_handle_' + handles[h]] = elm.appendChild(hDiv);
  }
 }
 for (var h = 0; h < handles.length; h++){
  elm['_handle_' + handles[h]].style.visibility = show ? 'inherit' : 'hidden';
 }
}};


DragResize.prototype.select = function(newElement) { with (this)
{
 if (!document.getElementById || !enabled) return;
 if (newElement && (newElement != element) && enabled)
 {
  element = newElement; 
  element.oldzIndex = element.style.zIndex;
  element.style.zIndex = ++zIndex;
  handleSet(element, true); 
  elmX = parseInt(element.style.left);
  elmY = parseInt(element.style.top);
  elmW = element.offsetWidth;
  elmH = element.offsetHeight;
  if (fnActionVerb == 'edit' && !isIE){
		elmW = elmW -borderoffset;
		elmH = elmH -borderoffset;
		elmX = (elmX>=2) ? elmX-borderoffset : elmX;
		elmY = (elmY>=2) ? elmY-borderoffset : elmY;
  } 
 with (document.getElementById('fn_editbar').style)
 {
  left = isIE ? elmX + 'px' : elmX + borderoffset + 'px';
  top = isIE ? elmY + elmH + formMarginTop + 'px' :  elmY + elmH + formMarginTop + borderoffset + 'px';
 }
  if (ondragfocus) this.ondragfocus();
 }
}};


DragResize.prototype.deselect = function(keepHandles) { with (this)
{
 if (!document.getElementById || !enabled) return;
 if (!keepHandles)
 {
  if (ondragblur) this.ondragblur();
  element.style.zIndex = element.oldzIndex;
  handleSet(element, false);
  element = null;
 }
 dragging = null;
 mOffX = 0;
 mOffY = 0;
}};


DragResize.prototype.mouseDown = function(e) { with (this)
{ 
  if (!document.getElementById || !enabled) return true;
  var elm = e.target || e.srcElement,
  newElement = null,
  newHandle = null,
  hRE = new RegExp(myName + '-([trmbl]{2})', '');
  while (elm){  
    if (elm.className)
    {
      if (!newHandle && (hRE.test(elm.className) || isHandle(elm))) newHandle = elm;
      if (isElement(elm)) { newElement = elm; break }
    }
    elm = elm.parentNode;
  }
  if (element && (element != newElement) && allowBlur) deselect(false); 
 	if (newElement && (!element || (newElement == element))){  
  	cancelEvent(e);
  	select(newElement, newHandle);
  	dragging = newHandle;
  	if (dragging && ondragstart) this.ondragstart();
 	}
}};


DragResize.prototype.mouseMove = function(e) { with (this)
{
 if (!document.getElementById || !enabled) return true;
 mouseX = e.pageX || e.clientX + document.documentElement.scrollLeft - 2;
 mouseY = e.pageY || e.clientY + document.documentElement.scrollTop - 2;

 var diffX = mouseX - lastMouseX + mOffX;
 var diffY = mouseY - lastMouseY + mOffY;
 mOffX = mOffY = 0;
 lastMouseX = mouseX;
 lastMouseY = mouseY;
 if (!dragging) return true;
 var hClass = dragging && dragging.className &&
 dragging.className.match(new RegExp(myName + '-([tmblr]{2})')) ? RegExp.$1 : '';
 var rs = 0, dY = diffY, dX = diffX;
 if (hClass.indexOf('t') >= 0)
 {
  rs = 1;
  if (elmH - dY < minHeight) mOffY = (dY - (diffY = elmH - minHeight));
  else if (elmY + dY < minTop) mOffY = (dY - (diffY = minTop - elmY));
  elmY += diffY;
  elmH -= diffY;
 }
 if (hClass.indexOf('b') >= 0)
 {
  rs = 1;
  if (elmH + dY < minHeight) mOffY = (dY - (diffY = minHeight - elmH));
  else if (elmY + elmH + dY > maxBottom) mOffY = (dY - (diffY = maxBottom - elmY - eEmH));
  elmH += diffY;
 }
 if (hClass.indexOf('l') >= 0)
 {
  rs = 1;
  if (elmW - dX < minWidth) mOffX = (dX - (diffX = elmW - minWidth));
  else if (elmX + dX < minLeft) mOffX = (dX - (diffX = minLeft - elmX));
  elmX += diffX;
  elmW -= diffX;
 }
 if (hClass.indexOf('r') >= 0)
 {
  rs = 1;
  if (elmW + dX < minWidth) mOffX = (dX - (diffX = minWidth - elmW));
  else if (elmX + elmW + dX > maxRight) mOffX = (dX - (diffX = maxRight - elmX - elmW));
  elmW += diffX;
 }
 if (dragging && !rs)
 { 
  if (elmX + dX < minLeft) mOffX = (dX - (diffX = minLeft - elmX));
  else if (elmX + elmW + dX > maxRight) mOffX = (dX - (diffX = maxRight - elmX - elmW));
  // ...and up-down.
  if (elmY + dY < minTop) mOffY = (dY - (diffY = minTop - elmY));
  else if (elmY + elmH + dY > maxBottom) mOffY = (dY - (diffY = maxBottom - elmY - elmH));
  elmX += diffX;
  elmY += diffY;
 }
 with (element.style)
 {
  left =   elmX + 'px';
  width =  elmW + 'px';
  top =    elmY + 'px';
  height = elmH + 'px';
 }
 with (document.getElementById('fn_editbar').style)
 {
  left =   elmX + 'px';
  top =    elmY + elmH + formMarginTop + 'px';
 }
 if (window.opera && document.documentElement)
 {
  var oDF = document.getElementById('op-drag-fix');
  if (!oDF)
  {
   var oDF = document.createElement('input');
   oDF.id = 'op-drag-fix';
   oDF.style.display = 'none';
   document.body.appendChild(oDF);
  }
  oDF.focus();
 }
 if (ondragmove) this.ondragmove();
 cancelEvent(e);
}};


DragResize.prototype.mouseUp = function(e) { with (this)
{
 if (!document.getElementById || !enabled) return;
 if (ondragend) this.ondragend();
 deselect(true);
}};


// *** FNCLIENT CORE CODE ***

var _f_idcount = 1;
function fnElementFade(elm, show)
{
	if (show)
	{	
		var elmparent	= elm.parentNode;
		if (elmparent.className == 'fn-area'){
			elmparent.className = 'fn-area-hover';
		}
		elm.style.visibility = 'inherit';
		elm.style.opacity	= 100;

	}else{
		var elmparent	= elm.parentNode;
		if (elmparent.className == 'fn-area-hover'){
			elmparent.className = 'fn-area';
		}
		elm.style.visibility = 'hidden';
		elm.style.opacity	= 0;
	}
};


function fnClassSet(elm, active){
	// Utility function that toggles the "-active" and "-inactive" classnames.
	if(elm!=null){		
		elm.className = elm.className.replace((active ? (/-inactive/) : (/-active/)),
		(active ? '-active' : '-inactive'));
	}
};


function fnGetContainer(node){
	var container = node;
	while (container){
		if ((/fn-container/).test(container.className) && (container.id!='fn-canvas')) break;
		container = container.parentNode;
	}
	return container;
};


function fnGetNoteId(node){
	var NoteId = null;
	for (var i = 0; i < node.childNodes.length; i++){
		if ((/fn-note-id/).test(node.childNodes.item(i).className)){
			NoteId = node.childNodes.item(i).title;
			break;
		}
	}
	return NoteId;
}

function fnGetControlBar(container){	
	var controlBar = null;
	for (var i = 0; i < container.childNodes.length; i++){
		if ((/fn-controlbar/).test(container.childNodes.item(i).className)){
			controlBar = container.childNodes.item(i);
			break;
		}
	}
	return controlBar;
};

function fnAction(action, trigger){	
	if (fnActionVerb != action){	
		if (fnActionTrigger && fnActionVerb) fnClassSet(fnActionTrigger, false);
		fnActionVerb = action;
		fnActionTrigger = trigger;
		if (trigger) fnClassSet(trigger, true);
	}else{		
		fnActionVerb = defaultfnAction;
		if (trigger) fnClassSet(trigger, false);
	}
};

function fnMouseOverOutHandler(evt, isOver){
	var node = evt.target || evt.srcElement;
	if (node.nodeType != 1) {
		node = node.parentNode;
	}else{
		if (node.id=='photo'){
			ImgContainer = fnGetContainer(node);
			fnClassSet(ImgContainer,1);
		}else if ((node.nodeName == 'TD' && !(/fn-note-td/).test(node.className) ) || node.nodeName == 'BODY'){
			var imghandle = document.getElementById('photo');
			ImgContainer = fnGetContainer(imghandle);
			fnClassSet(ImgContainer,0);
		}	
	}
	while (node && !((node.className||'').indexOf('fn-container') > -1)){			
		if (node && ((node.className||'').indexOf('fn-area') > -1) && (!fnActionVerb || fnActionVerb == 'edit' )){
			var area = node;
			var note = area.firstChild;
			while (note && note.nodeType != 1) note = note.nextSibling;
			if (!note) return;
			clearTimeout(fnHideTimer);
			if (isOver){
				if (fnActiveNote && (note != fnActiveNote)) fnElementFade(fnActiveNote, false);
				if (activeNoteId != fnGetNoteId(note)){
					fnElementFade(note, true);
				}				
				fnActiveNote = note;
			}else{
				fnHideTimer = setTimeout('if (fnActiveNote) { ' +
					'fnElementFade(fnActiveNote, false); fnActiveNote = null }', 200);
			}
		}		
		node = node.parentNode;
	}
};


function fnClickHandler(evt)
{	
	// Processes clicks on the document, performs the correct action.
	var node = evt.target || evt.srcElement;
	if (node.nodeType != 1) node = node.parentNode;

	if ((/fn-controlbar-add/).test(node.className)){
		if (!fnXMLHTTP) return alert(FN_POST_UNSUPPORTED);
		if (FN_ADD == 'deny') return alert(FN_DISALLOWED);
		return fnAddNote(node);
	}
		
	if ((/fn-note-author/).test(node.className)){	
		note = node.parentNode.parentNode.parentNode.parentNode.parentNode;		
		for (var n = 0; n < note.childNodes.length; n++){
			if ((/fn-note-authorid/).test(note.childNodes.item(n).className)){			
				if (note.childNodes.item(n).title && (note.childNodes.item(n).title != _lno)){				
					window.open("http://www.i-part.com.tw/file/file_viewfile.php?u="+note.childNodes.item(n).title);
				}
			}
		}
		return false;
	}
		
	while (node && !((node.className||'').indexOf('fn-container') > -1)){
		
		// Check buttons within the Edit bar.
		if ((/fn-editbar-ok/).test(node.className)) return fnEditButtonHandler(true);
		if ((/fn-editbar-cancel/).test(node.className)) return fnEditButtonHandler(false);
		if ((/fn-editbar-del/).test(node.className)){
			if (fnEditingData.area){				 
					fnDelNote(fnEditingData.area);
			}
			return ;
		}
		if (fnEditingData) return;
				
		if ((/fn-area/).test(node.className)){		
			var area = node;
			if (fnActionVerb == 'edit'){				
				var note = area.firstChild;
				while (note && note.nodeType != 1) note = note.nextSibling;
				if (note) {				
					if (fnCheckNotePrm(note)){
						fnElementFade(note, false);
						fnEditNote(note);					
					}
				}
			}
			return;
		}		
		node = node.parentNode;
	}
};


function fnCheckNotePrm(node){
	if (node && ((node.className||'').indexOf('fn-note') > -1)){
	   for (var n = 0; n < node.childNodes.length; n++){
			if ((/fn-note-authorid/).test(node.childNodes.item(n).className)){			 
				if ((node.childNodes.item(n).title!="" && _lno!="") && node.childNodes.item(n).title == _lno || _lno == _uno) return true;
			}
	   }
	}
	return false;
}


function fnEditUISet(show){
	// Either shows or hides the editing UI.

	if (!fnEditingData) return;
	with (fnEditingData){
		// Start or stop dragging the selected area.
		if (show) dragresize.select(area, area);
		else dragresize.deselect();
		// Set area className so its remains visible if editing, or reset it back otherwise.
		if (show)
		{
			var container = fnGetContainer(area);
			var newArea	= area;
			// add in innerborders
			var newInnerBorder = document.createElement('div');
			newInnerBorder.className = 'fn-area-innerborder-right';
			newArea.appendChild(newInnerBorder);

			var newInnerBorder = document.createElement('div');
			newInnerBorder.className = 'fn-area-innerborder-left';
			newArea.appendChild(newInnerBorder);

			var newInnerBorder = document.createElement('div');
			newInnerBorder.className = 'fn-area-innerborder-top';
			newArea.appendChild(newInnerBorder);

			var newInnerBorder = document.createElement('div');
			newInnerBorder.className = 'fn-area-innerborder-bottom';
			newArea.appendChild(newInnerBorder);

			// Add newArea to document
			container.appendChild(newArea);
			area.className = 'fn-area-editing';
		}else{
			var offset  =  0;
			var total	= area.childNodes.length;
			for(var i=0;i<total;i++){
				var field=area.childNodes.item(i-offset);
				if ( (field.className||"").indexOf('fn-area-innerborder') > -1 )
				{	
					area.removeChild(field);
					offset  =  offset  +  1  ;
				}
			}

			area.className = 'fn-area';
		}		
		fnElementFade(form, show);		
	}
};


function fnAddNote(){	
	if (fnEditingData) return;	
	var photo = document.getElementById('photo');
	var container = fnGetContainer(photo);
	if (!container) return;	
	fnAction('add', '');	
	var newArea = document.createElement('div');
	newArea.className = 'fn-area';
	
	newArea.style.left = (container.offsetWidth/2 - 25) + 'px';
	newArea.style.top  = (container.offsetHeight/2 - 25) + 'px';
	newArea.style.width = (isIE) ? '50px' : '44px';
	newArea.style.height = (isIE) ? '50px' : '44px';
	newArea.id = 'fn-area-new';

	var newNote = document.createElement('div');
	newNote.className = 'fn-note';
	newArea.appendChild(newNote);

	// Create note elements.
	var newID = document.createElement('span');
	newID.className = 'fn-note-id';
	newID.title = '';
	newNote.appendChild(newID);

	// create table
	var newTable = document.createElement('table');
	newTable.className = 'fn-note-text-table';
	newTable.cellPadding  = '0';
	newTable.cellSpacing  = '0';
	newTable.style.border = '0';
	newTable.style.borderStyle  = 'solid';
	// tbody
	var TableBody = document.createElement("tbody");
	// line1
	var tr1 = document.createElement('tr');
	var tdtl = document.createElement('td');
	tdtl.style.width = '5px';
	tdtl.style.height = '5px';
	// top left image
	var imgtl = document.createElement('img');
	imgtl.style.width = '5px';
	imgtl.style.height = '5px';
	imgtl.src='/images/note_yellow_tl.gif';
	tdtl.appendChild(imgtl);
	tr1.appendChild(tdtl);
	// top middle
	var tdtm = document.createElement('td');
	tdtm.className = "fn-note-td-owner";
	tr1.appendChild(tdtm);
	// top right 
	var tdtr = document.createElement('td');
	tdtr.style.width = '5px';
	tdtr.style.height = '5px';

	// top right image
	var imgtr = document.createElement('img');
	imgtr.style.width = '5px';
	imgtr.style.height = '5px';
	imgtr.src='/images/note_yellow_tr.gif';
	tdtr.appendChild(imgtr);
	tr1.appendChild(tdtr);
	// prase line1
	TableBody.appendChild(tr1);
	// line2
	var tr2 = document.createElement('tr');
	var tdml = document.createElement('td');
	tdml.className = 'fn-note-td-owner';
	tdml.style.width = '5px';
	tr2.appendChild(tdml);
	// middle middle
	var tdmm = document.createElement('td');
	tdmm.className = 'fn-note-td-owner';
	var newContent = document.createElement('span');
	newContent.className = 'fn-note-content-owner';
	tdmm.appendChild(newContent);
	var newAuthor = document.createElement('span');
	newAuthor.className = 'fn-note-author-owner';
	newAuthor.innerHTML = _luk;
	tdmm.appendChild(newAuthor);
	tr2.appendChild(tdmm);
	var tdmr = document.createElement('td');
	tdmr.className = 'fn-note-td-owner';
	tdmr.style.width = '5px';
	tr2.appendChild(tdmr);
	TableBody.appendChild(tr2);	// line3
	var tr3 = document.createElement('tr');
	var tdbl = document.createElement('td');
	tdbl.style.width = '5px';
	tdbl.style.height = '5px';
	// bottom left image
	var imgbl = document.createElement('img');
	imgbl.style.width = '5px';
	imgbl.style.height = '5px';
	imgbl.src='/images/note_yellow_bl.gif';
	tdbl.appendChild(imgbl);
	tr3.appendChild(tdbl);
	// bottom middle
	var tdbm = document.createElement('td');
	tdbm.className = "fn-note-td-owner";
	tr3.appendChild(tdbm);
	// bottom right 
	var tdbr = document.createElement('td');
	tdbr.style.width = '5px';
	tdbr.style.height = '5px';
	// bottom right image
	var imgbr = document.createElement('img');
	imgbr.style.width = '5px';
	imgbr.style.height = '5px';
	imgbr.src='/images/note_yellow_br.gif';
	tdbr.appendChild(imgbr);
	tr3.appendChild(tdbr);
	// prase line1
	TableBody.appendChild(tr3);
	newTable.appendChild(TableBody);
	newNote.appendChild(newTable);
	var newAuthorId = document.createElement('span');
	newAuthorId.className = 'fn-note-authorid';
	newAuthorId.title = _uno;
	newNote.appendChild(newAuthorId);

	// add in innerborders
	var newInnerBorder = document.createElement('div');
	newInnerBorder.className = 'fn-area-innerborder-right';
	newArea.appendChild(newInnerBorder);

	var newInnerBorder = document.createElement('div');
	newInnerBorder.className = 'fn-area-innerborder-left';
	newArea.appendChild(newInnerBorder);

	var newInnerBorder = document.createElement('div');
	newInnerBorder.className = 'fn-area-innerborder-top';
	newArea.appendChild(newInnerBorder);

	var newInnerBorder = document.createElement('div');
	newInnerBorder.className = 'fn-area-innerborder-bottom';
	newArea.appendChild(newInnerBorder);

	// Add newArea to document

	container.appendChild(newArea);

	// Record this note as editing, and set the "add" action flag.
	fnEditingData = {
		area: newArea,
		note: newNote
	};

	// Hand over to the editing function.
	fnEditNote();
};


function fnEditNote(note){
	// Edits a passed note reference.

	var area = null;
	if (note){
		// If we're editing an existing note, setup the data store.
		area = note.parentNode;
		fnEditingData = {
			area: area,
			note: note
		};
	 }else{
		// New notes: pull the note and area out of the stored data.
		area = fnEditingData.area;
		note = fnEditingData.note;
	}

	// Find our container and form references.
	var container = fnGetContainer(area);
	if (!container) return;

	var form = container.getElementsByTagName('form');
	if (!form) return;
	form = form.item(0);
  
	// Pick up existing values for content from the note.
	var oldAuthor = '', oldContent = '', noteID = '';
	var fields = area.getElementsByTagName('span');
	for (var n = 0; n < fields.length; n++)
	{
		var field = fields.item(n);
		if (field.className == 'fn-note-id') noteID = field.getAttribute('title');
		if (field.className == 'fn-note-author' || field.className == 'fn-note-author-owner') oldAuthor = field.innerHTML;
		if (field.className == 'fn-note-content'  || field.className == 'fn-note-content-owner') 
			oldContent = field.innerHTML;
		if (field.className == 'fn-note-authorid') oldauthorid = field.getAttribute('title');
	}	
	activeNoteId = noteID;	
	isModify=true;
	fnEditingData.container = container;
	fnEditingData.form = form;
	fnEditingData.noteID = noteID;
	fnEditingData.oldAuthor = oldAuthor;
	fnEditingData.oldAuthorid = oldauthorid;
	fnEditingData.oldContent = oldContent;
	fnEditingData.oldLeft = parseInt(area.style.left);
	fnEditingData.oldTop = parseInt(area.style.top);
	fnEditingData.oldWidth = (isIE) ? area.offsetWidth : area.offsetWidth -borderoffset;
	fnEditingData.oldHeight = (isIE) ? area.offsetHeight : area.offsetHeight -borderoffset;
	// Some values for the post-editing callback handler to populate.
	fnEditingData.newAuthor = fnEditingData.newContent = '';
	fnEditingData.newLeft = fnEditingData.newTop = 0;
	fnEditingData.newWidth = fnEditingData.newHeight = 0;

	// Populate the editing UI with its current content.
	var inputs = form.getElementsByTagName('input');
	for (var i = 0; i < inputs.length; i++){
		if ((/author/).test(inputs[i].className)) inputs[i].value = oldAuthor;
		if ((/fn-editbar-ok/).test(inputs[i].className)) {
			if ((_lno == _uno) && (_lno != oldauthorid)){
				inputs[i].style.display="none";  
			}else{
				inputs[i].style.display="";  
			}
		}
		if ((/fn-editbar-del/).test(inputs[i].className)) {
			if (fnActionVerb == 'add'){
				inputs[i].style.display="none";  
			}else{
				inputs[i].style.display="";  
			}
		}
	}
	var textarea = form.getElementsByTagName('textarea');
	if (textarea && (/content/).test(textarea.item(0).className))
	textarea.item(0).value = fnEscapeHTML(fnBr2Nl(oldContent),'UnEscape');

	if ((_lno == _uno) && (_lno != oldauthorid)){
		textarea.item(0).readOnly = true;
		textarea.item(0).className = 'fn-editbar-content';
		var tds	= form.getElementsByTagName('td');
		fnReplaceCorner(tds,0);
	}else{		
		textarea.item(0).readOnly = false;
		textarea.item(0).className = 'fn-editbar-content-owner';
		var tds	= form.getElementsByTagName('td');
		fnReplaceCorner(tds,1);
	}
	// Finally, show the editing UI for the recorded area.
	fnEditUISet(true);
};

function fnReplaceCorner(tds,owner){
	for (var i = 0; i < tds.length; i++){
		var td = tds[i];
		if (td.className== "fn-note-td-owner" || td.className== "fn-note-td" ){
			if (owner && td.className== "fn-note-td"){
				td.className="fn-note-td-owner";
			}
			if (!owner && td.className== "fn-note-td-owner"){
				td.className="fn-note-td";
			}
		}else{
			if (td.childNodes[0]){
				var corner	= td.childNodes[0];
				if (corner.src){
				corner.src = corner.src.replace((owner ? (/green_/g) : (/yellow_/g)),
				(owner ? "yellow_" : "green_"));
				}
			}
		}
	}
}

function fnEscapeHTML(html,action){
	if (action == 'UnEscape'){
		return html.replace(/<br>/g, "\n").replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&nbsp;/g, " ");
	}else{		
		return html.replace(/\r\n/g, "\n").replace(/\n{2,}/g, "\n").replace(/\&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\u00A0/g, "&nbsp;");
	}
};

function fnNl2Br(str){
	return str.replace(/\n/g, '<br />');
}
function fnBr2Nl(str){
	return str.replace(/<br>/ig, '\n');
}
function fnCheckText(elm){
	elm.style.posHeight=elm.scrollHeight;
	var maxlimit =300; // byte
	if (elm.value.length>maxlimit){
		elm.value = elm.value.substring(0, maxlimit); 
	}
}

function fnEditButtonHandler(ok){	
	if (!fnEditingData) return;
	with (fnEditingData){
		if (ok){			
			newAuthor = newContent = '';
			var inputs = form.getElementsByTagName('input');
			for (var i = 0; i < inputs.length; i++)
			{
			if ((/author/).test(inputs[i].className)) {newAuthor = inputs[i].value;} //else {newAuthor = '';}
			}
			var textarea = form.getElementsByTagName('textarea');
			if (textarea && (/content/).test(textarea.item(0).className)) {newContent = textarea.item(0).value};
			if (!newContent){alert(FN_NEED_CONTENT);return;}
			newLeft = parseInt(area.style.left);
			newTop = parseInt(area.style.top);
			newWidth = area.offsetWidth;
			newHeight = area.offsetHeight;		
			newContent=newContent.replace(/·/g, ""); 	  
			var sFact = 1;
			for (var n = 0; n < container.childNodes.length; n++){
				if ((/fn-scalefactor/).test(container.childNodes.item(n).className))
				sFact = parseFloat(container.childNodes.item(n).getAttribute('title'));
			}  		
  		// Begin server save operation.
		  fnPostXML(
				'<?xml version="1.0" encoding="UTF-8"?>' +
				'<feed><entry>' +
				(fnActionVerb == 'edit' ? '<id><![CDATA[' + noteID + ']]></id>' : '') +
				'<left>' + parseInt(newLeft/sFact) + '</left>' +
				'<top>' + parseInt(newTop/sFact) + '</top>' +
				'<width>' + parseInt(newWidth/sFact) + '</width>' +
				'<height>' + parseInt(newHeight/sFact) + '</height>' +
				'<authorname><![CDATA[' + fnEscapeHTML(newAuthor,'Escape') + ']]></authorname>' +
				'<ownerno><![CDATA[' + _uno + ']]></ownerno>' +
				'<content><![CDATA[' + fnEscapeHTML(newContent,'Escape') + ']]></content>' + 
				'</entry></feed>'
		  );  		  	
		}else{		
			if (fnActionVerb == 'add'){			
				area.parentNode.removeChild(area);
			}else{				
				area.style.left = oldLeft + 'px';
				area.style.top = oldTop + 'px';
				area.style.width = oldWidth + 'px';
				area.style.height = oldHeight + 'px';
			}		
			fnEditUISet(false);
			fnAction(defaultfnAction, null);
			fnEditingData = null;
			activeNoteId	= null;
			isModify	= false;
		}
	}
};


function fnDelNote(area){

	// Deletes a note area -- passed a whole area reference.
	// Find the ID of this note.
	var noteID = '', fields = area.getElementsByTagName('span');
	for (var n = 0; n < fields.length; n++)
	if (fields.item(n).className == 'fn-note-id')
	noteID = fields.item(n).getAttribute('title');
	if (!noteID) fnEditButtonHandler(false);

	var container = fnGetContainer(area);
	if (!container) return;
	var form = container.getElementsByTagName('form');
	if (!form) return;
	form = form.item(0);
  
	if (noteID && confirm(FN_DELETE_CONFIRM)){
		// Set up our data store to delete this area, and post to the server.
		fnEditingData = {
			area: area,
			note: null,
			container: fnGetContainer(area)
		};
		fnActionVerb = 'del';
		fnPostXML(
		'<?xml version="1.0" encoding="UTF-8"?>' +
		'<feed><entry>' +
		'<id><![CDATA[' + noteID + ']]></id>' +
		'</entry></feed>'
		);
		fnElementFade(form, false);

	}else{
		// Reset control bar if cancelled.
		fnAction(defaultfnAction, null);
	}

};
function fnModalDialog(message){
	var dialog = document.getElementById('fn-modaldialog');
	if (!dialog){
		dialog = document.createElement('div');
		dialog.setAttribute('id', 'fn-modaldialog');
		document.body.appendChild(dialog);
	}
	dialog.innerHTML = '<span>' + message + '</span>';
	dialog.style.visibility = message ? 'visible' : 'hidden';
};

function fnPostXML(xml){
	var imageFile	= this.location.hash.replace('#','p');
	if (!imageFile) return alert(FN_SAVE_FAIL);	
	var actVerbs = { add: 'add', edit: 'modify', del: 'delete' };
	var postContent = 'func=PhotoNote&uid='+_uno+'&aid='+_aid+'&pid='+_pid+'&action='+actVerbs[fnActionVerb]+'&xml='+escape(xml)+"&fmt=html";	
	if (fnDebugMode) alert('SENDING TO FNSERVER:\n\n' + postContent);
	fnSetCache(imageFile);
	fnXMLHTTP.open('POST', fnServer, true);
	fnXMLHTTP.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
	fnXMLHTTP.setRequestHeader('Content-length', postContent.length);
	fnXMLHTTP.onreadystatechange = function(){
		if (fnXMLHTTP.readyState == 4) fnEditComplete(true);
	};
	fnModalDialog(FN_SAVE_WAIT);
	fnXMLHTTP.send(postContent);
};


function fnSortElement(){
	var photo = document.getElementById('photo');
	var container = photo.parentNode;
	var areadiv	= container.getElementsByTagName('div');
	var areaarr = Array();
	var j=0;
	var temp;

	for (var i=0; i<areadiv.length; i++)
	{
		// 取出排序元素
		var thisarea = areadiv.item(i);
		if (thisarea.className == 'fn-area' || thisarea.className == 'fn-area-editing')
		{
			areaarr[j] = thisarea;
			j++;
		}
	}
	for (var k=0; k<areaarr.length; k++)
	{
		// 直接选择排序
		var m=k;
		for (var n =k+1; n<areaarr.length; n++ )
		{
			if (parseInt(areaarr[n].style.width) * parseInt(areaarr[n].style.height) 
				> parseInt(areaarr[m].style.width) * parseInt(areaarr[m].style.height))
			{
				m = n;
			}
		}
		if (m != k)
		{
			temp = areaarr[k];
			areaarr[k] = areaarr[m];
			areaarr[m] = temp;
		}
	}
	for (var o=0; o<areaarr.length; o++)
	{
		areaarr[o].style.zIndex=100+o;
	}

}

function fnGetTimeStamp(){
	var timeStamp = Date.parse((new Date()).toString());
	return timeStamp;
}

function fnSetRotateTime(photoid){
	if (photoid in RotateTime){
		RotateTime[photoid] = RotateTime[photoid]+1;
	}else{
		RotateTime[photoid] = 1;
	}
}

function fnCheckRotateTime(photoid){
	if (photoid in RotateTime){
		return RotateTime[photoid];
	}
	return false;
}

function fnSetCache(photoid){
	var timeStamp = fnGetTimeStamp();
	photoCache[photoid] = timeStamp;
}


function fnCheckCache(photoid){
	if (photoid in photoCache){
		return photoCache[photoid];
	}
	return false;
}

function fnGetXML( postContent ){
	if (fnDebugMode) alert('SENDING TO FNSERVER:\n\n' + fnServer + postContent);

	fnXMLHTTP.open('GET', fnServer + postContent, true);
	fnXMLHTTP.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
	fnXMLHTTP.setRequestHeader('Content-length', postContent.length);
	fnXMLHTTP.onreadystatechange = function()
	{
		if (fnXMLHTTP.readyState == 4) fnGetComplete(true);
	};	
	fnModalDialog(FN_SAVE_WAIT);
	fnXMLHTTP.send(null);

}

function fnEditComplete(ok){
	// Called once the server responds post-Save operation. 'ok' indicates success.
	var resText	= fnXMLHTTP.responseText;
	 if (fnDebugMode) {
		 alert('RECEIVED FROM FNSERVER:\n\n' + fnXMLHTTP.responseText);	
	 }
	if (!ok || !resText.match('success=ok')){		
		fnModalDialog('');
		if (resText.match('needlogin')){
			alert(FN_NEEDLOGIN);
		}else if (resText.match('disallowed')){
			alert(FN_DISALLOWED);
		}else if (resText.match('black')){
			alert('你目前被該用戶設定為壞友，無法新增便利貼!!');
		}else{		
			alert(FN_SAVE_FAIL);
		}	
		if (fnActionVerb == 'del'){
			fnEditingData = null;
			fnAction(defaultfnAction, null);
		}
	}else with (fnEditingData){		
		if (fnActionVerb == 'add' || fnActionVerb == 'edit'){
			if(resText.match('noteid=')){
				var pos = resText.indexOf('noteid=');
				var newNoteId	= resText.substr(pos+'noteid='.length);
			}			
			var fields = area.getElementsByTagName('span');
			for (var n = 0; n < fields.length; n++){
				var field = fields.item(n);
				if (field.className == 'fn-note-id') field.title = newNoteId;
				if (field.className == 'fn-note-author' || field.className == 'fn-note-author-owner') field.innerHTML = newAuthor;
				if (field.className == 'fn-note-content' || field.className == 'fn-note-content-owner') field.innerHTML = fnNl2Br(fnEscapeHTML(newContent,'Escape'));
			}			
			fnEditUISet(false);			
			fnSortElement();
		}else{			
			area.parentNode.removeChild(area);
		}
		fnModalDialog(FN_SAVE_SUCCESS);
		setTimeout('fnModalDialog("")', 500);
		fnAction(defaultfnAction, null);
		fnEditingData = null;
		activeNoteId	= null;
		isModify = false; // enable keydown
	}	
};


function fnGetComplete(ok){
	var photo = document.getElementById('photo');
	var container = photo.parentNode;
	var strxml = fnXMLHTTP.responseXML;
	if (fnDebugMode) {
		alert('RECEIVED FROM FNSERVER:\n\n' + fnXMLHTTP.responseText);	
	}
	if (!ok || !fnXMLHTTP.responseText){	
		fnModalDialog('');		
		alert(FN_SAVE_FAIL);
	}else {
		if (fnXMLHTTP.responseText.match('success=over')) {
			fnModalDialog('');			
			return;
		}

		fnDelAllnotes(container);
		fnParseXml(strxml);

		// All successful actions: let the user know it's OK, and reset the control bar,
		// and clear the editing data store.
		fnModalDialog('');
		fnAction(defaultfnAction, null);
		fnEditingData = null;
	}
 // Reload the page - Added temporarily
 // window.location.reload();
};


function fnParseXml(strxml){
	var photo = document.getElementById('photo');
	var container = photo.parentNode;
	var imgPathExt	= '';
	var startzIindex = 100; // default z-index

	var photoArray	= strxml.getElementsByTagName('photo');
	var photohash	= strxml.getElementsByTagName('photohash')[0].firstChild.nodeValue;
	var photopath	= strxml.getElementsByTagName('photopath')[0].firstChild.nodeValue;
	var photowidth	= strxml.getElementsByTagName('photowidth')[0].firstChild.nodeValue;
	var photoheight	= strxml.getElementsByTagName('photoheight')[0].firstChild.nodeValue;
	
	var newphotohash = 'p'+photohash;
	container.id = newphotohash;
	container.style.width	= photowidth + 'px';
	container.style.height	= photoheight + 'px';
	var ver = fnCheckRotateTime(newphotohash);
	if (ver){
		imgPathExt	= '?ver='+ver; 
	}
	photo.src				= photopath+imgPathExt;
	photo.style.width		= photowidth + 'px';
	photo.style.height		= photoheight + 'px';

	var relateArray = strxml.getElementsByTagName('relateid');
	if (relateArray[0].getElementsByTagName('photoprev')[0].firstChild){
		var photoprev	= relateArray[0].getElementsByTagName('photoprev')[0].firstChild.nodeValue;
	}else{
		var photoprev	= null;
	}
	if (relateArray[0].getElementsByTagName('photonext')[0].firstChild){
		var photonext	= relateArray[0].getElementsByTagName('photonext')[0].firstChild.nodeValue;
	}else{
		var photonext	= null;
	}
	var photofirst	= relateArray[0].getElementsByTagName('photofirst')[0].firstChild.nodeValue;
	var photolast	= relateArray[0].getElementsByTagName('photolast')[0].firstChild.nodeValue;
	window.current_pic	= photohash;
	window.first_pic = photofirst;
	window.prev_pic = photoprev;
	window.next_pic = photonext;
	window.last_pic = photolast;


	var noteArray = strxml.getElementsByTagName('entry');
	if(noteArray.length != 0){
		for(j=0;j<noteArray.length;j++){
		  var id = noteArray[j].getElementsByTagName('notehash')[0].firstChild.nodeValue;
		  var l = noteArray[j].getElementsByTagName('left')[0].firstChild.nodeValue;
		  var t = noteArray[j].getElementsByTagName('top')[0].firstChild.nodeValue;
		  var w = noteArray[j].getElementsByTagName('width')[0].firstChild.nodeValue;
		  var h = noteArray[j].getElementsByTagName('height')[0].firstChild.nodeValue;
		  var content = noteArray[j].getElementsByTagName('content')[0].firstChild.nodeValue;
		  var authorname = noteArray[j].getElementsByTagName('authorname')[0].firstChild.nodeValue;
		  var authorid = noteArray[j].getElementsByTagName('authorid')[0].firstChild.nodeValue;
		  fnNewNote(container,l,t,w,h,id,content,authorname,authorid);
		}
	}
}

function fnNewNote(container,l,t,w,h,id,content,authorname,authorid){
	var newArea = document.createElement('div');
	w = (isIE) ? w : w-borderoffset; // for firefox
	h = (isIE) ? h : h-borderoffset;
	newArea.className = 'fn-area';
	newArea.style.left = l + 'px';
	newArea.style.top  = t + 'px';
	newArea.style.width = w + 'px';
	newArea.style.height = h + 'px';
	newArea.style.zIndex = startzIindex++;
	var newNote = document.createElement('div');
	newNote.className = 'fn-note';
	newArea.appendChild(newNote);

	// Create note elements.
	var newID = document.createElement('span');
	newID.className = 'fn-note-id';
	newID.title = id;
	newNote.appendChild(newID);

	// create table
	var newTable = document.createElement('table');
	newTable.className = 'fn-note-text-table';
	newTable.cellPadding  = '0';
	newTable.cellSpacing  = '0';
	newTable.style.border = '0';
	newTable.style.borderStyle  = 'solid';
	// tbody
	var TableBody = document.createElement("tbody");
	// line1
	var tr1 = document.createElement('tr');
	var tdtl = document.createElement('td');
	tdtl.style.width = '5px';
	tdtl.style.height = '5px';
	// top left image
	var imgtl = document.createElement('img');
	imgtl.style.width = '5px';
	imgtl.style.height = '5px';
	imgtl.src='/images/note_yellow_tl.gif';
	tdtl.appendChild(imgtl);
	tr1.appendChild(tdtl);
	// top middle
	var tdtm = document.createElement('td');
	tdtm.className = "fn-note-td";
	tr1.appendChild(tdtm);
	// top right 
	var tdtr = document.createElement('td');
	tdtr.style.width = '5px';
	tdtr.style.height = '5px';

	// top right image
	var imgtr = document.createElement('img');
	imgtr.style.width = '5px';
	imgtr.style.height = '5px';
	imgtr.src='/images/note_yellow_tr.gif';
	tdtr.appendChild(imgtr);

	tr1.appendChild(tdtr);
	// prase line1
	TableBody.appendChild(tr1);
	
	// line2
	var tr2 = document.createElement('tr');
	var tdml = document.createElement('td');
	tdml.className = 'fn-note-td';
	tdml.style.width = '5px';
	tr2.appendChild(tdml);
	// middle middle
	var tdmm = document.createElement('td');
	tdmm.className = 'fn-note-td';
	//...

	var newContent = document.createElement('span');
	newContent.className = 'fn-note-content-owner';
	newContent.innerHTML = fnNl2Br(content);
	tdmm.appendChild(newContent);

	var newAuthor = document.createElement('span');
	if (authorid == _uno){
		newAuthor.className = 'fn-note-author-owner';
	}else{
		newAuthor.className = 'fn-note-author';
	}
	newAuthor.innerHTML = authorname;
	tdmm.appendChild(newAuthor);

	tr2.appendChild(tdmm);
	// middle right
	var tdmr = document.createElement('td');
	tdmr.className = 'fn-note-td';
	tdmr.style.width = '5px';
	tr2.appendChild(tdmr);
	// prase line2
	TableBody.appendChild(tr2);

	// line3
	var tr3 = document.createElement('tr');
	var tdbl = document.createElement('td');
	tdbl.style.width = '5px';
	tdbl.style.height = '5px';
	// bottom left image
	var imgbl = document.createElement('img');
	imgbl.style.width = '5px';
	imgbl.style.height = '5px';
	imgbl.src='/images/note_yellow_bl.gif';
	tdbl.appendChild(imgbl);
	tr3.appendChild(tdbl);
	// bottom middle
	var tdbm = document.createElement('td');
	tdbm.className = "fn-note-td";
	tr3.appendChild(tdbm);
	// bottom right 
	var tdbr = document.createElement('td');
	tdbr.style.width = '5px';
	tdbr.style.height = '5px';

	// bottom right image
	var imgbr = document.createElement('img');
	imgbr.style.width = '5px';
	imgbr.style.height = '5px';
	imgbr.src='/images/note_yellow_br.gif';
	tdbr.appendChild(imgbr);
	tr3.appendChild(tdbr);
	// prase line1
	TableBody.appendChild(tr3);

	newTable.appendChild(TableBody);

	newNote.appendChild(newTable);

	var newAuthorId = document.createElement('span');
	newAuthorId.className = 'fn-note-authorid';
	newAuthorId.title = authorid;
	newNote.appendChild(newAuthorId);

	// Add newArea to document
	container.appendChild(newArea);

}

// INITIALISATION CODE:
if (document.getElementById){
	// Create a new DragResize() object, and set it up.
	// We apply to the whole document to interoperate with blinds.
	var dragresize = new DragResize('dragresize', { allowBlur: false });
	dragresize.isElement = function(elm){
		if (!(/(add|edit)/).test(fnActionVerb)) return false;
		if ((/fn-area-editing/).test(elm.className)){
			var container = fnGetContainer(elm);
			this.maxRight = (isIE) ? container.offsetWidth : container.offsetWidth-borderoffset;
			this.maxBottom = (isIE) ? container.offsetHeight : container.offsetHeight -borderoffset;
			// (container.offsetHeight -3) without dtd
			return true;
		}
	};
	dragresize.isHandle = function(elm){
		if (!(/(add|edit)/).test(fnActionVerb)) return false;
		if ((/fn-area-editing/).test(elm.className)) return true;
	};
	dragresize.ondragfocus = function(){
		this.element.style.cursor = 'move';
	};
	dragresize.ondragblur = function(){
		this.element.style.cursor = 'default';
	};
	dragresize.apply(document);
	// *** Global event handler setup ***
	// These are global, rather than assigned to individual notes, to work with the "blind" code.
	// Note show/hide events.
	addEvent(document, 'mouseover', new Function('e', 'fnMouseOverOutHandler(e, 1)'));
	addEvent(document, 'mouseout', new Function('e', 'fnMouseOverOutHandler(e, 0)'));
	// Creation/editing/deletion events.
	if (document.createElement && document.documentElement){	
		addEvent(document, 'click', fnClickHandler);
	}
}