//represents service list, header text, and color scheme
var sb_customized=[false,false,false];

// preset color schemes
var sb_color_presets=[
['Black','#FFFFFF','#000000','#000000','#FFFFFF','#DDDDDD'],
['Blue','#FFFFFF','#99CCFF','#4C6680','#FFFFFF','#99CCFF'],
['GunmetalGray','#D6D6D6','#4C4C4C','#CACACA','#1C1C1C','#404040'],
['LemonLime','#FFFFFF','#FFF440','#555555','#D9FFCA','#EEFFB8'],
['MSDOS','#00B520','#0A0A0A','#00A311','#0D0D0D','#054300'],
['PrettyInPink','#FFFFFF','#FF4C97','#191919','#FFDCFE','#FFACE1'],
['Raspberry','#FFFFFF','#91004B','#91004B','#FFFFFF','#FF8EC0'],
['RebelRed','#FFFFFF','#C70000','#737373','#FFFFFF','#FFD0D5'],
['SharePostBlue','#FFFFFF','#1094FF','#737373','#F4F9FF','#BED7FF'],
['Silver','#FFFFFF','#777777','#555555','#FFFFFF','#DDDDDD'],
['Watermelon','#000000','#1E8B00','#000000','#FD007D','#1E8B00'],
['Custom','#FFFFFF','#000000','#000000','#FFFFFF','#DDDDDD']
]

var ary_custom_stack = [];

/*function for finding an item in an array*/
/*if the array is 2-dimensional, it will return the row where the first entry matches the value*/
Array.prototype.findIndex = function(value){
	var ctr = "";
	for (var i=0; i < this.length; i++) {
	    var tmp=this[i];
	    if ((this[i][0]) && (typeof tmp === 'object')){
	        if (this[i][0] == value) {
	            return i;
	        }
	    }else{
	        if (this[i] == value) {
	            return i;
	        }
	    }
	}
	return ctr;
};

function drawCheckboxes(){
    //see if we are doing custom or default
	var checkDiv=document.getElementById('sb_services');
	var checkDivContent="<div class=\"sb_clear\"></div>";
	
	for (var i=0;i<sb_service_params.length;i++)
	{
        var tmpBgStyle='float:left; height:20px; padding: 0px 0px 0px 20px; background: transparent url(images/sp_icons.gif) no-repeat scroll 0 ' + sb_service_params[i][3] + 'px;';
		checkDivContent+="<div class=\"sb_check_div\"><div style=\"float:left;\"><input type=\"checkbox\" disabled=\"true\" name=\"sb_custom_chk\" id=\"chk_" + sb_service_params[i][0] + "\" value=\"" + sb_service_params[i][0] + "\" onclick=\"handleServiceClick(this)\"></div><div style=\"" + tmpBgStyle + "\">" + sb_service_params[i][1] + "</div></div>";
	}
	checkDivContent+="<div class=\"sb_clear\"></div>";
	checkDiv.innerHTML=checkDivContent;
}

function colorPicker_callBack(strColor, controlName){ 
	document.getElementById(controlName).value = '#'+strColor;
	document.getElementById(controlName).onblur();
}

function closeColorPickerAdv(item){
	document.getElementById('colorPickerAdvDiv'+item).style.visibility = 'hidden';
}

function openColorPickerAdv(item){
	document.getElementById('colorPickerAdvDiv'+item).style.visibility = 'visible';
}

function UpdateColors(colorval, swatchitem, previewitem, attribute){
	var swatch = document.getElementById(swatchitem);
	var preview = document.getElementById(previewitem);
	
	if (colorval !== '')
	{
		try
		{
			swatch.style.backgroundColor = colorval;
			if(preview){
			    if (attribute === 'text'){
				    preview.style.color = colorval;
			    }
			    else
			    {
				    preview.style.backgroundColor = colorval;
			    }
			}
			var themeBox=document.getElementById('sb_theme_control');
	        var theme=themeBox.options[themeBox.selectedIndex].value;

	        if(theme==='Custom'){
				//update custom color array
	            var custIndex=sb_color_presets.findIndex('Custom');
	
	            switch(swatchitem){
	                case 'headerTextSwatch':
	                    sb_color_presets[custIndex][1]=colorval;
	                    break;
	                case 'headerBgSwatch':
	                    sb_color_presets[custIndex][2]=colorval;
	                    break;
	                case 'bodyTextSwatch':
	                    sb_color_presets[custIndex][3]=colorval;
	                    break;
	                case 'bodyBgSwatch':
	                    sb_color_presets[custIndex][4]=colorval;
	                    break;
	                case 'linkBgSwatch':
	                    sb_color_presets[custIndex][5]=colorval;
	                    break;
	            }
	        }
		}
		catch (e)
		{
			alert('Error in Color value.\n\nPlease use valid hexadecimal colors or color keywords.');
		}
	}
	else
	{
		swatch.style.backgroundColor = '';
		if (attribute === 'text'){
			preview.style.color = '';
		}
		else
		{
			preview.style.backgroundColor = '';
		}
	}
}

