var cp1;
var styleDiv;
var styleToChange;
var colorToChange;
var expandedColorToChange;
var elements;

var specs = {
	s: {
		outerWidth: 85,
		corners: 4,
		padding: 1,
		logoHeight: 15,
		logoWidth: 12,
		fontSize: 12,
		lineHeight: 12,
		fontOptions: [9,10,11,12,14,16,18]
	},
	m: {
		outerWidth: 135,
		corners: 6,
		padding: 1,
		logoHeight: 20,
		logoWidth: 18,
		fontSize: 14,
		lineHeight: 16,
		fontOptions: [10,11,12,14,16,18,20]
	},
	l: {
		outerWidth: 185,
		corners: 8,
		padding: 2,
		logoHeight: 24,
		logoWidth: 30,
		fontSize: 18,
		lineHeight: 22,
		fontOptions: [12,14,16,18,20,22,24]
	},
	x: {
		outerWidth: 235,
		corners: 9,
		padding: 2,
		logoHeight: 33,
		logoWidth: 42,
		fontSize: 28,
		lineHeight: 32,
		fontOptions: [22,24,26,28,30,32,36]
	}
};
var thisButton = {
	size: 's',
	style: 'r',
	mouseover: 't',
	showads: 't',
	colors: {
		logo: '0095C8',
		text: '000000',
		background: 'FFFFFF',
		border: 'CCCCCC'
	},
	font: {
		family: 'Arial, Helvetica, sans-serif',
		size: 9
	},
	expanded: {
		logo: '0095C8',
		text: '000000',
		background: 'F9F9F9',
		links: '0000FF',
		active: 'FFFFFF',
		activebg: '0095C8',
		inactive: 'FFFFFF',
		inactivebg: 'CCCCCC'
	},
	services: []
}
var prefs = {

	data: {},

	load: function () {
		var cookies = document.cookie.split(';');
		for (var i=0; i<cookies.length; i++) {
			if (cookies[i].indexOf('prefs=') == 1) {
				this.data = unescape(cookies[i].substr(7)).evalJSON();
			}
 		}
 		return this.data;
	},

	save: function (expires, path) {
		var d = expires || new Date(2020, 02, 02);
		var p = path || '/';
		document.cookie = 'prefs=' + escape(Object.toJSON(this.data))
                          + ';path=' + p
                          + ';expires=' + d.toUTCString();
	}
}

