/*
	This JS Application makes use of the YUI JavaScript library. Some of the common DOM methods
	such as document.getElementsById is replaced by YUI's YAHOO.util.Dom.get
*/

/// YUI Classes initialization (for optimization purposes)
var Dom = YAHOO.util.Dom;
var Event = YAHOO.util.Event;
var Connect = YAHOO.util.Connect;
var UA = YAHOO.env.ua;

/// Image rollover functions
function MM_swapImgRestore() { //v3.0
	var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
	var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
	var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
	if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
	var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
		d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
	if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
	for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
	if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
	var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
	if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}


/// Essential classes for the application

/*
	String selector	: CSS property selector
	String id				: id of target style tag
*/
function StyleObject(selector,id) {
	// Private array for saving CSS styles
	this.properties = new Array();
	// Some other parameters
	this.selector = selector;
	this.id = id;
	
	// Public function for setting a property
	this.setProperty = function(key, value) {
		this.properties[key] = value;
	};
	
	// Public function for getting a property
	this.getProperty = function(key) {
		return this.properties[key];
	};
	
	// Public function for getting properties under a certain style type
	this.getProperties = function() {
		return this.properties;
	};
}

/*
	String id						: id of containing div
	String parent				:	id of wrapper div
	StyleObject target
*/
function Component(id,parent,target) {
	this.element = Dom.get(id);
	this.parent = Dom.get(parent);
	this.target = target;
	this.setParent = function(p) {
		this.parent = Dom.get(p);
	}
	this.setTarget = function(t) {
		this.target = t;
	}
}


/// Application utility functions

// Preloader object
var ajaxLoader = {
	start: function() {
			Dom.get('ajaxLoader').style.display = 'block';
			},
	complete: function() {
			Dom.get('ajaxLoader').style.display = 'none';
			}
}

// Function that returns an event's source element 
function toElem(e) {
	var e = e || window.event;
	var op = e.target || e.srcElement;
	return op;
}


///  Functions initially written in index

// Function for moving a UI component from a parent node to another
function movEl(id,cmp,tg) {
	var el = Dom.get(id);
	if (el != ui[cmp].parent) {
		var ch = Dom.getChildrenBy(ui[cmp].parent,
			function(n) {
				if (n.tagName == 'DIV') return true;
			}
		);
		if (typeof ch[0] != 'undefined') el.appendChild(ch[0]);
		ui[cmp].setParent(id);
		ui[cmp].setTarget(so[tg]);
	}
}

// Get the style tags from the preview iframe
function getStyles(id) {
	var iframe = window.frames['preview'];
	var idoc = iframe.document;
	// If browser is IE, use .styleSheets property. Else, get STYLE elements
	var styles = (UA.ie > 0) ? idoc.styleSheets : idoc.getElementsByTagName('style');
	if (typeof id != 'undefined') {
		for (var i=0; i<styles.length; i++) {
			if (styles[i].id == id) return styles[i];
		}
	}
	return styles;
}

// Function which parses a StyleObject instance's properties array
function parseStyle(so) {
	var props = so.getProperties();
	var str = '\n'+so.selector+'{\n';
	for (c in props) {
		str += c + ':' + props[c] + ';\n';
	}
	str = str+'}\n';
	return str;
}

/*
	Function for attaching the modifications to a style tag
 	StyleElement st
 	String txt
*/
function addStyle(st,txt) {
	try {
		var pn = st.parentNode;
		var nn = document.createElement('style');
		nn.id = st.id;
		nn.type = 'text/css';
		nn.appendChild(document.createTextNode(txt));
		pn.replaceChild(nn,st);
	} catch(e) {
		st.cssText = txt;
	}
}

// Function for updating the preview
function updatePreview(so) {
	var styles = getStyles();
	// Evaluate STYLE elements and perform the respective property modification
	for (var i=0; i<styles.length; i++) {
		if (styles[i].id == so.id) {
			addStyle(styles[i],parseStyle(so));
			break;
		}
	}
}

