function Dialog(dialogType, dialogDetails){ 
  if(typeof dialogDetails  == 'undefined'){
    gdialogDetails = {id : "dlg"+Helper.Integer.Rnd(999), x : 0, y: 0, width : 300, height : 150, xAlign: XAlign.Left, yAlign: YAlign.Top};
  }
  else{
    dialogDetails.id      = (typeof dialogDetails.id      != 'undefined') ? dialogDetails.id     : "dlg" + Helper.Integer.Rnd(999);
    dialogDetails.x       = (typeof dialogDetails.x       != 'undefined') ? dialogDetails.x      : "0";
    dialogDetails.y       = (typeof dialogDetails.y       != 'undefined') ? dialogDetails.y      : "0";
    dialogDetails.width   = (typeof dialogDetails.width   != 'undefined') ? dialogDetails.width  : "300";
    dialogDetails.height  = (typeof dialogDetails.height  != 'undefined') ? dialogDetails.height : "150";
    dialogDetails.xAlign  = (typeof dialogDetails.xAlign  != 'undefined') ? dialogDetails.xAlign : XAlign.Left;
    dialogDetails.yAlign  = (typeof dialogDetails.yAlign  != 'undefined') ? dialogDetails.yAlign : YAlign.Top;
  }

  this.parent = null;
  this.self = null;
  this.blocks = null;
  this.owner = new Array();
  this.control = new Array();
  this.xAlign = dialogDetails.xAlign;
  this.yAlign = dialogDetails.yAlign;
  this.x = dialogDetails.x;
  this.y = dialogDetails.y;
  this.width  = dialogDetails.width;
  this.height = dialogDetails.height;
  
  // CONSTUCTION
  this.self = document.createElement("div");
  this.self.id = dialogDetails.id;
  this.self.className = "dlg";
  this.self.width  = this.self.style.width = (!isNaN(this.width)  ? this.width  + "px" : this.width);
  this.self.height = (!isNaN(this.height) ? this.height + "px" : this.height); if(this.height == "100%") this.self.style.height = this.height;  
  this.self.style.visibility = "hidden";	
  this.self.style.display = "none";
  this.self.style.borderLeftWidth = this.self.style.borderRightWidth  = (this.width  == "100%") ? 0 : 1;
  this.self.style.borderTopWidth  = this.self.style.borderBottomWidth = (this.height == "100%") ? 0 : 1;
  this.blocks = new DialogBloсkBuilder(this.self);

  this.Append = function(parent){
    this.parent = ((typeof parent == "object") ? parent : document.getElementById(parent));  
    if(this.xAlign == XAlign.Left)   this.self.style.left   = this.x + "px";
    if(this.xAlign == XAlign.Right)  this.self.style.right  = this.x + "px";
    if(this.yAlign == YAlign.Top)    this.self.style.top    = this.y + "px";
    if(this.yAlign == YAlign.Bottom) this.self.style.bottom = this.y + "px";
      
    Helper.Debug.Assert.IsNull(this.parent, "Exception: Dialog parent is not found");
    if(this.parent != null){
      this.parent.appendChild(this.self);
    }
    return this.self;
  }
  
  this.Create = function(blockType, blockDetails, blockIterator){
    Helper.Debug.Assert.IsNull(this.blocks, "Exception: Dialog block buider is not initilized");
    
    if(typeof blockDetails != "undefined")
      if(typeof blockDetails.parent != "undefined")
        blockDetails.parent = (typeof blockDetails.parent == "object" ? blockDetails.parent : this.FindControl(blockDetails.parent));
 
    block = null;
    if(this.blocks != null){
      block = this.blocks.Create(blockType, blockDetails, blockIterator);
    }    
    this.control.push({id: block.id, type: block.type, element: block.element, parent: block.parent, container: block.container});
    return block;
  }  
  
  this.Dispose = function(){
    this.parent.removeChild(this.self); 
  }
  
  this.FindControl = function(id){
    for(i=0; i< this.control.length; i++)
      if(this.control[i].id == id)
        return this.control[i];
    return null;
  }  

  this.SetVisible = function(isVisible){	
    this.self.style.display    = (isVisible == "true" ? "block"   : "none");
    this.self.style.visibility = (isVisible == "true" ? "visible" : "hidden");
  }
  this.SetVisible("true");

  this.ToString = function(){
    Helper.Debug.Assert.IsNull(this.self, "Exception: Dialog does not exists");
    if(this.self != null){
      return(this.self.innerHTML);
    }
  }
  
  return true;
}

