Ext.FormViewport = Ext.extend(Ext.Container, {
    initComponent : function() {
        Ext.FormViewport.superclass.initComponent.call(this);
        document.getElementsByTagName('html')[0].className += ' x-viewport';
        this.el = Ext.get(document.forms[0]);
        this.el.setHeight = Ext.emptyFn;
        this.el.setWidth = Ext.emptyFn;
        this.el.setSize = Ext.emptyFn;
        this.el.dom.scroll = 'no';
        this.allowDomMove = false;
        this.autoWidth = true;
        this.autoHeight = true;
        Ext.EventManager.onWindowResize(this.fireResize, this);
        this.renderTo = this.el;
    },

    fireResize : function(w, h){
        this.fireEvent('resize', this, w, h, w, h);
    }
});
Ext.reg('FormViewport', Ext.FormViewport);

//panel layout
var layout;
DockLayout = function(){
        return {
            init : function(){
               layout = new Ext.FormViewport({
                  layout:'border',
                  items:[
                    { 
                        region:'center',
                        id: 'centerRegion',
                        contentEl: 'centerpanel',
                        autoScroll: true
                    },{
                        region:'south',
                        id: 'southRegion',
                        contentEl: 'southpanel',
                        split:true,
                        height: 256,
                        minSize: 150,
                        maxSize: 400,
                        collapsible: true,
                        animCollapse: false, //navigator.userAgent.indexOf("MSIE") >= 0 ? true : false,
                        title:'<div><span id="divSouthRegionHeader" style="float:left"></span><span style="float:right"><img src="Images/originize-o.gif" onmouseover="this.src = \'Images/originize-h.gif\';" onmouseout="this.src = \'Images/originize-o.gif\';" alt="" title="Undock" style="cursor:pointer" onclick="UndockSouth()" /></span></div>'
                    }, {
                        region:'east',
                        id: 'eastRegion',
                        contentEl: 'eastpanel',
                        collapsible: true,
                        animCollapse: false, //navigator.userAgent.indexOf("MSIE") >= 0 ? true : false,
                        split:true,
                        width: 300,
                        minSize: 175,
                        maxSize: 400,
                        title:'<div><span id="divEastRegionHeader" style="float:left"></span><span style="float:right"><img src="Images/originize-o.gif" onmouseover="this.src = \'Images/originize-h.gif\';" onmouseout="this.src = \'Images/originize-o.gif\';" alt="" title="Undock" style="cursor:pointer" onclick="UndockEast()" /></span></div>'
                    }
                   ]
                });
                
                var south = Ext.getCmp("southRegion");
                south.on("resize", ResizeRegionSouth);
                south.on("collapse", CollapseRegionSouth);
                south.on("expand", ExpandRegionSouth);
                var east = Ext.getCmp("eastRegion");
                east.on("collapse", CollapseRegionEast);
                east.on("expand", ExpandRegionEast);
           }
     };
     
}();






var pnlEast;
var isOnAllNotes = false;
var dialog;
var LayoutExample = function(){
// everything in this space is private and only accessible in the HelloWorld block

// return a public interface
return {
    init : function(){
    
    },
    
    showDialog : function(){
        if(!dialog){ // lazy initialize the dialog and only create it once
                
              var pnlCenter = new Ext.Panel({
                  region: 'center',
                  contentEl: 'center',
                  margins:'0 0 0 0'
              });

              // Panel for the east
              pnlEast = new Ext.Panel({
                  title: 'My notepad',
                  region: 'east',
                  contentEl: 'east',
                  split: true,
                  width: 176,
                  animCollapse: false, //navigator.userAgent.indexOf("MSIE") >= 0 ? true : false,
                  collapsible: true
              });
              
              var pnlSouth = new Ext.Panel({
                  region: 'south',
                  contentEl: 'south'
              });

              dialog = new Ext.Window({
                  applyTo: 'hello-dlg',
                  closable:false,
                  width:370,
                  height:550,
                  minimizable: true,
                  animCollapse: false, //navigator.userAgent.indexOf("MSIE") >= 0 ? true : false,
                  plain:true,
                  layout: 'border',
                  collapsed: true,
                  
                  items: [pnlEast, pnlCenter, pnlSouth]
              });
              
              dialog.on('minimize', function(){
                dialog.toggleCollapse();
              }); 
            }
            
            dialog.show(this);
            dialog.collapse(); // defaults on collapsed
            
            if (dgX == -1)
            {
              dialog.anchorTo(document.body,"tr",[-(dialog.width + 4),30]);  
            }
            else
            {
                dialog.setPosition(dgX, dgY);
                dialog.setSize(dgWidth, dgHeight);
                if (dgMinimized)
                    dialog.collapse();
                else
                    dialog.expand();
            }
            dialog.on("move", dialogMoved);
            dialog.on("resize", dialogResized);
            dialog.on("collapse", dialogMinimized);
            dialog.on("expand", dialogMaximized);
        }
    };
}();

// using onDocumentReady instead of window.onload initializes the application
// when the DOM is ready, without waiting for images and other resources to load

Ext.EventManager.onDocumentReady(LayoutExample.init, LayoutExample, true);
//hide control panel
if (typeof(hideControlPanel) != "undefined")
{
  if (!hideControlPanel)
    LayoutExample.showDialog();
}
else
  LayoutExample.showDialog();
  
