title: Kendo UI Window (Content)
body: <p>Hello I have a query regarding Kendo UI's Window Content. Basically I've picked up a nice little desktop-like (WebOS) setup that I'd like to fiddle around with. The application windows "openWin1" and "openWin2" are defined but are empty and have no content. Where do I add the content? In HTML5 or Javascript?</p>
  
  <p>Any help would be greatly appreciated. I'm quite new to this. </p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Masrani Global OS&lt;/title&gt;
  &lt;link href="styles/kendo.common.min.css" rel="stylesheet"&gt;
  &lt;link href="styles/kendo.default.min.css" rel="stylesheet"&gt;
  &lt;link href="css/system.css" rel="stylesheet"&gt;
  &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/kendo.web.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/kendo.window.min.js"&gt;&lt;/script&gt;
  &lt;script src="custom.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="titleBar"&gt;&lt;a id="openWin1" class="topBtn" href="#"&gt;Terminal&lt;/a&gt;&lt;a id="openWin2" class="topBtn" href="#"&gt;Media Player&lt;/a&gt;&lt;/div&gt;
  &lt;div id="deskTop"&gt;&lt;/div&gt;
  &lt;div id="statusBar"&gt;&lt;ul id="statusBarBtns"&gt;&lt;li id="hideAll"&gt;&lt;a class="statBarBtn" href="#"&gt;Show Desktop&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div id="logText"&gt;&lt;/div&gt;&lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>custom.js:</p>
  
  <pre><code>function log(data){
  console.log(data);
  }
  
  function repositionWindow(elementName){
  var thisWindow = $("#" + elementName).closest('.k-window'),
  winOffset = thisWindow.offset(),
  thisWindowWidth = thisWindow.width()
  thisWindowHeight = thisWindow.height()
  bottomEdge = winOffset.top + thisWindowHeight
  rightEdge = winOffset.left + thisWindowWidth
  deskTopOffset = $('#deskTop').offset()
  deskTopHeight = $('#deskTop').height();
  deskTopBottom = deskTopOffset.top + deskTopHeight - 25
  deskTopWidth = deskTopOffset.left + $('#deskTop').width() - 2;
  if(thisWindowWidth&gt;$('#deskTop').width()){thisWindow.width($('#deskTop').width());}
  if(bottomEdge&gt;deskTopBottom){thisWindow.css('top',winOffset.top - (bottomEdge - deskTopBottom)+'px');}
  if(rightEdge&gt;deskTopWidth){thisWindow.css('left',winOffset.left - (rightEdge - deskTopWidth)+'px');}
  if(winOffset.top &lt; deskTopOffset.top){ thisWindow.css('top',(deskTopOffset.top+2)+'px');}
  if(winOffset.left &lt; deskTopOffset.left){thisWindow.css('left',deskTopOffset.left + 'px');}
  if(thisWindow.offset().top&lt;deskTopOffset.top){thisWindow.css('top',deskTopOffset.top+'px');thisWindow.height(deskTopHeight-25);}
  }
  
  
  function createWindow(elementName,Icon,WindowTitle,Width,Height){
  $('body').append('&lt;div id="'+elementName+'"&gt;&lt;/div&gt;');
  var window = $("#" + elementName);
  if (!window.data("kendoWindow")) {
      $('#statusBarBtns').append('&lt;li id="statbar_'+elementName+'"&gt;&lt;a class="statBarBtn" href="#WIN-'+elementName+'"&gt;'+WindowTitle+'&lt;/a&gt;&lt;/li&gt;');
      window.kendoWindow({
          width: Width+"px",
          height: Height+"px",
          title: WindowTitle,
          actions: ["Custom","Maximize", "Close"],
          close: function(){
              $('#statbar_'+elementName).remove();
              $("#"+elementName).data("kendoWindow").destroy();
              if(elementName == 'myWindow'){
                  $('#openWin1').show();              
              }
              if(elementName == 'myWindow2'){
                  $('#openWin2').show();              
              }
          },
          activate: function(e){
              repositionWindow(elementName);
          },
          dragend: function(e){
              repositionWindow(elementName);
          },
          resize: function(e){
              repositionWindow(elementName);
          }
      });
      $("#" + elementName +'_wnd_title').parent().prepend('&lt;img class="windowLeftIcon" src="icons/'+Icon+'.png"/&gt;'); 
      window = $("#" + elementName).data("kendoWindow");
      var vv = window.wrapper.find(".k-i-custom");
      vv.removeClass('k-i-custom').addClass('k-i-minimize2');
      vv.click(function (e) {
          $("#" + elementName).closest('.k-window').hide();
      })
  }   
  }
  
  $('.statBarBtn').live('click',function(e){
  e.preventDefault();
  var elementName = $(this).attr('href');
  if(elementName == '#') return;
  elementName = elementName.replace("#WIN-","");
  var wnd = $("#"+elementName).data("kendoWindow");
  if(wnd.element.is(":hidden")){
      $("#" + elementName).closest('.k-window').show();
      wnd.toFront();
  } else {
      $("#" + elementName).closest('.k-window').hide();
  }
  });
  
  $(document).ready(function() {
  $('#openWin1').click(function(){
      createWindow('myWindow','server','Terminal',500,300);
      $(this).hide();
  });
  
  $('#openWin2').click(function(){
      createWindow('myWindow2','server','Media Player',400,200);
      $(this).hide();
  });
  
  $('#hideAll').click(function(){
      $(".k-window-content").each(function(){
          $(this).closest('.k-window').hide();
      });
  });
  });
  </code></pre>