/*
	String cmp	:	Component object array index
	String key	: style property key
	Mixed value	: value to be set to the style property
*/
function updateObject(cmp,key,value)  {
	ui[cmp].target.setProperty(key,value);
	// Pass the Component's target as a parameter
	updatePreview(ui[cmp].target);
}

function resetSels(sels) {
    for (var i = 0; i < sels.length; i++) {
        sels[i].options[0].selected = true;
        for (var j = 1; j < sels[i].options.length; j++) {
            sels[i].options[j].selected = false;
        }
    }
}

function resetBtns(el) {
    var ibtn = Dom.getElementsByClassName('down', 'IMG', el);
    for (var i = 0; i < ibtn.length; i++) {
        ibtn[i].className = 'up';
    }
}

function resetTwks() {
    var twks = Dom.get('tweakOption').getElementsByTagName('INPUT');
    for (var i = 0; i < twks.length - 1; i++) {
        twks[i].checked = false;
    }
    document.forms['transp'].style.visibility = 'hidden';
    var hide = Dom.get('hideOption');
    var hins = hide.getElementsByTagName('INPUT');
    for (var i = 0; i < hins.length; i++) {
        hins[i].checked = false;
    }
}

function resetControls() {
    resetBtns('slidingPanels');
    var sels = document.getElementsByTagName('SELECT');
    resetSels(sels);
    imageTool.set('activeIndex', 0);
    imgSearch.set('activeIndex', 0);
    boxTabs.set('activeIndex', 0);
    fontTabs.set('activeIndex', 0);
}

// Function for clearing the styles in the profile
function startOver() {
	var styles = getStyles();
	for (var i=0; i<styles.length; i++) {
		if ((styles[i].id != '') && (styles[i].id != 'initStyles')) {
			try {
				var ch = styles[i].childNodes || styles[i].children;
				for (var j=0; j<ch.length; j++) {
					styles[i].removeChild(ch[j]);
				}
			} catch(e) {
				styles[i].cssText = '';
			}
		}
	}
	for (i in so) {
		so[i].properties = new Array();
	}
	resetControls();
	return false;
}

// Function for getting the code
function getCode() {
	var styles = getStyles();
	var code = '';
	for (var i=0; i<styles.length; i++) {
		if ((styles[i].id != '') && (styles[i].innerHTML != '')) {
			if (UA.ie > 0) {
				code += styles[i].cssText;
			} else {
				code += styles[i].innerHTML;
			}
		}
	}
	var req = 'profile-editor/getthecode';
  var callback = {
    success: function(o) {
        Dom.get('gigyaDiv').innerHTML = o.responseText;
        Dom.get('showCode').style.display = 'block';
        var pconf={
				  contentIsLayout: 'true', 
				  defaultContent: 'codebox', 
				  UIConfig: '<config><display showEmail="true" showBookmark="true" networksWithCodeBox="*" networksToShow="myspace" /><body><background gradient-color-begin="#0D7CC0" gradient-color-end="#DBF1FF" frame-color="Transparent" corner-roundness="0" /><controls font="Verdana"><textboxes><codeboxes corner-roundness="0" /></textboxes><buttons gradient-color-begin="#000000" gradient-color-end="#000000" color="#FFFFFF" font="Verdana" /><snbuttons font="Verdana" over-gradient-color-begin="#FEF0B9" over-gradient-color-end="#FFCC00" over-font="Verdana" /></controls><texts font="Verdana"><headers color="#FFFFFF" /><links color="#DBF1FF" /></texts></body></config>', CID: 'profile-editor'
				};
        Wildfire.initPost('166071', 'divWildfirePost', 550, 300, pconf);
      }, 
    failure: function(o) {
        alert("AJAX request failed."); //FAILURE
      },
    customevents:{ 
				onStart:ajaxLoader.start, 
				onComplete:ajaxLoader.complete
			}
  }
	var transaction = Connect.asyncRequest('POST', req, callback, 'code='+code);
	return false;
}

// Function for closing the get the code div
function closeCode() {
	Dom.get('showCode').style.display = 'none';
	return false;
}


/// Edit BG functions

// imageSearch tool functions

