favorite panel

4 files changed, 149 insertions, 11 deletions

diff --git a/colors.htm b/colors.htm
index bdb1295..f302e1e 100644
--- a/colors.htm
+++ b/colors.htm
@@ -35,14 +35,23 @@
 				<br />
 				<div id="preview" style="width: 206px; height: 127px; background-color: rgb(171, 171, 171); border-style: none;"></div>
 				<div class="subtitle">YOU WILL CHOOSE:<br />				
-					<input type="text" id="namespace" name="namespace" class="subtitle" />							
-					<span id="submitvalue" class="defaulttrans">SUBMIT</span></span>			
+					<input type="text" id="namespace" name="namespace" class="subtitle" />
+					<span id="submitvalue" class="defaulttrans">SUBMIT</span>
+					<span id="addfavlist" class="defaulttrans">Add to Favorites</span>
+					<span id="openfavlist" class="defaulttrans">Open Favorties</span>
 				</div>
 				<br />
 				<span id="transparent">to choose transparent as a color, click 
 					<span id="transbutton" class="defaulttrans">HERE</span><span id="extra" class="smalltitle"></span>
 				</span>
 				<span id="noticeDlg"></span>
+				<br /><br />
+				<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>	
+				</div>
+				<div class="clear"></div>
 			</form>
 		</div>		
 		<div id="vasebackground"></div>
diff --git a/css/style.css b/css/style.css
index 7b944cb..6c57ec6 100644
--- a/css/style.css
+++ b/css/style.css
@@ -53,7 +53,7 @@ color: black;
 #preview {
 	height:150px;
 }
-#transparent,#submitvalue {
+#transparent,#submitvalue,#addfavlist,#openfavlist {
 	font-size:12px;
 }
 #namespace {
@@ -205,4 +205,37 @@ label {
 }
 #noticeDlg {
 	display:none;
