/**
 * Copyright (C) 2009 eXo Platform SAS.
 * 
 * This is free software; you can redistribute it and/or modify it
 * under the terms of the GNU Lesser General Public License as
 * published by the Free Software Foundation; either version 2.1 of
 * the License, or (at your option) any later version.
 * 
 * This software is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * Lesser General Public License for more details.
 * 
 * You should have received a copy of the GNU Lesser General Public
 * License along with this software; if not, write to the Free
 * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
 * 02110-1301 USA, or see the FSF site: http://www.fsf.org.
 */

(function($, base, common, portalControl) {	
	var uiDashboardUtil = {
	
		findPosX : function(obj) {
		  var curleft = 0, browser = base.Browser;
		  var uiWorkspaceContainer = document.getElementById("UIWorkspaceContainer");
		  var uiWorkingWorkspace = document.getElementById("UIWorkingWorkspace");	  
		  while (obj) {
		  	if(uiWorkspaceContainer!=null && uiWorkspaceContainer.style.display!="none"
		  					 && browser.isIE()){
		  		var uiPageDesktop = document.getElementById("UIPageDesktop");
	        var jqObj = $(obj);
		  		if( (uiPageDesktop!=null && jqObj.hasClass("UIPageDesktop") && browser.isIE7())
		  					|| (uiPageDesktop==null && jqObj.hasClass("PORTLET-FRAGMENT")) ){
		  			curleft += (obj.offsetLeft - uiWorkingWorkspace.offsetLeft);
		  			obj = obj.offsetParent ;
		  			continue;
		  		}
		  	}
	  		curleft += obj.offsetLeft ;
		    obj = obj.offsetParent ;
		  }
		  return curleft ;
		},
		
		isIn : function(x, y, component) {
		  var componentLeft = uiDashboardUtil.findPosX(component);
		  var componentRight = componentLeft + component.offsetWidth ;
		  var componentTop = $(component).offset().top;
		  var componentBottom = componentTop + component.offsetHeight ;
		  var isOver = false ;
	
		  if((componentLeft < x) && (x < componentRight)) {
		    if((componentTop < y) && (y < componentBottom)) {
		      isOver = true ;
		    }
		  }
		  
		  return isOver ;
		},
	
	  isInColumn : function(column, x, scrollLeft)
	  {
	    var left = this.findPosX(column[0]) - scrollLeft;
	    return left <= x && x < left + column[0].offsetWidth;
	  },
		
		findColIndexInDashboard : function(dragObj){
	    var index = 0;
	    $(dragObj).parent().prevAll("div.UIColumn").each(function()
	    {
	      index++;
	    });
	    return index;
		},
	
	  findContainingColumn : function(gadgetCont, x)
	  {
	    var column;
	    var scrollLeft = gadgetCont.scrollLeft();
	    gadgetCont.find("div.UIColumn").each(function()
	    {
	      var left = uiDashboardUtil.findPosX(this) - scrollLeft;
	      if(left <= x && x < left + this.offsetWidth)
	      {
	        column = $(this);
	        return false;
	      }
	    });
	
	    return column;
	  },
		
		findRowIndexInDashboard : function(dragObj){
	    var row = 0;
	    $(dragObj).prevAll("div").each(function()
	    {
	      if(this.id == dragObj.id)
	      {
	        return false;
	      }
	      else
	      {
	        row++;
	      }
	    });
	
	    return row;
		},
	
		createRequest : function(componentId, action, params){
			var url = eXo.env.server.portalBaseURL;
			url += '?portal:componentId=' + componentId +
								'&portal:type=action&uicomponent=UIDashboard&op=' + action ;
			url += '&ajaxRequest=true';
			if(params != null) {
		  	var len = params.length ;
		    for(var i = 0 ; i < len ; i++) {
		      url += "&" +  params[i].name + "=" + params[i].value ;
		    }
		  }
			return url;
		}
	};	
	
	var eXoDashBoard = {
		
		currentCol : null ,
	
		targetObj : null,
		
		init : function (dragItem, dragObj) {
			
			var BROWSER = base.Browser;
	
	    var UTIL = uiDashboardUtil;
	
	    var jqDragObj = $(dragObj);//JQuery wrapper of dragObj, that facilitates JQuery integration
	
	    var portletFrag = jqDragObj.closest(".PORTLET-FRAGMENT");
	
	    var gadgetContainer = portletFrag.find("div.GadgetContainer").eq(0);

	    var gadgetPopup = portletFrag.find("div[id^=UIAddGadgetPopup]");
	
	    common.DragDrop.init(dragItem, dragObj);
	
	    dragObj.onDragStart = function(x, y, lastMouseX, lastMouseY, e)
	    {
	
	      var workingWS = document.getElementById("UIWorkingWorkspace");
	
	      var ggwidth = dragObj.offsetWidth;
	
	      //find position to put drag object in
	      var mx = BROWSER.findMouseRelativeX(workingWS, e);
	      var ox = BROWSER.findMouseRelativeX(dragObj, e);
	      var x = mx - ox;
	
	      var my = BROWSER.findMouseRelativeY(workingWS, e);
	      var oy = BROWSER.findMouseRelativeY(dragObj, e);
	      var y = my - oy;
	
	      jqDragObj.parentsUntil(portletFrag).each(function()
	      {
	        if (this.scrollLeft > 0)
	        {
	          x -= this.scrollLeft;
	        }
	        if (this.scrollTop > 0)
	        {
	          y -= this.scrollTop;
	        }
	      });
	
	      if (!jqDragObj.hasClass("SelectItem"))
	      {
	        var targetArea = $("<div>").attr("id", "UITarget").addClass("UITarget").css("height", dragObj.offsetHeight + "px");
	        eXoDashBoard.targetObj = targetArea;
	        jqDragObj.after(targetArea);
	      }
	      else
	      {
	        var copy = jqDragObj.clone(true).addClass("CopyObj");
	        jqDragObj.before(copy);
	      }
	
	      //increase speed of mouse when over iframe by create div layer above it
	      gadgetContainer.find(".uiGadget").each(function()
	      {
	        var gadgetWindow = $(this);
	        var mask = gadgetWindow.find(".uiMask").eq(0);
	        if (mask)
	        {
	          var app = gadgetWindow.find(".gadgetApplication")[0];
	          mask.css({"marginTop" : - app.offsetHeight + "px", "height" : app.offsetHeight + "px", "width" : app.offsetWidth + "px", "display" : "block", "backgroundColor" : "white"});
	          mask.fadeTo(0, 0.03);
	        }
	      });
	
	      if (!jqDragObj.hasClass("Dragging"))
	      {
	        jqDragObj.addClass("Dragging");
	      }
	
	      jqDragObj.css("width", ggwidth + "px").css("position", "absolute");
	
	      //set position of drag object
	      BROWSER.setPositionInContainer(workingWS, dragObj, x, y);
	    }
	
	    dragObj.onDrag = function(nx, ny, ex, ey, e)
	    {
	
	      eXoDashBoard.scrollOnDrag(dragObj);
	
	      var targetArea = eXoDashBoard.targetObj;
	      var isInGadgetPopup = UTIL.isIn(ex, ey, gadgetPopup.get()[0]);
	      if (UTIL.isIn(ex, ey, gadgetContainer[0]) && !isInGadgetPopup)
	      {
	        if (!targetArea)
	        {
	          targetArea = $("<div>").attr("id", "UITarget").addClass("UITarget").css("height", dragObj.offsetHeight + "px");
	          eXoDashBoard.targetObj = targetArea;
	        }
	
	        if (!eXoDashBoard.currentCol)
	        {
	          //We are sure that currentCol is not null as mouse cursor is already inside the gadget container
	          eXoDashBoard.currentCol = UTIL.findContainingColumn(gadgetContainer, ex);
	        }
	
	        var column = eXoDashBoard.currentCol;
	        if (UTIL.isInColumn(column, ex, gadgetContainer.scrollLeft()))
	        {
	          var addToLast = true;
	          column.find(".uiGadget").not("#" + dragObj.id).each(function()
	          {
	            if (ey <= $(this).offset().top + (this.offsetHeight / 3) - gadgetContainer.scrollTop())
	            {
	              $(this).before(targetArea);
	              addToLast = false;
	
	              return false;
	            }
	          });
	
	          //That happens as user drags gadget to the bottom of a column or to an empty column
	          if (addToLast)
	          {
	            column.append(targetArea);
	          }
	        }
	        else
	        {
	          //There is no column containing mouse cursor as mouse is moved out of gadget container. So we reset the cached column to null
	          eXoDashBoard.currentCol = null;
	        }
	      }
	      else if (targetArea != null && jqDragObj.hasClass("SelectItem"))
	      {
	        //prevent dragging item form selector popup out of gadget container
	        targetArea.remove();
	        eXoDashBoard.targetObj = targetArea = null;
	      }
	    };
	
	
	    dragObj.onDragEnd = function(x, y, clientX, clientY)
	    {
	      gadgetContainer.find(".uiMask").each(function()
	      {
	    	var jObj = $(this);
	        jObj.fadeTo(0, 1);
	        jObj.css("display", "none");
	      });
	
	      jqDragObj.removeClass("Dragging").css("position", "static");
	
	      var copyObj = portletFrag.find("div.CopyObj");
	      if (copyObj)
	      {
	        copyObj.replaceWith(jqDragObj);
	        jqDragObj.css("width", "auto");
	      }
	
	      var targetArea = eXoDashBoard.targetObj;
	      if (targetArea && targetArea.parent())
	      {
	        //if drag object is not gadget module, create an module
	        var col = UTIL.findColIndexInDashboard(targetArea[0]);
	        var row = UTIL.findRowIndexInDashboard(targetArea[0]);
	        var compId = portletFrag.parent().attr("id");
	
	        if (jqDragObj.hasClass("SelectItem"))
	        {
	          var params = [
	            {name: "colIndex", value: col},
	            {name: "rowIndex", value: row},
	            {name: "objectId", value: jqDragObj.attr("id")}
	          ];
	          var url = UTIL.createRequest(compId, 'AddNewGadget', params);
	          ajaxGet(url);
	        }
	        else
	        {
	          //in case: drop to old position
	          if (UTIL.findColIndexInDashboard(dragObj) == col
	            && UTIL.findRowIndexInDashboard(dragObj) == (row - 1))
	          {
	            targetArea.remove();
	          }
	          else
	          {
	            targetArea.replaceWith(jqDragObj);
	            row = UTIL.findRowIndexInDashboard(dragObj);
	            var params = [
	              {name: "colIndex", value: col},
	              {name: "rowIndex", value: row},
	              {name: "objectId", value: dragObj.id}
	            ];
	            var url = UTIL.createRequest(compId, 'MoveGadget', params);
	            ajaxGet(url);
	          }
	        }
	      }
	
	      gadgetContainer.find("div.UITarget").each(function()
	      {
	        $(this).remove();
	      });
	
	      eXoDashBoard.targetObj = eXoDashBoard.currentCol = null;
	    };
	
	
	    dragObj.onCancel = function(e)
	    {
	      e = e || window.event;
	      if (BROWSER.isIE() && e.clientY < 0)
	      {
	        common.DragDrop.end(e);
	      }
	    };
	  },
		
		onLoad : function(windowId, canEdit) {
	    var portletWindow = $("#" + windowId).eq(0);
	    if(!portletWindow)
	    {
	      return;
	    }
	
	    var portletFrag = portletWindow.find(".PORTLET-FRAGMENT").eq(0);
	    var uiDashboard = portletFrag.find("div.UIDashboard").eq(0);
	    var container = uiDashboard.find("div.UIDashboardContainer").eq(0);
	    if (!container)
	    {
	      return;
	    }
	
	    uiDashboard.css("overflow", "hidden");
	    portletFrag.css("overflow", "hidden");
	
	    if (canEdit) {
	    	container.find(".AddIcon > a").off("click").on("click", function() {
	    		eXoDashBoard.showSelectPopup(this);
	    		return false;
	    	});
	    }
	    var selectPopup = container.prev("div");
	    selectPopup.find(".uiIconClose").eq(0).attr("onclick", null).click(function()
	    {    	
	      eXoDashBoard.hideSelectPopup(selectPopup);
	    });
	
	    var gadgetCont = container.children("div.GadgetContainer").eq(0);
	    if (base.Browser.isIE6())
	    {
	      gadgetCont.css("width", "99.5%");
	    }
	    gadgetCont.children("div.UIColumns").eq(0).css("width", "100%");
	
			//Todo: nguyenanhkien2a@gmail.com
			//We set and increase waiting time for initDragDrop function to make sure all UI (tag, div, iframe, etc) 
			//was loaded and to avoid some potential bugs (ex: GTNPORTAL-1068)
			setTimeout(function() {eXoDashBoard.initDragDrop(windowId,canEdit);}, 400) ;
		},
		
		initDragDrop : function(windowId, canEdit) {
	    var portletWindow = $("#" + windowId);
	
	    //TODO: Improve this by seperate gadget control appearing in select popup and ones appearing in the dashboard
	    portletWindow.find(".gadgetControl, .GadgetControl").each(function()
	    {
	      var gadgetControl = $(this);
	      var gadget = gadgetControl.closest(".uiGadget, .UIGadget");
	      var minimizeButton = gadget.find(".minimizeAction").eq(0);//That might be undefined if actual gadget is the item in Select Gadget popup
	      if(canEdit)
	      {
	        eXoDashBoard.init(gadgetControl[0], gadget[0]);
	        if(minimizeButton)
	        {
	          minimizeButton.css("display", "block");
	        }
	      }
	      else
	      {
	        if(minimizeButton)
	        {
	          minimizeButton.css("display", "none");
	          minimizeButton.siblings(".uiIconClose, .uiIconEdit").css("display", "none");
	        }
	      }
	    });
		},
		
		initPopup : function(popup) {
			if(typeof(popup) == "string") popup = document.getElementById(popup);
			if(!popup || popup.style.display == "none") return;
	        var dashboard = $(popup).closest(".UIDashboard")[0];
			var deltaY = Math.ceil((dashboard.offsetHeight - popup.offsetHeight) / 2);
			if (deltaY < 0) {
				deltaY = 0;
			}
			var jpopup = $(popup);
			jpopup.find(".TopItemContainer, .BottomItemContainer").on({
				"mouseover": function() {
					eXoDashBoard.enableContainer(this);
				}, 
				"mouseout": function() {
					eXoDashBoard.disableContainer(this);
				},
				"mousedown": function() {
					portalControl.VerticalScrollManager.initScroll(this, $(this).hasClass("TopItemContainer"), 10);
				}
			});
			jpopup.find(".GadgetTab").on('click', function() {
				eXoDashBoard.onTabClick(this, 'NormalTab', 'SelectedTab');
			});
			
			popup.style.top = $(dashboard).offset().top + deltaY + "px";
		},
	
		 /**
	   * Show SelectPopup as user click on 'Add Gadgets' link. The argument link represents <a> element of 'Add Gadgets' link.
	   */
	  showSelectPopup : function(link)
	  {
	    var jqLink = $(link).parent();
	    jqLink.css("visibility", "hidden");
	
	    var portletID = jqLink.closest(".PORTLET-FRAGMENT").parent().attr("id");
	    var url = uiDashboardUtil.createRequest(portletID, "SetShowSelectContainer", [
	      {name : "isShow", value : true}
	    ]);
	    ajaxGet(url);
	  },
	
	  hideSelectPopup : function(selectPopup)
	  {
	    selectPopup.css({"visibility" : "hidden", "display" : "none"});
	
	    var dashboardCont = selectPopup.next("div.UIDashboardContainer");
	    dashboardCont.find(".AddIcon").eq(0).css("visibility", "visible");
	
	    var portletID = dashboardCont.closest(".PORTLET-FRAGMENT").parent().attr("id");
	
	    var url = uiDashboardUtil.createRequest(portletID, "SetShowSelectContainer", [
	      {name : "isShow", value : false}
	    ]);
	    ajaxAsyncGetRequest(url, false);
	  },
	
	  /**
	   * Using when click event happens on a dashboard tab
	   * @param {Object} clickElement
	   * @param {String} normalStyle a css style
	   * @param {String} selectedType a css style
	   */
	  onTabClick : function(clickElement, normalStyle, selectedType)
	  {
	    var jqObj = $(clickElement);
	    var category = jqObj.closest(".GadgetCategory");
	    var itemCont = category.closest(".GadgetItemsContainer");
	
	    var tab = category.children("div.GadgetTab").eq(0);
	    if (tab.hasClass(normalStyle))
	    {
	      itemCont.children("div.GadgetCategory").each(function()
	      {
	        var c = $(this);
	        c.children("div.GadgetTab").attr("class", "GadgetTab " + normalStyle);
	        c.children("div.ItemsContainer").css("display", "none");
	      });
	
	      tab.attr("class", "GadgetTab " + selectedType);
	      category.children("div.ItemsContainer").css("display", "block");
	    }
	    else
	    {
	      tab.attr("class", "GadgetTab " + normalStyle);
	      category.children("div.ItemsContainer").css("display", "none");
	    }
	
	    var h = $(window).height();
	    jqObj.closest(".PopupContent").css("height", (h - 100 < itemCont[0].offsetHeight) ? (h - 100 + "px") : "auto");
	  },
	  /**
		 * Change disabled object to enable state
		 * @param {Object} elemt object to enable
		 */
	  enableContainer : function(elemt)
	  {
	    var jqObj = $(elemt);
	    jqObj.removeClass("DisableContainer");
	    jqObj.children("div.Arrow").eq(0).removeClass("DisableArrowIcon");
	  },
	  /**
	   * Change object to disable state
	   * @param {Object} elemt object to enable
	   */
	  disableContainer : function(elemt)
	  {
	    var jqObj = $(elemt);
	    jqObj.addClass("DisableContainer");
	    jqObj.children("div.Arrow").eq(0).addClass("DisableArrowIcon");
	  },
	
	  scrollOnDrag : function(dragObj) {
	    var gadgetContainer = $(dragObj).closest(".UIDashboard").find("div.GadgetContainer").eq(0);
	
	    var colCont = gadgetContainer.children("div.UIColumns")[0];
	
			var visibleWidth = gadgetContainer[0].offsetWidth;
			var visibleHeight = gadgetContainer[0].offsetHeight;
			var trueWidth = colCont.offsetWidth;
			var trueHeight = colCont.offsetHeight;
			
			var browser = base.Browser;
			var objLeft = browser.findPosXInContainer(dragObj, gadgetContainer[0]);
			var objRight = objLeft + dragObj.offsetWidth;
			var objTop = browser.findPosYInContainer(dragObj, gadgetContainer[0]);
			var objBottom = objTop + dragObj.offsetHeight;
			
			//controls horizontal scroll
	    var deltaX = gadgetContainer.scrollLeft();
	    if ((trueWidth - (visibleWidth + deltaX) > 0) && objRight > visibleWidth)
	    {
	      gadgetContainer.scrollLeft(deltaX + 5);
	    } else if (objLeft < 0 && deltaX > 0)
	    {
	      gadgetContainer.scrollLeft(deltaX - 5);
	    }
	
	
	    //controls vertical scroll
	    var controlBar = gadgetContainer.children("div.ContainerControlBarL")[0];
	    var buttonHeight = 0;
	    if (controlBar)
	    {
	      buttonHeight = controlBar.offsetHeight;
	    }
	    var deltaY = gadgetContainer.scrollTop();
	    if ((trueHeight - (visibleHeight - 10 - buttonHeight + deltaY) > 0) && objBottom > visibleHeight)
	    {
	      gadgetContainer.scrollTop(deltaY + 5);
	    } else
	    if (objTop < 0 && deltaY > 0)
	    {
	      gadgetContainer.scrollTop(deltaY - 5);
	    }
	
	  }
	};
	
	return {
		UIDashboard : eXoDashBoard,		
		UIDashboardUtil : uiDashboardUtil
	};
})($, base, common, portalControl);