// AJAX function for retrieving imagesearch results
function s(form) {
	var kword = (form['keyword'].value != '') ? form['keyword'].value : 'abstract';
	var req = form.action+encodeURIComponent(kword)+'/1';
  var callback = {
    success: function(o) {
        Dom.get(form.className).innerHTML =  o.responseText;
      }, 
    failure: function(o) {
        alert("AJAX request failed."); //FAILURE
      },
    customevents:{ 
				onStart:ajaxLoader.start, 
				onComplete:ajaxLoader.complete
			}
  } 
	var transaction = Connect.asyncRequest('GET', req, callback, null);
	return false;
}

// Function for navigating across page results
function gotoPage(a) {
  var callback = { 
    success: function(o) {
        a.parentNode.innerHTML =  o.responseText;
      }, 
    failure: function(o) {
        alert("AJAX request failed."); //FAILURE
      },
    customevents:{ 
				onStart:ajaxLoader.start, 
				onComplete:ajaxLoader.complete
			}
  } 
	var transaction = Connect.asyncRequest('GET', a.href, callback, null);
	return false;
}

// Function for setting background-image
function bgImg(el) {
	Event.addListener(el, 'click',
		function(e) {
			Event.stopEvent(e);
			var e = e || window.event;
			var a = e.target || e.srcElement ;
			if ((a.parentNode.tagName == 'LI') && (a.tagName == 'A')) {
				updateObject('imageTool', 'background-image', 'url(' + a + ')');
			}
		}
	);
}

// Function for setting background-image from a supplied URL
function imgUrl(form) {
	updateObject('imageTool', 'background-image', 'url('+form['url'].value+')');
	return false;
}

// Function for setting background-image stolen from a MySpace profile
function imgID(form) {
  var callback = { 
    success: function(o) {
				updateObject('imageTool', 'background-image', 'url('+o.responseText+')');
      }, 
    failure: function(o) {
        alert("AJAX request failed."); //FAILURE
      },
    customevents:{ 
				onStart:ajaxLoader.start, 
				onComplete:ajaxLoader.complete
			}
  }
	var transaction = Connect.asyncRequest('GET', form.action+form['id'].value, callback, null);
	return false;
}

// Function for profile stealing
function pSteal(form) {
  var callback = { 
    success: function(o) {
    		// Clear all styles first
				startOver();
				var st = getStyles('grabbed');
				addStyle(st,o.responseText);
			}, 
    failure: function(o) {
        alert("AJAX request failed."); //FAILURE
      },
    customevents:{ 
				onStart:ajaxLoader.start, 
				onComplete:ajaxLoader.complete
    	}
  } 
	var transaction = Connect.asyncRequest('GET', form.action+form['id'].value, callback, null);
	return false;
}

// imageOption tool functions

// Function for getting the selected background-position icon and other properties
function getSelected() {
	// set the classname of the selected background-position to down
	var imgs = ui['imageOption'].parent.getElementsByTagName('img');
	var bp = ui['imageOption'].target.getProperty('background-position');
	for (var i=0; i<imgs.length; i++) {
		imgs[i].className = (imgs[i].name == bp) ? 'down' : 'up';
	}
	// set the correct selected OPTION in the SELECT elements
	var sels = ui['imageOption'].parent.getElementsByTagName('select');
	for (var i=0; i<sels.length; i++) {
		if (sels[i].parentNode.id == 'imgRepeat') var prop =  'background-repeat';
		if (sels[i].parentNode.id == 'imgMove') var prop = 'background-attachment';
		var val = ui['imageOption'].target.getProperty(prop);
		for (var j=0; j<sels[i].options.length; j++) {
			sels[i].options[j].selected = (sels[i].options[j].value == val) ? 'selected' : '';
		}
	}
}

// Function for setting background-position
function imgPos(el) {
	Event.addListener(el, 'click',
		function(e) {
			var e = e || window.event;
			var img = e.target || e.srcElement;
			if (img.tagName == 'IMG') {
				// Clear styles and deselect all buttons first
				var imgs = img.parentNode.childNodes;
				for (var i=0; i<imgs.length; i++) {
					if (imgs[i].tagName == 'IMG') {
						imgs[i].className = 'up'
					}
				}
				updateObject('imageOption', 'background-position', img.name);
				img.className = 'down';
			}
		}
	);
}

