var _idModalDiv 			= 'GlobalModal';
var _idModalDivBackground 	= 'GlobalModalBackground';

var ModalDiv = function(width, BackgroundOnClick)
{
	if (typeof(width) == 'undefined' || width == null)
	{
		var width = 562;
	}
	
	var modalDiv;
	var title;
	var titleAlign			= 'center';
	var content;
	var contenId 			= 'ModalDivContent';
	var buttons 			= [];
	var me 					= this;
	var buttonsAlign 		= 'right';
	var customBottom;
	var closeCross			= true;
	var closeCrossCallback 	= null;
	var centerAfterRender 	= false;
	
	/* PUBLIC FUNCTIONS */
	
	this.Center = function()
	{
		modalDiv.center();
		
		if (modalDiv.getTop() < 10)
		{
			modalDiv.setTop(10);
		}
	};
	
	this.SetTitle = function (text)
	{
		title = text;
	};
	
	this.SetCenterAfterRender = function (centerAfterRender)
	{
		centerAfterRender = centerAfterRender;
	};
	
	this.SetTitleAlign = function (position)
	{
		titleAlign = position;
	};
	
	this.SetContent = function (html)
	{
		content = html;
	};
	
	this.SetCustomBottom = function (html)
	{
		customBottom = html;
	};
	
	this.SetButtonsAlign = function (value)
	{
		buttonsAlign = value;
	};
	
	this.SetCloseCross = function (value, callback)
	{
		closeCross = value;
		
		if (typeof(callback) == 'function')
		{
			closeCrossCallback = callback;
		}
	};
	
	// {text: 'OK', color: 'verde(default)/gris/grisOscuro/blanco', action: PunteroAFuncion, actionScope: this(default), closeAfterAction: true(default)/false, actionParams: [param, param2,..], type: 'cancel/normal(default)', width: 84(default), id: 'idboton'}
	this.AddButton = function (button)
	{
		buttons.push(button);
	};
	
	this.AddButtons = function (buttonsList)
	{
		for (var i = 0; i < buttonsList.length; i++)
		{
			me.AddButton(buttonsList[i]);
		}
	};
	
	/*removes all buttons*/
	this.RemoveButtons = function()
	{
		buttons = [];
	};
	
	this.GetContentId = function()
	{
		return contenId;
	};
	
	this.RenderContent = function ()
	{
		var modalDiv 		= Ext.get(_idModalDiv);
		var modalContent 	= Ext.get(me.GetContentId());
		var modalDivTitle 	= Ext.get(me.GetContentId() + '_title');
		var modalDivBody 	= Ext.get(document.createElement('div'));
		var modalDivBtns 	= Ext.get(me.GetContentId() + '_btns');
		var modalDivLoading	= Ext.get('modalDivLoading');

		modalDivBtns.dom.innerHTML = '';
		
		modalDivBody.addClass('modalContent');
		
		if (typeof(title) == 'string')
		{
			modalDivTitle.dom.innerHTML = title;
			
			modalDivTitle.removeClass('contentTitleHidden');
			
			modalDivTitle.dom.style.textAlign = titleAlign;
		}
		
		if (typeof(content) == 'string')
		{
			var modalContentBody			= Ext.get(document.createElement('div'));
			modalContentBody.dom.innerHTML 	= content;
			
			modalContentBody.addClass('modalContentBody');
			
			modalDivBody.appendChild(modalContentBody);
		}
		else if (typeof(content) == 'object')
		{
			var modalContentBody = Ext.get(document.createElement('div'));
			
			modalContentBody.appendChild(content);
			
			if (typeof(title) == 'string')
			{
				modalContentBody.dom.style.paddingTop = '15px';
			}
			
			modalContentBody.addClass('modalContentBody');
			
			modalDivBody.appendChild(modalContentBody);
		}
		
		if (modalDivLoading != null)
		{
			modalDivLoading.remove();//saco el div de cargando
		}
		
		if (buttons.length > 0)
		{
			var buttonsContainer 			= document.createElement('div');
			buttonsContainer.style.height 	= '45px';
			
			if (buttonsAlign == 'center')
			{
				var buttonsContainerTable			= document.createElement('table');
				var buttonsContainerTBody 			= document.createElement('tbody');
				var buttonsContainerEle				= document.createElement('tr');
				buttonsContainerTable.style.width 	= '100%';
				
				buttonsContainerTable.appendChild(buttonsContainerTBody);
				buttonsContainerTBody.appendChild(buttonsContainerEle);
				buttonsContainer.appendChild(buttonsContainerTable);
				
				for (var i = 0; i < buttons.length; i++)
				{
					var btnElement = GetBtnElement(buttons[i]);
					
					if ((i == 0) && (buttons.length > 1))
					{
						btnElement.addClass('floatR');
						btnElement.dom.style.marginRight = '10px';
					}
					else if ((i == buttons.length - 1) && (buttons.length > 1))
					{
						btnElement.addClass('floatL');
						btnElement.dom.style.marginLeft = '10px';
					}
					else
					{
						btnElement.dom.style.margin = 'auto';
					}
					
					var btnTd = document.createElement('td');
					
					btnTd.style.width = (100 / buttons.length) + '%';
					
					btnTd.appendChild(btnElement.dom);
					buttonsContainerEle.appendChild(btnTd);
				}
			}
			else if ((buttonsAlign == 'right') || (buttonsAlign == 'left'))
			{
				var buttonsContainerEle	= document.createElement('div');
				
				buttonsContainerEle.style.position 	= 'relative';
				buttonsContainerEle.style.width 	= '100%';
				buttonsContainerEle.style.height 	= '45px';
				
				var marginWidth = 10;
				
				if ((buttonsAlign == 'right') && (buttons.length > 1))
				{
					newButtons = [];
					
					for (var i = (buttons.length - 1); i >= 0; i--)
					{
						newButtons.push(buttons[i]);
					}
					
					buttons = newButtons;
				}
				
				for (var i = 0; i < buttons.length; i++)
				{
					var btnElement = GetBtnElement(buttons[i]);
					
					btnElement.dom.style.position = 'absolute';
					btnElement.setTop(0);
					
					if (buttonsAlign == 'right')
					{
						btnElement.setRight(marginWidth);
					}
					else
					{
						btnElement.setLeft(marginWidth);
					}

					btnWidth = btnElement.dom.style.width.replace('px', '') * 1;
					
					marginWidth = marginWidth + btnWidth + 10;
					
					buttonsContainerEle.appendChild(btnElement.dom);
				}
				
				buttonsContainer.appendChild(buttonsContainerEle);
			}
			
			modalDivBtns.appendChild(buttonsContainer);
			
			modalDivBtns.dom.style.display = 'block';
		}
		
		if (customBottom != null)
		{
			var bottomContainer = document.createElement('div');
			
			bottomContainer.innerHTML = customBottom;
			
			modalDivBtns.appendChild(bottomContainer);
			
			modalDivBtns.dom.style.display = 'block';
		}
		
		modalContent.appendChild(modalDivBody);
		
		if (closeCross)
		{
			var divCross 			= Ext.get(document.createElement('div'));
			divCross.dom.className 	= 'modalDivCloseCross sprite';
			divCross.dom.title 		= 'Close';
			
			if (closeCrossCallback != null)
			{
				divCross.on('click', function() { closeCrossCallback(); });
			}
			else
			{
				divCross.on('click', function() { KillModalDiv(true); });
			}
			
			modalContent.appendChild(divCross.dom);
		}
		
		me.Center();
	};
	
	/* PUBLIC FUNCTIONS */
	
	var Create = function(BackgroundOnClick)
	{
		KillModalDiv(false);
		
		CreateModalBackground(undefined, undefined, undefined, BackgroundOnClick);
		
		modalDiv = Ext.get(_idModalDiv);
		
		modalDiv = Ext.get(document.createElement('div'));
		
		modalDiv.dom.setAttribute('id', _idModalDiv);
		modalDiv.addClass('GlobalModal');
		
		modalDiv.setWidth(width);
		
		htmlContent = '';
		
		htmlContent += '<div class="content contentTitle contentTitleHidden" style="width: ' + (width - 42) + 'px" id="' + contenId + '_title"></div>';
		htmlContent += '<div class="content contentBody" style="width: ' + (width - 42) + 'px" id="' + contenId + '"><div class="modalDivLoading" id="modalDivLoading">Cargando...</div></div>';
		htmlContent += '<div class="content" style="width: ' + (width - 2) + 'px; display: none;" id="' + contenId + '_btns" style=""></div>';
		
		modalDiv.dom.innerHTML = htmlContent;
		
		Ext.getBody().appendChild(modalDiv);
		
		me.Center();
	};
	
	var GetBtnElement = function (button)
	{
		var btnText 			= '';
		var btnColor 			= 'verde';
		var btnAction 			= function(){};
		var btnCloseAfterAction = true;
		var btnActionParams		= [];
		var btnWidth			= 84;
		var btnType				= 'normal';
		var btnActionScope		= this;
		var btnId				= '';
				
		if (typeof(button.id) == 'string')
		{
			btnId = button.id;
		}
				
		if (typeof(button.text) == 'string')
		{
			btnText = button.text;
		}
		
		if (typeof(button.color) == 'string')
		{
			btnColor = button.color;
		}
		
		if (typeof(button.action) != 'undefined')
		{
			btnAction = button.action;
		}
		
		if (typeof(button.closeAfterAction) == 'boolean')
		{
			btnCloseAfterAction = button.closeAfterAction;
		}

		if ((typeof(button.actionParams) != 'undefined') && (button.actionParams != null))
		{
			btnActionParams = button.actionParams;
		}
		
		if (typeof(button.width) != 'undefined')
		{
			btnWidth = button.width * 1;
		}
		
		if (typeof(button.type) != 'undefined')
		{
			btnType = button.type;
		}

		if (btnType == 'cancel')
		{
			if (typeof(button.color) == 'string')
			{
				btnColor = button.color;
			}
			else
			{
				btnColor = 'gris';
			}
		}
		
		if (typeof(button.actionScope) != 'undefined')
		{
			btnActionScope = button.actionScope;
		}
				
		var btn 		= Ext.get(document.createElement('div'));
		var btnInner 	= Ext.get(document.createElement('a'));
		
		btn.dom.setAttribute('id', btnId);
		btn.setWidth(btnWidth - 2);
		btnInner.setWidth(btnWidth - 2);
		
		btn.addClass('botonAccion');
		btn.addClass('boton' + btnColor.ucfirst());
		
		btnInner.dom.innerHTML = btnText;
		
		btn.appendChild(btnInner);
		
		btn.dom.action 				= btnAction;
		btn.dom.actionParams 		= btnActionParams;
		btn.dom.closeAfterAction 	= btnCloseAfterAction;
		
		btn.dom.onclick = function()
		{
			if (typeof(this.action) != 'undefined')
			{
				if (typeof(this.action) == 'string')
				{
					eval(this.action + '(' + this.actionParams.join(',') + ')');
				}
				else
				{
					this.action.apply(btnActionScope, this.actionParams);
				}
			}
			
			if  (this.closeAfterAction)
			{
				KillModalDiv(true);
			}
		};
		
		return btn;
	};
	
	Create(BackgroundOnClick);
}

