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

function gradientify() {
	//alert();
	demoDiv=document.getElementById("demo");
	codeDiv=document.getElementById("code");
	startColor="#" + document.getElementById("start-color").value;
	startVPos=document.getElementById("v-start-position").value + "%";
	startHPos=document.getElementById("h-start-position").value + "%";
	endVPos=document.getElementById("v-end-position").value + "%";
	endHPos=document.getElementById("h-end-position").value + "%";
	toColor="#" + document.getElementById("end-color").value;

	//do stops
	var stopCount=1;
	var stopsVal=new Array();
	var stopsString="";
	var stopPosition="";
	var stopColor="";
	
	while	 (document.getElementById("stop-position" + stopCount)) {
			stopPosition=document.getElementById("stop-position" + stopCount).value;
			stopColor="#" + document.getElementById("stop-color" + stopCount).value;
			stopsVal.push("color-stop(" + stopPosition +"," + stopColor + ")");
			stopCount++;
	
	}
	
	stopsString=stopsVal.join();
	
	if (demoDiv) {
		theGradient="-webkit-gradient(linear, " + startHPos + " " + startVPos + ", " + endHPos + " " + endVPos + ",  from("+startColor+ "), to(" +toColor +")";
		
		if (stopsString!="") {
			theGradient=theGradient+ ", " +stopsString  +")" ;
		}
		else {
			theGradient=theGradient+")" ;
		}
		
		demoDiv.style.backgroundImage=theGradient;
		codeDiv.textContent=theGradient;
		}
}

function addStop() {

	stopsCount++;

	stopDiv=document.getElementById("stops-container");
	buttonsDiv=document.getElementById("stop-buttons");
	var nextStopEditor = document.createElement('div');
	nextStopEditor.style.opacity=0;
	stopDiv.insertBefore(nextStopEditor, buttonsDiv);
	nextStopEditor.id="stop-container" + stopsCount;

	nextStopColorEditor=document.createElement('div');
	nextStopEditor.appendChild(nextStopColorEditor);
	nextStopColorEditor.id="stop-color-container" + stopsCount;
	nextStopColorEditor.className="property-container";
	
	nextStopColorLabel=document.createElement('label');
	nextStopColorEditor.appendChild(nextStopColorLabel);
	nextStopColorLabel.textContent="Color ";
	
	nextStopColorPicker=document.createElement('input');
	nextStopColorEditor.appendChild(nextStopColorPicker);
	nextStopColorPicker.id="stop-color"+stopsCount;
	nextStopColorPicker.className="color";
	nextStopColorPicker.value="999";
	nextStopColorPicker.addEventListener("change", gradientify, false);
	
	nextStopPosEditor=document.createElement('div');
	nextStopEditor.appendChild(nextStopPosEditor);
	nextStopPosEditor.id="stop-position-container"+stopsCount;
	nextStopPosEditor.className="property-container";
	
	nextStopPosLabel=document.createElement('label');
	nextStopPosEditor.appendChild(nextStopPosLabel);
	nextStopPosLabel.textContent="Position";
	nextStopPosLabel.setAttribute("for", "stop-position"+stopsCount)
	
	nodeToClone=document.getElementById('model-stop-position')
	nextStopPosPicker=nodeToClone.cloneNode(true);
	nextStopPosPicker.id="stop-position"+stopsCount;
	nextStopPosEditor.appendChild(nextStopPosPicker);
	
	fdSliderController.create(nextStopPosPicker);
	
	nextStopEditor.style.opacity=1;

	jscolor.init();
	gradientify();
	
}

function deleteStop() {
	
	stopDiv=document.getElementById("stops-container");
	divToRemove=document.getElementById("stop-container" + stopsCount);
	
	if (divToRemove) {
		divToRemove.style.opacity=0;
		stopDiv.removeChild(divToRemove);
		stopsCount--;
	}
	
	gradientify();
}

window.onload=gradientify;