//globals
var radioTags      //select element tag
var selColor       //select color
var selBackground  //select background
var selector
function domTest()
{
if(document.documentElement)
   {
   return;
   }
else{
    var msg = 'If you are receiving this message then the browser you are using does not comply with the W3c "Document Object Model" which is necessary to render this page correctly'
    msg += '\nYou may need to upgrade your browser'
   alert(msg)
   }
}

function init()
{
domTest()
//form objects
radioTags = document.forms[0].rad

selColor = document.forms[0].selColor
selBackground = document.forms[0].selBackground
selector = document.forms[0].selector
styleValue = document.forms[0].styleValue
//event handlers
for(var i = 0;i < radioTags.length;i++)
   {
   radioTags[i].onclick = function() {radioClicked(this.value)}
   }
   /*change of colors*/
selColor.onchange = function() {display('color',this.options.item(this.selectedIndex).value)};
selBackground.onchange = function() {display('backgroundColor',this.options.item(this.selectedIndex).value)};

selector.onchange = createOptions
styleValue.onchange = displayStyle
selector.selectedIndex = 0;
selColor.focus()
}

function setSelectClr()
{
//called from display() case color and case background color
//adjust select colors to correct clr values
var bgc = document.forms[0].selBackground
var clr = document.forms[0].selColor
var clrVal = clr.options.item(clr.selectedIndex).value;
var bgcVal = bgc.options.item(bgc.selectedIndex).value;
bgc.style.color = clrVal
clr.style.color = clrVal
bgc.style.backgroundColor = bgcVal
clr.style.backgroundColor = bgcVal
}

function displayStyle()
{//feeds display()
//from document.forms[0].styleValue onchange
var s = document.forms[0].selector
var sVal = document.forms[0].styleValue
var val = sVal.options.item(sVal.selectedIndex).text;
var thisStyle = s.options.item(s.selectedIndex).text;
display(thisStyle,val)
}

function display(thisStyle,val)
{
//called from select objects
var tag = getCheckedRadio();
var node = document.getElementById(tag);
var property = thisStyle
var re = new RegExp("[A-Z]");
if(re.test(property))
{
var arr = re.exec(property);
if(RegExp.lastMatch)
   {
   property = RegExp.leftContext;
   property += '-';
   property += RegExp.lastMatch;
   property += RegExp.rightContext;
   }
}
property = property.toLowerCase() + ': ' + val;
eval('node.style.'+thisStyle+' = val')
eval('obj_'+tag+'.'+thisStyle+' = property')
setSelectClr()
}

function getCheckedRadio()
{
var max = document.forms[0].rad.length
for(var i = 0;i < max;i++)
  {
  if(document.forms[0].rad[i].checked)
    {
    return document.forms[0].rad[i].value
    }
  }
}

/*create objects based on tag
  to these dynamically add css properties
*/
var obj_body = new Object()
var obj_div = new Object()
var obj_h1 = new Object()
var obj_h2 = new Object()
var obj_h3 = new Object()
var obj_h4 = new Object()
var obj_p = new Object()
var obj_span = new Object()
var obj_ul = new Object()
var obj_ol = new Object()
var obj_li = new Object()
var obj_table = new Object()
var obj_th = new Object()
var obj_td = new Object()
var obj_a = new Object()
var obj_header = new Object()
var obj_unem = new Object()
var obj_menu = new Object()
var obj_main = new Object()
var obj_login = new Object()
var obj_search = new Object()
var obj_login_title = new Object()
var obj_search_title = new Object()
var obj_agenda = new Object()
var obj_agenda_title = new Object()

