first commit

1 files changed, 308 insertions, 0 deletions

diff --git a/js/colorpicker.js b/js/colorpicker.js
new file mode 100644
index 0000000..9e2bfd6
--- /dev/null
+++ b/js/colorpicker.js
@@ -0,0 +1,308 @@
+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 selectedname = "";

+var selectedrgb;

+//---------element objects----------

+var transbutton = $('#transbutton');

+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');

+//----------------------------------

+$(function(){

+	ColorPicker.show();

+});

+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);

+		  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')});

+			//--------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");

+          })

+        }

+      });

+//			backgroundswitch.hover(function(){}, function(){bg_menu.hide();});

+			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();

+			});

+		}

+	},

+	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;

+		}else if(hexes == true) {

+			rgbs = false;

+			names = false;

+			hexswitch.html('CLICK TO SWITCH TO COLOR NAMES');

+			namespace.val(rgbtohex[selectedrgb]);

+			hexes = false;

+			names = true;

+        }else if(rgbs == true) {

+			names = false;

+			hexes = false;

+			hexswitch.html('CLICK TO SWITCH TO HEX VALUES')

+			namespace.val(selectedrgb)

+			rgbs = false;

+			hexes = true;

+		}

+    },

+	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':transfont});

+	},

+	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, 'overflow':'hidden','top':'118px'});

+    },

+	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'});

+	},

+	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)');

+		}else if(infostate == 0) {

+			$('.colors').html("");			

+			infostate = 1;

+			infospace.html('(NONE)');

+		}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)');

+		}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)');

+		}		

+	},

+	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();

+	},

+}