/* In essence, the code you see below in step one (in the next box)
  (the changewholecolour function code)     
  could all go in place of the call to changewholecolour in myScript (in the package below)  */ 


  /* There are some things to consider when doing that however.
     Javascript called from a function stored in xml only exists in that function,
     unless you set up variables in the wrapper or call an undeclared variable:

     ( newvar = "new"; (no "var" beforehand) - but that gives a strict error)

     The function in the xml can be thought of as one function being called.  

     Also, javascript called from a function stored in xml does not behave as expected on the DOM.
     So this piece of changewholecolour would not work as is:

       var goin = document.getElementById('bott').lastChild;
       if (goin) {goin.innerHTML = 
       "div.blne{height:1px;widsh:500px;background:#"+compsix+";}\n"+
       "div.blnex{height:1px;widsh:470px;background:#"+compsix+";}";}}
        
     In order to really change the innerHTML you would have to always use
     a pre_built reference to the element and not your own:

       var goin = document.getElementById('bott').lastChild;
       if (goin) {document.getElementById('bott').lastChild.innerHTML = 
        "div.blne{height:1px;widsh:500px;background:#"+compsix+";}\n"+
       "div.blnex{height:1px;widsh:470px;background:#"+compsix+";}";}}

     However, in this example changewholecolour is a function 
     that has been applied to the DOM. Therefore its inner workings opperate like normal.
     How it was applied to the DOM is covered starting in the next box.

     The package directly below is what makes up the compiled result for this example.

                                                                                                        */