// Function for setting background-repeat
function imgRep(el) {
	Event.addListener(el, 'click',
		function(e) {
			var op = toElem(e);
			if (typeof op.value != 'undefined') {
				updateObject('imageOption', 'background-repeat', op.value);
			}
		}
	);
}

// Function for setting background-attachment
function imgMov(el) {
	Event.addListener(el, 'click',
		function(e) {
			var op = toElem(e);
			if (typeof op.value != 'undefined') {
				updateObject('imageOption', 'background-attachment', toElem(e).value);
			}
		}
	);
}

// colorOption tool functions
	
// Function for setting a color property using the color palette
function cPalette(el) {
	var rgb = Dom.get(el);
	Event.addListener(rgb, 'click',
		function(e) {
			Event.preventDefault(e);
			var a = toElem(e).parentNode;
			if (a.className == 'o5582n66') {
				// Get the target property of this tool
				var tget = Dom.get('cTarget').value;
				updateObject('colorOption', tget, a.title);
				Dom.get('o5582n66a').value = a.title;
			}
		}
	);
}

// Function for setting a color property using the color slider
function cUpdate() {
	function HSV_to_RGB(h, s, v) {
		var r, g, b; 
		var RGB = new Array(); 
		if(s==0){ 
			RGB['red']=RGB['green']=RGB['blue']=Math.round(v*255); 
		}else{ 
			// h must be < 1 
			var var_h = h * 6; 
			if (var_h==6) var_h = 0; 
			//Or ... var_i = floor( var_h ) 
			var var_i = Math.floor( var_h ); 
			var var_1 = v*(1-s); 
			var var_2 = v*(1-s*(var_h-var_i)); 
			var var_3 = v*(1-s*(1-(var_h-var_i)));
			switch (var_i) {
				case 0	:
					var_r = v;  
					var_g = var_3;  
					var_b = var_1; 
					break;
				case 1	:
					var_r = var_2; 
					var_g = v;
					var_b = var_1;
					break;
				case 2	:
					var_r = var_1;
					var_g = v;
					var_b = var_3;
					break;
				case 3	:
					var_r = var_1;
					var_g = var_2;
					var_b = v;
					break;
				case 4	:
					var_r = var_3;
					var_g = var_1;
					var_b = v;
					break;
				default	:
					var_r = v;
					var_g = var_1;
					var_b = var_2;
					break;
			}
			//rgb results = 0 ÷ 255   
			RGB['red']=Math.round(var_r * 255); 
			RGB['green']=Math.round(var_g * 255); 
			RGB['blue']=Math.round(var_b * 255); 
			} 
		return RGB;
	}
	function RGB_to_HEX(RGB) {
		function toHex(N) {
			if (N==null) return "00";
			N=parseInt(N); if (N==0 || isNaN(N)) return "00";
			N=Math.max(0,N); N=Math.min(N,255); N=Math.round(N);
			return	"0123456789ABCDEF".charAt((N-N%16)/16)
						+ "0123456789ABCDEF".charAt(N%16);
		}
		var r = toHex(RGB['red']);
		var g = toHex(RGB['green']);
		var b = toHex(RGB['blue']);
		return ('#'+r+g+b);
	}
	var h = ((parseInt(Dom.get('hueBox').value) - 160) * 1.8)/360.00;
	var s = ((parseFloat(Dom.get('saturationBox').value) - 43.5) * 1.7699115044247787610619469026549)/100.00;
	var v = (parseFloat(Dom.get('valueBox').value) * 1.7730496453900709219858156028369)/100.00;
	var hex = RGB_to_HEX(HSV_to_RGB(h, s, v));
	Dom.get('o5582n66').value = hex;
	Dom.get('o5582n66a').style.backgroundColor = hex;
	var tget = Dom.get('cTarget').value;
	updateObject('colorOption', tget, hex);
}

