style switcher load order

[delightdesign]

Dear Forum, I'm implementing a style switcher to set the active css - changing graphics.

for it to work it requires in the html head refs to the css files:


<link rel="stylesheet" type="text/css" media="screen" href="/css/canvas.css " title="canvas">
<link rel="stylesheet" type="text/css" media="all" href="/css/corporate.css " title="corporate">
<link rel="stylesheet" type="text/css" media="all" href="/css/earth.css " title="earth">
<link rel="stylesheet" type="text/css" media="all" href="/css/creative.css " title="creative">
<link rel="stylesheet" type="text/css" media="all" href="/css/space-and-stars.css " title="space-and-stars">
<link rel="stylesheet" type="text/css" media="all" href="/css/under-the-sea.css " title="under-the-sea">
<link rel="stylesheet" type="text/css" media="all" href="/css/classical.css " title="classical">

the first time opening the page, it uses the first given stylesheet - canvas, but after the style is changed, when opening subpages or reopening the site (especially noticable on safari) http://www.delightwebdesign.co.uk/ it loads the (first) canvas sheet and then overwrites the graphics etc with the active stylesheet. The javascript is:




function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}

function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}

function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}

window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);



is there a way to update the code used here - either html or javascript to avoid this, e.g. to delay the html css refs bringing in the first canvas graphics or to run the javascript before it happens?

help much appreciated,

Will