var DialogType = {
  Standart: "sandart"
}
var BlockType = {
  Header: "header",
  Footer: "footer",
  Group: "group",
  Content: "content"
}
var Button = {
  Close: "close",
  Maximize: "maximize",
  Minimize: "minimize"
}
var ControlType = {
  Button: "button",
  ImageButton: "imageButton",
  Label: "label",
  Textbox: "textbox",
  Combobox: "combobox",
  PlaceHolder: "placeHolder"
}
var XAlign = {
  Left:     "left:",
  Right:    "right",
  Center:   "center"
}
var YAlign = {
  Top:      "top",
  Bottom:   "bottom",
  Center:   "center"
}
function DialogBloсkBuilder(parent){
  this.parent = parent;
  this.baseDialog = new BaseDialog(this.parent);

  this.Create = function(blockType, blockDetails, blockIterator){ 
    var block = this.baseDialog.Create(blockType, blockDetails, blockIterator);
    if(block.element == null){
      block = this.CreateCustom(blockType, blockDetails, blockIterator);
    }
      
    Helper.Debug.Assert.IsNull(block.element, "Exception: Dialog block \"{blockType}\" implementation does not exists".replace("{blockType}", blockType));  
    if(block.element != null){
      if(blockDetails.parent == null){
        this.parent.appendChild(block.element);
      }
      else{
        Helper.Debug.Assert.IsNull(blockDetails.parent.container, "Exception: Dialog block is not a container");  
        blockDetails.parent.container.appendChild(block.element);
      }
    }    
    return {id: block.id, type: block.type, element: block.element, parent: blockDetails.parent, container: block.container};
  }
  
  this.CreateCustom = function(blockType, blockDetails, blockIterator){
    var block = null;
    var _type = null;
    var _container = null;

    switch(blockType){
      case "datafield":{ 
        _type = "datafield";
        // APPLYING DEFAULTS      
        if(typeof blockDetails  == 'undefined'){
          blockDetails = {id : "", labelWidth : 105, content : "", textWidth : 120, parent: null};
        }
        else{
          blockDetails.id         = (typeof blockDetails.id           != 'undefined') ? blockDetails.id         : "undefined";
          blockDetails.labelWidth = (typeof blockDetails.labelWidth   != 'undefined') ? blockDetails.labelWidth : 105;
          blockDetails.textWidth  = (typeof blockDetails.textWidth    != 'undefined') ? blockDetails.textWidth  : 120;
          blockDetails.parent     = (typeof blockDetails.parent       != 'undefined') ? blockDetails.parent     : null;
        }
        // POPULATING TEPMLATE       
        tpl  = "<span style='overflow: hidden; width: {labelWidth}px; float: left'><label for='{fieldId}'><span id='{labelId}' class='dlg-text label-text'>{label}: </span></label></span>";
        tpl += "<span style='float: right; clear: right; margin-right: 0px'>{inputControl}</span>"; 
        tpl = tpl.replace(/{labelWidth}/g,     Helper.String.LiteralWrite(blockDetails.labelWidth));     

        // BUILDING CONTAINER
        rndId = 0; while(rndId == 0 || document.getElementById("block_" + rndId) != null) rndId = Helper.Integer.Rnd(999);
        block = document.createElement("table");         
        block.id           = "block_" + rndId;
        block.border       = "0";
        block.cellSpacing  = "0";
        block.cellPadding  = "0";
        Helper.Gui.SetStyle(block, {"width": "100%", "margin": "5px 0px 0px 0px", "padding" : "0px"});

        for(var i=0; i<blockIterator.length; i++){;
          blockIterator[i].controlType  = (typeof blockIterator[i].controlType  != 'undefined') ? blockIterator[i].controlType  : ControlType.Textbox;   
          blockIterator[i].id           = (typeof blockIterator[i].id           != 'undefined') ? blockIterator[i].id           : null;   
          
          // RANDOMISING NAMES FOR SINGLE ITEM 
          rndId = 0; while(rndId == 0 || document.getElementById("inputLabel_" + rndId) != null) rndId = Helper.Integer.Rnd(999);
          labelId = "inputLabel_" + rndId;
          inputId = (blockIterator[i].id ? blockIterator[i].id  : "inputField_" + rndId);
          // POPULATING TEMPLATES SINGLE ITEM
          inputTpl = this.baseDialog.controlBuilder.Create(blockIterator[i].controlType, {id: inputId, text: blockIterator[i].text, width: blockDetails.textWidth}, blockIterator[i].data);

          blockTpl = tpl;        
          blockTpl = blockTpl.replace(/{labelId}/g,     labelId);
          blockTpl = blockTpl.replace(/{inputId}/g,     inputId);
          blockTpl = blockTpl.replace(/{label}/,        Helper.String.LiteralWrite(blockIterator[i].label));
          blockTpl = blockTpl.replace(/{inputControl}/, Helper.String.LiteralWrite(inputTpl));
          // FILLING CONTAINER SINGLE ITEM
          row = block.insertRow(block.rows.length); 
          
          col1 = row.insertCell(row.cells.length);
          col1.className = (blockDetails.parent == null) ? "groupContentAPI" : "groupContentWrappedAPI";        
          col1.innerHTML = blockTpl;
        }
        break;
      }
    }
    return {id: block.id, type: _type, element: block, container: _container};  
  }
}

