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();
	},
}