package
{

  import flash.display.Sprite;
  import flash.display.MovieClip;
  import flash.external.ExternalInterface;
  import flash.text.TextField;
  import flash.text.TextFieldType;
  import flash.text.TextFieldAutoSize;
  import flash.events.MouseEvent;

  public class JavaScriptInActionScript extends Sprite 
  {


    private var myScript:XML;

    private var pickedInfo:TextField;

    [Embed(source="vectors/grayButton.swf")]
        private var grayButton:Class;


    public function JavaScriptInActionScript() 
    {


	myScript = 
	<script>
	<![CDATA[
	function (argone, argtwo, argthree, argfour) {


	function doColourChange(oner, twoer, threeer, fourer) {

          /* see notes above */
	  changewholecolour(oner, twoer, threeer, fourer);

	}

	  doColourChange(argone, argtwo, argthree, argfour);

	}
	]]>
	</script>;


	var complementSix:TextField = colorChoiceField(1, "0123456789ABCDEFabcdef", "FFDFA5");

	addChild(complementSix);

	var complementRGB:TextField = 
	colorChoiceField(Number(complementSix.x  + complementSix.width  + 5), "0-9,", "255,223,165");

	addChild(complementRGB);

	var baseSix:TextField = 
	colorChoiceField(Number(complementRGB.x  + complementRGB.width  + 5), "0123456789ABCDEFabcdef", "6494ED");

	addChild(baseSix);

	var baseRGB:TextField = colorChoiceField(Number(baseSix.x  + baseSix.width  + 5), "0-9,", "100,148,237");

	addChild(baseRGB);

	var aButton:Sprite = new grayButton() as Sprite;

	aButton.scaleX *= .5;
	aButton.scaleY *= .6;

	aButton.addEventListener(MouseEvent.CLICK, changeColour);

	aButton.y = baseRGB.y;
	aButton.x = baseRGB.x  + baseRGB.width  + 5;
	
	addChild(aButton);



	var infoText:TextField = new TextField();
	infoText.width = 450;
	infoText.border = true;
	infoText.wordWrap = true;
	infoText.autoSize = TextFieldAutoSize.LEFT;

	infoText.text = "In the four boxes above you can enter color values." +
	"\n The first box on the left takes a 6 digit hex color value." +
	" It will effect the hover color of the navigational words, and the under-lines used throughout the site." +
	"\n The second box takes an RGB comma separated color value." +
	" It will effect the color of the words in the website banner." +
	"\n The third box takes a 6 digit color." +
	" It will effect the background color of the site." +
	"\n The fourth box takes an RGB color." +
	" It will effect the color of the banner (that is not black)" +
	"\n\n You can use the color picker below to get color values." +
	"\n The bigger boxes give 6 digit values when clicked on, " +
	" the smaller boxes give RGB values." +
	"\n You can simply copy and paste the values into the boxes above," +
	" then hit the gray button above to change the color scheme of the site." +
	"\n\nIn the next example I'll show you how your choices can be saved via shared objects" +
	" so that when you re-visit the site, your color scheme can be remembered.";

	infoText.y = aButton.y  + 30;
	infoText.x = 10;
	addChild(infoText);

/* 
   Below is the colour picker we made in the last example. 
   Unlike the gray button, we need to be able to access its contents easily,
   so we simply initiated it in here as a brand new brought in class,
   instead of as an embedded file.

   That .as file (PickAColour.as) needs to be in the same folder as this file,
   it must also have the same package structure, but you do not need to use import for it. just:
                                                                                                       */  

   
	var aPicker:Sprite = new PickAColour();

   

/* we add a mouse down event to each box of the colour picker */
	for (var ac:int = 0; ac < aPicker.numChildren; ac++) 
	{
  		aPicker.getChildAt(ac).addEventListener(MouseEvent.MOUSE_DOWN, showColour);
	}

	aPicker.y = infoText.y  + infoText.height  + 3;
  	aPicker.x = 10;
  	aPicker.scaleX *= 1.2;

  	addChild(aPicker);

  	pickedInfo = new TextField();
  	pickedInfo.width = 100;
  	pickedInfo.height = 20;
  	pickedInfo.background = true;
  	pickedInfo.backgroundColor = 0xFFFFFF;
  	pickedInfo.x = aPicker.x  + 175;
  	pickedInfo.y = aPicker.y;
  
  	addChild(pickedInfo);


    }


private function showColour(e:MouseEvent):void 
{

  /* nice n easy, gives the colour boxs name to the text field */
  	pickedInfo.text = e.target.name;

}


private function changeColour(e:MouseEvent):void 
{

  /* when the gray button is pressed the javascript is called with the text fields values */

  	var csix:String = (getChildAt(0) as TextField).text;
  	var crgb:String = (getChildAt(1) as TextField).text;
  	var bsix:String = (getChildAt(2) as TextField).text;
  	var brgb:String = (getChildAt(3) as TextField).text;

  	if (ExternalInterface.available) {

		ExternalInterface.call(myScript, csix, crgb, bsix, brgb);

  	}


}

private function colorChoiceField(xPosition:Number, restricter:String, currentChoice:String):TextField 
{

  	var colorChoice:TextField = new TextField();
  	colorChoice.type = TextFieldType.INPUT;
  	colorChoice.border = true;
  	colorChoice.x = xPosition;
  	colorChoice.height = 25;
  	colorChoice.restrict = restricter;
  	colorChoice.text = currentChoice;

  	return colorChoice;

}




 }
}

 ...
 <xmlj>
 <![CDATA[
 function () {

 changewholecolour = function(compsix, comprgb, basesix, basergb) {
 var justsix = new RegExp("^[0-9a-z]{6}$", "i");
 var justrgb = new RegExp("^[0-9]{1,3}[\,]{1}[0-9]{1,3}[\,]{1}[0-9]{1,3}$", "i");
 var alphaz = new RegExp("[a-z ]{1,}", "i");
 if (compsix.match(justsix) && comprgb.match(justrgb) && basesix.match(justsix) && basergb.match(justrgb) && 
 !comprgb.match(alphaz) && !basergb.match(alphaz)) {
 var newcolors = new Array(compsix, comprgb, basesix, basergb);
 mastertalk(newcolors, "tadner", "colorset");
 document.getElementById('bluebod').style.backgroundColor = "#"+basesix;
 document.getElementById('theflash').style.backgroundColor = "#"+basesix;
 var goin = document.getElementById('bott').lastChild;
 if (goin) {goin.innerHTML = 
 "div.blne{height:1px;widsh:500px;background:#"+compsix+";}\n"+
 "div.blnex{height:1px;widsh:470px;background:#"+compsix+";}";}} };

  /* other functions are also given to the page from this xml file,
  in this case the other function used is mastertalk. 
  mastertalk is a function used to call an ActionScript callback.
  In this case it is used as a raw js function in the xml alongside changewholecolour.
  A mastertalk function can also be applied to the page by using my DOMEx class. */

  }
  ]]>
  </xmlj>
 
 ... 

/* in atade.js */

var changewholecolor;

/* other functions are "made ready" in the same way */

...

/* An abbreviated version of what happens from the banner when the page first loads */

private function loadX(thisURL:String):void 
{

        var aDate:Date = new Date(); 
	/* this unique number will ensure that the xml is always called anew */
        var aTime:String = ""+aDate.getTime()+"";

	var request:URLRequest = new URLRequest(""+thisURL+"?"+aTime+"");
	
	var loader:URLLoader = new URLLoader();
        
        loader.addEventListener(Event.COMPLETE, makeCall);
        
        loader.load(request);

}

private function makeCall(e:Event):void 
{

         var theXML:XML = new XML(e.target.data);

	if (ExternalInterface.available) { 
/* The external interface is used to give the awaiting changewholecolor variable some meaning,
   in this case it will be a function.
 
    The xml is used as a means to hold the javascript.
    In this case the xml is in a external file that is loaded at run time. 
     
    When you press the gray button of the example,
    you are calling javascript that has been stored inside the actual swf as an xml variable. 

                                                                                                 */
		ExternalInterface.call(theXML.xmlj);
	}

}

...