diff options
Diffstat (limited to 'js/ancient.js')
| -rw-r--r-- | js/ancient.js | 528 |
1 files changed, 528 insertions, 0 deletions
diff --git a/js/ancient.js b/js/ancient.js new file mode 100644 index 0000000..5bf15c0 --- /dev/null +++ b/js/ancient.js @@ -0,0 +1,528 @@ +var old = {};
+var colorsheight;
+var colorswidth;
+var widthratio = 7;
+var numberacross = 10;
+var backgroundstate = 2;
+var infostate = 0;
+var names = true;
+var hexes = false;
+var rgbs = false;
+var favshow = false;
+var selectedname = "";
+var selectedrgb;
+var curfavcolor = "";
+var curfavcolorId = "";
+var separate = ';';
+//---------element objects----------
+var transbutton = $('#transbutton');
+var submitvalue = $('#submitvalue');
+var addfav = $('#addfavlist');
+var openfav = $('#openfavlist');
+var preview = $('#preview');
+var colornames = $('#colornames');
+var namespace = $('#namespace');
+var extra = $('#extra');
+var container = $('#container');
+var switches = $('#switches');
+var transparent = $('#transparent');
+var infospace = $('#infospace');
+var infoswitch = $('#infoswitch');
+var backgroundswitch = $('#backgroundswitch');
+var bg_menu = $('#bg_menu');
+var vasebackground = $('#vasebackground');
+var hexswitch = $('#hexswitch');
+var favpanel = $('#favpanel');
+var orgheight = 0;
+var bscroll = false;
+//----------------------------------
+$(function(){
+ ColorPicker.show();
+});
+
+function selectfavColor(selcolor, id)
+{
+ addfav.html('Remove from Favorites');
+ curfavcolor = selcolor;
+ curfavcolorId = id;
+ var rgbregex = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/;
+ var hexregex = /^#(?:[0-9a-f]{3}){1,2}$/i;
+ hexes = false;
+ names = false;
+ rgbs = false;
+ var match = rgbregex.exec(selcolor);
+ if (match != null) {
+ selectedname = rgbtoname[selcolor];
+ selectedrgb = selcolor;
+ hexes = true;
+ hexswitch.html('CLICK TO SWITCH TO HEX VALUES');
+ } else if((match = hexregex.exec(selcolor))!= null) {
+ names = true;
+ selectedrgb = hextorgb[selcolor];
+ selectedname = rgbtoname[selectedrgb];
+ hexswitch.html('CLICK TO SWITCH TO COLOR NAMES');
+ } else {
+ selectedname = selcolor;
+ selectedrgb = hextorgb[nametohex[selectedname]];
+ hexswitch.html('CLICK TO SWITCH TO RGB VALUES');
+ rgbs = true;
+ }
+ colornames.html(selcolor);
+ namespace.val(selcolor);
+ preview.css({'background-color':selectedrgb,'border-style':'none'});
+ vasebackground.css('background-color',selectedrgb);
+}
+
+var ColorPicker = {
+ GoldenFuncs: {
+ regolden: function(num) {
+ ratio = (1+Math.sqrt(5))/2;
+ newnum = Math.round(num/ratio);
+ return newnum;
+ },
+ goldenize: function(num) {
+ ratio = (1+Math.sqrt(5))/2;
+ newnum = Math.round(num*ratio);
+ return newnum;
+ },
+ getproperty: function(idandselectr, propertystr) {
+ //turns css property width or height into an integer value
+ grab = $(idandselectr).css(propertystr);
+ grab = grab.slice(0,-2);
+ numval = parseInt(grab);
+ return numval;
+ },
+ makegolden: function(idandselectr, propertystr) {
+ result = ColorPicker.GoldenFuncs.getproperty(idandselectr, propertystr);
+ newval = ColorPicker.GoldenFuncs.goldenize(result) + 60;
+ propval = newval.toString()+'px';
+ if(propertystr == 'height') {
+ $(idandselectr).css('width', propval);
+ }else if(propertystr == 'width') {
+ $(idandselectr).css('height', propval);
+ }
+ }
+ },
+ Events: {
+ addEventListener: function(){
+ //--------event handler of transparent button-------
+ transbutton.click(function() {
+ namespace.val('transparent');
+ preview.css({'background-color':'transparent','border-style':'dashed','border-width':'2px'});
+ colornames.html('transparent');
+ colornames.fadeOut(100);
+ colornames.fadeIn(500);
+ extra.html('<br><br><span style="color:red;background-color:black;border-color:red; border-width:1px; border-style:solid; font-size:14px;">note: the .jpg image format does not support transparency</span>');
+ });
+ transbutton.hover(function(){ transbutton.addClass('hovertrans')},
+ function(){ transbutton.attr('class','defaulttrans')});
+ submitvalue.hover(function(){ submitvalue.addClass('hovertrans')},
+ function(){ submitvalue.attr('class','defaulttrans')});
+ addfav.hover(function(){ addfav.addClass('hovertrans')},
+ function(){ addfav.attr('class','defaulttrans')});
+ $('.bgOptions').click(function(){
+ if (this.id == "bg1")
+ {
+ $('#colorpicker').css({'background-image':'url("./images/bg.dither.gif")','background-color':'gray','background-color':'black'});
+ }else if(this.id == "bg5"){
+ $('#' + this.id).bind('keypress', function(event){
+ var key = event.which || event.keyCode;
+ if(key === 13) {
+ $('#colorpicker').css({'background-image':"url('" + $('#bgURI').val() + "')"});
+ $('#opt_bgURI').val($('#bgURI').val());
+ $('#bgURI').val('');
+ }
+ });
+ }else{
+ $('#colorpicker').css({'background-image':'none','background-color':$('#' + this.id).html().toLowerCase()});
+ }
+ $('#opt_bgColor').val(this.id);
+ });
+ //--------event handler over colorpanel-------
+ var firstwidth;
+ $('.colors').mouseover(function() {
+ extra.html("");
+ if(this.id != 'd0') {
+ $(this).css({'height':ColorPicker.GoldenFuncs.goldenize(colorsheight),
+ 'width':ColorPicker.GoldenFuncs.goldenize(colorswidth)});
+ firstwidth = container.css('width');
+ newwidth = firstwidth+ColorPicker.GoldenFuncs.goldenize(colorswidth)-colorswidth;
+ container.css('width',newwidth);
+ }
+ });
+ $('.colors').mouseout(function() {
+ $(this).css('height',colorsheight)
+ $(this).css('width', colorswidth)
+ container.css('width',firstwidth)
+ });
+ $('.colors').hover(function() {
+ var stringvalue = 'CLICK TO CHOOSE THE COLOR';
+ colornames.fadeOut(100);
+ colornames.fadeIn(500);
+ stringvalue = ColorPicker.showcolorname(this.id);
+ colornames.html(stringvalue);
+ });
+ $('.colors').click(function() {
+ selectednameid = $(this).attr('id')
+ selectedname = divtoname['#'+selectednameid];
+ selectedrgb = $(this).css('background-color');
+ ColorPicker.putitin();
+ });
+ //-------------others handler-------------------------------
+ infoswitch.hover(function(){infospace.show()}, function(){infospace.hide('slow')} );
+ infoswitch.click(function(){ColorPicker.switchcolorinfo()});
+ backgroundswitch.clicked = false;
+ backgroundswitch.click(function(){
+ if (! backgroundswitch.clicked){
+ bg_menu.slideDown("fast", function(){
+ backgroundswitch.clicked = true;
+ backgroundswitch.addClass("switches_depressed");
+ });
+ }else{
+ bg_menu.slideUp("fast", function(){
+ backgroundswitch.clicked = false;
+ backgroundswitch.removeClass("switches_depressed");
+ })
+ }
+ });
+ addfav.click(function(){ColorPicker.addfavourites()});
+ openfav.click(function(){ColorPicker.openfavourites()});
+ hexswitch.click(function(){ColorPicker.hexcolorswitch()});
+ $('.theswitches').hover(function(){ ColorPicker.switchhovercss(this.id, 'over') },
+ function(){ ColorPicker.switchhovercss(this.id, 'out') });
+ //-------handler for window resive----
+ $(window).resize(function()
+ {
+ ColorPicker.setupdimensions();
+ });
+ }
+ },
+ getcolorfromfavorite: function(fvalue){
+ var rgbregex = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/;
+ var hexregex = /^#(?:[0-9a-f]{3}){1,2}$/i;
+ var retcolor = '';
+ var match = rgbregex.exec(fvalue);
+ if (match != null) {
+ retcolor = fvalue;
+ } else if((match = hexregex.exec(fvalue))!= null) {
+ retcolor = hextorgb[fvalue];
+ } else {
+ retcolor = hextorgb[nametohex[fvalue]];
+ }
+ return retcolor;
+ },
+ initfavpanel: function(){
+ var fcolors = $('#favcolors').val();
+ var clist=fcolors.split(separate);
+ for(var i=0; i < clist.length; i++) {
+ if (clist[i] != '')
+ {
+ var colname = clist[i];
+ favpanel.append('<span class="favcolor" id="favcol' + i + '" ><input name="favcolor" type="radio" onclick="selectfavColor(\'' + clist[i]
+ + '\',\'favcol' + i +'\');"><label>' + colname + '</label><span class="favcolorbox" style="background-color:' + ColorPicker.getcolorfromfavorite(clist[i]) + '"> </span></span>');
+ }
+ }
+ },
+ existsfavcolor: function(fcolor) {
+ var fcolors = $('#favcolors').val();
+ var clist=fcolors.split(separate);
+ for(var i=0; i < clist.length; i++) {
+ if (clist[i] == fcolor)
+ {
+ return i;
+ }
+ }
+ return -1;
+ },
+ setpaneldimension: function(){
+ var fcolors = $('#favcolors').val();
+ var clist=fcolors.split(separate);
+ },
+ addfavourites: function() {
+ var fcolors = $('#favcolors').val();
+
+ if (curfavcolor != '') {
+ var clist=fcolors.split(separate);
+ var index = ColorPicker.existsfavcolor(curfavcolor);
+ if(index != 0 && index == clist.length - 1)
+ {
+ fcolors = fcolors.replace(separate + curfavcolor, '');
+ }else if(clist.length == 1) {
+ fcolors = fcolors.replace(curfavcolor, '');
+ }else{
+ fcolors = fcolors.replace(curfavcolor+ separate, '');
+ }
+ $('#' + curfavcolorId).remove();
+ addfav.html('Add to Favorites');
+ curfavcolor = "";
+ curfavcolorId = "";
+ $('#favnone').attr('checked','checked');
+ if (fcolors == '')
+ {
+ favpanel.hide();
+ favshow = false;
+ openfav.attr('class','defaulttrans');
+ }
+ }else {
+ if (ColorPicker.existsfavcolor(namespace.val()) == -1)
+ {
+ if (fcolors.length > 0) {
+ fcolors = fcolors + separate + namespace.val();
+ }else {
+ fcolors = namespace.val();
+ }
+ var colname = namespace.val();
+ var clist=fcolors.split(separate);
+ var id = clist.length - 1;
+ $('#favmsg').remove();
+ favpanel.append('<span class="favcolor" id="favcol' + id + '" ><input name="favcolor" type="radio" onclick="selectfavColor(\'' + namespace.val()
+ + '\',\'favcol' + id +'\');"><label>' + colname + '</label><span class="favcolorbox" style="background-color:' + ColorPicker.getcolorfromfavorite(namespace.val()) + '"> </span></span>');
+ }
+ }
+ $('#favcolors').val(fcolors);
+ ColorPicker.setpaneldimension();
+ },
+ openfavourites: function() {
+ if (favshow) {
+ favpanel.hide();
+ openfav.attr('class','defaulttrans');
+ favshow = false;
+ $('#favmsg').remove();
+ bscroll = false;
+ }else {
+ favpanel.show();
+ openfav.addClass('hovertrans');
+ favshow = true;
+ var fcolors = $('#favcolors').val();
+ if(fcolors == '') {
+ favpanel.append('<span class="favmsg" id="favmsg">No favourite colors.</span>');
+ }
+ bscroll = true;
+ ColorPicker.setpaneldimension();
+ }
+ addfav.html('Add to Favorites');
+ curfavcolor = "";
+ curfavcolorId = "";
+ $('.favcolor input[type=radio]').attr('checked',false);
+ },
+ loadColorStorage: function() {
+ var opts = $('#opt_hexswitch').val();
+ names = false;
+ rgbs = false;
+ hexes = false;
+ if(opts == 'names') {
+ selectedname = namespace.val();
+ selectedrgb = hextorgb[nametohex[selectedname]];
+ hexswitch.html('CLICK TO SWITCH TO RGB VALUES');
+ rgbs = true;
+ }else if(opts == 'rgbs') {
+ selectedname = rgbtoname[namespace.val()];
+ selectedrgb = namespace.val();
+ hexes = true;
+ hexswitch.html('CLICK TO SWITCH TO HEX VALUES')
+ }else if(opts == 'hexes') {
+ names = true;
+ selectedrgb = hextorgb[namespace.val()];
+ selectedname = rgbtoname[selectedrgb];
+ hexswitch.html('CLICK TO SWITCH TO COLOR NAMES');
+ }
+ colornames.html(selectedname);
+ preview.css({'background-color':selectedrgb,'border-style':'none'});
+ vasebackground.css('background-color',selectedrgb);
+ infostate = parseInt($('#opt_infoswitch').val());
+ ColorPicker.switchcolorinfo();
+ var bgOpt = $('#opt_bgColor').val();
+ if (bgOpt == "bg1")
+ {
+ $('#colorpicker').css({'background-image':'url("./images/bg.dither.gif")','background-color':'gray','background-color':'black'});
+ }else if(bgOpt == "bg5"){
+ $('#colorpicker').css({'background-image':"url('" + $('#opt_bgURI').val() + "')"});
+ }else{
+ $('#colorpicker').css({'background-image':'none','background-color':$('#' + bgOpt).html()});
+ }
+ $('#bgURI').val($('#opt_bgURI').val());
+ ColorPicker.initfavpanel();
+ },
+ switchhovercss: function(sel, uno) {
+ var chng = {};
+ chng['color'] = 'white';
+ chng['text-shadow'] = 'black 1px 2px';
+ chng['background-image'] = "url('./images/hoverbackground.jpg')";
+ if(uno == 'over') {
+ for(var key in chng) {
+ old[key] = $('#'+sel).css(key);
+ }
+ for(var key in chng){
+ $('#'+sel).css(key, chng[key]);
+ }
+ }else if(uno == 'out') {
+ for(var key in old){
+ $('#'+sel).css(key, old[key]);
+ }
+ }
+ },
+ showcolorname: function(divstr) {
+ var rgb = $('#'+divstr).css('background-color');
+ var colorname = divtoname['#'+divstr];
+ var imname = colorname;
+ if (hexes === true) {
+ imname = rgb;
+ }else if(rgbs === true) {
+ imname = colorname;
+ }else if (names === true) {
+ imname = rgbtohex[rgb];
+ }
+ return imname;
+ },
+ hexcolorswitch: function() {
+ if(names == true) {
+ hexes = false;
+ rgbs = false;
+ hexswitch.html('CLICK TO SWITCH TO RGB VALUES');
+ namespace.val(selectedname);
+ names = false;
+ rgbs = true;
+ $('#opt_hexswitch').val('names');
+ }else if(hexes == true) {
+ rgbs = false;
+ names = false;
+ hexswitch.html('CLICK TO SWITCH TO COLOR NAMES');
+ namespace.val(rgbtohex[selectedrgb]);
+ hexes = false;
+ names = true;
+ $('#opt_hexswitch').val('hexes');
+ }else if(rgbs == true) {
+ names = false;
+ hexes = false;
+ hexswitch.html('CLICK TO SWITCH TO HEX VALUES')
+ namespace.val(selectedrgb)
+ rgbs = false;
+ hexes = true;
+ $('#opt_hexswitch').val('rgbs');
+ }
+ },
+ putitin: function() {
+ if (rgbs === true) { thecolor = selectedname; }
+ if (hexes === true) { thecolor = selectedrgb; }
+ if (names === true) { thecolor = rgbtohex[selectedrgb]; }
+ namespace.val(thecolor);
+ preview.css({'background-color':selectedrgb,'border-style':'none'});
+ vasebackground.css('background-color',selectedrgb);
+ },
+ getcontainerwidth: function () {
+ basis = $('.colors').css('width');
+ basis = parseInt(basis.slice(0,-2));
+ secondbasis = '2px';
+ secondbasis = parseInt(secondbasis.slice(0,-2));
+ widthval = (secondbasis*(numberacross*2))+(basis*numberacross)+(basis*.44);//(goldenize(basis)-basis)
+ if (widthval < 406){
+ widthval = 406;
+ }
+ widthval = widthval.toString()+'px';
+ return widthval;
+ },
+ shrinkwidth: function(arg, ratio) {
+ for(var i=0; i < ratio; i++) {
+ arg = ColorPicker.GoldenFuncs.regolden(arg);
+ }
+ division = Math.round(arg);
+ return division;
+ },
+ setupfonts: function () {
+ fontratioone = ColorPicker.shrinkwidth(windowWidth, 9);
+ $('.theswitches').css('font-size',fontratioone);
+ fontratiotwo = ColorPicker.shrinkwidth(windowWidth, 8);
+ $('.subtitle').css('font-size',fontratiotwo);
+ colornames.css('font-size', ColorPicker.GoldenFuncs.goldenize(fontratiotwo)+'px');
+ colornames.css('text-shadow', 'black 1px 2px');
+ var transfont = ColorPicker.GoldenFuncs.regolden(fontratioone);
+ $('.smalltitle').css({'width':'100%','font-size':fontratioone});
+ },
+ setupsides: function() {
+ container.css({'position':'relative','z-index':'1'});
+ switches.css('z-index','10');
+ var basis = container.css('width');
+ basis = parseInt(basis.slice(0,-2));
+ remainder = (100-basis)/2;
+ widths = ColorPicker.GoldenFuncs.regolden(basis);
+ widths = widths.toString()+'px';
+ lateralbasis = ColorPicker.GoldenFuncs.regolden(remainder);
+ leftside = toString(lateralbasis)+'%';
+ rightside = toString(100-lateralbasis)+'%';
+ colornames.css('left', leftside);
+ switches.css({'width': widths, 'left': rightside});
+ },
+ previewdimensions: function() {
+ first = switches.css('width');
+ first = parseInt(first.slice(0,-2));
+ width = ColorPicker.GoldenFuncs.regolden(first);
+ height = ColorPicker.GoldenFuncs.regolden(width);
+ width = width.toString()+'px';
+ height = height.toString()+'px';
+ preview.css({'width':width, 'height':height});
+ },
+ setupdimensions: function() {
+ if(window.innerWidth > 933) {
+ windowWidth = window.innerWidth
+ }else{ windowWidth = 933 }
+ colorswidth = ColorPicker.shrinkwidth(windowWidth, widthratio);
+ $('.colors').css('width', colorswidth.toString()+'px');
+ colorsheight = ColorPicker.GoldenFuncs.regolden(colorswidth);
+ propval = colorsheight.toString()+'px';
+ $('.colors').css('height', propval);
+ var containerwidth = ColorPicker.getcontainerwidth();
+ container.css('width',containerwidth);
+
+ ColorPicker.setupfonts();
+ ColorPicker.setupsides();
+ ColorPicker.GoldenFuncs.makegolden('#' + switches.attr('id'),'width');
+ ColorPicker.previewdimensions();
+ transparent.css({'float':'bottom','width':'inherit'});
+ orgheight = switches.height();
+ },
+ switchcolorinfo: function() {
+ if(infostate == 1) {
+ for(var i=0; i < color_values.length; i++) {
+ $('#d' + i).html(divtoname['#d' + i]);
+ }
+ infostate = 2;
+ infospace.html('(NAMES)');
+ $('#opt_infoswitch').val('1');
+ }else if(infostate == 0) {
+ $('.colors').html("");
+ infostate = 1;
+ infospace.html('(NONE)');
+ $('#opt_infoswitch').val('0');
+ }else if(infostate == 2) {
+ for(var i=0; i < color_values.length; i++) {
+ $('#d' + i).html(nametohex[divtoname['#d' + i]]);
+ }
+ infostate = 3;
+ infospace.html('(HEXES)');
+ $('#opt_infoswitch').val('2');
+ }else if(infostate == 3) {
+ for(var i=0; i < color_values.length; i++) {
+ $('#d' + i).html(hextorgb[nametohex[divtoname['#d' + i]]]);
+ }
+ infostate = 0;
+ infospace.html('(RGBS)');
+ $('#opt_infoswitch').val('3');
+ }
+ },
+ show: function() {
+ //-------create color panel--------
+ for (i=1; i < color_values.length ; i++)
+ {
+ $('#d0').attr('style','background-color:' + color_values[0]);
+ var colorbox = $('#d0').clone();
+ colorbox.attr('id','d' + i);
+ colorbox.attr('style','background-color:' + color_values[i]);
+ container.append(colorbox);
+ }
+ //--------initialize------------
+ ColorPicker.setupdimensions();
+ ColorPicker.switchcolorinfo();
+ ColorPicker.hexcolorswitch();
+ ColorPicker.Events.addEventListener();
+ },
+}
|