Hey guys,

I'm using javascript in a menu to change the colour scheme of a page with frames and wondered how I could make this Javascript work across frames. The top frame is the colour picker with the Javascript and the bottom frame is the html template that will be changing colour scheme.

JS:
Code:
var cols = {
  red: [
    { el: '.headertitle',    color: '#FF0000' },
    { el: '#wrapper #maincontent #leftpanel ul.leftnavigation li a.current',       bgcolor: '#FF0000', color: '#FFFFFF' },
    { el: '#wrapper #maincontent #leftpanel',                                      border: '#FF0000' },
    { el: '#wrapper #maincontent #leftpanel ul.leftoffers li div.titlebody a',     color: '#FF0000' },
    { el: '#wrapper #maincontent #editable h2',                                    color: '#FF0000' },
    { el: '#wrapper #maincontent #rightpanel',                                     border:   '#FF0000' },
    { el: '#wrapper #footer',                                                      bgcolor:  '#FF0000' },
	{ el: '#wrapper #maincontent #leftpanel ul.leftoffers li',                     bgcolor:     '#F6D9D9'},
    { el: '.choosecolour',                                                         border:  '#fff' },
    { el: '#cbred',                                                                border:  '#000' }
  ],
  orange: [
    { el: '#header',            bgcolor: '#ff8c10', color: '#ffffff' },
    { el: '#nav li a',       bgcolor: '#d63b18', color: '#ffffff', hoverbgcolor: '#fc6827', hovercolor: '#ffffff' },
    { el: '.primaryBgCol',   bgcolor: '#ff8c10', color: '#ffffff' },
    { el: '.secondaryBgCol', bgcolor: '#f8a955', color: '#ffffff' },
    { el: '.footerBgCol',    bgcolor: '#f2441c' },
    { el: '.footerTextCol',  color:   '#ffffff' },
    { el: '.borderCol',      border:  '#ff8c10' },
		{ el: '#logo',           src:     'images/logo_orange.gif'},
    { el: '.choosecolour',      border:  '#fff' },
    { el: '#cborange',       border:  '#000' }
  ]
};

function changeColour(col) {
  $A(cols[col]).each(function(i) {
    $$(i.el).each(function(j) {
      if (i.bgcolor)
        j.setStyle({ backgroundColor: i.bgcolor });
      
      if (i.color)
        j.setStyle({ color: i.color });
      
      if (i.border)
        j.setStyle({ borderColor: i.border });
      
      if (i.src)
        j.writeAttribute('src', i.src);
      
      // hover colours
      if (i.hovercolor || i.hoverbgcolor) {
        j.onmouseover = function() { this.setStyle({ backgroundColor: i.hoverbgcolor, color: i.hovercolor }); };
        j.onmouseout   = function() { this.setStyle({ backgroundColor: i.bgcolor, color: i.color }); };
      }
    });
  });
}
JS picker HTML code:
Code:
    <div class="colours"> 
        <div class="choosecolour" id="cbred" style="background-color: #c90c12;" onclick="changeColour('red');"></div> 
        <div class="choosecolour" id="cborange" style="background-color: #ff8c10;" onclick="changeColour('orange');"></div>  
    </div>
Anyone know how I can make the colour scheme of page in lower frame change when colour is picked in top page frame?