// Function for setting a color property using the color picker
function cPicker(el) {
	if (UA.ie > 0) {
		Dom.get(el).attachEvent('onpropertychange',
			function(e) {
				cUpdate();
			}
		);
	} else {
		Event.addListener(el, 'DOMAttrModified',
			function(e) {
				cUpdate();
			}
		);
	}
}


/// Edit Boxes Functions

// Function for setting border-style
function bStyle(el) {
	Event.addListener(el, 'click',
		function(e) {
			var op = toElem(e);
			if (typeof op.value != 'undefined') {
				updateObject('borderOption', 'border-style', op.value);
			}
		}
	);
}

// Function for setting border-size
function bSize(el) {
	Event.addListener(el, 'click',
		function(e) {
			var op = toElem(e);
			if (typeof op.value != 'undefined') {
				updateObject('borderOption', 'border-width', op.value);
			}
		}
	);
}

// Function for applying tweaks to profile
function bTweak(el) {
	Event.addListener(el, 'click',
		function(e) {
			var op = toElem(e);
			if (op.type == 'checkbox') {
				// if checkbox is for transparency, perform a different action, then return
				if (op.name == 'opaque') {
					var f = Dom.get(el).getElementsByTagName('FORM');
					var tmp = new Object(); tmp.name = 'opacity'; tmp.value = 100;
					f[0].style.visibility = (op.checked) ? 'visible' : 'hidden';
					tmp = (op.checked) ? Dom.get('output1') : tmp;
					setOpacity(tmp);
					return;
				} else {
					// if box is checked, add the tweak to corresponding style tag object, else clear it
					if (op.checked) {
						var txt = '';
						switch(op.name) {
							case 'skinny'	:
								//txt = '\n.extendedNetwork, .text > table, .blurbs td table {\nwidth:300px;\n}\n';
								txt = 'table table, table table table, table table table table, span.blacktext12, .contactTable { width:300px; }';
								break;
							case 'switch'	:
								txt = '\ntable {\ndirection:rtl;\n}\ntable table table {\ndirection:ltr;\n}\n';
								break;
							case 'center'	:
								txt = '\ntable table table table table {\ndirection:rtl;\n}\ntable table table table table td {\ndirection:ltr;\n}\n';
								break;
						}
					}
					addStyle(getStyles(op.name),txt);
				}
			}
		}
	);
}

// Function for setting the opacity properties for different browsers
function setOpacity(op) {
	if (op.name == 'opacity') {
		if (op.value > 100) return;
		updateObject('borderOption', 'opacity', (op.value/100));
		updateObject('borderOption', 'filter', 'progid:DXImageTransform.Microsoft.Alpha(opacity='+op.value+')');
	}
}

// Function for instantiating the slider for setting the opacity of the boxes
function bOpacity(el) {
	if (UA.ie > 0) {
		Dom.get(el).attachEvent('onpropertychange',
			function(e) {
				var op = toElem(e);
				setOpacity(op);
			}
		);
	} else {
		Event.addListener(el, 'DOMAttrModified',
			function(e) {
				var op = toElem(e);
				setOpacity(op);
			}
		);
	}
}

// Function for hiding the different boxes in the profile
function hideBoxes(so) {
	var props = so.getProperties();
	var str = '\n';
	for (c in props) {
		str += c + ' ' + props[c] + '\n';
	}
	return str;
}

// Function for instantiating the group of checkboxes for hiding profile boxes
function bHide(el) {
	Event.addListener(el, 'click',
		function(e) {
			var op = toElem(e);
			if (op.type == 'checkbox') {
				var val = (op.checked) ? '{ display:none; }' : '{}';
				updateObject('hideOption',op.name,val);
				var st = getStyles('hide');
				addStyle(st, hideBoxes(so['hide']));
			}
		}
	);	
}


/// Edit Fonts functions