function KillModalDiv(fade)
{
	if (fade != true)
	{
		var fade = false;
	}
	
	var modalDiv = Ext.get(_idModalDiv);
	
	if (modalDiv != undefined)
	{
		if (fade)
		{
			modalDiv.fadeOut({remove: true});
		}
		else
		{
			document.body.removeChild(modalDiv.dom);
		}
	}
	
	KillModalDivBackground(fade);
}

function KillModalDivBackground(fade)
{
	if (fade != true)
	{
		fade = false;
	}
	
	var modalDivBG = Ext.get(_idModalDivBackground);
	
	if (modalDivBG != undefined)
	{
		if (fade)
		{
			modalDivBG.fadeOut({remove: true, callback: function(){Ext.getBody().removeClass('showingModalBG');}});
		}
		else
		{
			modalDivBG.remove();
			Ext.getBody().removeClass('showingModalBG');
		}
	}
}

function CreateModalBackground(id, opacity, zIndex, onClick, hideSelects)
{
	if (typeof(id) == 'undefined')
	{
		id = _idModalDivBackground;
	}
	
	if (typeof(opacity) == 'undefined')
	{
		opacity = 0.6;
	}
	
	if (typeof(zIndex) == 'undefined')
	{
		zIndex = 10001;
	}
	
	if (typeof(onClick) == 'undefined' || onClick == null)
	{
		onClick = function(){ KillModalDiv(true); };
	}
	
	if (typeof(hideSelects) == 'undefined')
	{
		hideSelects = true;
	}
	
	siteBody 		= Ext.getBody();
	modalBackground = Ext.get(document.createElement('div'));
	sizes 			= GetMaxSizes();
	
	modalBackground.dom.setAttribute('id', id);
	modalBackground.addClass('GlobalModalBackground');
	modalBackground.setHeight(sizes.height);
	modalBackground.setOpacity(opacity);
	modalBackground.addListener('click', onClick);
	modalBackground.dom.style.zIndex = zIndex;
	
	if (hideSelects)
	{
		siteBody.addClass('showingModalBG');
	}
	
	if (!hideSelects)
	{
		body = GetBodySizes();
	
		modalBackground.setHeight(body.height - 30);
		modalBackground.setWidth(sizes.width - 30);
	}

	siteBody.appendChild(modalBackground);
}

