Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

...

HTML
<script type="text/javascript">
 
				var RemoveChar =  function(marker1, marker2, textString){       
								var indexMarkInit = textString.indexOf(marker1);								
								var text = textString.substring(0, indexMarkInit);		
 
								if(text.length == textString.length)
									return textString;
													
								var indexMarkEnd = textString.indexOf(marker2);
								var text2 = textString.substring(indexMarkEnd + marker2.length-1);
 
								if(text2.length == textString.length)
									return textString;
 
								return text + text2;
				}
				var ReplaceChar = function(marker1, marker2, textString, replaceString){                               
								var indexMarkInit = textString.indexOf(marker1);								
								var text = textString.substring(indexMarkInit);		
 
								if(text.length == textString.length)
									return "";
													
								var indexMarkEnd = text.indexOf(marker2);
								return text.substring(marker1.length, indexMarkEnd);
				}
 
				var TruncateChar = function(marker1, qtdChar, textString, replaceString){
								var indexMarkInit = textString.indexOf(marker1);								
								var text = textString.substring(indexMarkInit);		
 
								if(text.length == textString.length)
									return "";
 
								var maxQtdChar = (text.length >= qtdChar + marker1.length) ? qtdChar : text.length - marker1.length;
 
								return text.substring(marker1.length, maxQtdChar);
				}
				if($){
					$(".wiki-content").children("ul").css("display","none");
						window["MarksIndex"] = 0;
				    
					var items = $(".wiki-content").children("ul").find('li').map(function() {
  						var item = { };
  						item["link"] = ($(this) != null && $(this) != undefined && $(this).children("a") != null && $(this).children("a") != undefined && $(this).children("a").length > 0) ? $(this).children("a").attr("href") : null;
 						item["parent"] = ($(this) != null && $(this) != undefined && $(this).parent() != null && $(this).parent() != undefined && $(this).parent().length > 0 && $(this).parent().parent() != null && $(this).parent().parent() != undefined && $(this).parent().parent().length > 0 && $(this).parent().parent().parent() != null && $(this).parent().parent().parent() != undefined && $(this).parent().parent().parent().length > 0 && $(this).parent().parent().parent().prop("tagName") == "UL") ? $(this).parent().parent().parent() : null;
						item["text"] = ($(this) != null && $(this) != undefined && $(this).children("a") != null && $(this).children("a") != undefined && $(this).children("a").length > 0) ? $(this).children("a").text() : "";
						item["isRoot"] = (item.parent == null) ? true : false;
						item["isLeaf"] = ($(this) != null && $(this) != undefined && $(this).children("a") != null && $(this).children("ul") != undefined && $(this).children("ul").length > 0) ? false : true;
						item["description"] = "";
						item["date"] = "";
                        item["image"] = "";
						item["visibility"] = true;
                        item["group"] = "";
						item["grouptext"] = "";
                        item["subtext"] = "";
						item["index"] = window.MarksIndex;
						item["pageid"] = 0;
						item["status"] = "";
						item["user"] = "";
                        item["baseurl"] = "";
						item["spacekey"] = "";
						item["versionnumber"] = "";
                        item["contextpath"] = "";
						item["userlocale"] = "";
						item["pagetype"] = "";
						item["layouttype"] = "";
						
						window.MarksIndex++;
 
						$.get(item["link"], function(data){
							htmlString = data;
 
							var itemOfArray = $.grep(items, function(e){ return e.link == item["link"]; });

							if(htmlString.indexOf("<content-mark>") >= 0 || htmlString.indexOf('<content-mark style="display:none">') >= 0){
								itemOfArray[0].description = ReplaceChar("<content-mark>", "</content-mark>", htmlString, "");
 
								if(itemOfArray[0].description == "")
									itemOfArray[0].description = ReplaceChar('<content-mark style="display:none">', "</content-mark>", htmlString, "");
 							}
 
							if(itemOfArray[0].description == ""){																
									var auxString = TruncateChar('<div id="main-content" class="wiki-content">', 3000, htmlString, "");
									itemOfArray[0].description = auxString.replace(/\<.+?\>/gi, "");								
							}
 
							if(itemOfArray[0].description != ""){
								if(itemOfArray[0].description.toString().length > 187)
									itemOfArray[0].description = itemOfArray[0].description.toString().substring(0, 182) + "...";
								else
									itemOfArray[0].description = itemOfArray[0].description.toString().substring(0, 185);
							}
							var replacedText = ReplaceChar('<h1 class="Destaqueinterno"', "</h1>", htmlString, "");
							replacedText = ReplaceChar('<span style="color: rgb(0,204,255);">',"</span>", replacedText, "");
							itemOfArray[0].text = (replacedText.indexOf("<h1") >= 0 || replacedText.indexOf("<span") >= 0) ? itemOfArray[0].text : replacedText;
							
							if(itemOfArray[0].text == "")
								itemOfArray[0].text = ReplaceChar('<meta name="ajs-page-title" content="','">', htmlString, "");			
 
							itemOfArray[0].text = itemOfArray[0].text.replace(/_/gi," ");	
 
							itemOfArray[0].pageid = ReplaceChar('<meta name="ajs-page-id" content="','">', htmlString, "");								
							itemOfArray[0].user = ReplaceChar('<meta name="ajs-remote-user" content="', '">', htmlString, "");
							itemOfArray[0].baseurl = ReplaceChar('<meta id="confluence-base-url" name="confluence-base-url" content="','">', htmlString, "");
							itemOfArray[0].spacekey = ReplaceChar('<meta id="confluence-space-key" name="confluence-space-key" content="', '">', htmlString, "");
							itemOfArray[0].versionnumber= ReplaceChar('<meta name="ajs-version-number" content="','">', htmlString, "");
							itemOfArray[0].contextpath = ReplaceChar('<meta name="ajs-context-path" content="', '">', htmlString, "");
							itemOfArray[0].userlocale = ReplaceChar('<meta name="ajs-user-locale" content="', '">', htmlString, "");
							itemOfArray[0].pagetype = ReplaceChar('<meta name="ajs-content-type" content="','">', htmlString, "");
							itemOfArray[0].status = ReplaceChar('<input type="hidden" id="stateName" value="','"/>', htmlString, "");							
 
							if(htmlString.indexOf("<date-mark>") >= 0 || htmlString.indexOf('<date-mark style="display:none">') >= 0){
								itemOfArray[0].date = ReplaceChar("<date-mark>", "</date-mark>", htmlString, "");
 
								if(itemOfArray[0].date == "")
									itemOfArray[0].date = ReplaceChar('<date-mark style="display:none">', "</date-mark>", htmlString, "");
 							}
 
							if(htmlString.indexOf("<image-mark>") >= 0 || htmlString.indexOf('<image-mark style="display:none">') >= 0){
								itemOfArray[0].image = ReplaceChar("<image-mark>", "</image-mark>", htmlString, "");
 
								if(itemOfArray[0].image == "")
									itemOfArray[0].image = ReplaceChar('<image-mark style="display:none">', "</image-mark>", htmlString, "");
 							}
 
							if(itemOfArray[0].image.indexOf("<img") >= 0){
								var divWrapper = document.createElement("div");
								divWrapper.innerHTML = itemOfArray[0].image;
								itemOfArray[0].image = $(divWrapper).find("img").prop("src");
							}
 
							if(itemOfArray[0].image == "")
								itemOfArray[0].image = "http://tdn.totvs.com/download/attachments/243011197/totvs_icon.png?version=1&modificationDate=1489183190001&api=v2";							
 
							if(htmlString.indexOf("<visibility-mark>") >= 0 || htmlString.indexOf('<visibility-mark style="display:none">') >= 0){
								itemOfArray[0].visibility = ReplaceChar("<visibility-mark>", "</visibility-mark>", htmlString, "");
 
								if(itemOfArray[0].visibility == "")
									itemOfArray[0].visibility = ReplaceChar('<visibility-mark style="display:none">', "</visibility-mark>", htmlString, "");
 
								if(itemOfArray[0].visibility == "visible")
									itemOfArray[0].visibility = true;
 							}
 
							if(htmlString.indexOf("<group-mark>") >= 0 || htmlString.indexOf('<group-mark style="display:none">') >= 0){
								itemOfArray[0].group = ReplaceChar("<group-mark>", "</group-mark>", htmlString, "");
 
								if(itemOfArray[0].group == "")
									itemOfArray[0].group = ReplaceChar('<group-mark style="display:none">', "</group-mark>", htmlString, "");
 							}
 
							if(htmlString.indexOf("<subtitle-mark>") >= 0 || htmlString.indexOf('<subtitle-mark style="display:none">') >= 0){
								itemOfArray[0].subtext = ReplaceChar("<subtitle-mark>", "</subtitle-mark>", htmlString, "");
 
								if(itemOfArray[0].subtext == "")
									itemOfArray[0].subtext = ReplaceChar('<subtitle-mark style="display:none">', "</subtitle-mark>", htmlString, "");							
							}
 
							if(htmlString.indexOf("<grouptext-mark>") >= 0 || htmlString.indexOf('<grouptext-mark style="display:none">') >= 0){
								itemOfArray[0].grouptext= ReplaceChar("<grouptext-mark>", "</grouptext-mark>", htmlString, "");
 
								if(itemOfArray[0].grouptext== "")
									itemOfArray[0].grouptext= ReplaceChar('<grouptext-mark style="display:none">', "</grouptext-mark>", htmlString, "");							
							}
 
							if(itemOfArray[0].status.toUpperCase() != "PUBLICADO")
								itemOfArray[0].visibility = false;
 
							if(itemOfArray[0].visibility){
 
								var _collapsiblePanel1 = null;
 								var _nameOfComponent = "CollapsiblePanel_" + ((itemOfArray[0].group == "") ? "Geral" : itemOfArray[0].group);
								var _exists = false;
 
								for(var att in window.CollapsiblePanels){
									if(att == _nameOfComponent){
										_exists = true;
										break;
									}
								}
 
								if(!_exists){
									var optCollapsiblePanel1 = {
										ID: "CollapsiblePanel_" + ((itemOfArray[0].group == "") ? "Geral" : itemOfArray[0].group),
										Collapsible: true,
										Title: ((itemOfArray[0].grouptext == "") ? "Geral" : itemOfArray[0].grouptext),
										Wrapper: "myContent"
									}							
 
									_collapsiblePanel1 = createCollapsiblePanel(optCollapsiblePanel1);			
								}
								else
									_collapsiblePanel1 = window.CollapsiblePanels["CollapsiblePanel_" + ((itemOfArray[0].group == "") ? "Geral" : itemOfArray[0].group)];
 
					    		var oContainer1Opt = {
									ID: "container_" + itemOfArray[0].index,
                        			Title: itemOfArray[0].text,
                        			SubTitle: itemOfArray[0].subtext,
                        			ImageUrl: itemOfArray[0].image,
                        			Description: itemOfArray[0].description,
                        			NavigateUrl: itemOfArray[0].link,
                        			Wrapper: "CollapsiblePanel_" + ((itemOfArray[0].group == "") ? "Geral" : itemOfArray[0].group) + "_MostExternalDiv",
									Date: itemOfArray[0].date,
									Parent: _collapsiblePanel1
                 				}
 
                				var _container1 = createContainer(oContainer1Opt);           		
 
								_collapsiblePanel1.BuildFilterStructure();
 
								_collapsiblePanel1.MaxHeight = _collapsiblePanel1.Object.offsetHeight;
								_collapsiblePanel1.Object.style.height = _collapsiblePanel1.Object.offsetHeight + "px";
								_collapsiblePanel1.Object.style.marginTop = "10px";
 							}
						});
						
  						return item;
					});
				}
 				
				createCollapsiblePanel = function(optCollapsiblePanel){
					var oCollapsiblePanel = function(optCollapsiblePanel){
						this.ID = "collapsiblePanel1";
						this.Title = "";
						this.MenuInstance = "";
						this.Collapsible = false;
						this.Wrapper = "";
						this.Parent = "";
						this.Object = "";
						this.Status = "OPENED"
						this.MaxHeight = 0;
						this.FilterStruct = [];
						this.FilterStruct["INDICE"] = [];
						this.FilterStruct["TITULO"] = [];
						this.FilterStruct["SUBTITULO"] = [];
						this.FilterStruct["DESCRICAO"] = [];
						this.FilterStruct["DATA"] = [];
						
						this.Collapse = function(){													
							if(this.Status == "OPENED"){
								this.MaxHeight = this.Object.offsetHeight;								
								this.Object.style.height = "45px";
								this.Status = "CLOSED";
							}
							else{
								this.Status = "OPENED";
								this.Object.style.height = this.MaxHeight + "px";
							}							
						}
						this.BuildFilterStructure = function(){
							for (var i = 0; i < window.Containers.length; i++){
									if(window.Containers[i].Parent.ID == this.ID){
										this.FilterStruct.TITULO[window.Containers[i].Title + "_" + i] = window.Containers[i];
										this.FilterStruct.SUBTITULO[window.Containers[i].SubTitle + "_" + i] = window.Containers[i];
										this.FilterStruct.DESCRICAO[window.Containers[i].Description + "_" + i] = window.Containers[i];
										this.FilterStruct.DATA[window.Containers[i].Date + "_" + i] = window.Containers[i];
										this.FilterStruct.INDICE[i] = window.Containers[i];		
									}					
							}
						}			
							
						this.ExecuteAction = function(tipo, tipoItem, texto){
							this.Object.style.height = "auto";
							if(tipo == "FILTRARSIMPLES")
								this.Filter(tipoItem, texto);
							else if(tipo == "FILTRARAVANCADO")
								this.FilterAdv(expressao);
							else if(tipo == "ORDENAR")
								this.Order(tipoItem, texto);
						}		
		
						this.Order = function(tipoItem, ascOrDesc){
								var StructASerUtilizado = this.FilterStruct[tipoItem];
								var array = [];
 
								for(var att in StructASerUtilizado){
									array.push(att);
								}
 
								if(array.sort){
									array.sort();
									if(ascOrDesc == "DESC" && array.reverse)
										array.reverse();
								}
								else{
									//metodo sort customizado
								}
 
								for(var i=0; i<array.length; i++){
									this.Object.appendChild(StructASerUtilizado[array[i]].Object);
								}																
						}		
						this.Filter = function(tipoItem, texto){						
							var StructASerUtilizado = this.FilterStruct[tipoItem];
							if(texto != ""){								
								for(var att in StructASerUtilizado)
									StructASerUtilizado[att].Object.style.display = "none";
								for(var att in StructASerUtilizado){
									if(att.toUpperCase().indexOf(texto.toUpperCase()) >= 0)										
										StructASerUtilizado[att].Object.style.display = "inline";									
								}	
							}
							else{
								for(var att in StructASerUtilizado)
									StructASerUtilizado[att].Object.style.display = "inline";
							}			
 
							this.MaxHeight = this.Object.offsetHeight;																					
						}
 
						this.LoadComponents = function(optCollapsiblePanel){
							
							this.ID = optCollapsiblePanel.ID;
							this.Title = optCollapsiblePanel.Title;
							this.MenuInstance = optCollapsiblePanel.MenuInstance;
							this.Collapsible = optCollapsiblePanel.Collapsible;
							this.Wrapper = optCollapsiblePanel.Wrapper;
 
							_collapsiblePanelObject = document.createElement("div");
							_collapsiblePanelObject.id = this.ID + "_MostExternalDiv" ;
							_collapsiblePanelObject.style.width = "100%";
							_collapsiblePanelObject.style.height = "auto";
							_collapsiblePanelObject.style.overflow = "hidden";
							_collapsiblePanelObject.style.margin = "0px";
							_collapsiblePanelObject.style.padding = "0px";
							_collapsiblePanelObject.style.background = "url(http://tdn.totvs.com/download/attachments/243011209/1600cefc.png?version=1&modificationDate=1485184017639&api=v2)";
							_collapsiblePanelObject.style.webkitTransition = "height 1s";
                            _collapsiblePanelObject.style.mozTransition = "height 1s";
                            _collapsiblePanelObject.style.transition = "height 1s";
							_collapsiblePanelObject.style.display = "table";
 
							_collapsiblePanelObjectHead = document.createElement("div");
							_collapsiblePanelObjectHead.id = _collapsiblePanelObject.id + "_Head";
							_collapsiblePanelObjectHead.style.background = "#606060";
							_collapsiblePanelObjectHead.style.height = "45px";
							_collapsiblePanelObjectHead.style.paddingLeft = "10px";
							_collapsiblePanelObjectHead.style.color = "#fff";
							_collapsiblePanelObjectHead.style.webkitBoxShadow = "3px 3px 10px 3px rgba(100, 100, 100, 0.7)";
                            _collapsiblePanelObjectHead.style.mozBoxShadow = "3px 3px 10px 3px rgba(100, 100, 100, 0.7)";
                            _collapsiblePanelObjectHead.style.boxShadow = "3px 3px 10px 3px rgba(100, 100, 100, 0.7)";
 
							_collapsiblePanelObjectHeadTitle = document.createElement("span");
							_collapsiblePanelObjectHeadTitle.id = _collapsiblePanelObjectHead.id + "_Title";
							_collapsiblePanelObjectHeadTitle.innerHTML = this.Title;
							_collapsiblePanelObjectHeadTitle.style.width = "336px";
							_collapsiblePanelObjectHeadTitle.style.textOverflow = "ellipsis";
							_collapsiblePanelObjectHeadTitle.style.fontSize = "20pt";
							_collapsiblePanelObjectHeadTitle.style.fontFamily = "Segoe UI, Candara, Bitstream Vera Sans, DejaVu Sans, Bitstream Vera Sans, Trebuchet MS, Verdana, Verdana Ref, sans-serif";
 
							_collapsiblePanelObjectHead.appendChild(_collapsiblePanelObjectHeadTitle);
 
							_collapsiblePanelObjectHeadMenu = document.createElement("div");
							_collapsiblePanelObjectHeadMenu.id = _collapsiblePanelObjectHead.id + "_Menu";
							_collapsiblePanelObjectHeadMenu.style.float = "right";
							_collapsiblePanelObjectHeadMenu.style.marginRight = "10px";
							_collapsiblePanelObjectHeadMenu.style.marginTop = "8px";
							_collapsiblePanelObjectHeadMenu.style.width = "26px";
							_collapsiblePanelObjectHeadMenu.style.height = "26px";
							_collapsiblePanelObjectHeadMenu.style.border = "1px solid #606060";
 
							_collapsiblePanelObjectHeadMenuImg = document.createElement("img");
							_collapsiblePanelObjectHeadMenuImg.id = _collapsiblePanelObjectHeadMenu.id + "_Img";
							_collapsiblePanelObjectHeadMenuImg.src = "http://tdn.totvs.com/download/attachments/243011209/menu.png?version=1&modificationDate=1487769415219&api=v2";
							_collapsiblePanelObjectHeadMenuImg.style.width = "16px";
							_collapsiblePanelObjectHeadMenuImg.style.height = "16px";
							_collapsiblePanelObjectHeadMenuImg.style.marginLeft = "5px";
							_collapsiblePanelObjectHeadMenuImg.style.marginTop = "5px";
 
							_collapsiblePanelObjectHeadMenu.appendChild(_collapsiblePanelObjectHeadMenuImg);
 
							_collapsiblePanelObjectHead.appendChild(_collapsiblePanelObjectHeadMenu);
 
							_collapsiblePanelObject.appendChild(_collapsiblePanelObjectHead);
 
							document.getElementById(this.Wrapper).appendChild(_collapsiblePanelObject);							
 
							var _objects = [];
							var _objectsTable = [];
 
							var optTableOptionItem3 = {
								ID: "TableOptionItem3",
								Description: "Índice",
								Type: "INDICE",
								HoverAction: function(){
												this.style.backgroundColor = "#f6c342";
												this.style.cursor = "pointer"; 
												document.getElementById(this.id + "_Description").style.color = "#000";
												var _input;
												if(document.getElementById(this.id + "_Input"))
													_input = document.getElementById(this.id + "_Input");
												else
													_input = document.createElement("input");
												
												_input.id = this.id + "_Input";
												_input.style.float = "right";
												_input.style.height = "14px";
												_input.style.width = "100px";
												_input.style.display = "inline";
 
												var _button;
 
												if(document.getElementById(this.id + "_Button"))
													_button = document.getElementById(this.id + "_Button");	
												else
													_button = document.createElement("div");		
 
												_button.id = this.id + "_Button";
												_button.style.float = "right"
												_button.innerHTML = "Filtrar";
												_button.style.background = "#606060";
												_button.style.color = "#fff";
												_button.style.padding = "0px 5px";
												_button.style.display = "inline";
 
												SetControlEvents(_button, "CLICK", function(){
													var _nameObject = this.id.replace("_Button","_Input");
													var _typeOptionTable = document.getElementById(this.id.replace("_Button","")).getAttribute("Type");
													var _typeOptionTableItem =  document.getElementById(this.id.replace("_Button","_Description")).getAttribute("Type");
													var _filterText = document.getElementById(_nameObject).value;
													var _instance = window.CollapsiblePanels[window.CurrentCollapsiblePanel];
													_instance.ExecuteAction(_typeOptionTable, _typeOptionTableItem, _filterText);
													window.Popins[window.CurrentPopin].Close();
												});																							
 
												this.appendChild(_button);
												this.appendChild(_input);							
								},
								OutAction: function(){
												this.style.backgroundColor = "#909090";
												this.style.cursor = "default"; 
												document.getElementById(this.id + "_Description").style.color = "#fff";				
 
												if(document.getElementById(this.id + "_Input"))
													document.getElementById(this.id + "_Input").style.display = "none";
 
												if(document.getElementById(this.id + "_Button"))
													document.getElementById(this.id + "_Button").style.display = "none";				
								}
							}
 
							var _objectTable3 = createTableOptionItem(optTableOptionItem3);
 
							_objectsTable.push(_objectTable3);
 
							var optTableOptionItem1 = {
								ID: "TableOptionItem1",
								Description: "Título",
								Type: "TITULO",
								HoverAction: function(){
												this.style.backgroundColor = "#f6c342";
												this.style.cursor = "pointer"; 
												document.getElementById(this.id + "_Description").style.color = "#000";
												var _input;
												if(document.getElementById(this.id + "_Input"))
													_input = document.getElementById(this.id + "_Input");
												else
													_input = document.createElement("input");
												
												_input.id = this.id + "_Input";
												_input.style.float = "right";
												_input.style.height = "14px";
												_input.style.width = "100px";
												_input.style.display = "inline";
 
												var _button;
 
												if(document.getElementById(this.id + "_Button"))
													_button = document.getElementById(this.id + "_Button");	
												else
													_button = document.createElement("div");		
 
												_button.id = this.id + "_Button";
												_button.style.float = "right"
												_button.innerHTML = "Filtrar";
												_button.style.background = "#606060";
												_button.style.color = "#fff";
												_button.style.padding = "0px 5px";
												_button.style.display = "inline";
 
												SetControlEvents(_button, "CLICK", function(){
													var _nameObject = this.id.replace("_Button","_Input");
													var _typeOptionTable = document.getElementById(this.id.replace("_Button","")).getAttribute("Type");
													var _typeOptionTableItem =  document.getElementById(this.id.replace("_Button","_Description")).getAttribute("Type");
													var _filterText = document.getElementById(_nameObject).value;
													var _instance = window.CollapsiblePanels[window.CurrentCollapsiblePanel];
													_instance.ExecuteAction(_typeOptionTable, _typeOptionTableItem, _filterText);
													window.Popins[window.CurrentPopin].Close();
												});																							
 
												this.appendChild(_button);
												this.appendChild(_input);							
								},
								OutAction: function(){
												this.style.backgroundColor = "#909090";
												this.style.cursor = "default"; 
												document.getElementById(this.id + "_Description").style.color = "#fff";				
 
												if(document.getElementById(this.id + "_Input"))
													document.getElementById(this.id + "_Input").style.display = "none";
 
												if(document.getElementById(this.id + "_Button"))
													document.getElementById(this.id + "_Button").style.display = "none";				
								}
							}
 
							var _objectTable1 = createTableOptionItem(optTableOptionItem1);
 
							_objectsTable.push(_objectTable1);
 
							var optTableOptionItem2 = {
								ID: "TableOptionItem2",
								Description: "Sub-título",
								Type: "SUBTITULO",
								HoverAction: function(){
												this.style.backgroundColor = "#f6c342";
												this.style.cursor = "pointer"; 
												document.getElementById(this.id + "_Description").style.color = "#000";
												var _input;
												if(document.getElementById(this.id + "_Input"))
													_input = document.getElementById(this.id + "_Input");
												else
													_input = document.createElement("input");
												
												_input.id = this.id + "_Input";
												_input.style.float = "right";
												_input.style.height = "14px";
												_input.style.width = "100px";
												_input.style.display = "inline";
 
												var _button;
 
												if(document.getElementById(this.id + "_Button"))
													_button = document.getElementById(this.id + "_Button");	
												else
													_button = document.createElement("div");		
 
												_button.id = this.id + "_Button";
												_button.style.float = "right"
												_button.innerHTML = "Filtrar";
												_button.style.background = "#606060";
												_button.style.color = "#fff";
												_button.style.padding = "0px 5px";
												_button.style.display = "inline";
 
												SetControlEvents(_button, "CLICK", function(){
													var _nameObject = this.id.replace("_Button","_Input");
													var _typeOptionTable = document.getElementById(this.id.replace("_Button","")).getAttribute("Type");
													var _typeOptionTableItem =  document.getElementById(this.id.replace("_Button","_Description")).getAttribute("Type");
													var _filterText = document.getElementById(_nameObject).value;
													var _instance = window.CollapsiblePanels[window.CurrentCollapsiblePanel];
													_instance.ExecuteAction(_typeOptionTable, _typeOptionTableItem, _filterText);
													window.Popins[window.CurrentPopin].Close();
												});																							
 
												this.appendChild(_button);
												this.appendChild(_input);							
								},
								OutAction: function(){
												this.style.backgroundColor = "#909090";
												this.style.cursor = "default"; 
												document.getElementById(this.id + "_Description").style.color = "#fff";				
 
												if(document.getElementById(this.id + "_Input"))
													document.getElementById(this.id + "_Input").style.display = "none";
 
												if(document.getElementById(this.id + "_Button"))
													document.getElementById(this.id + "_Button").style.display = "none";				
								}
							}

							var _objectTable2 = createTableOptionItem(optTableOptionItem2);
 
							_objectsTable.push(_objectTable2);
 
							var optTableOptionItem5 = {
								ID: "TableOptionItem5",
								Description: "Descrição",
								Type: "DESCRICAO",
								HoverAction: function(){
												this.style.backgroundColor = "#f6c342";
												this.style.cursor = "pointer"; 
												document.getElementById(this.id + "_Description").style.color = "#000";
												var _input;
												if(document.getElementById(this.id + "_Input"))
													_input = document.getElementById(this.id + "_Input");
												else
													_input = document.createElement("input");
												
												_input.id = this.id + "_Input";
												_input.style.float = "right";
												_input.style.height = "14px";
												_input.style.width = "100px";
												_input.style.display = "inline";
 
												var _button;
 
												if(document.getElementById(this.id + "_Button"))
													_button = document.getElementById(this.id + "_Button");	
												else
													_button = document.createElement("div");		
 
												_button.id = this.id + "_Button";
												_button.style.float = "right"
												_button.innerHTML = "Filtrar";
												_button.style.background = "#606060";
												_button.style.color = "#fff";
												_button.style.padding = "0px 5px";
												_button.style.display = "inline";
 
												SetControlEvents(_button, "CLICK", function(){
													var _nameObject = this.id.replace("_Button","_Input");
													var _typeOptionTable = document.getElementById(this.id.replace("_Button","")).getAttribute("Type");
													var _typeOptionTableItem =  document.getElementById(this.id.replace("_Button","_Description")).getAttribute("Type");
													var _filterText = document.getElementById(_nameObject).value;
													var _instance = window.CollapsiblePanels[window.CurrentCollapsiblePanel];
													_instance.ExecuteAction(_typeOptionTable, _typeOptionTableItem, _filterText);
													window.Popins[window.CurrentPopin].Close();
												});																							
 
												this.appendChild(_button);
												this.appendChild(_input);							
								},
								OutAction: function(event){											
												this.style.backgroundColor = "#909090";
												this.style.cursor = "default"; 
												document.getElementById(this.id + "_Description").style.color = "#fff";				
 
												if(document.getElementById(this.id + "_Input"))
													document.getElementById(this.id + "_Input").style.display = "none";
 
												if(document.getElementById(this.id + "_Button"))
													document.getElementById(this.id + "_Button").style.display = "none";				
								}
							}

							var _objectTable5 = createTableOptionItem(optTableOptionItem5);
 
							_objectsTable.push(_objectTable5);
 
							var optTableOptionItem4 = {
								ID: "TableOptionItem4",
								Description: "Data Criação",
								Type: "DATA",
								HoverAction: function(){
												this.style.backgroundColor = "#f6c342";
												this.style.cursor = "pointer"; 
												document.getElementById(this.id + "_Description").style.color = "#000";
												var _input;
												if(document.getElementById(this.id + "_Input"))
													_input = document.getElementById(this.id + "_Input");
												else
													_input = document.createElement("input");
												
												_input.id = this.id + "_Input";
												_input.style.float = "right";
												_input.style.height = "14px";
												_input.style.width = "100px";
												_input.style.display = "inline";
 
												var _button;
 
												if(document.getElementById(this.id + "_Button"))
													_button = document.getElementById(this.id + "_Button");	
												else
													_button = document.createElement("div");		
 
												_button.id = this.id + "_Button";
												_button.style.float = "right"
												_button.innerHTML = "Filtrar";
												_button.style.background = "#606060";
												_button.style.color = "#fff";
												_button.style.padding = "0px 5px";
												_button.style.display = "inline";
 
												SetControlEvents(_button, "CLICK", function(){
													var _nameObject = this.id.replace("_Button","_Input");
													var _typeOptionTable = document.getElementById(this.id.replace("_Button","")).getAttribute("Type");
													var _typeOptionTableItem =  document.getElementById(this.id.replace("_Button","_Description")).getAttribute("Type");
													var _filterText = document.getElementById(_nameObject).value;
													var _instance = window.CollapsiblePanels[window.CurrentCollapsiblePanel];
													_instance.ExecuteAction(_typeOptionTable, _typeOptionTableItem, _filterText);
													window.Popins[window.CurrentPopin].Close();
												});																							
 
												this.appendChild(_button);
												this.appendChild(_input);							
								},
								OutAction: function(event){												
												this.style.backgroundColor = "#909090";
												this.style.cursor = "default"; 
												document.getElementById(this.id + "_Description").style.color = "#fff";				
 
												if(document.getElementById(this.id + "_Input"))
													document.getElementById(this.id + "_Input").style.display = "none";
 
												if(document.getElementById(this.id + "_Button"))
													document.getElementById(this.id + "_Button").style.display = "none";				
								}
							}

							var _objectTable4 = createTableOptionItem(optTableOptionItem4);
 
							_objectsTable.push(_objectTable4);
 
							var optTableOption1 = {
								ID: "TableOption1",
								Objects: _objectsTable,
								Type: "FILTRARSIMPLES"
							}		
 
							var _tableOption1 = new createTableOption(optTableOption1);
 
							var optMenuItem1 = {
								ID: _collapsiblePanelObject.id.replace("_MostExternalDiv","") + "_Menu1_" + "MenuItem1",
								Action: function(){
									var optPopin1 = {
											ID: "Popin1",
											Title: "Filtrar (Simples)",
											Align: "CENTER",
											Modal: true,
											ObjectContent: _tableOption1.Object
									}
 
									createPopin(optPopin1);
									var _nameParent = this.getAttribute("Parent");
									var _nameInstance = _nameParent.replace("_MostExternalDiv","");
									var _instance = window.Menus[_nameInstance];
 
									_instance.Hide();
									_instance.Parent.UndoHighlightMenu();
								},
								Description: "Filtrar (Simples)"
							}
							var _object1 = createMenuItem(optMenuItem1);
 
							_objects.push(_object1);
 
							var optCustomQuerySubmitter1 = {
								ID: "CustomQuerySubmitter1"
							}		
 
							var _customQuerySubmitter1 = createCustomQuerySubmitter(optCustomQuerySubmitter1);							
 
							var optMenuItem4 = {
								ID: _collapsiblePanelObject.id.replace("_MostExternalDiv","") + "_Menu1_" + "MenuItem4",
								Action: function(){
									var optPopin4 = {
											ID: "Popin4",
											Title: "Filtrar (Avançado)",
											ObjectContent: _customQuerySubmitter1.Object,
											Align: "CENTER",
											Modal: true
									}
 
									createPopin(optPopin4);
 									
									var _nameParent = this.getAttribute("Parent");
									var _nameInstance = _nameParent.replace("_MostExternalDiv","");
									var _instance = window.Menus[_nameInstance];
 
									_instance.Hide();
									_instance.Parent.UndoHighlightMenu();
								},
								Description: "Filtrar (Avançado)"
							}
							var _object4 = createMenuItem(optMenuItem4);
 
							_objects.push(_object4);
 
							var _objectsTable2 = [];
 
							var optTableOptionItem6 = {
								ID: "TableOptionItem6",
								Description: "Índice",
								Type: "INDICE",
								Action: function(){
									var _parent = document.getElementById(this.id).getAttribute("Parent");
									var _nameObject = _parent.replace("_MostExternalDiv","") + "_CheckBox";
									var _typeOptionTable = document.getElementById(this.id).getAttribute("Type");
									var _typeOptionTableItem =  document.getElementById(this.id + "_Description").getAttribute("Type");
									var _instance = window.CollapsiblePanels[window.CurrentCollapsiblePanel];
									var _order = (document.getElementById(_nameObject).checked) ? "DESC" : "ASC";
									_instance.ExecuteAction(_typeOptionTable, _typeOptionTableItem, _order);
									window.Popins[window.CurrentPopin].Close();														
								}						
							}
 
							var _objectTable6 = createTableOptionItem(optTableOptionItem6);
 
							_objectsTable2.push(_objectTable6);
 
							var optTableOptionItem7 = {
								ID: "TableOptionItem7",
								Description: "Título",
								Type: "TITULO",
								Action: function(){
									var _parent = document.getElementById(this.id).getAttribute("Parent");
									var _nameObject = _parent.replace("_MostExternalDiv","") + "_CheckBox";
									var _typeOptionTable = document.getElementById(this.id).getAttribute("Type");
									var _typeOptionTableItem =  document.getElementById(this.id + "_Description").getAttribute("Type");
									var _instance = window.CollapsiblePanels[window.CurrentCollapsiblePanel];
									var _order = (document.getElementById(_nameObject).checked) ? "DESC" : "ASC";
									_instance.ExecuteAction(_typeOptionTable, _typeOptionTableItem, _order);
									window.Popins[window.CurrentPopin].Close();									
								}								
							}
 
							var _objectTable7 = createTableOptionItem(optTableOptionItem7);
 
							_objectsTable2.push(_objectTable7);
 
							var optTableOptionItem8 = {
								ID: "TableOptionItem8",
								Description: "Sub-título",
								Type: "SUBTITULO",
								Action: function(){
									var _parent = document.getElementById(this.id).getAttribute("Parent");
									var _nameObject = _parent.replace("_MostExternalDiv","") + "_CheckBox";
									var _typeOptionTable = document.getElementById(this.id).getAttribute("Type");
									var _typeOptionTableItem =  document.getElementById(this.id + "_Description").getAttribute("Type");
									var _instance = window.CollapsiblePanels[window.CurrentCollapsiblePanel];
									var _order = (document.getElementById(_nameObject).checked) ? "DESC" : "ASC";
									_instance.ExecuteAction(_typeOptionTable, _typeOptionTableItem, _order);
									window.Popins[window.CurrentPopin].Close();									
								}											
							}
							var _objectTable8 = createTableOptionItem(optTableOptionItem8);
 
							_objectsTable2.push(_objectTable8);
 
							var optTableOptionItem9 = {
								ID: "TableOptionItem9",
								Description: "Descrição",
								Type: "DESCRICAO",
								Action: function(){
									var _parent = document.getElementById(this.id).getAttribute("Parent");
									var _nameObject = _parent.replace("_MostExternalDiv","") + "_CheckBox";
									var _typeOptionTable = document.getElementById(this.id).getAttribute("Type");
									var _typeOptionTableItem =  document.getElementById(this.id + "_Description").getAttribute("Type");
									var _instance = window.CollapsiblePanels[window.CurrentCollapsiblePanel];
									var _order = (document.getElementById(_nameObject).checked) ? "DESC" : "ASC";
									_instance.ExecuteAction(_typeOptionTable, _typeOptionTableItem, _order);
									window.Popins[window.CurrentPopin].Close();									
								}											
							}
							var _objectTable9 = createTableOptionItem(optTableOptionItem9);
 
							_objectsTable2.push(_objectTable9);
 
							var optTableOptionItem10 = {
								ID: "TableOptionItem10",
								Description: "Data Criação",
								Type: "DATA",
								Action: function(){
									var _parent = document.getElementById(this.id).getAttribute("Parent");
									var _nameObject = _parent.replace("_MostExternalDiv","") + "_CheckBox";
									var _typeOptionTable = document.getElementById(this.id).getAttribute("Type");
									var _typeOptionTableItem =  document.getElementById(this.id + "_Description").getAttribute("Type");
									var _instance = window.CollapsiblePanels[window.CurrentCollapsiblePanel];
									var _order = (document.getElementById(_nameObject).checked) ? "DESC" : "ASC";
									_instance.ExecuteAction(_typeOptionTable, _typeOptionTableItem, _order);
									window.Popins[window.CurrentPopin].Close();									
								}										
							}
							var _objectTable10 = createTableOptionItem(optTableOptionItem10);
 
							_objectsTable2.push(_objectTable10);
 
							var optTableOption2 = {
								ID: "TableOption2",
								Objects: _objectsTable2,
								Type: "ORDENAR"
							}		
 
							var _tableOption2 = new createTableOption(optTableOption2);
 
							var _checkBox = document.createElement("input");
							_checkBox.id = _tableOption2.ID + "_CheckBox";
							_checkBox.type = "checkbox";
							_checkBox.style.bottom = "-25px";
							_checkBox.style.left = "0px";
							_checkBox.style.position = "absolute";
 
							var _inputCheckBox = document.createElement("span");
							_inputCheckBox.id = _tableOption2.ID + "_Span";
							_inputCheckBox.style.bottom = "-25px";
							_inputCheckBox.style.left = "20px";
							_inputCheckBox.style.position = "absolute";
							_inputCheckBox.innerHTML = "Ordem Descendente";
 
							_tableOption2.Object.appendChild(_checkBox);
							_tableOption2.Object.appendChild(_inputCheckBox);
							var optMenuItem2 = {
								ID: _collapsiblePanelObject.id.replace("_MostExternalDiv","") + "_Menu1_" + "MenuItem2",
								Action: function(){
									var optPopin2 = {
											ID: "Popin2",
											Title: "Ordenar",
											Align: "CENTER",
											Modal: true,
											ObjectContent: _tableOption2.Object
									}
 
									createPopin(optPopin2);
									var _nameParent = this.getAttribute("Parent");
									var _nameInstance = _nameParent.replace("_MostExternalDiv","");
									var _instance = window.Menus[_nameInstance];
 
									_instance.Hide();
									_instance.Parent.UndoHighlightMenu();
								},
								Description: "Ordenar"
							}
							var _object2 = createMenuItem(optMenuItem2);
 
							_objects.push(_object2);
 
							if(this.Collapsible){
 
								var optMenuItem5 = {
									ID: _collapsiblePanelObject.id.replace("_MostExternalDiv","") + "_Menu1_" + "MenuItem5",
									Action: function(){										
										var _nameParent = this.getAttribute("Parent");
										var _nameInstance = _nameParent.replace("_MostExternalDiv","");
										var _instance = window.Menus[_nameInstance];
 
										_instance.Parent.Object.style.height = (_instance.Parent.MaxHeight > 0) ? _instance.Parent.MaxHeight + "px" : _instance.Parent.Object.style.height;
										_instance.Parent.Object.style.display = "";
										_instance.Parent.Collapse();
										var  _status = _instance.Parent.Status;									
										if(_status == "OPENED")
											document.getElementById(this.id + "_Description").innerHTML = "Retrair";
										else
											document.getElementById(this.id + "_Description").innerHTML = "Expandir";
										
										_instance.Hide();
										_instance.Parent.UndoHighlightMenu();
									},
									Description: "Retrair"
								}
								var _object5 = createMenuItem(optMenuItem5);
 
								_objects.push(_object5);
							}
							var optMenuItem3 = {
								ID: _collapsiblePanelObject.id.replace("_MostExternalDiv","") + "_Menu1_" + "MenuItem3",
									Action: function(){
									var optPopin3 = {
											ID: "Popin3",
											Title: "Trocar Visualização",
											InnerHTML: "teste",
											Align: "CENTER",
											Modal: true
									}
 
									createPopin(optPopin3);
									var _nameParent = this.getAttribute("Parent");
									var _nameInstance = _nameParent.replace("_MostExternalDiv","");
									var _instance = window.Menus[_nameInstance];
 
									_instance.Hide();
									_instance.Parent.UndoHighlightMenu();
								},
								Description: "Trocar Visualização"
							}
							var _object3 = createMenuItem(optMenuItem3);
 
							_objects.push(_object3);
							var optMenu1 = {
								ID: _collapsiblePanelObject.id.replace("_MostExternalDiv","") + "_Menu1",
								Objects: _objects,
								Wrapper: _collapsiblePanelObjectHeadMenu.id
							}		
 						
							this.MenuInstance = createMenu(optMenu1);
							this.MenuInstance.Parent = this;
 
							this.Object = _collapsiblePanelObject;

							if(window["CollapsiblePanels"] == undefined)
								window["CollapsiblePanels"] = [];												
																							
							window.CollapsiblePanels[this.ID] = this;
							window.CollapsiblePanels[window.CollapsiblePanels.length] = this;
							window["CurrentCollapsiblePanel"] = this.ID; 
							SetControlEvents(_collapsiblePanelObjectHeadMenu.id, "MOVER", function(){
								var __img = this;
								var _nameInstance = this.id.replace("_MostExternalDiv_Head_Menu", "")
								var _menu1 = window.CollapsiblePanels[_nameInstance].MenuInstance;
				
								if(_menu1.Status == "HIDDEN"){
                        			__img.style.backgroundColor = "#909090";
									__img.style.cursor= "pointer";
								}
							});
							SetControlEvents(_collapsiblePanelObjectHeadMenu.id, "MOU", function(){
								var __img = this;
								var _nameInstance = this.id.replace("_MostExternalDiv_Head_Menu", "")
								var _menu1 = window.CollapsiblePanels[_nameInstance].MenuInstance;
 
								if(_menu1.Status == "HIDDEN"){
                        			__img.style.backgroundColor = "#606060";
									__img.style.cursor= "default";
								}
							});
							SetControlEvents(_collapsiblePanelObjectHeadMenu.id, "CLICK", function(){
								var _nameInstance = this.id.replace("_MostExternalDiv_Head_Menu", "")
								var _menu1 = window.CollapsiblePanels[_nameInstance].MenuInstance;
								window.CurrentCollapsiblePanel = _nameInstance;
								_menu1.Show();
 
								var _object = _menu1.Object;
 
								_object.style.border = "1px solid #f6c342";
								_object.style.width = "168px";
 
								var __img = this;
								if(_menu1.Status == "OPENED"){
									__img.style.backgroundColor = "#909090";
									__img.style.cursor= "pointer";
									__img.style.border = "1px solid #f6c342";
									__img.style.borderBottom = "1px solid #909090"
								}
								else{
									__img.style.border = "1px solid #606060";
								}
							});
 
							window.onresize = function(){
								var body = document.body,
    							html = document.documentElement;
								var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );							
								var width = Math.max( body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth );					
								var _menu1 = window.Menus[window.CurrentMenu];
								if(_menu1){
									 if(window.Menus[window.CurrentMenu]['ScreenWidth'] != width || window.Menus[window.CurrentMenu]['ScreenHeight'] != height){
										_menu1.Hide();
										_menu1.UpdatePosition(_menu1.Object, _menu1.TopBorderObject);			
										_menu1.Parent.UndoHighlightMenu();				
										window.Menus[window.CurrentMenu]['ScreenHeight'] = height;	
										window.Menus[window.CurrentMenu]['ScreenWidth'] = width;	
									}
								}
							}
 
							return this;
						}
 
						this.UndoHighlightMenu = function(){								
								document.getElementById(this.ID + "_MostExternalDiv_Head_Menu").style.border = "1px solid #606060";
								document.getElementById(this.ID + "_MostExternalDiv_Head_Menu").style.backgroundColor = "#606060";
						}
 
						return this.LoadComponents(optCollapsiblePanel);
					}
					return new oCollapsiblePanel(optCollapsiblePanel);
				}
 
				createPopin = function(optPopin){
					var oPopin = function(optPopin){
						this.ID = "popin1";
						this.Title = "";
						this.InnerHTML = "";
						this.Align = "";
						this.Modal = false;
						this.Object = "";
						this.ModalObject = "";
						this.Parent = "";
						this.ObjectContent = "";
 
						this.LoadComponents = function(optPopin){
							var _popinObject = null;
							var _popinObjectHead = null;
							var _popinObjectHeadTitle = null;
							var _popinObjectHeadClose = null;
							var _popinObjectHeadCloseImg = null;
							var _popinObjectBody = null;
							var _popinObjectModal = null;
 							
							this.ID = optPopin.ID;
							this.Title = optPopin.Title;
							this.InnerHTML = optPopin.InnerHTML;
							this.Align = optPopin.Align;
							this.Modal = optPopin.Modal;
							this.ObjectContent = optPopin.ObjectContent;
 
							_popinObject = document.createElement("div");
							_popinObject.id = this.ID + "_MostExternalDiv";
							_popinObject.style.display = "block";
							_popinObject.style.position = "absolute";
							_popinObject.style.zIndex = "100";
							_popinObject.style.width = "400px";
							_popinObject.style.height = "300px";
							_popinObject.style.top = ($ && $(document).scrollTop() > 0 ? "calc(50% + " + $(document).scrollTop() + "px)" : "50%");
							_popinObject.style.left = "50%";
							_popinObject.style.marginLeft = "-200px";
							_popinObject.style.marginTop = "-150px";
							_popinObject.style.backgroundColor = "#909090";
							_popinObject.style.border= "1px solid #f6c342";
							_popinObject.style.background = "url(http://tdn.totvs.com/download/attachments/243011209/1600cefc.png?version=1&modificationDate=1485184017639&api=v2)";
							_popinObject.style.webkitBoxShadow = "3px 3px 10px 3px rgba(100, 100, 100, 0.7)";
                            _popinObject.style.mozBoxShadow = "3px 3px 10px 3px rgba(100, 100, 100, 0.7)";
                            _popinObject.style.boxShadow = "3px 3px 10px 3px rgba(100, 100, 100, 0.7)";
 
							_popinObjectModal = document.createElement("div");
							_popinObjectModal.id = this.ID + "_MostExternalDiv";
							_popinObjectModal.style.display = "block";
							_popinObjectModal.style.position = "absolute";
							_popinObjectModal.style.zIndex = "99";
							_popinObjectModal.style.width = "100%";
							_popinObjectModal.style.height = ($ && $(document).height() > 0 ? $(document).height() + "px" : "100%");
							_popinObjectModal.style.top = "0px";
							_popinObjectModal.style.left = "0px";
							_popinObjectModal.style.background = "rgba(0, 0, 0, 0.4)";
 
							if(!this.Modal)
								_popinObjectModal.style.display = "none";

							_popinObjectHead = document.createElement("div");
							_popinObjectHead.id = _popinObject.id + "_Head";
							_popinObjectHead.style.width = "100%";
							_popinObjectHead.style.height = "35px";
							_popinObjectHead.style.background = "#606060";
							_popinObjectHead.style.paddingTop = "5px";
							_popinObjectHead.style.webkitBoxShadow = "3px 3px 10px 3px rgba(100, 100, 100, 0.7)";
                            _popinObjectHead.style.mozBoxShadow = "3px 3px 10px 3px rgba(100, 100, 100, 0.7)";
                            _popinObjectHead.style.boxShadow = "3px 3px 10px 3px rgba(100, 100, 100, 0.7)";
 
							_popinObject.appendChild(_popinObjectHead);

							_popinObjectHeadTitle = document.createElement("span");
							_popinObjectHeadTitle.id = _popinObjectHead.id + "_Title";
							_popinObjectHeadTitle.innerHTML = this.Title;
							_popinObjectHeadTitle.style.fontFamily = "Segoe UI, Candara, Bitstream Vera Sans, DejaVu Sans, Bitstream Vera Sans, Trebuchet MS, Verdana, Verdana Ref, sans-serif";
							_popinObjectHeadTitle.style.fontSize = "14pt";
							_popinObjectHeadTitle.style.color = "#fff";
							_popinObjectHeadTitle.style.paddingLeft = "10px";
 
							_popinObjectHead.appendChild(_popinObjectHeadTitle);

							_popinObjectHeadClose = document.createElement("div");
							_popinObjectHeadClose.id = _popinObjectHead.id + "_Close";
							_popinObjectHeadClose.style.width = "16px";
							_popinObjectHeadClose.style.height = "16px";
							_popinObjectHeadClose.style.float = "right";
							_popinObjectHeadClose.style.marginTop = "5px";
							_popinObjectHeadClose.style.marginRight = "10px";
 
							SetControlEvents(_popinObjectHeadClose, "CLICK", function(){
								var _nameInstance = this.id.replace("_MostExternalDiv_Head_Close","");
								var _instance = window.Popins[_nameInstance];
 
								_instance.Close();
							});
 
							SetControlEvents(_popinObjectHeadClose, "MOVER", function(){
								this.style.cursor = "pointer";
							});
 
							SetControlEvents(_popinObjectHeadClose, "MOUT", function(){
								this.style.cursor = "default";
							});
							_popinObjectHeadCloseImg = document.createElement("img");
							_popinObjectHeadCloseImg.id = _popinObjectHeadClose.id + "_Img";
							_popinObjectHeadCloseImg.name = _popinObjectHeadClose.id + "_Img";
							_popinObjectHeadCloseImg.src = "http://tdn.totvs.com/download/attachments/243011209/close.png?version=1&modificationDate=1487769419003&api=v2";
							_popinObjectHeadCloseImg.style.width = "16px";
							_popinObjectHeadCloseImg.style.height = "16px";							
 
							_popinObjectHead.appendChild(_popinObjectHeadClose);
 
							_popinObjectHeadClose.appendChild(_popinObjectHeadCloseImg);

							_popinObjectBody = document.createElement("div");
							_popinObjectBody.id = _popinObject.id + "_Body";
							_popinObjectBody.style.backgroundColor = "#fff";							
							_popinObjectBody.style.margin= "10px";
							_popinObjectBody.style.height = "240px";
						    _popinObjectBody.style.webkitBoxShadow = "3px 3px 3px 0px rgba(100, 100, 100, 0.4)";
                            _popinObjectBody.style.mozBoxShadow = "3px 3px 3px 0px rgba(100, 100, 100, 0.4)";
                            _popinObjectBody.style.boxShadow = "3px 3px 3px 0px rgba(100, 100, 100, 0.4)";
 
							if(this.ObjectContent == undefined)
								_popinObjectBody.innerHTML = this.InnerHTML;
							else
 								_popinObjectBody.appendChild(this.ObjectContent);
							_popinObject.appendChild(_popinObjectBody);
 
							document.body.appendChild(_popinObject);
							document.body.appendChild(_popinObjectModal);
 
							this.Object = _popinObject;
							this.ModalObject = _popinObjectModal;
 
							if(window["Popins"] == undefined)
								window["Popins"] = [];												
																							
							window.Popins[this.ID] = this;
							window.Popins[window.Popins.length] = this;
							window["CurrentPopin"] = this.ID; 

							return this;
						}
 
						this.Close = function(){
							document.body.removeChild(this.Object);
							document.body.removeChild(this.ModalObject);
						};
 
						return this.LoadComponents(optPopin);
					}
 					
					return new oPopin(optPopin);
				}
 
				createMenu = function(optMenu){
						var oMenu = function(optMenu){
									this.ID = "menu1";
                        			this.Objects = {};
									this.Wrapper = "";
									this.Status = "HIDDEN";
									this.Object = "";
									this.TopBorderObject = "";
									this.Parent = "";
 
									this.LoadComponents = function(optMenu){
 										var _menuObject = null;
										var _menuObjectContainer = null;
 
										this.ID = optMenu.ID;
										this.Objects = optMenu.Objects;
										this.Wrapper = optMenu.Wrapper;
 
										_menuObjectTopBorder = document.createElement("div");
										_menuObjectTopBorder.id = this.ID + "_TopBorder";
										_menuObjectTopBorder.style.display = "none";
										_menuObjectTopBorder.style.position = "absolute";
										_menuObjectTopBorder.style.backgroundColor = "#909090";
										_menuObjectTopBorder.style.width = "26px";
										_menuObjectTopBorder.style.height = "1px";
										_menuObjectTopBorder.style.zIndex = "2";
										_menuObject = document.createElement("div");
										_menuObject.id = this.ID + "_MostExternalDiv";
										_menuObject.style.display = "none";
										_menuObject.style.position = "absolute";
										_menuObject.style.width = "170px";
										_menuObject.style.backgroundColor= "#909090";
 
										_menuObjectContainer = document.createElement("div");
										_menuObjectContainer.id = _menuObject.id + "_Container";
										_menuObjectContainer.style.width = "150px";
										_menuObjectContainer.style.margin = "10px";
 
										for(var i = 0; i < this.Objects.length; i++){
											_menuObjectContainer.appendChild(this.Objects[i]);
											this.Objects[i].setAttribute("Parent", _menuObject.id);
										}
 
										_menuObject.appendChild(_menuObjectContainer);
 
										document.getElementById("main").appendChild(_menuObject);
										document.getElementById(this.Wrapper).appendChild(_menuObjectTopBorder);
 
										this.UpdatePosition(_menuObject, _menuObjectTopBorder);
 										
										this.TopBorderObject  = _menuObjectTopBorder;
										this.Object = _menuObject;				
		
										if(window["Menus"] == undefined)
											window["Menus"] = [];												
																							
										window.Menus[this.ID] = this;
										window.Menus[window.Menus.length] = this;
										window["CurrentMenu"] = this.ID; 
 
										return this;
									}
 
									this.UpdatePosition = function(_menuObject, _topBorderObject){
										if(_menuObject){
											_menuObject.style.left = (document.getElementById(this.Wrapper).offsetLeft - 142) + "px";
											_menuObject.style.top = (document.getElementById(this.Wrapper).offsetTop + 26) + "px";
										}
 
										if(_topBorderObject){
											_topBorderObject.style.top = (document.getElementById(this.Wrapper).offsetTop + 26) + "px";
										}
									}
 
									this.Show = function(){										
										if(this.Status == "HIDDEN"){
											this.Status = "OPENED";
											this.Object.style.display = "block";
											this.TopBorderObject.style.display = "block";
											this.UpdatePosition(this.Object, this.TopBorderObject);
										}
										else
											this.Hide();
									};
 
									this.Hide = function(){
										if(this.Status == "OPENED"){
											this.Status = "HIDDEN";
											this.Object.style.display = "none";
											this.TopBorderObject.style.display = "none"
										}
									};
 
									return this.LoadComponents(optMenu);
						}
					
						return new oMenu(optMenu);
				}
 
				createMenuItem = function(optMenuItem){
						var oMenuItem = function(optMenuItem){
									this.ID = "menuItem1";
                       				this.Action = "";
									this.Description = "";
									this.Parent = "";

									this.LoadComponents = function(optMenuItem){
 											var _menuItemObject = null;
											var _menuItemObjectDescription = null;
 
											this.ID = optMenuItem.ID;
											this.Action = optMenuItem.Action;
											this.Description = optMenuItem.Description;
 
											_menuItemObject = document.createElement("div");
											_menuItemObject.id = this.ID + "_MostExternalDiv";
											_menuItemObject.style.padding = "5px";
 
											SetControlEvents(_menuItemObject, "MOVER", function(){
												this.style.backgroundColor = "#f6c342";
												this.style.cursor = "pointer"; 
												document.getElementById(this.id + "_Description").style.color = "#000";												
											});
 
											SetControlEvents(_menuItemObject, "MOUT", function(){
												this.style.backgroundColor = "#909090";
												this.style.cursor = "default"; 
												document.getElementById(this.id + "_Description").style.color = "#fff";
											});
 
											SetControlEvents(_menuItemObject, "CLICK", this.Action);
 
											_menuItemObjectDescription = document.createElement("span");
											_menuItemObjectDescription.id = _menuItemObject.id + "_Description";
											_menuItemObjectDescription.innerHTML = this.Description;
											_menuItemObjectDescription.style.fontFamily = "Segoe UI, Candara, Bitstream Vera Sans, DejaVu Sans, Bitstream Vera Sans, Trebuchet MS, Verdana, Verdana Ref, sans-serif";
											_menuItemObjectDescription.style.fontSize = "10pt";
											_menuItemObjectDescription.style.color = "#fff";
 
											_menuItemObject.appendChild(_menuItemObjectDescription);
 
                                            return _menuItemObject;
									}
 
									return this.LoadComponents(optMenuItem);
						}
 
						return oMenuItem(optMenuItem);					
				}
 
				createContainer = function(optContainer){
                          var oContainer = function(optContainer){
                                       this.ID = "container1";
                                       this.Title = "";
                                       this.SubTitle = "";
                                       this.ImageUrl = "";
                                       this.Description = "";
                                       this.NavigateUrl = "";
                                       this.Wrapper = "";
									   this.Parent = "";
									   this.Date = "";
									   this.Object = "";
 
                                       this.LoadComponents = function(optContainer){
                                                var _containerObject = null;
											    var _containerObjectTitle = null;
												var _containerObjectSubTitle = null;
												var _containerObjectImageBackground = null;
												var _containerObjectImageBackgroundImg = null;
												var _containerObjectDescription = null;
												var _containerObjectSep = null;
												var _containerObjectMaisInfo = null;
												var _containerObjectMaisInfoA = null;
                                                
                                                this.ID = optContainer.ID
                                                this.Title = optContainer.Title;
												this.SubTitle = optContainer.SubTitle;
                                       			this.ImageUrl = optContainer.ImageUrl;
                                       			this.Description = optContainer.Description;
                                       			this.NavigateUrl = optContainer.NavigateUrl;
                                                this.Wrapper = optContainer.Wrapper;
												this.Date = optContainer.Date;
												this.Parent = optContainer.Parent;
                                                
                                                _containerObject = document.createElement("div");
                                                _containerObject.id = this.ID + "_MostExternalDiv";
                                                _containerObject.style.width = "250px";
                                                _containerObject.style.height = "auto";
                                                _containerObject.style.background = "#fff";
                                                _containerObject.style.border = "1px solid #c0c0c0";
                                                _containerObject.style.padding = "10px";
                                                _containerObject.style.margin = "10px";
												_containerObject.style.float = "left";
                                                _containerObject.style.position = "relative";
                                                _containerObject.style.webkitBoxShadow = "3px 3px 3px 0px rgba(100, 100, 100, 0.4)";
                                                _containerObject.style.mozBoxShadow = "3px 3px 3px 0px rgba(100, 100, 100, 0.4)";
                                                _containerObject.style.boxShadow = "3px 3px 3px 0px rgba(100, 100, 100, 0.4)";
                                                
                                                _containerObjectTitle = document.createElement("div");
                                                _containerObjectTitle.id = _containerObject .id + "_Title";
                                                _containerObjectTitle.style.fontFamily = "Segoe UI, Candara, Bitstream Vera Sans, DejaVu Sans, Bitstream Vera Sans, Trebuchet MS, Verdana, Verdana Ref, sans-serif";
                                                _containerObjectTitle.style.fontSize = "16pt";
                                                _containerObjectTitle.style.width = "100%";
                                                _containerObjectTitle.style.height = "30px";
                                                _containerObjectTitle.style.textAlign = "center";
                                                _containerObjectTitle.innerHTML = this.Title;
                                                
												_containerObject.appendChild(_containerObjectTitle);
 
                                                _containerObjectSubTitle = document.createElement("div");
                                                _containerObjectSubTitle.id = _containerObject .id + "_SubTitle";
                                                _containerObjectSubTitle.style.fontFamily = "Segoe UI, Candara, Bitstream Vera Sans, DejaVu Sans, Bitstream Vera Sans, Trebuchet MS, Verdana, Verdana Ref, sans-serif";
                                                _containerObjectSubTitle.style.fontSize = "14pt";
                                                _containerObjectSubTitle.style.width = "100%";
                                                _containerObjectSubTitle.style.height = "35px";
                                                _containerObjectSubTitle.style.textAlign = "center";
                                                _containerObjectSubTitle.innerHTML = this.SubTitle;
                                                _containerObject.appendChild(_containerObjectSubTitle);
 
												_containerObjectImageBackground = document.createElement("div");
                                                _containerObjectImageBackground.id = _containerObject .id + "_ImageBackground";
                                                _containerObjectImageBackground.style.background = "url('http://365psd.com/images/previews/562/grey-corporate-business-technology-background-free-34160.jpg')";
												_containerObjectImageBackground.style.backgroundPosition = "center bottom";
                                                _containerObjectImageBackground.style.width = "100%";
                                                _containerObjectImageBackground.style.height = "100px";
                                                _containerObjectImageBackground.style.position= "relative";
 
												_containerObjectImageBackgroundImg = document.createElement("img");
												_containerObjectImageBackgroundImg.id = _containerObjectImageBackground.id + "_img";
												_containerObjectImageBackgroundImg.name = _containerObjectImageBackground.id + "_img";
												_containerObjectImageBackgroundImg.style.position = "absolute";
												_containerObjectImageBackgroundImg.style.top = "15px";
												_containerObjectImageBackgroundImg.style.left = "15px";
												_containerObjectImageBackgroundImg.style.width = "48px";
												_containerObjectImageBackgroundImg.style.height = "48px";
												_containerObjectImageBackgroundImg.src = this.ImageUrl;
 
												_containerObjectImageBackground.appendChild(_containerObjectImageBackgroundImg);
 
												_containerObject.appendChild(_containerObjectImageBackground);
 
                                                _containerObjectDescription = document.createElement("div");
                                                _containerObjectDescription.id = _containerObject .id + "_Description";
                                                _containerObjectDescription.style.fontFamily = "Segoe UI, Candara, Bitstream Vera Sans, DejaVu Sans, Bitstream Vera Sans, Trebuchet MS, Verdana, Verdana Ref, sans-serif";
												_containerObjectDescription.style.fontSize = "12pt";
                                                _containerObjectDescription.style.width = "250px";
                                                _containerObjectDescription.style.height = "135px";
												_containerObjectDescription.style.overflow = "overlay";
												_containerObjectDescription.style.textOverflow = "ellipsis";
                                                _containerObjectDescription.style.textAlign = "justify";
                                                _containerObjectDescription.innerHTML = this.Description;
 
												_containerObject.appendChild(_containerObjectDescription);
 
 												_containerObjectSep = document.createElement("div");
                                                _containerObjectSep.id = _containerObject .id + "_Sep";
                                                _containerObjectSep.style.width = "100%";
												_containerObjectSep.style.height = "1px";
                                                _containerObjectSep.style.backgroundColor = "#c0c0c0";
												_containerObjectSep.style.marginTop = "15px";
 
												_containerObject.appendChild(_containerObjectSep);
 
 												_containerObjectMaisInfo = document.createElement("div");
                                                _containerObjectMaisInfo.id = _containerObject .id + "_MaisInfo";
                                                _containerObjectMaisInfo.style.width = "100%";
												_containerObjectMaisInfo.style.height = "20px";
                                                _containerObjectMaisInfo.style.textAlign = "right";
												_containerObjectMaisInfo.style.paddingTop = "5px";
 
 												_containerObjectMaisInfoA = document.createElement("a");
                                                _containerObjectMaisInfoA.id = _containerObjectMaisInfo.id + "_A";
												_containerObjectMaisInfoA.name = _containerObjectMaisInfo.id + "_A";
                                                _containerObjectMaisInfoA.href = this.NavigateUrl;
                                                _containerObjectMaisInfoA.text = "Mais [...]";
 
												_containerObjectMaisInfo.appendChild(_containerObjectMaisInfoA);
 
												_containerObjectDate = document.createElement("span");
                                                _containerObjectDate.id = _containerObject .id + "_MaisInfo";
                                                _containerObjectDate.style.width = "auto";
                                                _containerObjectDate.style.float = "left";
												_containerObjectDate.innerHTML = this.Date;
 
												_containerObjectMaisInfo.appendChild(_containerObjectDate);
 
												_containerObject.appendChild(_containerObjectMaisInfo);
 
                                                document.getElementById(this.Wrapper).appendChild(_containerObject);
 
												this.Object = _containerObject;
												if(window["Containers"] == undefined)
													window["Containers"] = [];												
																							
												window.Containers[this.ID] = this;
												window.Containers[window.Containers.length] = this;
												window["CurrentContainer"] = this.ID;
 
												return this;
                                       }
 
                                      return this.LoadComponents(optContainer);
                          }
 
                         return new oContainer(optContainer);
                }
 
				createCustomQuerySubmitter = function(optCustomQuerySubmitter){
					var oCustomQuerySubmitter = function(optCustomQuerySubmitter){
						this.ID = "customQuerySubmitter1";
						this.Object = "";
						this.Parent = "";
						this.InnerHTML = "";
 
						this.LoadComponents = function(optCustomQuerySubmitter){
							var _customQuerySubmitterObject = null;
							var _customQuerySubmitterObjectInput = null;
							var _customQuerySubmitterObjectButton = null;
 
							this.ID = optCustomQuerySubmitter.ID;
 
							_customQuerySubmitterObject = document.createElement("div");
							_customQuerySubmitterObject.id = this.ID + "_MostExternalDiv";
							_customQuerySubmitterObject.style.display = "block";
							_customQuerySubmitterObject.style.position = "absolute";
							_customQuerySubmitterObject.style.width = "380px";
 
							_customQuerySubmitterObjectHead = document.createElement("p");
							_customQuerySubmitterObjectHead.id = _customQuerySubmitterObject.id + "_P";
							_customQuerySubmitterObjectHead.style.width = "auto";							
							_customQuerySubmitterObjectHead.style.paddingLeft = "5px";
							_customQuerySubmitterObjectHead.innerHTML = "Digite a sentença:"
							_customQuerySubmitterObjectHead.style.paddingBottom = "5px";
							_customQuerySubmitterObjectHead.style.paddingTop = "5px";
							_customQuerySubmitterObjectHead.style.fontFamily = "Segoe UI, Candara, Bitstream Vera Sans, DejaVu Sans, Bitstream Vera Sans, Trebuchet MS, Verdana, Verdana Ref, sans-serif";
							_customQuerySubmitterObjectHead.style.fontSize = "12pt";
 
							_customQuerySubmitterObject.appendChild(_customQuerySubmitterObjectHead);
							
							_customQuerySubmitterObjectWrapper = document.createElement("div");
							_customQuerySubmitterObjectWrapper.id = _customQuerySubmitterObject.id + "_DivWrapper";
							_customQuerySubmitterObjectWrapper.style.width = "365px";
							_customQuerySubmitterObjectWrapper.style.marginLeft = "5px";
							_customQuerySubmitterObjectWrapper.style.height = "165px";
							_customQuerySubmitterObjectWrapper.style.marginBottom = "5px";
 
							_customQuerySubmitterObject.appendChild(_customQuerySubmitterObjectWrapper);
 
							_customQuerySubmitterObjectInput = document.createElement("textarea");
							_customQuerySubmitterObjectInput.id = _customQuerySubmitterObjectWrapper.id + "_DivInput";
							_customQuerySubmitterObjectInput.style.width = "365px";
							_customQuerySubmitterObjectInput.style.height = "165px";
							_customQuerySubmitterObjectInput.style.color = "#000";
							_customQuerySubmitterObjectInput.style.textShadow = "0px 0px 0px #fff";
    						_customQuerySubmitterObjectInput.style.webkitTextFillColor = "transparent";
							_customQuerySubmitterObjectInput.style.textFillColor = "transparent";
							_customQuerySubmitterObjectInput.style.fontFamily = "Segoe UI, Candara, Bitstream Vera Sans, DejaVu Sans, Bitstream Vera Sans, Trebuchet MS, Verdana, Verdana Ref, sans-serif";
							_customQuerySubmitterObjectInput.style.fontSize = "12pt";
							_customQuerySubmitterObjectInput.className = "changeSelection";
 
							_customQuerySubmitterObjectWrapper.appendChild(_customQuerySubmitterObjectInput);
 
							_customQuerySubmitterObjectInput.onkeyup = function(e){
								var evt = e || window.event;
 
								var reservedWords = [ "AND", "OR", "LIKE", "IN" ];
								var reservedOperators = [ ">", "<", ">=", "<=", "<>", "==" ];
								var reservedFields = [ "INDEX", "TITLE", "SUBTITLE", "DESCRIPTION", "DATE" ];
    
								var caret = getCaret(this);
								var result = /\S+$/.exec(this.value.slice(0, this.value.indexOf(' ',caret.end)));
								var lastWord = result ? result[0] : "";
				
								var charCode = evt.which || evt.keyCode;
								var charStr = String.fromCharCode(charCode);
								var textWithCharActual = reservedWords.indexOf((lastWord + charStr).toUpperCase()) >= 0;
								var textWithoutCharActual = reservedWords.indexOf((lastWord).toUpperCase()) >= 0;
								var textUsed = (textWithCharActual) ? (lastWord + charStr) : lastWord;
 
								var name = this.id.replace("_DivInput","_Pre_Code");
								document.getElementById(name).innerHTML = this.value;
							};
 
							getCaret = function(element, begin, end)
    						{
								var elM = $(element);
        						if (elM.length == 0) return;
        						if (typeof begin == 'number')
        						{
            						end = (typeof end == 'number') ? end : begin;
            						return elM.each(function ()
           							{
                						if (this.setSelectionRange)
                						{
                    						this.setSelectionRange(begin, end);
                						} 
										else if (this.createTextRange)
               						    {
                    						var range = this.createTextRange();
                    						range.collapse(true);
                    						range.moveEnd('character', end);
                   							range.moveStart('character', begin);
                    						try { range.select(); } catch (ex) { }
               							 }
            						});
        						} 
								else
        						{
           							if (elM[0].setSelectionRange)
            						{
                						begin = elM[0].selectionStart;
                						end = elM[0].selectionEnd;
            						} 
									else if (document.selection && document.selection.createRange)
            						{
                						var range = document.selection.createRange();
               							begin = 0 - range.duplicate().moveStart('character', -100000);
                						end = begin + range.text.length;
            						}
            						return { begin: begin, end: end };
        						}
    						}
 
							_customQuerySubmitterObjectPre = document.createElement("pre");
							_customQuerySubmitterObjectPre.id = _customQuerySubmitterObjectWrapper.id + "_Pre";
							_customQuerySubmitterObjectPre.style.width = "365px";
							_customQuerySubmitterObjectPre.style.height = "165px";
							_customQuerySubmitterObjectPre.style.position = "absolute";
							_customQuerySubmitterObjectPre.style.top = "25px";
							_customQuerySubmitterObjectPre.style.left = "8px";
							_customQuerySubmitterObjectPre.style.zIndex = "2";
							_customQuerySubmitterObjectPre.style.pointerEvents = "none";
 
							_customQuerySubmitterObjectCode = document.createElement("code");
							_customQuerySubmitterObjectCode.id = _customQuerySubmitterObjectPre.id + "_Code";
							_customQuerySubmitterObjectCode.style.width = "365px";
							_customQuerySubmitterObjectCode.style.height = "165px";
							_customQuerySubmitterObjectCode.style.fontFamily = "Segoe UI, Candara, Bitstream Vera Sans, DejaVu Sans, Bitstream Vera Sans, Trebuchet MS, Verdana, Verdana Ref, sans-serif";
							_customQuerySubmitterObjectCode.style.fontSize = "12pt";
 
							_customQuerySubmitterObjectPre.appendChild(_customQuerySubmitterObjectCode);
 
							_customQuerySubmitterObjectWrapper.appendChild(_customQuerySubmitterObjectPre);
 
							var _divResult = document.createElement("div");
							_divResult.appendChild(_customQuerySubmitterObject);
 
							this.InnerHTML = _divResult.innerHTML;
 
							this.Object = _customQuerySubmitterObject;				
		
							if(window["CustomQuerySubmitters"] == undefined)
								window["CustomQuerySubmitters"] = [];												
																							
							window.CustomQuerySubmitters[this.ID] = this;
							window.CustomQuerySubmitters[window.CustomQuerySubmitters.length] = this;
							window["CurrentCustomQuerySubmitter"] = this.ID; 
 
							return this;
						}
 
						return this.LoadComponents(optCustomQuerySubmitter);
					}
 
					return new oCustomQuerySubmitter(optCustomQuerySubmitter);
				}
 
				createTableOption = function(optTableOption){
						var oTableOption= function(optTableOption){
									this.ID = "tableOption1";
                        			this.Objects = {};									
									this.Object = "";
									this.Parent = "";
									this.InnerHTML = "";
									this.Type = ""
 
									this.LoadComponents = function(optTableOption){
 										var _tableObject = null;
										var _tableObjectContainer = null;
 
										this.ID = optTableOption.ID;
										this.Objects = optTableOption.Objects;
										this.Type = optTableOption.Type;
 
										_tableObject = document.createElement("div");
										_tableObject.id = this.ID + "_MostExternalDiv";
										_tableObject.style.display = "block";
										_tableObject.style.position = "absolute";
										_tableObject.style.width = "380px";
										_tableObject.style.backgroundColor= "#909090";
 
										_tableObjectContainer = document.createElement("div");
										_tableObjectContainer.id = _tableObject.id + "_Container";
										_tableObjectContainer.style.width = "100%";
 
										for(var i = 0; i < this.Objects.length; i++){
											_tableObjectContainer.appendChild(this.Objects[i]);
											this.Objects[i].setAttribute("Parent", _tableObject.id);
											this.Objects[i].setAttribute("Type", this.Type);
										}
 
										_tableObject.appendChild(_tableObjectContainer);
 
										var _divResult = document.createElement("div");
										_divResult.appendChild(_tableObject);
 
										this.InnerHTML = _divResult.innerHTML;
 
										this.Object = _tableObject;				
		
										if(window["TableOptions"] == undefined)
											window["TableOptions"] = [];												
																							
										window.TableOptions[this.ID] = this;
										window.TableOptions[window.TableOptions.length] = this;
										window["CurrentTableOption"] = this.ID; 
 
										return this;
									}
 									 
									return this.LoadComponents(optTableOption);
						}
					
						return new oTableOption(optTableOption);
				}
 
				createTableOptionItem = function(optTableOptionItem){
						var oTableOptionItem = function(optTableOptionItem){
									this.ID = "optionTableItem1";
                       				this.Action = "";
									this.Description = "";
									this.Parent = "";
									this.Type = "";
									this.HoverAction = "";
									this.OutAction = "";

									this.LoadComponents = function(optTableOptionItem){
 											var _optionTableItemObject = null;
											var _optionTableItemObjectDescription = null;
 
											this.ID = optTableOptionItem.ID;
											this.Action = optTableOptionItem.Action;
											this.Description = optTableOptionItem.Description;
											this.Type = optTableOptionItem.Type;
											this.HoverAction = optTableOptionItem.HoverAction;
											this.OutAction = optTableOptionItem.OutAction;
 
											_optionTableItemObject = document.createElement("div");
											_optionTableItemObject.id = this.ID + "_MostExternalDiv";
											_optionTableItemObject.style.padding = "5px";
											_optionTableItemObject.style.border = "5px solid #fff";
											_optionTableItemObject.style.borderBottom = "none";
 
											if(typeof(this.HoverAction) != "function"){
												SetControlEvents(_optionTableItemObject, "MOVER", function(){
													this.style.backgroundColor = "#f6c342";
													this.style.cursor = "pointer"; 
													document.getElementById(this.id + "_Description").style.color = "#000";															
												});
											}
											else
												SetControlEvents(_optionTableItemObject, "MOVER", this.HoverAction);
 
											if(typeof(this.OutAction) != "function"){
												SetControlEvents(_optionTableItemObject, "MOUT", function(event, _outAction){												
													this.style.backgroundColor = "#909090";
													this.style.cursor = "default"; 
													document.getElementById(this.id + "_Description").style.color = "#fff";									
												});
											}
											else
												SetControlEvents(_optionTableItemObject, "MOUT", this.OutAction);
 
											SetControlEvents(_optionTableItemObject, "CLICK", this.Action);
 
											_optionTableItemObjectDescription = document.createElement("span");
											_optionTableItemObjectDescription.id = _optionTableItemObject.id + "_Description";
											_optionTableItemObjectDescription.innerHTML = this.Description;
											_optionTableItemObjectDescription.style.fontFamily = "Segoe UI, Candara, Bitstream Vera Sans, DejaVu Sans, Bitstream Vera Sans, Trebuchet MS, Verdana, Verdana Ref, sans-serif";
											_optionTableItemObjectDescription.style.fontSize = "10pt";
											_optionTableItemObjectDescription.style.color = "#fff";
											_optionTableItemObjectDescription.setAttribute("Type", this.Type);
 
											_optionTableItemObject.appendChild(_optionTableItemObjectDescription);
 
                                            return _optionTableItemObject;
									}
 
									return this.LoadComponents(optTableOptionItem);
						}
 
						return oTableOptionItem(optTableOptionItem);					
				}
 
				SetControlEvents = function(_control, _event, _function){
					var __control = null;
					
					if(typeof(_control) == "object")
						__control = _control;
					else
						__control = document.getElementById(_control);
 
					if(_event.toString().toUpperCase() == "CLICK")
						__control.onclick = _function;
					else if(_event.toString().toUpperCase() == "MOVER")
						__control.onmouseover = _function;
					else if(_event.toString().toUpperCase() == "MOUT")
					__control.onmouseout = _function;
				}		
         </script>

Corousel

...

HTML
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>
</head>
<body>

<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="img_nature_wide.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="img_fjords_wide.jpg" style="width:100%">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="img_mountains_wide.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div>

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}    
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>