Event.observe(window, 'load', function() {

	// see if there is any saved specs
	var savedSpecs = prefs.load();
	if (savedSpecs.size > '') {
		thisButton = savedSpecs;
	}

	// set up the services
	if (thisButton.services.length > 0) {
		var input = document.getElementsByTagName('input');
		for (var i=0; i<input.length; i++) {
			if (input[i].type == 'checkbox') {
				if (input[i].id != null && input[i].id.length > 8 && input[i].id.substr(0,8) == 'service_') {
					input[i].checked = false;
				}
			}
		}
		for (var i=0; i<thisButton.services.length; i++) {
			document.getElementById('service_' + thisButton.services[i]).checked = true;
		}
	}

	// set up the buttons
	setUpSize('_s', 's');
	setUpColors('_s', true);
	$('ow_text_s').setStyle({'fontSize':specs.s.fontSize + 'px'});
	setUpSize('_m', 'm');
	setUpColors('_m', true);
	$('ow_text_m').setStyle({'fontSize':specs.m.fontSize + 'px'});
	setUpSize('_l', 'l');
	setUpColors('_l', true);
	$('ow_text_l').setStyle({'fontSize':specs.l.fontSize + 'px'});
	setUpSize('_x', 'x');
	setUpColors('_x', true);
	$('ow_text_x').setStyle({'fontSize':specs.x.fontSize + 'px'});
	setUpSize('_st', 's');
	setUpColors('_st', false);
	$('ow_text_st').setStyle({'fontSize':specs.s.fontSize + 'px'});
	setUpSize('_mt', 'm');
	setUpColors('_mt', false);
	$('ow_text_mt').setStyle({'fontSize':specs.m.fontSize + 'px'});
	setUpSize('_lt', 'l');
	setUpColors('_lt', false);
	$('ow_text_lt').setStyle({'fontSize':specs.l.fontSize + 'px'});
	setUpSize('_xt', 'x');
	setUpColors('_xt', false);
	$('ow_text_xt').setStyle({'fontSize':specs.x.fontSize + 'px'});
	setUpSize('', 's');
	setUpColors('', true);

	// set up color selectors
	$('colorSelector1').style.backgroundColor = '#' + thisButton.expanded.background;
	$('colorSelector2').style.backgroundColor = '#' + thisButton.expanded.logo;
	$('colorSelector3').style.backgroundColor = '#' + thisButton.expanded.links;
	$('colorSelector4').style.backgroundColor = '#' + thisButton.expanded.text;
	$('colorSelector5').style.backgroundColor = '#' + thisButton.expanded.inactivebg;
	$('colorSelector6').style.backgroundColor = '#' + thisButton.expanded.activebg;
	$('colorSelector7').style.backgroundColor = '#' + thisButton.expanded.active;
	$('colorSelector8').style.backgroundColor = '#' + thisButton.expanded.inactive;
	$('colorSelector9').style.backgroundColor = '#' + thisButton.colors.background;
	$('colorSelector10').style.backgroundColor = '#' + thisButton.colors.logo;
	$('colorSelector11').style.backgroundColor = '#' + thisButton.colors.border;
	$('colorSelector12').style.backgroundColor = '#' + thisButton.colors.text;

	// set up button font
	changeBtnTxtSize(thisButton.font.size);
	changeBtnFont(thisButton.font.family);

	// set up font size selector
	changeFontSizeOptions(thisButton.size);

	// set up services links on expanded button
	updateServices();

	// set up colors on expanded button
	$('Btn_container').style.background = '#' + thisButton.expanded.background;
	$('onlywireBtnOuter').style.background = '#' + thisButton.expanded.background;
	$('onlywireBtn').style.background = '#' + thisButton.expanded.logo;
	var aTags = $A($('bookmarkContentBox').getElementsByTagName('a'));
	for(i=0; i<aTags.length; i++){
		aTags[i].style.color = '#' + thisButton.expanded.links;
	}
	$('bookmarkContentBoxAboveText').style.color = '#' + thisButton.expanded.text;
	$('bookmarkContentBoxBelowText').style.color = '#' + thisButton.expanded.text;
	$$('.btn_box_li_a').each(function(item) {
		 item.style.background = '#' + thisButton.expanded.activebg;
	});
	$$('.btn_box_li_a').each(function(item) {
		 item.style.color = '#' + thisButton.expanded.active;
	});
	$$('.btn_header_li_a').each(function(item) {
		 item.style.background = '#' + thisButton.expanded.activebg;
	});
	$$('.btn_header_li_a').each(function(item) {
		 item.style.color = '#' + thisButton.expanded.active;
	});
	$$('.btn_inactive_li_a').each(function(item) {
		 item.style.background = '#' + thisButton.expanded.inactivebg;
	});
	$$('.btn_inactive_li_a').each(function(item) {
		 item.style.color = '#' + thisButton.expanded.inactive;
	});


	showTab('bookmark');
	//Round the corners
	doRoundAll();

	//Call on small_rect
	Event.observe(
		'small_rect',
		'click',
		function(event) {
			clearSelectedStyle();
			$('small_rect').checked = true;
			thisButton.size = 's';
			thisButton.style = 'r';
			setUpSize('', 's');
			setUpColors('', true);
			$('button_selected').innerHTML = 'Rectangle, Small';
			changeFontSizeOptions(thisButton.size);
			setUpColorPickers(true);
			doRoundAll();
		}
	);
	//Call on medium_rect
	Event.observe(
		'medium_rect',
		'click',
		function(event) {
			clearSelectedStyle();
			$('medium_rect').checked = true;
			thisButton.size = 'm';
			thisButton.style = 'r';
			setUpSize('', 'm');
			setUpColors('', true);
			$('button_selected').innerHTML = 'Rectangle, Medium';
			changeFontSizeOptions(thisButton.size);
			setUpColorPickers(true);
			doRoundAll();
		}
	);
	//Call on large_rect
	Event.observe(
		'large_rect',
		'click',
		function(event) {
			clearSelectedStyle();
			$('large_rect').checked = true;
			thisButton.size = 'l';
			thisButton.style = 'r';
			setUpSize('', 'l');
			setUpColors('', true);
			$('button_selected').innerHTML = 'Rectangle, Large';
			changeFontSizeOptions(thisButton.size);
			setUpColorPickers(true);
			doRoundAll();
		}
	);
	//Call on xlarge_rect
	Event.observe(
		'xlarge_rect',
		'click',
		function(event) {
			clearSelectedStyle();
			$('xlarge_rect').checked = true;
			thisButton.size = 'x';
			thisButton.style = 'r';
			setUpSize('', 'x');
			setUpColors('', true);
			$('button_selected').innerHTML = 'Rectangle, X-Large';
			changeFontSizeOptions(thisButton.size);
			setUpColorPickers(true);
			doRoundAll();
		}
	);
	//Call on small_text
	Event.observe(
		'small_text',
		'click',
		function(event) {
			clearSelectedStyle();
			$('small_text').checked = true;
			thisButton.size = 's';
			thisButton.style = 't';
			setUpSize('', 's');
			setUpColors('', false);
			$('button_selected').innerHTML = 'Text, Small';
			changeFontSizeOptions(thisButton.size);
			setUpColorPickers(false);
			doRoundAll();
		}
	);
	//Call on medium_text
	Event.observe(
		'medium_text',
		'click',
		function(event) {
			clearSelectedStyle();
			$('medium_text').checked = true;
			thisButton.size = 'm';
			thisButton.style = 't';
			setUpSize('', 'm');
			setUpColors('', false);
			$('button_selected').innerHTML = 'Text, Medium';
			changeFontSizeOptions(thisButton.size);
			setUpColorPickers(false);
			doRoundAll();
		}
	);
	//Call on large_text
	Event.observe(
		'large_text',
		'click',
		function(event) {
			clearSelectedStyle();
			$('large_text').checked = true;
			thisButton.size = 'l';
			thisButton.style = 't';
			setUpSize('', 'l');
			setUpColors('', false);
			$('button_selected').innerHTML = 'Text, Large';
			changeFontSizeOptions(thisButton.size);
			setUpColorPickers(false);
			doRoundAll();
		}
	);
	//Call on xlarge_text
	Event.observe(
		'xlarge_text',
		'click',
		function(event) {
			clearSelectedStyle();
			$('xlarge_text').checked = true;
			thisButton.size = 'x';
			thisButton.style = 't';
			setUpSize('', 'x');
			setUpColors('', false);
			$('button_selected').innerHTML = 'Text, X-Large';
			changeFontSizeOptions(thisButton.size);
			setUpColorPickers(false);
			doRoundAll();
		}
	);

	//call color picker
	cp1 = new Refresh.Web.ColorPicker('cp1', {startHex: 'ffcc00', startMode:'s'});
	
	//Call on selector 1
	Event.observe(
		'colorSelector1',
		'click',
		function(event) {
			styleDiv = new Array('colorSelector1', 'Btn_container', 'onlywireBtnOuter');
			styleToChange = new Array('background', 'background', 'background');
			colorToChange = null;
			expandedColorToChange = 'background';
			showSelector(event);
		}
	);
	//Call on selector 2
	Event.observe(
		'colorSelector2',
		'click',
		function(event) {
			styleDiv = new Array('colorSelector2', 'onlywireBtn');
			styleToChange = new Array('background', 'background');
			colorToChange = null;
			expandedColorToChange = 'logo';
			showSelector(event);
		}
	);
	//Call on selector 3
	Event.observe(
		'colorSelector3',
		'click',
		function(event) {
			styleDiv = new Array('colorSelector3', 'bookmarkContentBox');
			styleToChange = new Array('background', 'link');
			colorToChange = null;
			expandedColorToChange = 'links';
			showSelector(event);
		}
	);
	//Call on selector 4
	Event.observe(
		'colorSelector4',
		'click',
		function(event) {
			styleDiv = new Array('colorSelector4', 'Btn_container');
			styleToChange = new Array('background', 'alltextcolor');
			colorToChange = null;
			expandedColorToChange = 'text';
			showSelector(event);
		}
	);
	//Call on selector 5
	Event.observe(
		'colorSelector5',
		'click',
		function(event) {
			styleDiv = new Array('colorSelector5', 'Btn_header');
			styleToChange = new Array('background', 'btn_inactive_li');
			colorToChange = null;
			expandedColorToChange = 'inactivebg';
			showSelector(event);
		}
	);
	//Call on selector 6
	Event.observe(
		'colorSelector6',
		'click',
		function(event) {
			styleDiv = new Array('colorSelector6', 'Btn_header');
			styleToChange = new Array('background', 'btn_header_li');
			colorToChange = null;
			expandedColorToChange = 'activebg';
			showSelector(event);
		}
	);
	//Call on selector 7
	Event.observe(
		'colorSelector7',
		'click',
		function(event) {
			styleDiv = new Array('colorSelector7', 'Btn_header');
			styleToChange = new Array('background', 'btn_header_li_a');
			colorToChange = null;
			expandedColorToChange = 'active';
			showSelector(event);
		}
	);
	//Call on selector 8
	Event.observe(
		'colorSelector8',
		'click',
		function(event) {
			styleDiv = new Array('colorSelector8', 'Btn_header');
			styleToChange = new Array('background', 'btn_inactive_li_a');
			colorToChange = null;
			expandedColorToChange = 'inactive';
			showSelector(event);
		}
	);
	//Call on selector 9
	Event.observe(
		'colorSelector9',
		'click',
		function(event) {
			styleDiv = null;
			styleToChange = null;
			colorToChange = 'background';
			showSelector(event);
		}
	);
	//Call on selector 10
	Event.observe(
		'colorSelector10',
		'click',
		function(event) {
			styleDiv = null;
			styleToChange = null;
			colorToChange = 'logo';
			showSelector(event);
		}
	);
	//Call on selector 11
	Event.observe(
		'colorSelector11',
		'click',
		function(event) {
			styleDiv = null;
			styleToChange = null;
			colorToChange = 'border';
			showSelector(event);
		}
	);
	//Call on selector 12
	Event.observe(
		'colorSelector12',
		'click',
		function(event) {
			styleDiv = null;
			styleToChange = null;
			colorToChange = 'text';
			showSelector(event);
		}
	);
	
	new Draggable('colorPickerElm', {
				  	scroll: window,
				  	handle:'scrollPickerElm',
					zindex:2000,
					onStart: function(){
						elements = document.getElementsByTagName('img');
						len = elements.length;
						elements[len-1].style.display = 'none';
						elements[len-2].style.display = 'none';
					},
				  	onEnd: function(){
						elements = document.getElementsByTagName('img');
						len = elements.length;
						elements[len-1].style.display = '';
						elements[len-2].style.display = '';
						elements[len-1].style.zIndex = 2000;
						elements[len-2].style.zIndex = 2000;
						cp1._map.setPositioningVariables();
						cp1._slider.setPositioningVariables();
						cp1.positionMapAndSliderArrows();
					}
				  });

});