function GetMaxSizes()
{
	var viewport 	= GetViewPortSizes();
	var body 		= GetBodySizes();
	
	if (viewport.width >= body.width)
	{
		var retWidth = viewport.width;
	}
	else
	{
		var retWidth = body.width;
	}
	
	if (viewport.height >= body.height)
	{
		var retHeight = viewport.height;
	}
	else
	{
		var retHeight = body.height;
	}
	
	return {width: retWidth, height: retHeight};
}

function GetViewPortSizes()
{
	if (typeof window.innerWidth != 'undefined')
	{
		var viewportWidth 	= window.innerWidth;
		var viewportHeight 	= window.innerHeight;
	}
	else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
	{
		var viewportWidth 	= document.documentElement.clientWidth;
		var viewportHeight 	= document.documentElement.clientHeight;
	}
	
	return {width: viewportWidth, height: viewportHeight};
}

function GetBodySizes()
{
	return {width: Ext.getBody().getWidth(), height: Ext.getBody().getHeight()};
}

/**
 * buttons = array, ej: [{text: 'OK', color: 'green/red', action: FunctionPointer, actionParams: [param, param2,..]}]
 * cancel button is created automatically, but a text can be set (default is cancel)
*/
function CreateActionsModalDiv(message, buttons, cancelText, title, callbackFunctionCancel, paramsCallbackFunctionCancel, width, BackgroundOnClick)
{
	var temModalDiv = new ModalDiv(width, BackgroundOnClick);
	
	temModalDiv.SetContent(message);
	
	if (typeof(cancelText) == 'undefined')
	{
		cancelText = 'Cancelar';
	}
	
	if (typeof(title) != 'undefined')
	{
		temModalDiv.SetTitle(title);
	}

	if (buttons == null)
	{
		buttons = [];
	}
	
    if (cancelText != null)
    {
    	if (typeof(callbackFunctionCancel) == 'undefned')
    	{
    		buttons[buttons.length] = {text: cancelText, color: 'gris', type: 'cancel'};
    	}
    	else
    	{
	        buttons[buttons.length] = {text: cancelText, action: callbackFunctionCancel, actionParams: paramsCallbackFunctionCancel, type: 'cancel'};
    	}
    }
    
	temModalDiv.AddButtons(buttons);
	temModalDiv.SetButtonsAlign('center');
	temModalDiv.RenderContent();
	
	return temModalDiv;
}

function CreateConfirmationDiv(question, callFunctionOK, paramsCallFunctionOK, title, textoOK, textoCancelar, callbackFunctionCancel, paramsCallbackFunctionCancel, width, BackgroundOnClick)
{
	if (typeof(messageAlign) == 'undefined')
	{
		messageAlign = 'center';
	}
	
	if (typeof(textoOK) == 'undefined')
	{
		textoOK = 'OK';
	}
	
	if (typeof(textoCancelar) == 'undefined')
	{
		textoCancelar = 'Cancelar';
	}
	
	return CreateActionsModalDiv(question, [{text: textoOK, type: 'normal', action: callFunctionOK, actionParams: paramsCallFunctionOK}], textoCancelar, title, callbackFunctionCancel, paramsCallbackFunctionCancel, width, BackgroundOnClick);
}