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

function shadowfy() {

	
	demoDiv=document.getElementById("demo");
	codeDiv=document.getElementById("code");
	textColor="#" + document.getElementById("text-color").value;
	backgroundColor="#" + document.getElementById("background-color").value;	
	
	var shadowCount=1;
	var theShadow="";
	var shadowHOffset="";
	var shadowVOffset="";
	var shadowBlur="";
	var shadowColor="";
	
	while (document.getElementById("shadow-container" + shadowCount)) {
			
			shadowHOffset=document.getElementById("h-offset" + shadowCount).value + document.getElementById("h-offset-units" + shadowCount).value;
			shadowVOffset=document.getElementById("v-offset" + shadowCount).value + document.getElementById("v-offset-units" + shadowCount).value;
			shadowBlur=document.getElementById("blur" + shadowCount).value + document.getElementById("blur-units" + shadowCount).value;
			shadowColor="#" + document.getElementById("shadow-color" + shadowCount).value;
			shadowCount++;
			
			if (theShadow==""){
				theShadow= shadowHOffset + " " + shadowVOffset + " " + shadowBlur + " " + shadowColor;
			}
			
			else {
				theShadow= theShadow + ", " + shadowHOffset + " " + shadowVOffset + " " + shadowBlur + " " + shadowColor
			}
	}
	
	
	if (demoDiv) {
			demoDiv.style.backgroundColor=backgroundColor;		
			demoDiv.style.color=textColor;
			demoDiv.style.textShadow=theShadow;
			if(codeDiv.innerText){
				codeDiv.innerText="text-shadow:" + theShadow;
				}
			else {
				codeDiv.textContent="text-shadow:" + theShadow;
				
				}
			}
	}

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=shadowfy;