function setUpSize(id, size) {
	$('ow_button' + id).style.lineHeight = specs[size].lineHeight + 'px';
	$('ow_button' + id).style.padding = specs[size].padding + 'px';
	$('ow_button' + id).style.borderWidth = specs[size].padding + 'px';
	$('ow_logo_img' + id).style.height = specs[size].logoHeight + 'px';
}

function setUpColors(id, isRectangle) {
	$('ow_logo' + id).style.backgroundColor = '#' + thisButton.colors.logo;
	$('ow_text' + id).style.color = '#' + thisButton.colors.text;
	if (isRectangle) {
		$('ow_button' + id).style.backgroundColor = '#' + thisButton.colors.background;
		$('ow_button' + id).style.borderColor = '#' + thisButton.colors.border;
	} else {
		$('ow_button' + id).style.backgroundColor = '#F7F7F7';
		$('ow_button' + id).style.borderColor = '#F7F7F7';
	}
}

function setUpColorPickers(isRectangle) {
	if (isRectangle) {
		$('backgroundColorPicker').style.display = '';
		$('backgroundColorPicker').style.visibility = 'visible';
		$('borderColorPicker').style.display = '';
		$('borderColorPicker').style.visibility = 'visible';
	} else {
		$('backgroundColorPicker').style.display = 'none';
		$('backgroundColorPicker').style.visibility = 'hidden';
		$('borderColorPicker').style.display = 'none';
		$('borderColorPicker').style.visibility = 'hidden';
	}
}