//hide east region
//if (typeof(hideNotepad) != "undefined")
//{
//  if (hideNotepad)
//  {
//    if (pnlEast != null)
//    {
//      pnlEast.collapse();
//      pnlEast.hide();
//    }
//  }
//}

function dialogMoved(elem, x, y)
{
    if (!elem.hidden)
    {
      var dlgMinimized = elem.collapsed != null ? elem.collapsed : false;
      Rijden.Webservices.SaveNota.SaveNotepadPosition(x, y, elem.width, elem.height, dlgMinimized, false, false, false);
    }
}
function dialogResized(elem, width, height)
{
    searchCombo.setWidth(width - 80);
    var dlgMinimized = elem.collapsed != null ? elem.collapsed : false;
    Rijden.Webservices.SaveNota.SaveNotepadPosition(elem.x, elem.y, width, height, dlgMinimized, false, false, false);
}
function dialogMinimized(elem)
{
    var dlgMinimized = true;
    Rijden.Webservices.SaveNota.SaveNotepadPosition(elem.x, elem.y, elem.width, elem.height, dlgMinimized, false, false, false);
}
function dialogMaximized(elem)
{
    var dlgMinimized = false;
    Rijden.Webservices.SaveNota.SaveNotepadPosition(elem.x, elem.y, elem.width, elem.height, dlgMinimized, false, false, false);
}
function saveNote()
{
    var oEditor = FCKeditorAPI.GetInstance('ctl00_FCKeditor1');
    Rijden.Webservices.SaveNota.ServerSaveNote(oEditor.GetHTML(),onNoteSaved);
}
function deleteNote()
{
    var oEditor = FCKeditorAPI.GetInstance('ctl00_FCKeditor1');
    oEditor.SetHTML("");
    Rijden.Webservices.SaveNota.ServerSaveNote("");
}
function exportToDoc()
{
    var oEditor = FCKeditorAPI.GetInstance('ctl00_FCKeditor1');
    Rijden.Webservices.SaveNota.ExportNotes(oEditor.GetHTML(), "W", onExportDone);
}
function exportToPdf()
{
    var oEditor = FCKeditorAPI.GetInstance('ctl00_FCKeditor1');
    Rijden.Webservices.SaveNota.ExportNotes(oEditor.GetHTML(), "P", onExportDone);
}
function viewAllNotes()
{
    if (isOnAllNotes)
    {
        Rijden.Webservices.SaveNota.GetNoteByChapter(onGetNoteByChapterSucceeded);
        isOnAllNotes = false;
    }
    else
    {
        Rijden.Webservices.SaveNota.GetAllNotesHtml(onViewAllNotesSucceeded);
        isOnAllNotes = true;
    }
}
function onViewAllNotesSucceeded(result)
{
   var oEditor = FCKeditorAPI.GetInstance('ctl00_FCKeditor1');
   oEditor.SetHTML(result);
   document.getElementById("lnkSaveNote").style.display = "none";
   document.getElementById("lnkDeleteNote").style.display = "none";
}
function onGetNoteByChapterSucceeded(result)
{
   var oEditor = FCKeditorAPI.GetInstance('ctl00_FCKeditor1');
   oEditor.SetHTML(result);
   document.getElementById("lnkSaveNote").style.display = "block";
   document.getElementById("lnkDeleteNote").style.display = "block";
}
function onNoteSaved(result)
{
    document.getElementById("lnkSaveNote").style.display = "none";
    var lblInfo = document.getElementById("lblSaveInfo");
    lblInfo.innerHTML = result;
    lblInfo.style.display = "block";
    setTimeout("hideInfoLabel()",2000);
}
function onExportDone(result)
{
    window.open(result,"_self");
}
function hideInfoLabel()
{
    document.getElementById("lnkSaveNote").style.display = "block";
    document.getElementById("lblSaveInfo").style.display = "none";
}



var searchCombo;
Ext.onReady(function(){
    var ds = new Ext.data.Store({
        proxy: new Ext.data.ScriptTagProxy({
            url: 'Handlers/ClientSearch.ashx'
        }),
        reader: new Ext.data.JsonReader({
            root: 'rows',
            totalProperty: 'results'
            //id: 'Paragraaf_id'
        }, [
            {name: 'title', mapping: 'Paragraaf_title'},
            {name: 'topicId', mapping: 'Page_id'},
            {name: 'excerpt', mapping: 'Page_text'}
        ])
       });

  // Custom rendering Template
  var resultTpl = new Ext.XTemplate(
      '<tpl for="."><div class="search-item">',
          '<h3>{title}</h3>',
          '{excerpt}',
      '</div></tpl>'
  );
  
  searchCombo = new Ext.form.ComboBox({
      store: ds,
      displayField:'title',
      typeAhead: false,
      loadingText: 'Searching...',
      width: 290,
      pageSize:10,
      hideTrigger:true,
      tpl: resultTpl,
      applyTo: 'search',
      itemSelector: 'div.search-item',
      onSelect: function(record){ // override default onSelect to do redirect
          window.location = String.format('page-{0}', record.data.topicId);
      }
  });
  
  if (dgDockedEast == true || dgDockedSouth == true)
  {
      if (dgDockedEast)
          DockCPEast()
      else
          DockCPSouth();
  }
});