function UpdateLinkColor(newColor, attribute){
	var linkarray=document.getElementById('sb_body').getElementsByTagName("a");
	
	try
	{
	    if(attribute==='text'){
		    for (var i=0;i<linkarray.length;i++)
		    {
			    linkarray[i].style.color=newColor;
		    }
		}else{
		    for (var i=0;i<linkarray.length;i++)
		    {
			    linkarray[i].onmouseover=function(){this.firstChild.style.backgroundColor=newColor;};
			    linkarray[i].onmouseout=function(){this.firstChild.style.backgroundColor='transparent';};
		    }
		}
	}
	catch (e)
	{
		alert('Error in Color value.\n\nPlease use valid hexadecimal colors or color keywords.');
	}
}

function UpdateOffset(offsetVal, eleID, whichOffset){
	var obj = document.getElementById(eleID);
	if (offsetVal !== '')
	{
		try
		{
			if (whichOffset === 'left'){
				obj.style.left = offsetVal+'px';
			}
			else
			{
				obj.style.top = offsetVal+'px';
			}
		}
		catch (e)
		{
			alert('Error in offset value.\n\nPlease use valid numeric offsets.');
		}
	}
	else
	{
		if (whichOffset === 'left'){
			obj.style.left = '0px';
		}
		else
		{
			obj.style.top = '0px';
		}
	}
}

function UpdateHeaderText(newText, isCustom){
	var obj = document.getElementById('sb_header');
	try
	{
		obj.innerHTML=newText;
	}
	catch (e)
	{
		alert('Error in header value.\n\nPlease use valid characters.');
	}
	//They entered a custom header
	if(isCustom && !sb_customized[1]){
		sb_customized[1]=true;
	}
}

function toggleCustom(disable){
    var checkArray=document.getElementById('sb_services').getElementsByTagName("input");
	try
	{
		//see if they are enabling custom service list
		if(disable===false)
		{
			//see if they already customized service list
			if(sb_customized[0]===false)
			{
				sb_customized[0]=true;
				//copy current defaults into custom list
				ary_custom_stack=getDefaultServices();
				//check the boxes for the defaults
				for (var i=0;i<ary_custom_stack.length;i++)
				{
					checkArray[ary_custom_stack[i]].checked=true;
				}
			}
		}
	
		for (var i=0;i<checkArray.length;i++)
		{
			checkArray[i].disabled=disable;
		}
	}
	catch (e)
	{}
	redrawServices();
}

function redrawServices(){
	//see if we are doing custom or default
	var defRadio=document.getElementById('sb_services_radio_default');
	var svcArray=[];
	var linkBg=document.getElementById('txtLinkBg').value;
	
	if (defRadio.checked===true)
	{
		svcArray=getDefaultServices();
	}
	else
	{
		svcArray=ary_custom_stack;
	}
	var servicesContent="<div class=\"sb_clear\"></div>";
	var serviceDiv=document.getElementById('sb_body');
		
	for (var i=0;i<svcArray.length;i++)
	{
	    var tmpBgStyle='background: transparent url(images/sp_icons.gif) no-repeat scroll 7px ' + (parseInt(sb_service_params[svcArray[i]][3]) + 2) + 'px;';
		servicesContent+="<div class=\"sb_item\"><a class=\"sb_link\" style=\"" + tmpBgStyle + "\" onmouseover=\"this.firstChild.style.backgroundColor='" + linkBg +"';\" onmouseout=\"this.firstChild.style.backgroundColor='transparent';\" href=\"#\"><div style=\"padding:0px 0px 0px 3px;margin:0px 2px 0px 0px;\">" + sb_service_params[svcArray[i]][1] + "</div></a></div>";
		if(i%2 === 1){
		    servicesContent+="<div class=\"sb_separator\"></div>";
		    if(i===(svcArray.length - 1)){
		        servicesContent+="<div class=\"sb_item\"></div>";
		    }
		}
	}
	servicesContent+="<div class=\"sb_item\"><a class=\"sb_link\" onmouseover=\"this.firstChild.style.backgroundColor='" + linkBg +"';\" onmouseout=\"this.firstChild.style.backgroundColor='transparent';\" href=\"#\"><div style=\"padding:0px 0px 0px 3px;margin:0px 2px 0px 0px;\">"
	servicesContent+=getMoreText();
	servicesContent+="</div></a></div>";
	servicesContent+="<div class=\"sb_clear\"></div>";
	serviceDiv.innerHTML=servicesContent;
	//update colors on new content
	//link text
	document.getElementById('txtBodyText').onblur();
	//footer
	document.getElementById('txtHeaderText').onblur();
	document.getElementById('txtHeaderBg').onblur();
	return true;
}

