var Example = new function () {
  Debug.msg( "Start Example" );
  var pkgEl = this;

  var setStyle = function ( elem, newStyle ) {
    for ( var stylePrm in newStyle ) {
      elem.style[ stylePrm ] = newStyle[ stylePrm ];
    }
  };


  var bibEx = function () {
    var pdv = document.createElement( 'div' );
    function bib ( bSize, bPrnt ) {
      if ( bSize < 40 ) return;

      var newdv = document.createElement( 'div' );
      bPrnt.appendChild( newdv );
      setStyle( newdv, { "position":"absolute" } );
      setStyle( newdv, { "left":10, "top":10 } );
      setStyle( newdv, { "width":bSize, "height":bSize } );

      var cEl = parseInt( 99 * bSize / 300 );
      var newClr = "#"+cEl+"bb"+cEl;
      newdv.style.background = newClr;

      bib( bSize - 20, newdv );
    };
    bib( 300, pdv );

    return pdv;
  };
  pkgEl.bibEx = bibEx;


  pkgEl.swBtn = function () {
    var pdv = document.createElement( 'div' );
    var btn = document.createElement( 'button' );
    pdv.appendChild( btn );
    setStyle( btn, { "position":"absolute", "top":0, "left":0, "width":120, "height":30 } );
    var swdv = document.createElement( 'div' );
    pdv.appendChild( swdv );
    setStyle( swdv, { "position":"absolute", "top":60, "left":0, "width":50, "height":50 } );
    var swOff = function () {
      btn.innerHTML = "Switch ON";
      setStyle( swdv, { "background":"red" } );
      btn.onclick = swOn;
    };
    var swOn = function () {
      btn.innerHTML = "Switch OFF";
      setStyle( swdv, { "background":"green" } );
      btn.onclick = swOff;
    };
    swOff();

    return pdv;
  }



  var chkFns = function () {
    var pdv = document.createElement( "div" );
    var chDt = [
		["Bold",function ( eldv ) { eldv.style.fontWeight = "bold"; } ],
		["Underline", function ( eldv ) { eldv.style.textDecoration = "underline"; } ],
		["Italic", function ( eldv ) { eldv.style.fontStyle = "italic"; } ]
	       ];

    var cats = [ "Lion", "Tiger" ];
    var cellHt = 30;
    var cellWd = 80;
    var dresdv;
    var shFn = function () {
      if ( dresdv ) pdv.removeChild( dresdv );
      dresdv = document.createElement( "div" );
      var dOff = 0;
      for ( var jj=0; jj<cats.length; ++jj ) {
	var catdv = document.createElement( "div" );
	inherit( catdv.style, { "position":"absolute", "top":dOff, "left":200, "fontSize":28 } );
	catdv.innerHTML = cats[jj];
	for ( var kk=0; kk<chDt.length; ++kk ) {
	  if ( chDt[kk][2].checked ) chDt[kk][1]( catdv );
	}

	dresdv.appendChild( catdv );
	dOff += 50;
      }
      pdv.appendChild( dresdv );
    };

    var chkOff = 0;
    for ( var ii=0; ii<chDt.length; ++ii ) {
      var chkBx = document.createElement( "input" );
      chkBx.type = "checkbox";
      inherit( chkBx.style, { "position":"absolute", "top":chkOff, "left":0 } );
      chkBx.onclick = shFn;
      var chkdv = document.createElement( "div" );
      inherit( chkdv.style, { "position":"absolute", "top":chkOff, "left":20, "fontSize":22 } );
      chkdv.innerHTML = chDt[ii][0];
      chDt[ii][2] = chkBx;
      pdv.appendChild( chkBx );
      pdv.appendChild( chkdv );

      chkOff += cellHt + 2;
    }

    return pdv;
  };
  pkgEl.chkFns = chkFns;


  var stpEx = function () {
    var pdv = document.createElement( "div" );

    var stepper = function ( parent, sLf, sTp, step, limit, title ) {
      var sEl = document.createElement( "div" );
      inherit( sEl.style, { "position":"absolute", "top":sTp, "left":sLf, "fontSize":20, "width":100 } );
      sEl.innerHTML = title;
      parent.appendChild( sEl );

      var currTop = sTp;
      var direc = 1;
      var stpFn = function () {
	if ( currTop >= limit ) direc = -1;
	if ( currTop <= sTp ) direc = 1;
	currTop += step*direc;
	inherit( sEl.style, { "top":currTop } );
      }
      return stpFn;
    };

    var t1 = document.createElement( "button" );
    inherit( t1.style, { "position":"absolute", "top":0, "left":10, "fontSize":24, "width":100, "textDecoration":"underline" } );
    t1.innerHTML = "Step 1";
    pdv.appendChild( t1 );

    var t2 = document.createElement( "button" );
    inherit( t2.style, { "position":"absolute", "top":0, "left":130, "fontSize":24, "width":100, "textDecoration":"underline" } );
    t2.innerHTML = "Step 2";
    pdv.appendChild( t2 );

    var s1 = stepper( pdv, 10, 50, 20, 200, "Text 11" );
    t1.onclick = s1;
    var s2 = stepper( pdv, 130, 50, 40, 240, "Text 22" );
    t2.onclick = s2;

    return pdv;
  };
  pkgEl.stpEx = stpEx;



};