//This function is to be used as a lesson to teach
  //JavaScript styling techniques
  //
  //Written by Shawn Olson http://www.shawnolson.net
  google.load("scriptaculous", "1");
  function changeTheStylesWithPrototype(e){
    //set the target of the event to formObj
    var formObj = e.element();
    //Create a Hash to store the style values set in formObj
  	var s = $H({});

  	//Go through each select menu in formObj and create an entry in the hash s
  	//that stores the select item's value
  	$('theForm').select('select').each(function(fe){
  	  //only store the value if it is set
  	  if($F(fe)){
  	    var name = fe.name;
  	    s[name] = $F(fe);
	  }
	});

	//Make an array to store all classes we want to apply styles to
	var applyTo = new Array();

	//Set a string to denote the styles should only be applied Middle Paragraphs
	//(those that are inside the div with an id of notTopOrBottom)
	//if Checkbox 'Limit to Those Inside Target Element' is checked
	var t = '';
	if($F('targeted')){
	  t='#notTopOrBottom ';
	}

	//Add class selectors to the applyTo array
	if($F('wholeDiv')){

	   applyTo.push(t+'.myDivs');
	}
	if($F('paragraphsTop')){
	   applyTo.push(t+'.top');
	}
	if($F('paragraphsMiddle')){
	   applyTo.push(t+'.mid');
	}
	if($F('paragraphsBottom')){
	   applyTo.push(t+'.bottom');
	}

	if($F('paragraphsOdd')){
	   applyTo.push(t+'.odd');
	}
	if($F('paragraphsEven')){
	   applyTo.push(t+'.even');
	}

	//go through each item in the applyTo array
	for(var x = 0; x<applyTo.length; x++){
    //assign the styles of each item found to match s
  	$$(applyTo[x]).each(function(e){
  	try{
  	    e.setStyle(s);
  	} catch(m){
      //something bad happened
  	}
	});

	}
	e.stop();
  }

  function hiliteItem(e){
    //This function is called when a user clicks certain items on the page
    //It then hilights other items that the clicked item relates to

    //Assign the event target to targ
    var targ = e.element();

    //Options for Highlight Effect
    var opts = {};
    opts.startcolor  = '#00FF00';

    //If the item is a checkbox and was just unchecked, highlight in red
    if(targ.type == 'checkbox'){
      if(! targ.checked){
      opts.startcolor  = '#FF0000';
	  }
	}
	var hlItems = '';
	//Determine the items to highlite based on the id of the clicked item
	//The items to hilight are stored in the hlItems string
	switch(targ.id){
	  case 'paragraphsTop':
	   hlItems ='.top';
	    break;
	  case 'paragraphsMiddle':
	   hlItems ='.mid';
	    break;
	  case 'paragraphsBottom':
	   hlItems ='.bottom';
	    break;
	  case 'paragraphsEven':
	   hlItems ='.even';
	    break;
	  case 'paragraphsOdd':
	   hlItems ='.odd';
	    break;
	  case 'wholeDiv':
	   hlItems ='.myDivs';
	    break;
	  case 'targeted':
	   hlItems ='#notTopOrBottom';
	    break;
	  case 'sfHL':
	  	hlItems ='#stylesFieldset';
	    break;
	  case 'ctHL':
	  	hlItems ='#targetsFieldset';
	    break;
	  case 'wcHL':
	  	hlItems ='#wholeContent';
	    break;
	  case 'dbHL':
	  	hlItems ='#demonstrateButton';
	    break;
	}
	    //highlight all items defined in hlItems
	  	$$(hlItems).each(function(e){
  	try{
  	   new Effect.Highlight(e,opts);
  	} catch(m){

  	}
	});


  }

  document.observe('dom:loaded',function (){
  	$$('em').each(function(em){
  	if(em.id){
  	  em.observe('click',hiliteItem);
	}
	});

	$('theForm').observe('change',changeTheStylesWithPrototype);
	$('theForm').observe('submit',changeTheStylesWithPrototype);


$$('#theForm input[type=checkbox]').each(function(em){
  	if(em.id){
  	  em.observe('click',hiliteItem);
	}
	});

	$$('code').each(function(c){
     c.observe('click',alertElementTitle);
     });

  });


  function alertElementTitle(e){
  	targ = e.element();
  	if(targ.title){
  	  alert(targ.title);
	}
  }