function showSelector(event){
	var selector = event.target.parentNode.id;
	var startHex = 'ffffff';
	if (selector == 'colorSelector1') {
		startHex = thisButton.expanded.background;
	} else if (selector == 'colorSelector2') {
		startHex = thisButton.expanded.logo;
	} else if (selector == 'colorSelector3') {
		startHex = thisButton.expanded.links;
	} else if (selector == 'colorSelector4') {
		startHex = thisButton.expanded.text;
	} else if (selector == 'colorSelector5') {
		startHex = thisButton.expanded.inactivebg;
	} else if (selector == 'colorSelector6') {
		startHex = thisButton.expanded.activebg;
	} else if (selector == 'colorSelector7') {
		startHex = thisButton.expanded.active;
	} else if (selector == 'colorSelector8') {
		startHex = thisButton.expanded.inactive;
	} else if (selector == 'colorSelector9') {
		startHex = thisButton.colors.background;
	} else if (selector == 'colorSelector10') {
		startHex = thisButton.colors.logo;
	} else if (selector == 'colorSelector11') {
		startHex = thisButton.colors.border;
	} else if (selector == 'colorSelector12') {
		startHex = thisButton.colors.text;
	}
	cp1._cvp.color.setHex(startHex);
	mouseX = Event.pointerX(event);
	mouseY = Event.pointerY(event);
	
	$('colorPickerElm').style.position = 'absolute';
	$('colorPickerElm').style.top = mouseY+"px";
	$('colorPickerElm').style.left = (mouseX-400)+"px";
	$('colorPickerElm').style.display = '';
	
	elements = document.getElementsByTagName('img');
	len = elements.length;
	elements[len-1].style.display = '';
	elements[len-2].style.display = '';
	elements[len-1].style.zIndex = 2000;
	elements[len-2].style.zIndex = 2000;
	cp1._map.setPositioningVariables();
	cp1._slider.setPositioningVariables();
	cp1.positionMapAndSliderArrows();
	cp1.updateVisuals();
	$('selectPickerBtn').focus();
}

