//alert("alert"+editableColor);
//var $ = YAHOO.util.Dom.get;

/*var editableColor = "<?php echo $editColor; ?>";
var notEditableColor = "<?php echo $notEditColor; ?>";
var pageID = <?php echo $page->pageID; ?>;*/


function init() {
	
	var loadTimes = 1;
	var elements = YAHOO.util.Dom.getElementsByClassName('editable');
	YAHOO.util.Event.addListener(elements, 'click', editHandler);
	YAHOO.util.Event.addListener(elements, 'mouseover', showAsEditable);
	YAHOO.util.Event.addListener(elements, 'mouseout', showAsNotEditable);
	
	if(document.getElementById("topbar") != null) {
		document.getElementById("topbar").style.display = "block";
	}
	/*for(var i = 0; i < elements.length; i++) {
		$(elements[i]).wrap("<form id=\"editForm_"+elements[i].id+"\" style=\"margin:0px; z-index:30;\"></form>");
	}*/
	
	checkElements();
	//Files edit
	var fileElements = YAHOO.util.Dom.getElementsByClassName('editfile');
	YAHOO.util.Event.addListener(fileElements, 'click', editFileHandler);
	YAHOO.util.Event.addListener(fileElements, 'mouseover', showFileAsEditable);
	YAHOO.util.Event.addListener(fileElements, 'mouseout', showFileAsNotEditable); 

	/*for(var i = 0; i < fileElements.length; i++) {
		$(fileElements[i]).wrap("<form id=\"editForm_"+fileElements[i].id+"\"></form>");
	}
	*/
	
	function checkElements() {
		
		
		var databaseAreas = totalAreas;

		if(databaseAreas < elements.length) {
			var startPoint = databaseAreas + 1;
			
			for(var i = startPoint; i <= elements.length; i++) {
				var sUrl = dir_depth+"js/insertAreas.php?pid="+pageID+"&aid="+i;
				var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, {
					
					success: function(o) {
							var resID = o.responseText;

							for(var i = 0; i < elements.length; i++) {
								var eID = elements[i].id.split("_");

								if(eID[1] == resID) {
									elements[i].innerHTML = "Need Content";	
								}
							}
					  },
					  
					  failure: function(o) { alert("Error inserting new editable areas"); },
					  
					  scope: this
																	 
				}); 
			}
		}
	}

	function showAsEditable(e) {
		YAHOO.util.Event.preventDefault(e);
		YAHOO.util.Event.stopPropagation(e);
		
		//YAHOO.util.Dom.setStyle(this,'background-color', editableColor);
		
		var anim = new YAHOO.util.ColorAnim(this, { backgroundColor:{to:editableColor} }, .5, YAHOO.util.Easing.easeOut);
					
		anim.animate();
	
	}

	function showAsNotEditable(e) {
		YAHOO.util.Event.preventDefault(e);
		YAHOO.util.Event.stopPropagation(e);
		
		//YAHOO.util.Dom.setStyle(this,'background-color', notEditableColor);
		
		var anim = new YAHOO.util.ColorAnim(this, { backgroundColor:{to:notEditableColor} }, .5, YAHOO.util.Easing.easeOut);
					
		anim.animate();
	}
	
	function showFileAsEditable(e) {
		YAHOO.util.Event.preventDefault(e);
		YAHOO.util.Event.stopPropagation(e);
		YAHOO.util.Dom.setStyle(this,'border', 'solid 1px');
		YAHOO.util.Dom.setStyle(this,'border-color', editableColor);
		
		//var anim = new YAHOO.util.ColorAnim(this, { backgroundColor:{to:editableColor} }, .5, YAHOO.util.Easing.easeOut);
					
		//anim.animate();
	
	}

	function showFileAsNotEditable(e) {
		YAHOO.util.Event.preventDefault(e);
		YAHOO.util.Event.stopPropagation(e);
		YAHOO.util.Dom.setStyle(this,'border', '0px');
		YAHOO.util.Dom.setStyle(this,'border-color', notEditableColor);
		
		//var anim = new YAHOO.util.ColorAnim(this, { backgroundColor:{to:notEditableColor} }, .5, YAHOO.util.Easing.easeOut);
					
		//anim.animate();
	}
	
	function editHandler(e) {
		YAHOO.util.Event.preventDefault(e);
		YAHOO.util.Event.stopPropagation(e);
		
		//return the HTML element of the event took place
		var target = (e.srcElement) ? e.srcElement : e.target;
		var area = target.id.split("_");
		var str = target.innerHTML;
		if(loadTimes == 1) {
			str = str.replace(/<br>\n/g,"\n"); // firefox
			str = str.replace(/<br>/gi,"\n"); // ie
			
		} else {
			str = str.replace(/<br>/gi,"\n");			
		}
		loadTimes++;
		// Specify pixel width and height when the area is not scrollable
		var widthPixels = target.offsetWidth;
		var heightPixels = target.offsetHeight - 30;
		var usePixelDimensions = true;
		var tempTarget = target;
		do {
			//alert("tempTarget.id = " + tempTarget.id + ", tempTarget.style.height = " + tempTarget.style.height);
			if (tempTarget.id == "scroll") {
				usePixelDimensions = false;
				break;
			}
			tempTarget = tempTarget.parentNode;
		} while (tempTarget != null)
		
		//var rows 
		target.__originalText = str;
		//target.innerHTML = str;
		var editField = '<div id="'+target.id+'_editor"><form id="editForm_'+target.id+'" style=\"margin:0px;\">';
		editField += '<textarea id="' + target.id + '_edit" name="edit" rows="5" cols="50"';
		editField += ' style="';
		editField += 'width: ' + widthPixels + 'px;';
		if (usePixelDimensions) {
			editField += ' height: '+heightPixels+'px;';
		}
		editField += '"';
		editField += '>'+str+'</textarea>';
		editField += '<br /><input type="button" id="'+target.id+'_save" value="SAVE" /> or <input type="button" id="'+target.id+'_cancel" value="CANCEL" />';
		editField += '<input type="hidden" name="pageid" value="'+pageID+'" /><input type="hidden" name="areaid" value="'+area[1]+'" />';
		editField += '</form></div>';

		$(editField).insertAfter(target);
		
		//YAHOO.ext.DomHelper.insertHtml('afterEnd', target, editField);
		
		
		//$(target.id+'_editor').appendTo("<form></form>");
			
		YAHOO.util.Event.addListener(target.id+'_save', 'click', function() {

			var objForm = document.getElementById("editForm_"+target.id);//require a form with id
			YAHOO.util.Connect.setForm(objForm);
			YAHOO.util.Connect.asyncRequest('POST', dir_depth+"js/update.php", 
			{
				success: function(o) {
					target.innerHTML = '<img src="'+dir_depth+'js/loading.gif" /> Saving...';
					
					str = o.responseText;
					str = str.replace(/\n/g,"<br>");
					
					target.innerHTML = str;
					$('#'+target.id + '_editor').remove();
					//$('#editForm_'+target.id).remove();
					//target.style.display = 'block';
					YAHOO.util.Dom.setStyle(elements,'display', 'block');
					YAHOO.util.Dom.setStyle(fileElements,'display', 'block');
					//YAHOO.util.Event.addListener(elements, 'click', editHandler);
					//YAHOO.util.Event.addListener(elements, 'mouseover', showAsEditable);
					//YAHOO.util.Event.addListener(elements, 'mouseout', showAsNotEditable);
					//setTimeout("window.location.reload(true)",200);
					//;
					var doScrollUpdate = false;
					var tempTarget = target;
					do {
						if (tempTarget.id == "wn") {
							doScrollUpdate = true;
							break;
						}
						tempTarget = tempTarget.parentNode;
					} while (tempTarget != null)
					if (doScrollUpdate) {
						if (updateScroll != null) {
							updateScroll();
						}
					}
				},
				failure: function(o) {
					target.innerHTML = 'Sorry, the update failed';
	                $('#'+target.id + '_editor').remove();
					//$('#editForm_'+target.id).remove();
				    //target.style.display = 'block';
					YAHOO.util.Dom.setStyle(elements,'display', 'block');
					YAHOO.util.Dom.setStyle(fileElements,'display', 'block');
					//window.location.reload(true);
				},
				scope: this 
			
			});
		
		});
		YAHOO.util.Event.addListener(target.id+'_cancel', 'click', function() {
			//var editField = document.getElementById(target.id + "_edit");
			//str = editField.value;
			str = target.__originalText;
			str = str.replace(/\n/g,"<br>");
			//str = str.replace(/-n-/g,"<BR>");
			target.innerHTML = str;
            $('#'+target.id + '_editor').remove();
			//$('#editForm_'+target.id).remove();
    		//target.style.display = 'block';
			YAHOO.util.Dom.setStyle(elements,'display', 'block');
			YAHOO.util.Dom.setStyle(fileElements,'display', 'block');
			//YAHOO.util.Event.addListener(elements, 'click', editHandler);
			//YAHOO.util.Event.addListener(elements, 'mouseover', showAsEditable);
			//YAHOO.util.Event.addListener(elements, 'mouseout', showAsNotEditable);
		
		});
		
		//YAHOO.util.Dom.setStyle(target,'display', 'none');
		YAHOO.util.Dom.setStyle(elements,'display', 'none');
		YAHOO.util.Dom.setStyle(fileElements,'display', 'none');
		//YAHOO.util.Dom.setStyle(target.id+'_editor', 'z-index', 40); 
		//YAHOO.util.Dom.removeClass(elements, 'editable');  
		//YAHOO.util.Event.removeListener(elements, 'click');
		//YAHOO.util.Event.removeListener(elements, 'mouseover');
		//YAHOO.util.Event.removeListener(elements, 'mouseout');
	}
	
	function editFileHandler(e) {
		YAHOO.util.Event.preventDefault(e);
		YAHOO.util.Event.stopPropagation(e);
		
		//return the HTML element of the event took place
		var target = (e.srcElement) ? e.srcElement : e.target;

		if(target.id != "") { //force to check id exists - buggy javascript
			var editField = '<div id="'+target.id+'_editor"><form id="editForm_'+target.id+'" style=\"margin:0px;\">New File: <input name="' + target.id + '_edit" type="file" /><br /><input type="button" id="'+target.id+'_save" value="UPLOAD" /> or <input type="button" id="'+target.id+'_cancel" value="CANCEL" /><input type="hidden" name="parentid" value="'+parentID+'" /><input type="hidden" name="pageid" value="'+pageID+'" /></form></div>';
	
			$(editField).insertAfter(target);
	
			//YAHOO.ext.DomHelper.insertHtml('afterEnd', target, editField);
			
			//insertAfter(editField, target);
			//$(target.id+'_editor').appendTo("<form></form>");
				
			YAHOO.util.Event.addListener(target.id+'_save', 'click', function() {
	
				var objForm = document.getElementById("editForm_"+target.id);//require a form with id
				YAHOO.util.Connect.setForm(objForm, true);
				YAHOO.util.Connect.asyncRequest('POST', dir_depth+"js/updateFile.php", 
				{
					upload: function(o) {
						
						if(o.responseText.match("success")) {
							target.src = dir_depth+'js/loading.gif';
							target.style.display = "block";
							$('#'+target.id + '_editor').remove();
							window.location.reload(true);
							
							//YAHOO.util.Dom.setStyle(elements,'display', 'block');
							//YAHOO.util.Dom.setStyle(fileElements,'display', 'block');
						}
						else if(o.responseText.match("fail")) {
							//window.location.reload(true);
							alert("fail");
							//$('#'+target.id + '_editor').remove();
							//YAHOO.util.Dom.setStyle(elements,'display', 'block');
							//YAHOO.util.Dom.setStyle(fileElements,'display', 'block');
						}
						//$('#'+target.id + '_editor').remove();
						//target.style.display = 'block';
					
					}
				});
			
			});
			YAHOO.util.Event.addListener(target.id+'_cancel', 'click', function() {
				//target.style.display = 'block';
				$('#'+target.id + '_editor').remove();
				YAHOO.util.Event.addListener(fileElements, 'click', editFileHandler);
				YAHOO.util.Dom.setStyle(elements,'display', 'block');
				YAHOO.util.Dom.setStyle(fileElements,'display', 'block');
				
			});
			//YAHOO.util.Event.stopEvent(e);
			//YAHOO.util.Dom.setStyle(target,'display', 'none'); //Must put at the end so it wont crash the script (disappearing in the middle of events)
			YAHOO.util.Event.removeListener(fileElements, 'click');
			YAHOO.util.Dom.setStyle(elements,'display', 'none');
			YAHOO.util.Dom.setStyle(fileElements,'display', 'none');
		}
		else {
			//alert("Error locating id for element "+target);
		}
	}

}


	////////////////////////////// Drag Drop ////////////////////////////
	
	var Dom = YAHOO.util.Dom;
	var Event = YAHOO.util.Event;
	var DDM = YAHOO.util.DragDropMgr;
	
	//////////////////////////////////////////////////////////////////////////////
	// example app
	//////////////////////////////////////////////////////////////////////////////
	YAHOO.example.DDApp = {
		init: function() {

        var rows=totalProj,cols=1,i,j;
        for (i=1;i<cols+1;i=i+1) {
            new YAHOO.util.DDTarget("ul"+i);
        }

        for (i=1;i<cols+1;i=i+1) {
            for (j=1;j<rows+1;j=j+1) {
                new YAHOO.example.DDList("li" + i + "_" + j);
            }
        }

        Event.on("showButton", "click", this.showOrder);
        Event.on("switchButton", "click", this.switchStyles);
		},
	
		showOrder: function() {
			var parseList = function(ul, title) {
				var items = ul.getElementsByTagName("div");
				//var out = title + ": ";
				var out = "";
				for (i=0;i<items.length;i=i+1) {
					var num = items[i].id.split("_");
					out += num[1] + ",";
				}
				return out;
			};
	
			var ul1=Dom.get("ul1");//, ul2=Dom.get("ul2");
			//alert(parseList(ul1, "List 1") + "\n" + parseList(ul2, "List 2"));
			//alert(parseList(ul1, "List 1"));
			return parseList(ul1, "List 1");
		},
	
		switchStyles: function() {
			Dom.get("ul1").className = "draglist_alt";
			Dom.get("ul2").className = "draglist_alt";
		}
	};
	
	//////////////////////////////////////////////////////////////////////////////
	// custom drag and drop implementation
	//////////////////////////////////////////////////////////////////////////////
	
	YAHOO.example.DDList = function(id, sGroup, config) {
	
		YAHOO.example.DDList.superclass.constructor.call(this, id, sGroup, config);
	
		this.logger = this.logger || YAHOO;
		var el = this.getDragEl();
		Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly transparent
	
		this.goingUp = false;
		this.lastY = 0;
	};
	
	YAHOO.extend(YAHOO.example.DDList, YAHOO.util.DDProxy, {

	startDrag: function(x, y) {
		this.logger.log(this.id + " startDrag");

		// make the proxy look like the source element
		var dragEl = this.getDragEl();
		var clickEl = this.getEl();
		Dom.setStyle(clickEl, "visibility", "hidden");

		dragEl.innerHTML = clickEl.innerHTML;

		Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
		Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
		Dom.setStyle(dragEl, "border", "2px solid gray");
	},

	endDrag: function(e) {
		
		var srcEl = this.getEl();
		var proxy = this.getDragEl();

		// Show the proxy element and animate it to the src element's location
		Dom.setStyle(proxy, "visibility", "");
		var a = new YAHOO.util.Motion( 
			proxy, { 
				points: { 
					to: Dom.getXY(srcEl)
				}
			}, 
			0.2, 
			YAHOO.util.Easing.easeOut 
		)
		var proxyid = proxy.id;
		var thisid = this.id;

		// Hide the proxy and show the source element when finished with the animation
		a.onComplete.subscribe(function() {
				Dom.setStyle(proxyid, "visibility", "hidden");
				Dom.setStyle(thisid, "visibility", "");
				var orderStr = YAHOO.example.DDApp.showOrder();
				//alert(str);
				var sUrl = dir_depth+"js/reorderProject.php?id="+pageID+"&order="+orderStr;
				var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, {
					
					  success: function(o) {
							var strArray = orderStr.split(",");
							var getID = new Array();
							for(var i = 1; i <= strArray.length - 1; i++) {
								getID[i - 1] = document.getElementById("li1_"+strArray[i - 1]);
								
							}
							
							for(var j = 1; j <= strArray.length - 1; j++) {
								getID[j - 1].id = "li1_"+j;	
							}
							
							for(var k = 1; k <= strArray.length - 1; k++) {
								YAHOO.util.Dom.setStyle(getID[k-1],'visibility', 'visible');
							}
							
					  },
					  
					  failure: function(o) { alert("Error inserting new editable areas"); },
					  
					  scope: this
																	 
				});
		});
		a.animate();
		
		
	},

	onDragDrop: function(e, id) {

		// If there is one drop interaction, the li was dropped either on the list,
		// or it was dropped on the current location of the source element.
		if (DDM.interactionInfo.drop.length === 1) {

			// The position of the cursor at the time of the drop (YAHOO.util.Point)
			var pt = DDM.interactionInfo.point; 

			// The region occupied by the source element at the time of the drop
			var region = DDM.interactionInfo.sourceRegion; 

			// Check to see if we are over the source element's location.  We will
			// append to the bottom of the list once we are sure it was a drop in
			// the negative space (the area of the list without any list items)
			if (!region.intersect(pt)) {
				var destEl = Dom.get(id);
				var destDD = DDM.getDDById(id);
				destEl.appendChild(this.getEl());
				destDD.isEmpty = false;
				DDM.refreshCache();
				
			}

		}
		
	},

	onDrag: function(e) {

		// Keep track of the direction of the drag for use during onDragOver
		var y = Event.getPageY(e);

		if (y < this.lastY) {
			this.goingUp = true;
		} else if (y > this.lastY) {
			this.goingUp = false;
		}

		this.lastY = y;
	},

	onDragOver: function(e, id) {
	
		var srcEl = this.getEl();
		var destEl = Dom.get(id);

		// We are only concerned with list items, we ignore the dragover
		// notifications for the list.
		if (destEl.nodeName.toLowerCase() == "div") {
			var orig_p = srcEl.parentNode;
			var p = destEl.parentNode;

			if (this.goingUp) {
				p.insertBefore(srcEl, destEl); // insert above
	
			} else {
				p.insertBefore(srcEl, destEl.nextSibling); // insert below
	
			}
			
			
			DDM.refreshCache();
			
		}
	}
});
	
	
if(editControl) {
	
	YAHOO.util.Event.onDOMReady(init);
	YAHOO.util.Event.onDOMReady(YAHOO.example.DDApp.init, YAHOO.example.DDApp, true);
}