﻿if (window.ActiveXObject && !window.XMLHttpRequest) {

	window.XMLHttpRequest = function() {
		return new ActiveXObject((navigator.userAgent.toLowerCase().indexOf('msie 5') != -1) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP');
  	};
}

function getTarget(e) {

	if (!e) var e = window.event;
	if (e.target) 
		targ = e.target;
	else if (e.srcElement) 
		targ = e.srcElement;
	return targ; 
}

function trim(str) {
   return str.replace(/^\s*|\s*$/g,"");
}

function nl2br(str) {
	//alert("nl2br");
	return str.replace(/\n/ig, '<br>');
}
function br2nl(str) {
	//alert('great');
	return str.replace(/<br>/ig, '\n');
}

ppfsAPI = {

	callMethod : function (apiMethod, params, attempts) {
	
		//var restURLRoot = "http://localhost/petsfuneral/rest.php";
		var restURLRoot = "http://www.petsfuneral.com.hk/rest";
		
		var restURL = ""; 

		var req = new XMLHttpRequest();
		var sucess = false; 
			
//		if (!document.all) 
			//netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserRead');
			
		params.method = apiMethod; 
			
		for (var p in params) {
			restURL += '&' + p + '=' + encodeURIComponent(params[p]);
		}
			
		var attempts = (attempts == undefined) ? 1 : attempts;

		req.onreadystatechange = function() {
			
			if (req.readyState == 4) {
				if (trim(req.responseText) == '' && attempts<2) {
					attempts++;
					req.abort();
					//ppfsAPI.callMethod(apiMethod, params, attempts);

				} else {
					
					//alert(req.responseXML);
					//alert("hello" + trim(req.responseText) + "h" + attempts);
					
					//flickrAPI.handleResponse(, APIMethod, params, req.responseText, listener);
				}
			}
		}
			
		req.open('POST', restURLRoot);
		req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		//alert("send xml request" + restURL);
		req.send(restURL);


	}
}

EventFactory = {

	fix : function(event) {
		if (!event) event = window.event

		if (event.target) {
			if (event.target.nodeType == 3) event.target = event.target.parentNode
		} else if (event.srcElement) {
			event.target = event.srcElement
		}

		return event
	},

	register : function(element, type, func) {

		if (element.addEventListener) {
			element.addEventListener(type, func, false)
		} else if (element.attachEvent) {
			if (!element._listeners) element._listeners = new Array()
			if (!element._listeners[type]) element._listeners[type] = new Array()
			var workaroundFunc = function() {
				func.apply(element, new Array())
			}
			element._listeners[type][func] = workaroundFunc
			element.attachEvent('on' + type, workaroundFunc)
		}
	},

	unregister : function(element, type, func) {
		if (element.removeEventListener) {
			element.removeEventListener(type, func, false)
		} else if (element.detachEvent) {
			if (element._listeners 
					&& element._listeners[type] 
					&& element._listeners[type][func]) {

				element.detachEvent('on' + type, 
						element._listeners[type][func])
			}
		}
	}
}

FormFactory = {
	
	
	
	getFormDiv : function (node, form_element) {
	
		if(!node.form_div) {
			node.form_div= document.createElement('div');
			node.form_div.id = 'form_div';
			node.parentNode.insertBefore(node.form_div, node);
			node.form_div.display_div = node;
		}
	
		var formHTML = '<form id="instance_form" onsubmit="return false;">';
		formHTML+= this.Elements[form_element](node);
		node.form_div.innerHTML = formHTML +'<br \/><input type="submit" class="button" value="OK" \/>&nbsp;&nbsp;<input type="button" onclick="HandlerFactory.handlers.endEditing( this.form.parentNode.nextSibling, this.form);"  class="button" value="Cancel" \/><\/form>';
		return node.form_div;
	},
	
	Elements : {
		
		setSelectionID : function (id) {
			this.selectionID = id;
		}, 
		
		textarea : function(node) {

			var formHTML = '<textarea name="content" rows="7" id="input_' +  node.id + '" >' + br2nl(trim(node.innerHTML)) + '<\/textarea>';
			return formHTML; 
		},

		date : function(node) {
			var date_div = document.getElementById('edit_date');
			return date_div.innerHTML; 
		}, 
	 
		text : function(node) {

			var formHTML = '<input name="content" type="text" id="input_' +  node.id + '" value="' + node.innerHTML + '" >';
			return formHTML;
		},
		
		selection : function(node) {
			var species_div = document.getElementById(this.selectionID);
			return species_div.innerHTML; 
		}
	}
}

HandlerFactory = {

	handlers : {

		ids : new Array(),
		
		setParams : function (params) {
			this.params = params; 
		},
		
		setBgcolor : function (bgcolor) {
			this.bgcolor = bgcolor; 
		},
		
		setID : function(div_id, id) {
			this.ids[div_id] = id; 
		},
		
		viewID : function() {
			alert("view id" + this.id); 
		},
		
		sendRequest : function (id, content) {
			
			var params = new Array();
			params[this.params.getParam(id)] = content; 
			params.id = this.ids[id];

			ppfsAPI.callMethod(this.params.getMethod(id), params);
		}, 
		
		endEditing : function(edit_div, form, display) {

			form.style.display = 'none';
			if (!display)
				display = 'inline';
			edit_div.style.display = display;
			//edit_div.style.backgroundColor = HandlerFactory.handlers.bgcolor;
			edit_div.style.background = 'none';			
			div.style.filter = 'alpha(opacity=100)';
			div.style.opacity = '1';
						
		},
		
		unHighLight : function(e) {
	
			var div = getTarget(e); 
			//div.style.backgroundColor = HandlerFactory.handlers.bgcolor;
			div.style.background = 'none';
			div.style.filter = 'alpha(opacity=100)';
			div.style.opacity = '1';

		},
		
		highLight : function(e) {
	
			var div = getTarget(e); 
			div.style.backgroundColor = HandlerFactory.handlers.bgcolor;
//			div.style.filter.alpha.opacity = 30;
			div.style.filter = 'alpha(opacity=30)';
			//div.style.MozOpacity = 0.3;
			div.style.opacity = '0.3';
		},
		
		selection: {
			
			startEditing : function (e) {
					
				HandlerFactory.div_id = getTarget(e); 
				var form_div = FormFactory.getFormDiv(HandlerFactory.div_id, 'selection');
				var form = form_div.firstChild;

				var content = HandlerFactory.div_id.innerHTML; 
				//alert(form.edit_species.options[0].text); 

				for (var i=0; i<form.elements[0].options.length; i++) {
					if (form.elements[0].options[i].text == content)
						form.elements[0].options[i].selected = true; 
				}

				HandlerFactory.div_id.style.display = 'none';
				form_div.style.display = 'inline';
				
				EventFactory.register(form, 'submit', HandlerFactory.handlers['selection'].saveChanges); 
			},
			
			saveChanges : function() {
				
				var selectedIndex = 0; 
				var selectionID = this.selectionID; 
				
				for (var i=0; i<this.elements[0].options.length; i++) {
					if (this.elements[0].options[i].selected == true) 
						selectedIndex = i;
					
				}
				var edit_div = this.parentNode.nextSibling;
				
//				alert(form.edit_species.options[selectedIndex].text);
				HandlerFactory.handlers.sendRequest(edit_div.id, this.elements[0].options[selectedIndex].value);				
				edit_div.innerHTML.innerHTML = '<i>儲存中...</i>';				

				edit_div.innerHTML = this.elements[0].options[selectedIndex].text;
				HandlerFactory.handlers.endEditing(edit_div, this);


			}
		},
		date: {
			startEditing : function () {
					

				var form_div = FormFactory.getFormDiv(this, 'date');
				var form = form_div.firstChild;

				var date = this.innerHTML; 
				
				date_split = date.split("-"); 

				var year = date_split[0]; 
				var month = date_split[1]; 
				var day = date_split[2]; 

				for (var i=0; i<form.edit_y.options.length; i++) {
					if (form.edit_y.options[i].value == year)
						form.edit_y.options[i].selected = true; 
				}
			
				for (var i=0; i<form.edit_m.options.length; i++) {

					if (form.edit_m.options[i].value == month)
						form.edit_m.options[i].selected = true; 
				}
				
				for (var i=0; i<form.edit_d.options.length; i++) {
					if (form.edit_d.options[i].value == day)
						form.edit_d.options[i].selected = true; 
				}

				this.style.display = 'none';
				form_div.style.display = 'inline';
				
				EventFactory.register(form, 'submit', HandlerFactory.handlers['date'].saveChanges); 
			},
			
			saveChanges : function() {
				
				var edit_div = this.parentNode.nextSibling;

				var newDate = this.edit_y.value + "-" + this.edit_m.value + "-" + this.edit_d.value ; 
				edit_div.innerHTML = '<i>儲存中...</i>';				
				HandlerFactory.handlers.sendRequest(edit_div.id, newDate);
				edit_div.innerHTML =  newDate;  
				HandlerFactory.handlers.endEditing(edit_div, this);


			}
		},
		
		textarea: {
		
			startEditing : function (e) {
					
				HandlerFactory.div_id = getTarget(e); 
				var form_div = FormFactory.getFormDiv(HandlerFactory.div_id, 'textarea');

				HandlerFactory.div_id.style.display = 'none';
				//form_div.style.display = 'inline';
				form_div.style.display = 'block';
		
				var form = form_div.firstChild;
				form.content.focus();
				form.content.select();		
				EventFactory.register(form, 'submit', HandlerFactory.handlers['textarea'].saveChanges); 
			},
			
			saveChanges : function() {
				

				var edit_div = this.parentNode.nextSibling;
			
				edit_div.innerHTML = '<i>儲存中...</i>';
				HandlerFactory.handlers.sendRequest(edit_div.id, nl2br(this.content.value));				

				edit_div.innerHTML = nl2br(this.content.value);
				HandlerFactory.handlers.endEditing(edit_div, this, 'block');
				

			}
		},
			
		text: {
		
			startEditing : function () {

				var form_div = FormFactory.getFormDiv(this, 'text');
				this.style.display = 'none';

				form_div.style.display = 'inline';
				//alert(handler);
				var form = form_div.firstChild;
				form.content.focus();
				form.content.select();		
				EventFactory.register(form, 'submit', HandlerFactory.handlers['text'].saveChanges); 
						
			},
			
			saveChanges : function() {
				

				var edit_div = this.parentNode.nextSibling;
				
				HandlerFactory.handlers.sendRequest(edit_div.id, this.content.value);
				edit_div.innerHTML = '<i>儲存中...</i>';
				edit_div.innerHTML = this.content.value;
				HandlerFactory.handlers.endEditing(edit_div, this);

			}
			
			
		}
		
	}
	
	
}

InstanceEdit = {

	makeEditableText : function(div_id, id) {
		this._makeEditable(div_id, id, 'text'); 
	},

	makeEditableTextarea : function(div_id, id) {
		this._makeEditable(div_id, id, 'textarea'); 
	},

	makeEditableDate : function(div_id, id) {
		this._makeEditable(div_id, id, 'date'); 
	},

	makeEditableSelection : function(div_id, id, selection) {
	
		FormFactory.Elements.setSelectionID(selection); 
		this._makeEditable(div_id, id, 'selection'); 
 	},

	_makeEditable : function(div_id, id, type) {
	
		var editable = document.getElementById(div_id);
		oHandlerFactory = ppf.HandlerFactory();
		oHandlerFactory.handlers.setID(div_id, id)
		EventFactory.register(editable, 'click', oHandlerFactory.handlers[type].startEditing); 
		EventFactory.register(editable, 'mouseover', oHandlerFactory.handlers.highLight); 
		EventFactory.register(editable, 'mouseout', oHandlerFactory.handlers.unHighLight); 
		
	},
	
	showEditable : function() {
		var id_list = ""; 
		for (var i=0; i<this.editables.length; i++)
			id_list += this.editables[i].innerHTML;
		//alert(id_list);
	}
}

var ppf = {
	InstanceEdit : function() {
		if (!InstanceEdit) throw "Instance edit is not inited";
		return InstanceEdit;
	},
	HandlerFactory : function() {
		if (!HandlerFactory) throw "Handler Factory is not inited";
		return HandlerFactory;
	}
	
}


