var shadowCount=1; //increment or decrement this to keep track of stops editors

function strokeMe() {

	
	demoDiv=document.getElementById("demo");
	codeDiv=document.getElementById("code");
	textColor="#" + document.getElementById("text-color").value;
	backgroundColor="#" + document.getElementById("background-color").value;	
	
	var theStroke="";
	var strokeWidth="";
	var strokeColor="";
	var fillcolor="";
	
			
			strokeWidth=document.getElementById("stroke-width1").value + document.getElementById("stroke-width-units1").value;
			shadowColor="#" + document.getElementById("stroke-color1").value;
			fillColor="#" + document.getElementById("fill-color1").value;
			
				theStroke= strokeWidth + " " + shadowColor;

	
	if (demoDiv) {
			demoDiv.style.backgroundColor=backgroundColor;		
			demoDiv.style.color=textColor;
			demoDiv.style.webkitTextStroke=theStroke;
			demoDiv.style.webkitTextFillColor=fillColor;
			
			if(codeDiv.innerText){
				codeDiv.innerText="-webkit-text-stroke: " + theStroke + ";\n" + "-webkit-text-fill-color: " + fillColor;				
				}
			else {
				codeDiv.textContent="-webkit-text-stroke: " + theStroke + ";\n" + "-webkit-text-fill-color: " + fillColor;				
				}
			}
	}

function addShadow() {

	shadowCount++;

	shadowDiv=document.getElementById("shadows-container");
	buttonsDiv=document.getElementById("shadow-buttons");
	
	nodeToClone=document.getElementById('shadow-container')
	nextShadowContainer=nodeToClone.cloneNode(true);
	nextShadowContainer.id="shadow-container"+shadowCount;
	//nextShadowContainer=shadowDiv.childNodes[shadowDiv.childNodes.length-1].contentText="Heading" + shadowCount;
	shadowDiv.insertBefore(nextShadowContainer, buttonsDiv);
	nextShadowContainer.style.opacity=0;
	nextShadowContainer.childNodes[1].innerText="Shadow " + shadowCount;
	
	//now update ids for all the form elements we need to get values from
	for (i=0; i<nextShadowContainer.childNodes.length; i++) {
		nextShadowContainer.childNodes[i].id=nextShadowContainer.childNodes[i].id +shadowCount;		
	}
	
	nextShadowContainer.childNodes[3].childNodes[1].childNodes[2].id=nextShadowContainer.childNodes[3].childNodes[1].childNodes[2].id+shadowCount; //shadow-hoffset text area
	nextShadowContainer.childNodes[3].childNodes[1].childNodes[2].className="fd_slider_cn_halfSize fd_tween fd_tween fd_slider_cb_update_shadowfy fd_range_-10_10 fd_slider_cn_theSlider";
	
nextShadowContainer.childNodes[3].childNodes[1].childNodes[4].id=nextShadowContainer.childNodes[3].childNodes[1].childNodes[4].id+shadowCount; //shadow-voffset-container select

	//alert(nextShadowContainer.childNodes[15].id);

	nextShadowContainer.childNodes[7].childNodes[1].childNodes[2].id=nextShadowContainer.childNodes[7].childNodes[1].childNodes[2].id+shadowCount; //shadow-voffset text area
	nextShadowContainer.childNodes[7].childNodes[1].childNodes[2].className="fd_slider_cn_halfSize fd_tween fd_tween fd_slider_cb_update_shadowfy fd_range_-10_10 fd_slider_cn_theSlider";
	// alert(nextShadowContainer.childNodes[7].childNodes[1].childNodes[2].id); //shadow-hoffset-container
	
	
nextShadowContainer.childNodes[7].childNodes[1].childNodes[4].id=nextShadowContainer.childNodes[7].childNodes[1].childNodes[4].id+shadowCount; //shadow-voffset-container select

	nextShadowContainer.childNodes[11].childNodes[1].childNodes[2].id=nextShadowContainer.childNodes[11].childNodes[1].childNodes[2].id+shadowCount; //blur text area
	nextShadowContainer.childNodes[11].childNodes[1].childNodes[2].className="fd_slider_cn_halfSize fd_tween fd_tween fd_slider_cb_update_shadowfy fd_range_0_10 fd_slider_cn_theSlider";
	
nextShadowContainer.childNodes[11].childNodes[1].childNodes[4].id=nextShadowContainer.childNodes[11].childNodes[1].childNodes[4].id+shadowCount; //blur select

	nextShadowContainer.childNodes[15].childNodes[1].childNodes[2].id=nextShadowContainer.childNodes[15].childNodes[1].childNodes[2].id+shadowCount; //shadow-color input

	
	nextShadowContainer.style.display="block";
	nextShadowContainer.style.opacity=1;
	
	fdSliderController.create();
	
	
	jscolor.init();
	
	shadowfy();
	
}

function deleteShadow() {
	
	shadowDiv=document.getElementById("shadows-container");
	divToRemove=document.getElementById("shadow-container" + shadowCount);
	
	if (divToRemove) {
		shadowDiv.removeChild(divToRemove);
		shadowCount--;
	}
	
	shadowfy();
}

function changeUnit(elementIndex, theUnits){
	
	elementId="blur"+elementIndex.substr(elementIndex.length-1, 1);
	var theElement=document.getElementById(elementId);
	//change a unit from px to em or vice versa
	 if (theUnits=="em"){
		theElement.className="fd_slider_cn_halfSize fd_tween fd_tween fd_slider_cb_update_shadowfy fd_range_0_5 fd_inc_0d10 fd_slider_cn_theSlider"
	}
	
	else {
		theElement.className="fd_slider_cn_halfSize fd_tween fd_tween fd_slider_cb_update_shadowfy fd_range_-10_10 fd_slider_cn_theSlider"
	}
	
	//alert(theElement.id);
	//fdSliderController.destroySlider(theElement.id)
	fdSliderController.create();
	
}

window.onload=strokeMe;