function handleServiceClick(checkbox){

    var svcIndex=sb_service_params.findIndex(checkbox.value)

	if (checkbox.checked===true)
	{
		ary_custom_stack.push(svcIndex);
	}
	else
	{
		var tmpIndex=ary_custom_stack.findIndex(svcIndex);
		
		if (tmpIndex !== '')
		{
			ary_custom_stack.splice(tmpIndex,1);
		}
		
	}
	redrawServices();
}

function clearCustom(){
	//only allow this when custom radio button is checked
	var custRadio=document.getElementById('sb_services_radio_custom');
	
	if (custRadio.checked===true){
		var checkArray=document.getElementById('sb_services').getElementsByTagName("input");
		
		for (var i=0;i<checkArray.length;i++)
		{
			checkArray[i].checked=false;
		}
		
		ary_custom_stack=[];
		
		redrawServices();
	}
}

function getDefaultServices(){
	//Check language
	var langBox=document.getElementById('sb_language_control');
	var lang=langBox.options[langBox.selectedIndex].value;
	var svcArray=[];
	var langArray=sb_language_lists[sb_language_lists.findIndex(lang)];
	
	//Start at index 3 after the language code, header text, and more text
	for(i=3;i<langArray.length;i++){
		svcArray.push(sb_service_params.findIndex(langArray[i]));
	}
	
	return svcArray;
}

function getDefaultHeader(){
	//Check language
	var langBox=document.getElementById('sb_language_control');
	var lang=langBox.options[langBox.selectedIndex].value;
	var headerTxt=sb_language_lists[sb_language_lists.findIndex(lang)][1];
	
	if(headerTxt===''){
		return 'Bookmark';
	}else{
		return headerTxt;
	}
}

function getMoreText(){
	//Check language
	var langBox=document.getElementById('sb_language_control');
	var lang=langBox.options[langBox.selectedIndex].value;
	var headerTxt=sb_language_lists[sb_language_lists.findIndex(lang)][2];
	
	if(headerTxt===''){
		return 'More...';
	}else{
		return headerTxt;
	}
}

function redrawButtons(){
	//Check Type
	var wTypeBox=document.getElementById('sb_wtype_control');
	var wType=wTypeBox.options[wTypeBox.selectedIndex].value;
	//Check language
	var langBox=document.getElementById('sb_language_control');
	var lang=langBox.options[langBox.selectedIndex].value.substring(0, 2);
	var tmpImg;
	var tmpChk;
	
	for(var i=0;i<6;i++)
	{
		tmpImg=document.getElementById('sb_image_'+i);
		tmpImg.src='images/sp/'+lang+'/'+wType+'_btn_'+i+'.gif';
		
		tmpChk=document.getElementById('sb_btn_radio_'+i);
		if(tmpChk.checked===true)
		{
			tmpImg=document.getElementById('sb_button');
			tmpImg.src='images/sp/'+lang+'/'+wType+'_btn_'+i+'.gif';
		}
	}
}

function updateLang(){
	redrawButtons();
	redrawServices();
	if(!sb_customized[1]){
	    var newHdr = getDefaultHeader();
	    document.getElementById('sb_headertext_control').value=newHdr;
		UpdateHeaderText(newHdr,false);
	}
}