// BASE DIALOG CLASS
function BaseDialog(parent){
  this.parent = parent;
  this.controlBuilder = new ControlBuilder();  

  this.Create = function(blockType, blockDetails, blockIterator){
    var table = null;
    var _type = null;
    var _container = null;
    switch(blockType){
      case BlockType.Header:{
        _type = BlockType.Header;
        // APPLYING DEFAULTS
        if(typeof blockDetails  == 'undefined'){
          blockDetails = {text : "", background : "vertical"} 
        }
        else{
          blockDetails.text       = (typeof blockDetails.text        != 'undefined') ? blockDetails.text        : "";
          blockDetails.background = (typeof blockDetails.background  != 'undefined') ? blockDetails.background  : "vertical";
        }
        // BUILDING CONTAINER
        if(Helper.String.LiteralWrite(blockDetails.id) == ""){
          rndId = 0; while(rndId == 0 || document.getElementById("block_" + rndId) != null) rndId = Helper.Integer.Rnd(999); blockId = "block_" + rndId;
        }
        else{
          blockId = blockDetails.id;
        }
        table = document.createElement("table");         
        table.id           = blockId;
        table.border       = 0;
        table.cellSpacing  = 0;
        table.cellPadding  = 0;
        Helper.Gui.SetStyle(table, {"width": "100%", "margin": "0px 0px 3px 0px", "padding": "0px"});
  
        row = table.insertRow(table.rows.length);
        Helper.Gui.SetUnselectable(row);
                          
        col1 = row.insertCell(row.cells.length);
        col1.className = (Helper.String.LiteralWrite(blockDetails.background) == "vertical") ? "dialogTitleVLeftAPI" : "dialogTitleHLeftAPI";
        col1.innerHTML = "{text}";
        col1.innerHTML = col1.innerHTML.replace("{text}", Helper.String.LiteralWrite(blockDetails.text));
       
        for(i=0; i<blockIterator.length; i++){
          // CREATING SINGLE CONTROL
          if(blockIterator[i].properties.type == Button.Close){
            blockIterator[i].properties.onClick += ";" + "Helper.Gui.SetVisible('{parentId}', false)".replace("{parentId}", parent.id);
          }
          controlMarkup = this.controlBuilder.Create(blockIterator[i].controlType, blockIterator[i].properties);          
          // CREATING SINGLE CONTAINER AND ADTTACHING CONTROL
          col2 = row.insertCell(row.cells.length);
          col2.className = (Helper.String.LiteralWrite(blockDetails.background) == "vertical") ? "dialogTitleVRightAPI" : "dialogTitleHRightAPI";
          col2.align = "right";
          col2.innerHTML += controlMarkup; 
        }      
        break;
      }
      case BlockType.Footer:{
        _type = BlockType.Footer;
        // APPLYING DEFAULTS
        if(typeof blockDetails  == 'undefined')  blockDetails = {text : ""}
        // BUILDING CONTAINER
        rndId = 0; while(rndId == 0 || document.getElementById("block_" + rndId) != null) rndId = Helper.Integer.Rnd(999);       
        table = document.createElement("table");         
        table.id           = "block_" + rndId;
        table.border       = 0;
        table.cellSpacing  = 0;
        table.cellPadding  = 0;
        Helper.Gui.SetStyle(table, {"margin" : "4px 5px 5px 4px"});
      
        row = table.insertRow(table.rows.length);
        Helper.Gui.SetUnselectable(row);
                
        col1 = row.insertCell(row.cells.length);
        col1.innerHTML = "<span class='button_info'>&nbsp;</span>";
        Helper.Gui.SetStyle(col1, {"overflow": "hidden"});
        col2 = row.insertCell(row.cells.length);   
        col2.innerHTML = "<span id='lbl_xStatusbar' class='dlg-text info-text'>{text}</span>";
        Helper.Gui.SetStyle(col2, {"width": "100%", "overflow": "hidden", "padding": "0px"}); 
        
        for(i=0; i<blockIterator.length; i++){
          // CREATING SINGLE CONTROL
          if(blockIterator[i].properties.type == Button.Close){
            blockIterator[i].properties.onClick += ";" + "Helper.Gui.SetVisible('{parentId}', false)".replace("{parentId}", parent.id);
          }
          controlMarkup = this.controlBuilder.Create(blockIterator[i].controlType, blockIterator[i].properties);          
          // CREATING SINGLE CONTAINER AND ADTTACHING CONTROL
          col3 = row.insertCell(row.cells.length);
          col3.align = "right";
          col3.innerHTML += controlMarkup;
        }     

        // APPLY CUSTOM MODIFICATONS
        col3.innerHTML = col3.innerHTML.replace("{parentId}",         parent.id);
        col2.innerHTML = col2.innerHTML.replace("{text}",             Helper.String.LiteralWrite(blockDetails.text));
        col3.innerHTML = col3.innerHTML.replace("{okBtn}",            Helper.String.LiteralWrite(blockDetails.okBtn));
        col3.innerHTML = col3.innerHTML.replace("{okBtnTooltip}",     Helper.String.LiteralWrite(blockDetails.okBtnTooltip)); 
        break;
      }
      case BlockType.Group:{
        _type = BlockType.Group;
        // APPLYING DEFAULTS
        if(typeof blockDetails  == 'undefined'){
          blockDetails = {groupId : "", text : "", content : "", expanded : "false", locked : "false"};
        }
        else{
          blockDetails.expanded   = (typeof blockDetails.expanded    != 'undefined') ? blockDetails.expanded    : "false";
          blockDetails.locked     = (typeof blockDetails.locked      != 'undefined') ? blockDetails.locked      : "false";      
        }
        // BUILDING CONTAINER
        rndId = 0; while(rndId == 0 || document.getElementById("block_" + rndId) != null) rndId = Helper.Integer.Rnd(999);
        blockId     = (Helper.String.LiteralWrite(blockDetails.id) != "")      ? blockDetails.id      : "block_" + rndId;
        groupId     = (Helper.String.LiteralWrite(blockDetails.groupId) == "") ? "group_" + rndId     : blockDetails.groupId;
        containerId = (Helper.String.LiteralWrite(blockDetails.groupId) == "") ? "container_" + rndId : blockDetails.groupId + "Container";

        table = document.createElement("table");         
        table.id           = blockId;
        table.border       = 0;
        table.cellSpacing  = 0;
        table.cellPadding  = 0;
        Helper.Gui.SetStyle(table, {"width": "100%", "margin" : "6px 0px 0px 0px"});
      
        row = table.insertRow(table.rows.length);        
        Helper.Gui.SetUnselectable(row);

        col1 = row.insertCell(row.cells.length);
        col1.className = "groupSeparatorAPI";
        col1.noWrap = "true";
        col1.innerHTML = "<span id='{groupId}' class='{class}' onClick=\"{onClick}\">{text}&nbsp;</span>";
        Helper.Gui.SetStyle(col1, {"width": "100%"});
        
        // APPLY CUSTOM MODIFICATONS       
        col1.innerHTML = col1.innerHTML.replace(/{groupId}/g,     groupId);        
        col1.innerHTML = col1.innerHTML.replace(/{class}/g,       Helper.String.LiteralWrite(blockDetails.expanded) == "true" ? 'expandable-group-header-expanded' : 'expandable-group-header');        
        col1.innerHTML = col1.innerHTML.replace(/{text}/g,        Helper.String.LiteralWrite(blockDetails.text));           

        if(blockDetails.locked != "true"){
          onClick = "Helper.Gui.ToggleVisible('{containerId}'); Helper.Gui.SetClass('{groupId}', (Helper.Gui.IsVisible('{containerId}') == 'true' ? '{classExpanded}' : '{classCollapsed}'))";        
          onClick = onClick.replace(/{groupId}/g,                   groupId);
          onClick = onClick.replace(/{containerId}/g,               containerId);
          onClick = onClick.replace(/{classExpanded}/g,             "expandable-group-header-expanded");
          onClick = onClick.replace(/{classCollapsed}/g,            "expandable-group-header");
        }
        col1.innerHTML = col1.innerHTML.replace(/{onClick}/g,       (blockDetails.locked != "true" ? onClick : ""));
        
        rowCnt = table.insertRow(table.rows.length);
        rowCnt.id = containerId;
        if(Helper.String.LiteralWrite(blockDetails.expanded) != "true"){
          Helper.Gui.SetVisible(rowCnt, false);
        }
                
        colCnt1 = _container = rowCnt.insertCell(rowCnt.cells.length);
        colCnt1.className = "groupContentAPI";
        colCnt1.innerHTML = "{content}";
        Helper.Gui.SetStyle(colCnt1, {"overflow": "hidden"});
        
        colCnt1.innerHTML = colCnt1.innerHTML.replace("{content}",   Helper.String.LiteralWrite(blockDetails.content));
        break;
      }
      case BlockType.Content:{
        _type = BlockType.Content;
        // BUILDING CONTAINER        
        rndId = 0; while(rndId == 0 || document.getElementById("block_" + rndId) != null) rndId = Helper.Integer.Rnd(999);       
        table = document.createElement("table");         
        table.id           = "block_" + rndId;
        table.border       = 0;
        table.cellSpacing  = 0;
        table.cellPadding  = 0;
        Helper.Gui.SetStyle(table, {"width": "100%", "padding" : "0px"});
      
        row = table.insertRow(table.rows.length);
        Helper.Gui.SetUnselectable(row);
        
        col1 = row.insertCell(row.cells.length);
        col1.className = "groupWrapperAPI";
        col1.innerHTML = "<div style='height: 50px; border: 1px solid #B3A595'>&nbsp;</div>";
        Helper.Gui.SetStyle(col1, {"overflow": "hidden"});
        break;
      }
      default:{}  
    }    
    return {id: (table ? table.id : null), type: _type, element: table, container: _container};
  }
}