+}
+#favpanel{
+	width:inherit;
+}
+#favpanel .paneltitle{
+	color:black;
+	font-size: 16px;
+	text-align:center;
+	width:inherit;
+	display:block;
+}
+.favcolor label{
+	font-size: 12px;
+	text-align:center;	
+	padding:0;
+	width:50px;
+	margin:0;	
+	color:black;
+}
+.favcolor {
+	float:left;
+	width:47%;
+	margin-right:3px;
+}
+.clear {
+	clear:both;
+}
+.favmsg {
+	font-size: 13px;
+	color:red;
+	width:inherit;
+	text-align:center;
+	display:block;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 3141b24..357bb39 100644
--- a/index.html
+++ b/index.html
@@ -66,7 +66,7 @@
 			$.fancybox.open({
 				href : 'colors.htm',
 				width  : 700,           // set the width
-				height : 560,
+				height : 620,
 				fitToView : true,
 				autoDimensions:false,
 				autoSize:false,
diff --git a/js/colorpicker.js b/js/colorpicker.js
index 574349f..bce6593 100644
--- a/js/colorpicker.js
+++ b/js/colorpicker.js
@@ -8,11 +8,16 @@ var infostate = 0;
 var names = true;

 var hexes = false;

 var rgbs = false;

+var favshow = false;

 var selectedname = "";

 var selectedrgb;

+var curfavcolor = "";

+var curfavcolorId = "";

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

 var transbutton = $('#transbutton');

 var submitvalue = $('#submitvalue');

+var addfav = $('#addfavlist');

+var openfav = $('#openfavlist');

 var preview = $('#preview');

 var colornames = $('#colornames');

 var namespace = $('#namespace');

@@ -26,10 +31,17 @@ var backgroundswitch = $('#backgroundswitch');
 var bg_menu = $('#bg_menu');

 var vasebackground = $('#vasebackground');

 var hexswitch = $('#hexswitch');

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

 //----------------------------------

 $(function(){

 	ColorPicker.show();

 });

+function selectfavColor(selcolor, id)

+{	

+	addfav.html('Remove from Favorites');

+	curfavcolor = selcolor;

+	curfavcolorId = id;

+}

 var ColorPicker = {	

 	GoldenFuncs: {

 		regolden: function(num) {

@@ -51,7 +63,7 @@ var ColorPicker = {
 		},

 		makegolden: function(idandselectr, propertystr) {

 		  result = ColorPicker.GoldenFuncs.getproperty(idandselectr, propertystr);

-		  newval = ColorPicker.GoldenFuncs.goldenize(result);

+		  newval = ColorPicker.GoldenFuncs.goldenize(result) + 60;

 		  propval = newval.toString()+'px';

 		  if(propertystr == 'height') {

 			  $(idandselectr).css('width', propval);

@@ -59,7 +71,7 @@ var ColorPicker = {
 			  $(idandselectr).css('height', propval);

 		  }

 		}

-	},	

+	},

 	Events: {		

 		addEventListener: function(){

 			//--------event handler of transparent button-------

@@ -75,9 +87,8 @@ var ColorPicker = {
 							  function(){ transbutton.attr('class','defaulttrans')});

 			submitvalue.hover(function(){ submitvalue.addClass('hovertrans')},

 							  function(){ submitvalue.attr('class','defaulttrans')});

-			submitvalue.click(function() {			

-				

-			});

+			addfav.hover(function(){ addfav.addClass('hovertrans')},

+							  function(){ addfav.attr('class','defaulttrans')});					

 			$('.bgOptions').click(function(){

 				if (this.id == "bg1")

 				{

@@ -143,7 +154,8 @@ var ColorPicker = {
 				  })

 				}

 			});

-

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

@@ -154,6 +166,90 @@ var ColorPicker = {
 			});

 		}

 	},

+	initfavpanel: function(){

+		var fcolors = $('#favcolors').val();

+		var clist=fcolors.split(',');

+		for(var i=0; i < clist.length; i++) {

+			if (clist[i] != '')

+			{

+				var colname = rgbtoname[hextorgb[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>');				

+			}			

+		}

+	},

+	existsfavcolor: function(fcolor) {

+		var fcolors = $('#favcolors').val();

+		var clist=fcolors.split(',');

+		for(var i=0; i < clist.length; i++) {

+			if (clist[i] == fcolor)

+			{

+				return i;

+			}

+		}

+		return -1;

+	},

+	addfavourites: function() {

+		var fcolors = $('#favcolors').val();

+		

+		if (curfavcolor != '') {

+			var clist=fcolors.split(',');

+			var index = ColorPicker.existsfavcolor(curfavcolor);

+			if(index != 0 && index == clist.length - 1)

+			{

+				fcolors = fcolors.replace(',' + curfavcolor, '');

+			}else if(clist.length == 1) {

+				fcolors = fcolors.replace(curfavcolor, '');

+			}else{

+				fcolors = fcolors.replace(curfavcolor+ ',', '');

+			}

+			$('#' + 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(rgbtohex[selectedrgb]) == -1)

+			{				

+				if (fcolors.length > 0) {

+					fcolors = fcolors + ',' + rgbtohex[selectedrgb];

+				}else {

+					fcolors = rgbtohex[selectedrgb];

+				}				

+				var colname = rgbtoname[selectedrgb];

+				var clist=fcolors.split(',');

+				var id = clist.length - 1;

+				$('#favmsg').remove();

+				favpanel.append('<span class="favcolor" id="favcol' + id + '" ><input name="favcolor" type="radio" onclick="selectfavColor(\'' + rgbtohex[selectedrgb] + '\',\'favcol' + id +'\');"><label>' + colname +  '</label></span>');

+			}	

+		}

+		$('#favcolors').val(fcolors);		

+	},

+	openfavourites: function() {

+		if (favshow) {

+			favpanel.hide();

+			openfav.attr('class','defaulttrans');

+			favshow = false;

+			$('#favmsg').remove();

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

+			}

+		}

+		addfav.html('Add to Favorites');

+		curfavcolor = "";

+		curfavcolorId = "";

+		$('#favnone').attr('checked','checked');

+	},

 	loadColorStorage: function() {

 		var opts = $('#opt_hexswitch').val();

 		names = false;

@@ -190,6 +286,7 @@ var ColorPicker = {
 			$('#colorpicker').css({'background-image':'none','background-color':$('#' + bgOpt).html()});

 		}

 		$('#bgURI').val($('#opt_bgURI').val());

+		ColorPicker.initfavpanel();

 	},

 	switchhovercss: function(sel, uno) {

 		var chng = {};

@@ -370,7 +467,6 @@ var ColorPicker = {
 		ColorPicker.setupdimensions();

 		ColorPicker.switchcolorinfo();

 		ColorPicker.hexcolorswitch();

-		

 		ColorPicker.Events.addEventListener();

 	},

 }