/***
*
* common.css is lame, this is so much better
*
* work in progress
* /
/*jshint esversion:6 */
$('body').prepend("<script>function changeg(select,val){if(select==1){ localStorage.setItem('mainColor', val)}; document.body.style.color = localStorage.getItem('mainColor'); document.getElementById('colorPick').value = standardize_color(localStorage.getItem('mainColor'))}</script>");
//1 is color
const COLORS =['red','orange','yellow', 'green','blue','indigo','black']
const FONTS={
'Times New Roman':{
'family':'serif'
},
'Georgia':{
'family':'serif'
},
'Garamond':{
'family':'serif'
},
'Arial':{
'family':'Sans-serif'
},
'Verdana':{
'family':'Sans-serif'
},
'Helvetica':{
'family':'Sans-serif'
},
'Courier New':{
'family':'Monospace'
},
'Lucida Console':{
'family':'Monospace'
},
'Monaco':{
'family':'Monospace'
},
'Brush Script MT':{
'family':'Cursive'
},
'Lucida Handwriting':{
'family':'Cursive'
},
'Copperplate':{
'family':'Fantasy'
},
'Papyrus':{
'family':'Fantasy'
},
}
const FONT_LIST = Object.getOwnPropertyNames(FONTS)
$('body').prepend("<div id='styleTab' class='intab'><div id='color' class='box intab'><input id='colorPick' type='color' onchange='changeFontStyle(2,this)'></input></div><div id='idk' class='box intab'><p class='intab'>font</p><select id='dropdown' class'intab' onchange='changeFontStyle (1,this);'></select></div><div id='font' class='box intab'><button id='buton' class='intab'>useless button :(</button></div></div>");
$('body').prepend('<style>#styleTab{flex-direction:row;display:flex; flex-wrap: nowrap;justify-content:center;position: fixed;bottom: 0;height: 100px;width: 500px; z-index: 1000000;pointser-events: none; overflow: auto; background-color: #f8f9fa; border-top-right-radius:15px; border-style: solid; border-width: 1px 1px 0px 0px ; border-color: #a2a9b1;}</style>');
$('body').prepend('<style>#color{ order:1;flex-wrap:wrap;}#idk{order:2;}#font{order:3;flex-wrap:wrap;}</style>');
$('body').prepend('<style>.box{background-color:#f8f9fa;display:flex; flex-grow:1;justify-content:center;flex-direction:column;align-content:center;}</style>');
$('body').prepend('<style>.intab{opacity:0.5;transition: opacity 0.5s;} .intab:hover{opacity:1;transition: opacity 0.5s;;}}</style>');
const colour = document.getElementById("color");
for(var i=0; i < COLORS.length; i++){
colour.innerHTML+="<button id='"+COLORS[i]+"Button' class='intab' onclick='changeg(1,\""+ COLORS[i] + "\")'>"+COLORS[i]+"</button>"
$('body').append("<style>#"+COLORS[i]+"Button{background-color:"+COLORS[i]+"}</style>");
}
var select = document.getElementById("dropdown");
for(var i = 0; i < FONT_LIST.length; i++) {
var opt = FONT_LIST[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
var changeFontStyle = function (type,val) {//1 is font, 2 is color
if(type==1){
localStorage.setItem('mainFont',val.value)
document.body.style.fontFamily = localStorage.getItem('mainFont')
} if(type==2){
localStorage.setItem('mainColor',val.value)
document.body.style.color = localStorage.getItem('mainColor')
document.getElementById('colorPick').value = localStorage.getItem('mainColor')
}
}
if(localStorage.getItem('mainColor')!=null){
var colorr = localStorage.getItem('mainColor');
document.body.style.color = colorr
if(document.getElementById('colorPick').value){
document.getElementById('colorPick').value = standardize_color(colorr)
}else{
document.getElementById('colorPick').value = colorr
}
}if(localStorage.getItem('mainFont')!=null){
document.body.style.fontFamily = localStorage.getItem('mainFont')
document.body.getElementById(dropdown).value = localStorage.getItem('mainFont')
}
function standardize_color(str){
var ctx = document.createElement("canvas").getContext("2d");
ctx.fillStyle = str;
return ctx.fillStyle;
}