//options lists for css rule
var optEm = ['auto','0em','.5em','1em','2em','3em','4em','5em','6em','7em','8em','9em','10em']
var optTextEm = ['normal','.10em','.15em','.20em','.25em','.50em','.60em','.70em','.75em','.80em','.85em','.90em','.95em','1em','2em','3em']
var optTextAlign = ['left','right','center','justify']
var optTextDecoration = ['none','underline','overline','line-through']
var optFWeight = ['normal','bold','bolder','lighter','100','200','300','400','500','600','700','800','900']
var optFFamily = ['Georgia, Palatino, Times New Roman, serif','Times New Roman,serif','Geneva, Verdana, Helvetica, san-serif.','Verdana,Helvetica, sans-serif','Arial, Helvetica, sans-serif','Courier New, Courier, mono','cursive','fantasy']
var optFStyle = ['normal','italic','oblique']
var optFSize =['larger','smaller','xx-large','x-large','large','medium','small','x-small','xx-small']
var optBWidth = ['1px','2px','3px','4px','5px','6px','7px','8px','9px']
var optBStyle = ['none','dotted','dashed','solid','double','groove','ridge','inset','outset']
var optBClr = ['black','red','blue']
var optBoxEm = ['auto','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40','41','42','43','44','45','46','47','48','49','50','51','52','53','54','55','56','57','58','59','60','61','62','63','64','65','66','67','68','69','70','71','72','73','74','75','76','77','78','79','80','81','82','83','84','85','86','87','88','89','90','91','92','93','94','95','96','97','98','90','100']
var optBoxVis = ['visible','hidden','inherit']
var optBoxPos = ['absolute','relative','static']
var optBoxDisplay = ['block','none','inline','list-item','table-footer-group','table-header-group']
var optzIndex = ['1','5','10','20','25','30','50','75','90','91','92','93','94','95','96','97','98','99']

function createOptions()
{
var optArr = document.forms[0].selector.options[document.forms[0].selector.selectedIndex].value
//onchange in forms[0].selector
//generates options list for css selector rule
var  arr = eval(optArr)
var max = arr.length

   for(var i = 0;i < max;i++)
      {
      var txt = arr[i]
      document.forms[0].styleValue.options[i] = new Option(txt,'',false,false)
      }
 //  }
document.forms[0].styleValue.length = max
document.forms[0].styleValue.focus()
}

function radioClicked(id)
{
//when new radio tag selected the select clr objects need to adjusted
//the visibility objects
var frm = document.forms[0]
var bgVal = document.getElementById(id).style.backgroundColor
var cVal = document.getElementById(id).style.color
var max = frm.selBackground.length
for(var i = 0;i < max;i++)
   {
      if(frm.selBackground.options[i].value.toLowerCase() == bgVal)
        {
        frm.selBackground.selectedIndex = i
        }
      if(frm.selColor.options[i].value.toLowerCase() == cVal)
       {
        frm.selColor.selectedIndex = i
        }
    }
setSelectClr()
frm.selColor.focus()
if ((id == 'body') || (id == 'div') ||(id == 'p') || (id == 'span') || (id == 'a') || (id == 'h1') || (id == 'h2') || (id == 'h3') || (id == 'h4') || (id== 'main') || (id=='unem'))
 {
 document.getElementById('divTable').style.visibility = 'hidden'
 document.getElementById('divLists').style.visibility = 'hidden'
 document.getElementById('divfour').style.visibility = 'hidden'
 document.getElementById('div').style.visibility = 'visible'
 }

if ((id == 'table') || (id == 'th') ||(id == 'td'))
 {
 document.getElementById('divTable').style.visibility = 'visible'
 document.getElementById('divLists').style.visibility = 'hidden'
 document.getElementById('divfour').style.visibility = 'hidden'
 document.getElementById('div').style.visibility = 'hidden'
 }

if ((id == 'ul') || (id == 'ol') ||(id == 'li'))
 {
 document.getElementById('divTable').style.visibility = 'hidden'
 document.getElementById('divLists').style.visibility = 'visible'
 document.getElementById('divfour').style.visibility = 'hidden'
 document.getElementById('div').style.visibility = 'hidden'
 }

if ((id == 'h4'))
 {
 document.getElementById('divTable').style.visibility = 'hidden'
 document.getElementById('divLists').style.visibility = 'hidden'
 document.getElementById('divfour').style.visibility = 'visible'
 document.getElementById('div').style.visibility = 'hidden'
 }
 
 if ((id == 'header') || (id == 'menu') || (id == 'search') || (id == 'login') || (id == 'search_title') || (id == 'login_title'))
 {
 document.getElementById('divTable').style.visibility = 'hidden'
 document.getElementById('divLists').style.visibility = 'hidden'
 document.getElementById('divfour').style.visibility = 'hidden'
 document.getElementById('div').style.visibility = 'hidden'
 }
}