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]) + '">&nbsp;</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()) + '">&nbsp;</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();
	},
}