// Function for instantiating the fontOption tool (capable of multiple instantiations)
function fOption(el,cmp) {
	var handler = (UA.ie > 0) ? 'click' : 'change';
	Event.addListener(el, handler,
		function(e) {
			var op = toElem(e);
			if (typeof op.value != 'undefined') {
				// font-family
				if (op.parentNode.className == 'fFamily') {
					updateObject(cmp, 'font-family', op.value);
				}
				// font-size
				if (op.parentNode.className == 'fSize') {
					updateObject(cmp, 'font-size', op.value);
				}
				// text-transform
				if (op.parentNode.className == 'fCase') {
					updateObject(cmp, 'text-transform', op.value);
				}
				// text-align
				if (op.parentNode.className == 'fAlign') {
					updateObject(cmp, 'text-align', op.value);
				}
			} // end of if statement
		} // end of listener function
	);
	Event.addListener(el, 'click',
		function(e) {
			var op = toElem(e);
			// font-weight and font-style
			if (op.parentNode.className == 'fStyle') {
				if (op.tagName == 'IMG') {
					if (op.className == 'up') {
						var val = op.name;
						op.className = 'down';
					} else {
						var val = 'normal';
						op.className = 'up';
					}
					if (op.name == 'bold') {
						updateObject(cmp, 'font-weight', val);
					}
					if (op.name == 'italic') {
						updateObject(cmp, 'font-style', val);
					}
				}
			}
			// text-decoration
			if (op.parentNode.className == 'fDecor') {
				updateObject(cmp, 'text-decoration', 'none');
				if (op.tagName == 'IMG') {
					if (op.className == 'up') {
						// Clear styles and deselect all buttons first
						var imgs = op.parentNode.childNodes;
						for (var i=0; i<imgs.length; i++) {
							if (imgs[i].tagName == 'IMG') {
								imgs[i].className = 'up'
							}
						}
						updateObject(cmp, 'text-decoration', op.name);
						op.className = 'down';
					} else {
						updateObject(cmp, 'text-decoration', 'none');
						op.className = 'up';
					}
				}
			}
		}
	);
}


/// Edit Ugotbling layout functions

// Function for updating the selection by click a category
function categList(el,target) {
	Event.addListener(el, 'click',
		function(e) {
			Event.preventDefault(e);
			var a = toElem(e);
			if (a.tagName == 'A') {
				var callback = {
					success: function(o) {
							Dom.get(target).innerHTML = o.responseText;
						},
					failure: function(o) {
							alert("AJAX request failed."); //FAILURE
						},
		      customevents:{ 
							onStart:ajaxLoader.start, 
							onComplete:ajaxLoader.complete
						}
				}
				var transaction = Connect.asyncRequest('GET', a.href, callback, null);
				return false;
			}
		}
	);
}