function updateTheme(){
    var themeBox=document.getElementById('sb_theme_control');
	var theme=themeBox.options[themeBox.selectedIndex].value;
	var themeIndex=sb_color_presets.findIndex(theme);
	var obj;
	
	if(theme==='Custom'){
	    document.getElementById('sb_customcolors_control').style.display='block';
	    
	    //if they are switching to custom for the first time, copy currently displayed colors
	    if(sb_customized[2]===false){
	        sb_customized[2]=true;
	        sb_color_presets[themeIndex][1]=document.getElementById('txtHeaderText').value;
	        sb_color_presets[themeIndex][2]=document.getElementById('txtHeaderBg').value;
	        sb_color_presets[themeIndex][3]=document.getElementById('txtBodyText').value;
	        sb_color_presets[themeIndex][4]=document.getElementById('txtBodyBg').value;
	        sb_color_presets[themeIndex][5]=document.getElementById('txtLinkBg').value;
	    }
	}else{
	    //make sure custom boxes are hidden, and select theme colors
	    document.getElementById('sb_customcolors_control').style.display='none';
	}
	    
	obj=document.getElementById('txtHeaderText');
    obj.value = sb_color_presets[themeIndex][1];
    obj.onblur();
    obj=document.getElementById('txtHeaderBg');
    obj.value = sb_color_presets[themeIndex][2];
    obj.onblur();
    obj=document.getElementById('txtBodyText');
    obj.value = sb_color_presets[themeIndex][3];
    obj.onblur();
    obj=document.getElementById('txtBodyBg');
    obj.value = sb_color_presets[themeIndex][4];
    obj.onblur();
    obj=document.getElementById('txtLinkBg');
    obj.value = sb_color_presets[themeIndex][5];
    obj.onblur();
}

function updateType(typeBox){
    var newType=typeBox[typeBox.selectedIndex].value;
    
    if(newType==='sb'){
        //set up bookmark options
        
        //hide feed url
        document.getElementById('sb_feedurl_block').style.display='none';
        //change service list
		sb_service_params=sb_bookmark_params;
		//change language list
		sb_language_lists=sb_bookmark_lang_lists;
    }else{
        //set up RSS options
        
        //show feed url
        document.getElementById('sb_feedurl_block').style.display='block';
        //change service list
		sb_service_params=sb_rss_params;
		//change language list
		sb_language_lists=sb_rss_lang_lists;
    }
	
	//reset custom services
	sb_customized[0]=false;
	ary_custom_stack=[];
	//redraw service selection checkboxes
	drawCheckboxes();
	//Language routine covers buttons, services, and header text
 	updateLang();    
}

function resetAll(){
	//This function is called when the Reset Form button is pressed and when the form loads
	//it will reset form values and propagate those changes to the preview
	document.getElementById('sb_form').reset();
		
	//Headertext:
	document.getElementById('sb_headertext_control').onblur();
		
	//Colors:
	updateTheme();
	
	//Offsets:
	document.getElementById('sb_leftoffset_control').onblur();
	document.getElementById('sb_topoffset_control').onblur();
	
	//Custom Service List
	sb_customized=[false,false,false];
	ary_custom_stack = [];
	toggleCustom(true);
	
	//Language (covers service display and buttons)
	updateLang();
	
	//draw checboxes
	drawCheckboxes();
	
	//apply PNGs if not IE 6
	if(!/msie 6.0/.test(navigator.userAgent.toLowerCase())){
	    var hdr,ftr,logo;
	    hdr=document.getElementById('sb_header');
	    ftr=document.getElementById('sb_footer');
	    logo=document.getElementById('sb_logo');
	    hdr.style.backgroundImage='url(images/sp_w_hd_bg.png)';
	    hdr.style.backgroundRepeat='repeat-x';
	    ftr.style.backgroundImage='url(images/sp_w_ft_bg.png)';
	    ftr.style.backgroundRepeat='repeat-x';
	    logo.src='images/sp_w_logo.png';
	}
}

function resetTabs()
{
	document.getElementById('basic_tab').style.backgroundImage = 'url(images/sp_tab_basic.gif)';
	document.getElementById('services_tab').style.backgroundImage = 'url(images/sp_tab_services.gif)';
	document.getElementById('advanced_tab').style.backgroundImage = 'url(images/sp_tab_advanced.gif)';
	
	document.getElementById('basic_tab').style.color = '#686969';
	document.getElementById('services_tab').style.color = '#686969';
	document.getElementById('advanced_tab').style.color = '#686969';
	
	document.getElementById('basic_content').style.display = 'none';
	document.getElementById('services_content').style.display = 'none';
	document.getElementById('advanced_content').style.display = 'none';
}

function setTab(id)
{  
    resetTabs();
    document.getElementById(id + '_tab').style.backgroundImage = 'url(images/sp_tab_' + id + '_active.gif)';
    document.getElementById(id + '_tab').style.color = '#0070f2';
    document.getElementById(id + '_content').style.display = 'block';
} 

function setWH(){
	tmpImg=document.getElementById('sb_button');
	document.getElementById('sb_btn_height').value=tmpImg.height;
	document.getElementById('sb_btn_width').value=tmpImg.width;
}