function clearSelectedStyle() {
	$('small_rect').checked = false;
	$('medium_rect').checked = false;
	$('large_rect').checked = false;
	$('xlarge_rect').checked = false;
	$('small_text').checked = false;
	$('medium_text').checked = false;
	$('large_text').checked = false;
	$('xlarge_text').checked = false;
}

function hideColorPick(){
	$('colorPickerElm').hide();
	elements = document.getElementsByTagName('img');
	len = elements.length;
	elements[len-1].style.display = 'none';
	elements[len-2].style.display = 'none';
}

function selectColor(){
	var aTags;
	hideColorPick();
	str = ""+cp1._preview.style.backgroundColor;
	str = str.replace(/rgb\(/, "");
	str = str.replace(/\)/, "");
	if(str.search(/\#/) >= 0){
		hexColor = str;
	}else{
		colorArr = str.split(",");
		hexColor = '#'+RGBtoHex(colorArr[0],colorArr[1],colorArr[2]);
	}
	var useragent = navigator.userAgent;
	var pos = useragent.indexOf('MSIE');
	//alert(useragent);
	if (colorToChange > '') {
		changeColor(hexColor);
	} else {
		thisButton.expanded[expandedColorToChange] = hexColor.substr(1);
		for( i=0; i < styleDiv.length; i++ ){

		switch(styleToChange[i]){
			case 'background':
				$(styleDiv[i]).setStyle({background:hexColor});
				break;
			case 'border':
				$(styleDiv[i]).setStyle({borderColor:hexColor});
				break;
			case 'textcolor':
				$(styleDiv[i]).setStyle({color:hexColor});
				break;
			case 'link':
				
				if (pos > -1) {
					var myDivs = document.getElementsByTagName('div');
					var allANodes;
					for(var k=0;k<myDivs.length;k++){
						if(myDivs[k].className=="bookmark_content_box"){
							//for first div
							allANodes = myDivs[k].childNodes[0];
							for(l=0; l < allANodes.childNodes.length; l++){
								allANodes.childNodes[l].childNodes[1].style.color = hexColor;
							}
							//for second div
							allANodes = myDivs[k].childNodes[1];
							for(l=0; l < allANodes.childNodes.length; l++){
								allANodes.childNodes[l].childNodes[1].style.color = hexColor;
							}
						}
					}
				} else {
				
					var aTags = $A($(styleDiv[i]).getElementsByTagName('a'));
					for(j=0; j < aTags.length; j++){
						aTags[j].setStyle({color:hexColor});
					}
				}
				break;
			case 'alltextcolor':
				if (pos > -1) {
					$('bookmarkContentBoxAboveText').setStyle({color:hexColor});
					$('bookmarkContentBoxBelowText').setStyle({color:hexColor});
				} else {
					var divTags = $A($(styleDiv[i]).getElementsByTagName('div'));
					for(j=0; j < divTags.length; j++){
						divTags[j].setStyle({color:hexColor});
					}
				}
				//aTags.each($(element).setStyle({color:hexColor}));
				$('btn_close').setStyle({color:hexColor});
				break;
			case 'btn_header_li':
				$$('.btn_header_li_a').each(function(item) { item.setStyle({background:hexColor}); });
				$$('.btn_box_li_a').each(function(item) { item.setStyle({background:hexColor}); });
				break;
			case 'btn_header_li_a':
				$$('.btn_header_li_a').each(function(item) { item.setStyle({color:hexColor}); });
				$$('.btn_box_li_a').each(function(item) { item.setStyle({color:hexColor}); });
				break;
			case 'btn_inactive_li':
				$$('.btn_inactive_li_a').each(function(item) { item.setStyle({background:hexColor}); });
				break;
			case 'btn_inactive_li_a':
				$$('.btn_inactive_li_a').each(function(item) { item.setStyle({color:hexColor}); });
				break;
		}
		}
		doRoundAll();
	}
}

function changeColor(newColor) {
	thisButton.colors[colorToChange] = newColor.substr(1);
	if (colorToChange == 'background') {
		$('colorSelector9').style.backgroundColor = newColor;
	} else if (colorToChange == 'logo') {
		$('colorSelector10').style.backgroundColor = newColor;
	} else if (colorToChange == 'border') {
		$('colorSelector11').style.backgroundColor = newColor;
	} else if (colorToChange == 'text') {
		$('colorSelector12').style.backgroundColor = newColor;
	}
	setUpColors('_s', true);
	setUpColors('_m', true);
	setUpColors('_l', true);
	setUpColors('_x', true);
	setUpColors('_st', false);
	setUpColors('_mt', false);
	setUpColors('_lt', false);
	setUpColors('_xt', false);
	setUpColors('', $('button_selected').innerHTML.substr(0,4) == 'Rect');
	doRoundAll();
}

function RGBtoHex(R,G,B) {
	return toHex(R)+toHex(G)+toHex(B)
}

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

function changeBtnTxtSize(txt) {
	thisButton.font.size = txt;
	var fontSize = txt + 'px';
	$('ow_text').setStyle({'fontSize':fontSize});
	$('ow_text_' + thisButton.size).setStyle({'fontSize':fontSize});
	$('ow_text_' + thisButton.size + 't').setStyle({'fontSize':fontSize});
}

function changeBtnFont(font) {
	thisButton.font.style = font;
	$('ow_text_s').setStyle({'fontFamily':font});
	$('ow_text_m').setStyle({'fontFamily':font});
	$('ow_text_l').setStyle({'fontFamily':font});
	$('ow_text_x').setStyle({'fontFamily':font});
	$('ow_text_st').setStyle({'fontFamily':font});
	$('ow_text_mt').setStyle({'fontFamily':font});
	$('ow_text_lt').setStyle({'fontFamily':font});
	$('ow_text_xt').setStyle({'fontFamily':font});
	$('ow_text').setStyle({'fontFamily':font});
}

function changeFontSizeOptions(size) {
	var options = specs[size].fontOptions;
	var selected = specs[size].fontSize;
	var selectElement = $('fontSizeSelector');
	clearAllChildNodes(selectElement);
	for (var i=0; i<options.length; i++) {
		var thisOption = document.createElement('option');
		thisOption.value = options[i];
		thisOption.innerHTML = options[i] + 'px';
		selectElement.appendChild(thisOption);
		if (options[i] == selected) {
			thisOption.selected = true;
		}
	}
	$('ow_text_s').setStyle({'fontSize':specs.s.fontSize + 'px'});
	$('ow_text_st').setStyle({'fontSize':specs.s.fontSize + 'px'});
	$('ow_text_m').setStyle({'fontSize':specs.m.fontSize + 'px'});
	$('ow_text_mt').setStyle({'fontSize':specs.m.fontSize + 'px'});
	$('ow_text_l').setStyle({'fontSize':specs.l.fontSize + 'px'});
	$('ow_text_lt').setStyle({'fontSize':specs.l.fontSize + 'px'});
	$('ow_text_x').setStyle({'fontSize':specs.x.fontSize + 'px'});
	$('ow_text_xt').setStyle({'fontSize':specs.x.fontSize + 'px'});
	changeBtnTxtSize(selected);
	doRoundAll();
}

function showTab(elm) {
	var elmIds = new Array('bookmark', 'colors', 'share', 'expand');
	for(i=0; i < 4; i++){
		$(elmIds[i]).hide();
		$('li'+elmIds[i]).className = '';
	}
	$(elm).show();
	$('li'+elm).className = 'selected';
}

function updateServices() {
	thisButton.services = [];
	clearAllChildNodes($('bookmarkListLeft'));
	clearAllChildNodes($('bookmarkListRight'));
	var input = document.getElementsByTagName('input');
	var left = true;
	for (var i=0; i<input.length; i++) {
		var thisElement = input[i];
		if (thisElement.type == 'checkbox' && thisElement.checked == true) {
			var id = thisElement.getAttribute('id');
			if (id > '' && id.length > 8 && id.substr(0, 8) == 'service_') {
				thisButton.services[thisButton.services.length] = id.substr(8);
				if (left == true) {
					$('bookmarkListLeft').appendChild(buildServiceLine(thisElement));
				} else {
					$('bookmarkListRight').appendChild(buildServiceLine(thisElement));
				}
				left = !left;
			}
		}
	}
}

function buildServiceLine(input) {
	var div = document.createElement('div');
       div.setAttribute('class', 'link_item');
	var label = document.createElement('label');
	div.appendChild(label);
	label.setAttribute('for', input.getAttribute('id'));
	var img = document.createElement('img');
	label.appendChild(img);
	img.setAttribute('src', '/i/' + input.getAttribute('smallicon'));
	img.style.verticalAlign = 'middle';
	img.style.marginRight = '5px';
	img.setAttribute('title', input.getAttribute('name'));
	var a = document.createElement('a');
	label.appendChild(a);
	a.setAttribute('href', '#');
	a.setAttribute('onclick', 'return false;');
	a.appendChild(document.createTextNode(input.getAttribute('name')));
	return div;
}

function clearAllChildNodes(element) {
	while (element.hasChildNodes()) {
		element.removeChild(element.lastChild);
	}
}

function toggleBookmarkShare(showBookmark) {
	if (showBookmark) {
		$('bookmarkContentBoxAboveText').innerHTML = 'Bookmark Content';
		$('bookmarkContentBox2').style.visibility = 'hidden';
		$('bookmarkContentBox2').style.display = 'none';
		$('bookmarkContentBox').style.visibility = 'visible';
		$('bookmarkContentBox').style.display = '';
		$('bookmark_li').setAttribute('class', 'btn_header_li');
		$('bookmark_li_a').setAttribute('class', 'btn_header_li_a');
		$('bookmark_li_a').style.color = '#' + thisButton.expanded.active;
		$('bookmark_li_a').style.background = '#' + thisButton.expanded.activebg;
		$('share_li').setAttribute('class', 'btn_inactive_li');
		$('share_li_a').setAttribute('class', 'btn_inactive_li_a');
		$('share_li_a').style.color = '#' + thisButton.expanded.inactive;
		$('share_li_a').style.background = '#' + thisButton.expanded.inactivebg;
	} else {
		$('bookmarkContentBoxAboveText').innerHTML = 'Email to Friends and Colleagues:';
		$('bookmarkContentBox').style.visibility = 'hidden';
		$('bookmarkContentBox').style.display = 'none';
		$('bookmarkContentBox2').style.visibility = 'visible';
		$('bookmarkContentBox2').style.display = '';
		$('share_li').setAttribute('class', 'btn_header_li');
		$('share_li_a').setAttribute('class', 'btn_header_li_a');
		$('share_li_a').style.color = '#' + thisButton.expanded.active;
		$('share_li_a').style.background = '#' + thisButton.expanded.activebg;
		$('bookmark_li').setAttribute('class', 'btn_inactive_li');
		$('bookmark_li_a').setAttribute('class', 'btn_inactive_li_a');
		$('bookmark_li_a').style.color = '#' + thisButton.expanded.inactive;
		$('bookmark_li_a').style.background = '#' + thisButton.expanded.inactivebg;
	}
	return false;
}

function toggleAds(adsCheckbox) {
	if (adsCheckbox.checked == true) {
		thisButton.showads = 'f';
		$('adsByOnlyWire').style.visibility = 'hidden';
		$('adsByOnlyWire').style.display = 'none';
	} else {
		thisButton.showads = 't';
		$('adsByOnlyWire').style.visibility = 'visible';
		$('adsByOnlyWire').style.display = '';
	}
}

function submitForm() {
	$('selections').value = buildButtonId();
	setTimeout('document.doSubmit();', 50);
}

document.doSubmit = function() {
    document.getElementById('thebuttonform').submit();
}


function buildButtonId() {
	if ($('expandOnMouseover').checked === true) {
		thisButton.mouseover = 't';
	} else {
		thisButton.mouseover = 'f';
	}
	prefs.data = thisButton;
	prefs.save();
	var buttonId = thisButton.size + thisButton.style + thisButton.mouseover + thisButton.showads;
	buttonId += thisButton.colors.logo;
	buttonId += thisButton.colors.text;
	buttonId += thisButton.colors.background;
	buttonId += thisButton.colors.border;
	buttonId += thisButton.expanded.logo;
	buttonId += thisButton.expanded.text;
	buttonId += thisButton.expanded.background;
	buttonId += thisButton.expanded.links;
	buttonId += thisButton.expanded.active;
	buttonId += thisButton.expanded.activebg;
	buttonId += thisButton.expanded.inactive;
	buttonId += thisButton.expanded.inactivebg;
	buttonId += '|' + thisButton.font.size;
	buttonId += '|' + thisButton.font.family;
	thisButton.services.sort();
	for (var i=0; i<thisButton.services.length; i++) {
		buttonId += '|' + thisButton.services[i];
	}
	buttonId += '|';
	return buttonId;
}

function doRoundAll(){
	
	$$('.rounded').each(function(item) { new Effect.Corner(item, "10px"); });
	$$('.rounded_s').each(function(item) { new Effect.Corner(item, specs.s.corners + "px"); });
	$$('.rounded_m').each(function(item) { new Effect.Corner(item, specs.m.corners + "px"); });
	$$('.rounded_l').each(function(item) { new Effect.Corner(item, specs.l.corners + "px"); });
	$$('.rounded_x').each(function(item) { new Effect.Corner(item, specs.x.corners + "px"); });
}