laurence

3 files changed, 72 insertions, 35 deletions

diff --git a/colors.htm b/colors.htm
index 986e36e..d08ca09 100644
--- a/colors.htm
+++ b/colors.htm
@@ -49,7 +49,7 @@
 				<div id="favpanel" style="display:none;">
 					<input type="hidden" name="favcolors" id="favcolors" />
 					<label class="paneltitle">FAVORITES</label>
-					<span class="favcolor" style="display:none;"><input name="favcolor" type="radio" id="favnone" onclick="selectfavColor('');"><label>&nbsp;</label><span class="favcolorbox">&nbsp;</span></span>
+					<span class="favcolor-none"><input name="favcolor" type="radio" id="favnone" onclick="selectfavColor('');"><label>&nbsp;</label><span class="favcolorbox">&nbsp;</span></span>
 				</div>
 				<div class="clear"></div>
 			</form>
diff --git a/css/style.css b/css/style.css
index 9e4554b..b0e00e0 100644
--- a/css/style.css
+++ b/css/style.css
@@ -230,6 +230,12 @@ label {
 	width:inherit;
 	display: block;
 }
+.favcolor-none {
+	margin-right:3px;
+	margin-left:10px;
+	width:inherit;
+	display: none;
+}
 .clear {
 	clear:both;
 }
diff --git a/js/colorpicker.js b/js/colorpicker.js
index 62ec343..62870fb 100644
--- a/js/colorpicker.js
+++ b/js/colorpicker.js
@@ -187,7 +187,7 @@ var ColorPicker = {
 			});

 			addfav.click(function(){ColorPicker.addfavourites()});

 			openfav.click(function(){ColorPicker.openfavourites()});

-			hexswitch.click(function(){ColorPicker.hexcolorswitch()});

+			hexswitch.click(function(){ColorPicker.hexcolorswitch(); ColorPicker.resetfavcolor();});

 			$('.theswitches').hover(function(){ ColorPicker.switchhovercss(this.id, 'over') }, 

 									function(){ ColorPicker.switchhovercss(this.id, 'out') });

 			//-------handler for window resive----

@@ -211,16 +211,39 @@ var ColorPicker = {
 		}

 		return retcolor;

 	},

-	initfavpanel: function(){

+	resetfavcolor: function(){

+		$('.favcolor').each(function(index){

+			var favcol = $(this).find('label').html();

+			var rgbcol = ColorPicker.getcolorfromfavorite(favcol);

+			var colname = "";

+			if (hexes === true) {

+				colname = rgbcol;

+			}else if(rgbs === true) {

+				colname = rgbtoname[rgbcol];

+			}else if (names === true) {

+				colname = rgbtohex[rgbcol];

+			}

+			$(this).find('label').html(colname);

+		});

+	},

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

+				var col = ColorPicker.getcolorfromfavorite(clist[i]);

+				var colname = "";

+				if (hexes === true) {

+					colname = col;

+				}else if(rgbs === true) {

+					colname = rgbtoname[col];

+				}else if (names === true) {

+					colname = rgbtohex[col];

+				}

 				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) {

@@ -306,6 +329,7 @@ var ColorPicker = {
 			}

 			bscroll = true;

 			ColorPicker.setpaneldimension();

+			ColorPicker.resetfavcolor();

 		}

 		addfav.html('Add to Favorites');

 		curfavcolor = "";

@@ -314,39 +338,48 @@ var ColorPicker = {
 	},

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

+		if (opts != '')

+		{

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

+		

+		var bgOpt = $('#opt_bgColor').val();

+		if (bgOpt != '')

 		{

-			$('#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()});

-		}

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

 	},

@@ -384,7 +417,6 @@ var ColorPicker = {
 	hexcolorswitch: function() {

 		if(names == true) {

 			hexes = false;

-			rgbs = false;

 			hexswitch.html('CLICK TO SWITCH TO RGB VALUES');

 			namespace.val(selectedname);

 			names = false;

@@ -392,7 +424,6 @@ var ColorPicker = {
 			$('#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;

@@ -400,15 +431,15 @@ var ColorPicker = {
 			$('#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() {

+		var thecolor = '';

 		if (rgbs === true) { thecolor = selectedname; }

 		if (hexes === true) { thecolor = selectedrgb; }

 		if (names === true) { thecolor = rgbtohex[selectedrgb]; }