/* this is a script to choose a dominant color and then derive an accent color,
a border color, a copy font color and a headline color.
one of ht ekeys here is some notion of color"distance"
i.e. a header (for legibility) should be 50% more contrasty then a base color
a copy color should be 60% more contrasty.
contrast is 70% luminance delta and 30% hue delta
from a hsv standpoint the body font and background color should not deviate more than 20%
accent color should have 120% contrast ( saturation = 100% hue + value = 120%)
variables-- (intended_contrast) --slider to adjust allowable contrast.
(base_color) this color is used to help push a desirable shceme
the base color is used for the background so as to blend with a principal picture.
*/
// these are so my array ref are readable
var regexK = /kustomize=1/i
var colors ={
"accentColor": [],
"headerFontColor": [],
"baseColor": ["#ffffff","255,255,255"],
"bodyFontColor": ["64,64,64"],
"panelColor": ["216,216,216","216,216,244"],
"linkFontColor": ["0,0,255"],
"shadowColor": [],
"deepShadowColor" : ["100,100,100", "black"]
}
var kustomizer = {
//constants
_hue: 0,
_sat: 1,
_bri: 2,
range: 255,
/* member vars */
currentHSB: [],
currentRGB: [],
newRGB: [],
colorInput: null,
images: {},
mastheadHeight: 200,
/* initialization*/
save: function(){
kustomizer.colorInput.value = kustomizer.currentRGB;
var saveString =";{"
for (image in kustomizer.images)
saveString += "'"+image + "':'"+kustomizer.images[image]+"',";
saveString += "'foo':'bar'}";
saveString += ";" + kustomizer.mastheadHeight;
kustomizer.colorInput.value = kustomizer.currentRGB + saveString
document.forms.kustomizer_form.submit();
},
revert: function(){
kustomizer.colorInput.value = kustomizer.originalInput;
if (kustomizer.extract())
{
kustomizer.derivePalette(kustomizer.currentRGB,"rgb");
kustomizer.renderImages();
}
},
showUploading: function()
{
document.getElementById("kustomizer.imageBrowser").innerHTML = ""+
"
"+
"
"+
"Uploading your image..."+
"If your image is > 100k this may take a while..."+
"
"
},
togglepanel: function ()
{
var panel = document.getElementById('kustom-panel').style
var iframe = document.getElementById('upload_iframe').style
panel.display = (panel.display == "none"? "block":"none")
iframe.display = panel.display;
},
extract: function()
{
kustomizer.colorInput = document.getElementById("kustomize_input")
// extraction tests, assuming I may have to deal with poor data
if (kustomizer.colorInput == null)
return false;
kustomizer.originalInput = document.getElementById("kustomize_input").value
// pull current color scheme if there
if (kustomizer.colorInput.value =="")
kustomizer.colorInput.value = "0,0,0;";
var settings = kustomizer.colorInput.value.split(";");
kustomizer.currentRGB = settings[0].split(",");
if ((settings.length > 1)&&(settings[1]!=""))
{
eval("kustomizer.images = "+ settings[1]);
for (image in kustomizer.images)
{
kustomizer.images[image] = kustomizer.images[image]
//kustomizer.images[image] = "img/" + kustomizer.images[image]
}
}
if ((settings.length > 2) && settings[2] != ""){
kustomizer.mastheadHeight=parseInt(settings[2]);
}
for (var i = 0;i < kustomizer.currentRGB.length ;i++);
kustomizer.currentRGB[i] = parseInt(kustomizer.currentRGB[i]);
return true
},
/* initialization*/
init: function(){
if (kustomizer.is_loaded)
return;
kustomizer.is_loaded = true;
if(kustomizer.extract()!= true)
return;
kustomizer.derivePalette(kustomizer.currentRGB,"rgb");
if (kustomizer.colorInput.getAttribute("edit") != null){
if ((location.href.match(regexK) != null)&&(kustomizer.colorInput.getAttribute("edit") == getLogin())){
if(kustomizer.colorInput.getAttribute("old")!= null)
return;
// create kustomizer panel
var tmpEl = document.createElement("DIV")
kustomizer.colorInput.setAttribute("old",kustomizer.colorInput.value)
document.body.appendChild(tmpEl)
tmpEl.innerHTML = "
![](\"images/palette/spinner.gif\")
![](\"/images/colorSelect.gif\")
![](\"/images/brightSelect.gif\")
![](\"/images/palette/kustom.gif\")
"+
"