/*if(document.getElementById)
{
   if(window.attachEvent)
   {
      window.attachEvent('onload',init);
   }
   else if(window.addEventListener)
   {
      window.addEventListener('load',init,false);
   }
   var initialContent,initialFixed;
}
*/

function init()
{
   document.getElementById('scriptkid').innerHTML =
      '<input id="play" type="button" value="Start playing">';
   document.getElementById('play').onclick = scriptIt;
}

function scriptIt()
{
   initialContent = document.getElementById('content').innerHTML;
   initialFixed   = document.getElementById('fixedbox').innerHTML;
   var topLess = (window.location.pathname.toString().match(/top(-left)?\/$/))
      ? 'jump to <a href="#dog2">2nd</a>, '
      + '<a href="#dog3">3rd</a> or '
      + '<a href="#dog100">last</a> dog'
      : '<a href="#dog100">end&nbsp;of&nbsp;file</a>'
      ;
   var colSwap = (window.location.pathname.toString().match(/legacy\/$/))
      ? '<input id="swap" type="hidden" value="Swap contents"> '
      : '<input id="swap" type="button" value="Swap contents"> '
      ;
   var quirk = (document.compatMode)
      ? ' <small>(<code>document.compatMode</code>: ' + document.compatMode + ')</small>'
      : null
      ;
   var dogs = '';
   for(var i = 2; i < 100; i++)
   {
      dogs += '<li id="dog' + (i + 1) + '">The quick brown fox jumped over ' + i + ' lazy dogs.</li>\n';
   }
   document.getElementById('content').innerHTML =
      '<h1>Acid tests' + quirk + '</h1>' +
      '<p>' + colSwap +
      '<input id="camel" type="button" value="Toggle non-breaking string"> ' + 
      '<input id="go" type="button" value="Toggle list"> ' +
      '<span id="eof"> | ' + topLess + ' </span> || ' +
      '<input id="reset" type="button" value="Reset"> ' +
      '</p>' +
      '<p id="caravan">thisIsAnIncrediblyLongStringOfTextIn' +
      '<a href="http://catb.org/~esr/jargon/html/C/camelCase.html">CamelCase</a>' +
      'WhichIsReallyAnnoyingToReadButUsefulToDemonstrateWhatHappensWhen' +
      'AHorizontalScrollbarMaterialisesOnAPageLikeThisParticularOneNevertheless.</p>' +
      '<ol id="fox">' +
      '<li id="dog1">The quick brown fox jumps over the lazy dog.</li>' +
      '<li id="dog2">The quick brown fox jumped over 1 lazy dog.</li>' +
      dogs +
      '</ol>'
      ;
   var widgets = document.getElementsByTagName('INPUT');
   var i = widgets.length;
   while(i--)
   {
      widgets[i].style.verticalAlign = 'middle';
   }
   document.getElementById('caravan').style.display = 'none';
   getIt();
}

function getIt()
{
   document.getElementById('swap').onclick  = swapIt;
   document.getElementById('camel').onclick = camelCase;
   document.getElementById('go').onclick    = dogHausse;
   document.getElementById('reset').onclick = reloadIt;
}

function swapIt()
{
   var col1 = document.getElementById('fixedbox');
   var col2 = document.getElementById('content');
   var con1 = col1.innerHTML;
   var con2 = col2.innerHTML;
   col1.innerHTML = con2;
   col2.innerHTML = con1;
   getIt();
}

function reloadIt()
{
   document.getElementById('content').innerHTML  = initialContent;
   document.getElementById('fixedbox').innerHTML = initialFixed;
   init();
}

function camelCase()
{
   disTract('caravan');
}

function dogHausse()
{
   disTract('fox');
   document.getElementById('eof').style.display =
      (document.getElementById('fox').style.display == 'none')
      ? 'none'
      : ''
      ;
}

function disTract(elm)
{
   state = document.getElementById(elm).style;
   state.display = (state.display == 'none') ? '' : 'none' ;
}