// Function for updating the preview by clicking on an item
function layoutList(el,sid) {
	Event.addListener(el, 'click',
		function(e) {
			Event.preventDefault(e);
			var a = toElem(e);
			if (a.tagName == 'A') {
				var callback = {
					success: function(o) {
							var txt = o.responseText;
							// If a layout item is clicked
							if (a.parentNode.tagName == 'LI') {
								// Clear all styles first
								startOver();
								// Add style to st (style tag with id = 'grabbed')
								var st = getStyles(sid);
								txt = txt.replace(/\<style type\=\"text\/css\"\>/, "");
								txt = txt.replace(/\<\/style\>/, "");
								addStyle(st, txt);
							}
							// If 'next' or 'previous' links were clicked
							if (a.parentNode.tagName == 'SPAN') {
								// Update the list with the next page
								Dom.get(el).innerHTML = txt;
							}
						},
					failure: function(o) {
							alert("AJAX request failed."); //FAILURE
						},
		      customevents:{ 
							onStart:ajaxLoader.start, 
							onComplete:ajaxLoader.complete
						}
				}
				var transaction = Connect.asyncRequest('GET', a.href, callback, null);
				return false;
			}
		}
	);
}


/// Application initialization functions

function initApp() {
	Event.addListener('tab1', 'click',
		function(e) {
			var t = toElem(e).parentNode;
			var g = t.hash.substr(1);
			if (t.id == g+"Open") {
				movEl('bg1','imageTool','body');
				movEl('bg2','imageOption','body');
				movEl('bg3','colorOption','body');
				getSelected(); // set the selected values to the corresponding UI components
				// set the target CSS property to the hidden input field cTarget
				Dom.get('cTarget').value = 'background-color';
			}
		}
	);

	Event.addListener('tab2', 'click',
		function(e) {
			var t = toElem(e).parentNode;
			var g = t.hash.substr(1);
			if (t.id == g+"Open") {
				movEl('box1','imageTool','boxes');
				movEl('box2','imageOption','boxes');
				getSelected(); // set the selected values to the corresponding UI components
				if (Dom.get('boxBg').parentNode.className == 'selected') {
					// set the target CSS property to the hidden input field cTarget
					Dom.get('cTarget').value = 'background-color';
					movEl('box3','colorOption','boxes');
				}
				if (Dom.get('boxBorder').parentNode.className == 'selected') {
					// set the target CSS property to the hidden input field cTarget
					Dom.get('cTarget').value = 'border-color';
					movEl('box4','colorOption','boxes');
				}
			}
		}
	);
	
	Event.addListener('tab3', 'click',
		function(e) {
			var t = toElem(e).parentNode;
			var g = t.hash.substr(1);
			if (t.id == g+"Open") {
				Dom.get('cTarget').value = 'color';
				if (Dom.get('mainFont').parentNode.className == 'selected') {
					movEl('font1a','colorOption','text');
					//movEl('font1b','fontOption','text');
				}
				if (Dom.get('linkFont').parentNode.className == 'selected') {
					movEl('font2a','colorOption','links');
					//movEl('font2b','fontOption','links');
				}
				if (Dom.get('hoverFont').parentNode.className == 'selected') {
					movEl('font3a','colorOption','hovers');
					//movEl('font3b','fontOption','hovers');
				}
				if (Dom.get('headFont').parentNode.className == 'selected') {
					movEl('font4a','colorOption','headings');
					//movEl('font4b','fontOption','headings');
				}
			}
		}
	);
}

// Function for attaching listeners to tabs in edit_boxes panel
function initBoxTabs() {
	Event.addListener('boxBg', 'click',
		function(e) {
			Dom.get('cTarget').value = 'background-color';
			movEl('box3','colorOption','boxes');
		}
	);

	Event.addListener('boxBorder', 'click',
		function(e) {
			Dom.get('cTarget').value = 'border-color';
			movEl('box4','colorOption','boxes');
		}
	);
}

// Function for attaching listeners to tabs in edit_fonts panel
// and instantiating fontOption objects
function initFontTabs() {
	Event.addListener('mainFont', 'click',
		function(e) {
			movEl('font1a','colorOption','text');
		}
	);

	Event.addListener('linkFont', 'click',
		function(e) {
			movEl('font2a','colorOption','links');
		}
	);
	
	Event.addListener('hoverFont', 'click',
		function(e) {
			movEl('font3a','colorOption','hovers');
		}
	);

	Event.addListener('headFont', 'click',
		function(e) {
			movEl('font4a','colorOption','headings');
		}
	);
	
	// Revision: Duplicate the nodes representing the fontOption tool unto the other tabViews
	var foA = Dom.get('fontOption');
	var foB = foA.cloneNode(true); foB.id += 2;
	var foC = foA.cloneNode(true); foC.id += 3;
	var foD = foA.cloneNode(true); foD.id += 4;
	Dom.get('font2b').appendChild(foB);
	Dom.get('font3b').appendChild(foC);
	Dom.get('font4b').appendChild(foD);
}

function clr(tget) {
    so[tget].properties = new Array();
    updatePreview(so[tget]);
    return false;
}

function clearStyle(tget) {
    var sels = Dom.getAncestorByClassName('imageOption','yui-module').getElementsByTagName('SELECT');
    resetSels(sels);
    resetBtns('imgPosition');
    return clr(tget);
}

function clearTweaks() {
    resetTwks();
    var sk = getStyles('skinny');
    addStyle(sk, '');
    var sw = getStyles('switch');
    addStyle(sw, '');
    var ctr = getStyles('center');
    addStyle(ctr, '');
    return clr('hide');
}

function clearFont(a) {
    var sels = a.parentNode.parentNode.getElementsByTagName('SELECT');
    resetSels(sels);
    resetBtns(Dom.getAncestorByClassName('fButtons', a));
    return clr(a.title);
}