function ControlBuilder(){
  this.baseControl = new BaseControl(this.parent);
  
  this.Create = function(controlType, controlDetails, controlIterator){ 
    var control = this.baseControl.Create(controlType, controlDetails, controlIterator);
    if(control == null){
      control = this.CreateCustom(controlType, controlDetails, controlIterator);
    }
    
    Helper.Debug.Assert.IsNull(control, "Exception: HTML control \"{controlType}\" implementation does not exists".replace("{controlType}", controlType));
    return control;
  }
  
  this.CreateCustom = function(controlType, controlDetails, controlIterator){
    var controlMarkup = null;
    switch(controlType){
      case "extendedControl":{
        controlMarkup = "X";
        break;
      }      
    }
    return controlMarkup;  
  }
}

// BASE CONTROL CLASS
function BaseControl(){
  this.Create = function(controlType, controlDetails, controlIterator){
    var controlMarkup = null;
    switch(controlType){
      case ControlType.ImageButton:{
        // POPULATING TEPMLATE
        controlMarkup = "<span id='{id}' class='{class}' title='{tooltip}' onclick=\"{onClick}\"></span>";
        // RANDOMISING NAMES FOR SINGLE ITEM 
        rndId = 0; while(rndId == 0 || document.getElementById("imgBtn_" + rndId) != null) rndId = Helper.Integer.Rnd(999);
        controlId = "imgBtn_" + rndId;
        // POPULATING TEMPLATES SINGLE ITEM 
        controlMarkup = controlMarkup.replace(/{id}/g,      Helper.String.LiteralWrite(controlId));
        controlMarkup = controlMarkup.replace(/{class}/g,  (Helper.String.LiteralWrite(controlDetails.type) != "") ? "button_" + controlDetails.type : ""); 
        controlMarkup = controlMarkup.replace(/{tooltip}/g, Helper.String.LiteralWrite(controlDetails.tooltip));
        controlMarkup = controlMarkup.replace(/{onClick}/g, Helper.String.LiteralWrite(controlDetails.onClick));
        break;
      }
      case ControlType.Button:{
        // POPULATING TEPMLATE
        controlMarkup = "<input id='{id}' type='button' value='{text}' class='dlg-text button' title='{tooltip}' style='width: 50px' onclick=\"{onClick}\" />";
        // RANDOMISING NAMES FOR SINGLE ITEM 
        rndId = 0; while(rndId == 0 || document.getElementById("btn_" + rndId) != null) rndId = Helper.Integer.Rnd(999);
        controlId = "btn_" + rndId;
        // POPULATING TEMPLATES SINGLE ITEM 
        controlMarkup = controlMarkup.replace(/{id}/g,      controlId); 
        controlMarkup = controlMarkup.replace(/{text}/g,    Helper.String.LiteralWrite(controlDetails.text));
        controlMarkup = controlMarkup.replace(/{tooltip}/g, Helper.String.LiteralWrite(controlDetails.tooltip));
        controlMarkup = controlMarkup.replace(/{onClick}/g, Helper.String.LiteralWrite(controlDetails.onClick));
        break;
      }
      case ControlType.Textbox:{
        // POPULATING TEPMLATE
        controlMarkup = "<input id='{id} type='text' style='width: {width}px' class='text input_field' title='{tooltip}' maxlength='45' value='{text}' onchange='{onChange}' />";
        // RANDOMISING NAMES FOR SINGLE ITEM 
        rndId = 0; while(rndId == 0 || document.getElementById("txt_" + rndId) != null) rndId = Helper.Integer.Rnd(999);
        controlId = "txt_" + rndId;
        // POPULATING TEMPLATES SINGLE ITEM 
        controlMarkup = controlMarkup.replace(/{id}/g,        controlId);
        controlMarkup = controlMarkup.replace(/{width}/g,     Helper.String.LiteralWrite(controlDetails.width));
        controlMarkup = controlMarkup.replace(/{text}/g,      Helper.String.LiteralWrite(controlDetails.text));
        controlMarkup = controlMarkup.replace(/{tooltip}/g,   Helper.String.LiteralWrite(controlDetails.tooltip));
        controlMarkup = controlMarkup.replace(/{onChange}/g,  Helper.String.LiteralWrite(controlDetails.onChange));
        break;
      }      
      case ControlType.Combobox:{
        controlDetails.id   = (typeof controlDetails.id  != 'undefined') ? controlDetails.id   : null;
      
        // POPULATING TEPMLATE
        controlMarkup = "<select id='{id}' class='text input_field' title='{tooltip}' style='width: {width}px' onchange='{onChange}'>{options}</select>";
        // RANDOMISING NAMES FOR SINGLE ITEM 
        rndId = 0; while(rndId == 0 || document.getElementById("cmb_" + rndId) != null) rndId = Helper.Integer.Rnd(999);
        controlId = (controlDetails.id ? controlDetails.id : "cmb_" + rndId);
        // POPULATING TEMPLATES SINGLE ITEM
        controlMarkup = controlMarkup.replace(/{id}/g,        controlId); 
        controlMarkup = controlMarkup.replace(/{width}/g,     Helper.String.LiteralWrite(controlDetails.width) + 4);
        controlMarkup = controlMarkup.replace(/{tooltip}/g,   Helper.String.LiteralWrite(controlDetails.tooltip));
        controlMarkup = controlMarkup.replace(/{onChange}/g,  Helper.String.LiteralWrite(controlDetails.onChange));
        // FILLING DATA 
        if(typeof controlIterator != "undefined"){
        //alert(controlIterator.length);
          data = ""; for(var i=0; i<controlIterator.length; i++)  data += "<option value='{data}'>{data}</option>".replace(/{data}/g, controlIterator[i]);
          controlMarkup = controlMarkup.replace(/{options}/g,  data);
        }
        break;
      }
      case ControlType.PlaceHolder:{
        // POPULATING TEPMLATE
        controlMarkup = "<div id='{id}' style='height: 50px; border: 1px solid #aaa'>{text}</div>"
        // RANDOMISING NAMES FOR SINGLE ITEM 
        rndId = 0; while(rndId == 0 || document.getElementById("plh_" + rndId) != null) rndId = Helper.Integer.Rnd(999);
        controlId = "plh_" + rndId;
        // POPULATING TEMPLATES SINGLE ITEM 
        controlMarkup = controlMarkup.replace(/{id}/g,      controlId); 
        controlMarkup = controlMarkup.replace(/{text}/g,    Helper.String.LiteralWrite(controlDetails.text));
        break;
      }     
      default:{}  
    }    
    return controlMarkup;
  }
}

//Helper.Dom.AddEvent(window, "load",   function(){ owner.Realign(); }, this.self.id);
//Helper.Dom.AddEvent(window, "resize", function(){ owner.Realign(); }, this.self.id);  
//this.x = (this.xAlign == XAlign.Left ? 0 : this.parent.offsetWidth - this.self.offsetWidth);
//this.y = (this.yAlign == YAlign.Top  ? 0 : this.parent.offsetHeight - this.self.offsetHeight);
//this.self.style.left = this.x + "px";
//this.self.style.top  = this.y + "px";